[Summary view] [Print] [Text view]

   1  // This file is part of Moodle - http://moodle.org/
   2  //
   3  // Moodle is free software: you can redistribute it and/or modify
   4  // it under the terms of the GNU General Public License as published by
   5  // the Free Software Foundation, either version 3 of the License, or
   6  // (at your option) any later version.
   7  //
   8  // Moodle is distributed in the hope that it will be useful,
   9  // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11  // GNU General Public License for more details.
  12  //
  13  // You should have received a copy of the GNU General Public License
  14  // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  15  
  16  /**
  17   * Contain the logic for the loading icon.
  18   *
  19   * @module     core/loading_icon
  20   * @class      loading_icon
  21   * @copyright  2019 Andrew Nicols <andrew@nicols.co.uk>
  22   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  23   */
  24  define(['jquery', 'core/templates'], function($, Templates) {
  25      var TEMPLATES = {
  26          LOADING: 'core/loading',
  27      };
  28  
  29      var getIcon = function() {
  30          return Templates.render(TEMPLATES.LOADING, {});
  31      };
  32  
  33      /**
  34       * Add a loading icon to the end of the specified container and return an unresolved promise.
  35       *
  36       * Resolution of the returned promise causes the icon to be faded out and removed.
  37       *
  38       * @method  addIconToContainer
  39       * @param   {jQuery}  container  The element to add the spinner to
  40       * @return  {Promise} The Promise used to create the icon.
  41       */
  42      var addIconToContainer = function(container) {
  43          return getIcon()
  44          .then(function(html) {
  45              var loadingIcon = $(html).hide();
  46              $(container).append(loadingIcon);
  47              loadingIcon.fadeIn(150);
  48  
  49              return loadingIcon;
  50          });
  51      };
  52  
  53      /**
  54       * Add a loading icon to the end of the specified container and return an unresolved promise.
  55       *
  56       * Resolution of the returned promise causes the icon to be faded out and removed.
  57       *
  58       * @method  addIconToContainerWithPromise
  59       * @param   {jQuery}  container  The element to add the spinner to
  60       * @param   {Promise} loadingIconPromise The jQuery Promise which determines the removal of the icon
  61       * @return  {jQuery}  The Promise used to create and then remove the icon.
  62       */
  63      var addIconToContainerRemoveOnCompletion = function(container, loadingIconPromise) {
  64          return getIcon()
  65          .then(function(html) {
  66              var loadingIcon = $(html).hide();
  67              $(container).append(loadingIcon);
  68              loadingIcon.fadeIn(150);
  69  
  70              return $.when(loadingIcon.promise(), loadingIconPromise);
  71          })
  72          .then(function(loadingIcon) {
  73              // Once the content has finished loading and
  74              // the loading icon has been shown then we can
  75              // fade the icon away to reveal the content.
  76              return loadingIcon.fadeOut(100).promise();
  77          })
  78          .then(function(loadingIcon) {
  79              loadingIcon.remove();
  80  
  81              return;
  82          });
  83      };
  84  
  85      /**
  86       * Add a loading icon to the end of the specified container and return an unresolved promise.
  87       *
  88       * Resolution of the returned promise causes the icon to be faded out and removed.
  89       *
  90       * @method  addIconToContainerWithPromise
  91       * @param   {jQuery}  container  The element to add the spinner to
  92       * @return  {Promise} A jQuery Promise to resolve when ready
  93       */
  94      var addIconToContainerWithPromise = function(container) {
  95          var loadingIconPromise = $.Deferred();
  96  
  97          addIconToContainerRemoveOnCompletion(container, loadingIconPromise);
  98  
  99          return loadingIconPromise;
 100      };
 101  
 102      return {
 103          getIcon: getIcon,
 104          addIconToContainer: addIconToContainer,
 105          addIconToContainerWithPromise: addIconToContainerWithPromise,
 106          addIconToContainerRemoveOnCompletion: addIconToContainerRemoveOnCompletion,
 107      };
 108  
 109  });