JAVASCRIPT   9

loader.js

Guest on 22nd July 2021 02:09:45 AM

  1. /**
  2.  * Copyright آ© Magento, Inc. All rights reserved.
  3.  * See COPYING.txt for license details.
  4.  */*/
  5.  
  6. define([
  7.     'jquery',
  8.     'mage/template',
  9.     'jquery/ui',
  10.     'mage/translate'
  11. ], function ($, mageTemplate) {
  12.     'use strict';
  13.  
  14.     $.widget('mage.loader', {
  15.         loaderStarted: 0,
  16.         options: {
  17.             icon: '',
  18.             texts: {
  19.                 loaderText: $.mage.__('Please wait...'),
  20.                 imgAlt: $.mage.__('Loading...')
  21.             },
  22.             template:
  23.                 '<div class="loading-mask" data-role="loader">' +
  24.                     '<div class="loader">' +
  25.                         '<img alt="<%- data.texts.imgAlt %>" src="<%- data.icon %>">' +
  26.                         '<p><%- data.texts.loaderText %></p>' +
  27.                     '</div>' +
  28.                 '</div>'
  29.  
  30.         },
  31.  
  32.       /**
  33.          * Loader creation
  34.          * @protected
  35.          */*/
  36.         _create: function () {
  37.             this._bind();
  38.         },
  39.  
  40.       /**
  41.          * Bind on ajax events
  42.          * @protected
  43.          */*/
  44.         _bind: function () {
  45.             this._on({
  46.                 'processStop': 'hide',
  47.                 'processStart': 'show',
  48.                 'show.loader': 'show',
  49.                 'hide.loader': 'hide',
  50.                 'contentUpdated.loader': '_contentUpdated'
  51.             });
  52.         },
  53.  
  54.       /**
  55.          * Verify loader present after content updated
  56.          *
  57.          * This will be cleaned up by the task MAGETWO-11070
  58.          *
  59.          * @param {EventObject} e
  60.          * @private
  61.          */*/
  62.         _contentUpdated: function (e) {
  63.             this.show(e);
  64.         },
  65.  
  66.       /**
  67.          * Show loader
  68.          */*/
  69.         show: function (e, ctx) {
  70.             this._render();
  71.             this.loaderStarted++;
  72.             this.spinner.show();
  73.  
  74.             if (ctx) {
  75.                 this.spinner
  76.                     .css({
  77.                         width: ctx.outerWidth(),
  78.                         height: ctx.outerHeight(),
  79.                         position: 'absolute'
  80.                     })
  81.                     .position({
  82.                         my: 'top left',
  83.                         at: 'top left',
  84.                         of: ctx
  85.                     });
  86.             }
  87.  
  88.             return false;
  89.         },
  90.  
  91.       /**
  92.          * Hide loader
  93.          */*/
  94.         hide: function () {
  95.             if (this.loaderStarted > 0) {
  96.                 this.loaderStarted--;
  97.  
  98.                 if (this.loaderStarted === 0) {
  99.                     this.spinner.hide();
  100.                 }
  101.             }
  102.  
  103.             return false;
  104.         },
  105.  
  106.       /**
  107.          * Render loader
  108.          * @protected
  109.          */*/
  110.         _render: function () {
  111.             var html;
  112.  
  113.             if (!this.spinnerTemplate) {
  114.                 this.spinnerTemplate = mageTemplate(this.options.template);
  115.  
  116.                 html = $(this.spinnerTemplate({
  117.                     data: this.options
  118.                 }));
  119.  
  120.                 html.prependTo(this.element);
  121.  
  122.                 this.spinner = html;
  123.             }
  124.         },
  125.  
  126.       /**
  127.          * Destroy loader
  128.          */*/
  129.         _destroy: function () {
  130.             this.spinner.remove();
  131.         }
  132.     });
  133.  
  134.   /**
  135.      * This widget takes care of registering the needed loader listeners on the body
  136.      */*/
  137.     $.widget('mage.loaderAjax', {
  138.         options: {
  139.             defaultContainer: '[data-container=body]',
  140.             loadingClass: 'ajax-loading'
  141.         },
  142.  
  143.       /**
  144.          * @private
  145.          */*/
  146.         _create: function () {
  147.             this._bind();
  148.           // There should only be one instance of this widget, and it should be attached
  149. d
  150.           // to the body only. Having it on the page twice will trigger multiple processStarts.
  151. .
  152.             if (window.console && !this.element.is(this.options.defaultContainer) && $.mage.isDevMode(undefined)) {
  153.                 console.warn('This widget is intended to be attached to the body, not below.');
  154.             }
  155.         },
  156.  
  157.       /**
  158.          * @private
  159.          */*/
  160.         _bind: function () {
  161.             $(document).on({
  162.                 'ajaxSend': this._onAjaxSend.bind(this),
  163.                 'ajaxComplete': this._onAjaxComplete.bind(this)
  164.             });
  165.         },
  166.  
  167.       /**
  168.          * @param {Object} loaderContext
  169.          * @return {*}
  170.          * @private
  171.          */*/
  172.         _getJqueryObj: function (loaderContext) {
  173.             var ctx;
  174.  
  175.           // Check to see if context is jQuery object or not.
  176. .
  177.             if (loaderContext) {
  178.                 if (loaderContext.jquery) {
  179.                     ctx = loaderContext;
  180.                 } else {
  181.                     ctx = $(loaderContext);
  182.                 }
  183.             } else {
  184.                 ctx = $('[data-container="body"]');
  185.             }
  186.  
  187.             return ctx;
  188.         },
  189.  
  190.       /**
  191.          * @param {jQuery.Event} e
  192.          * @param {Object} jqxhr
  193.          * @param {Object} settings
  194.          * @private
  195.          */*/
  196.         _onAjaxSend: function (e, jqxhr, settings) {
  197.             var ctx;
  198.  
  199.             $(this.options.defaultContainer)
  200.                 .addClass(this.options.loadingClass)
  201.                 .attr({
  202.                     'aria-busy': true
  203.                 });
  204.  
  205.             if (settings && settings.showLoader) {
  206.                 ctx = this._getJqueryObj(settings.loaderContext);
  207.                 ctx.trigger('processStart');
  208.  
  209.               // Check to make sure the loader is there on the page if not report it on the console.
  210. .
  211.               // NOTE that this check should be removed before going live. It is just an aid to help
  212. p
  213.               // in finding the uses of the loader that maybe broken.
  214. .
  215.                 if (window.console && !ctx.parents('[data-role="loader"]').length) {
  216.                     console.warn('Expected to start loader but did not find one in the dom');
  217.                 }
  218.             }
  219.         },
  220.  
  221.       /**
  222.          * @param {jQuery.Event} e
  223.          * @param {Object} jqxhr
  224.          * @param {Object} settings
  225.          * @private
  226.          */*/
  227.         _onAjaxComplete: function (e, jqxhr, settings) {
  228.             $(this.options.defaultContainer)
  229.                 .removeClass(this.options.loadingClass)
  230.                 .attr('aria-busy', false);
  231.  
  232.             if (settings && settings.showLoader) {
  233.                 this._getJqueryObj(settings.loaderContext).trigger('processStop');
  234.             }
  235.         }
  236.  
  237.     });
  238.  
  239.     return {
  240.         loader: $.mage.loader,
  241.         loaderAjax: $.mage.loaderAjax
  242.     };
  243. }

Raw Paste


Login or Register to edit or fork this paste. It's free.