lib/amd/src/loadingicon.js

   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  * @package    core
  22  * @copyright  2019 Andrew Nicols <andrew@nicols.co.uk>
  23  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  24  */
  25 define(['jquery', 'core/templates'], function($, Templates) {
  26     var TEMPLATES = {
  27         LOADING: 'core/loading',
  28     };
  29
  30     var getIcon = function() {
  31         return Templates.render(TEMPLATES.LOADING, {});
  32     };
  33
  34     /**
  35      * Add a loading icon to the end of the specified container and return an unresolved promise.
  36      *
  37      * Resolution of the returned promise causes the icon to be faded out and removed.
  38      *
  39      * @method  addIconToContainer
  40      * @param   {jQuery}  container  The element to add the spinner to
  41      * @return  {Promise} The Promise used to create the icon.
  42      */
  43     var addIconToContainer = function(container) {
  44         return getIcon()
  45         .then(function(html) {
  46             var loadingIcon = $(html).hide();
  47             container.append(loadingIcon);
  48             loadingIcon.fadeIn(150);
  49
  50             return loadingIcon;
  51         });
  52     };
  53
  54     /**
  55      * Add a loading icon to the end of the specified container and return an unresolved promise.
  56      *
  57      * Resolution of the returned promise causes the icon to be faded out and removed.
  58      *
  59      * @method  addIconToContainerWithPromise
  60      * @param   {jQuery}  container  The element to add the spinner to
  61      * @param   {Promise} loadingIconPromise The jQuery Promise which determines the removal of the icon
  62      * @return  {jQuery}  The Promise used to create and then remove the icon.
  63      */
  64     var addIconToContainerRemoveOnCompletion = function(container, loadingIconPromise) {
  65         return getIcon()
  66         .then(function(html) {
  67             var loadingIcon = $(html).hide();
  68             container.append(loadingIcon);
  69             loadingIcon.fadeIn(150);
  70
  71             return $.when(loadingIcon.promise(), loadingIconPromise);
  72         })
  73         .then(function(loadingIcon) {
  74             // Once the content has finished loading and
  75             // the loading icon has been shown then we can
  76             // fade the icon away to reveal the content.
  77             return loadingIcon.fadeOut(100).promise();
  78         })
  79         .then(function(loadingIcon) {
  80             loadingIcon.remove();
  81
  82             return;
  83         });
  84     };
  85
  86     /**
  87      * Add a loading icon to the end of the specified container and return an unresolved promise.
  88      *
  89      * Resolution of the returned promise causes the icon to be faded out and removed.
  90      *
  91      * @method  addIconToContainerWithPromise
  92      * @param   {jQuery}  container  The element to add the spinner to
  93      * @return  {Promise} A jQuery Promise to resolve when ready
  94      */
  95     var addIconToContainerWithPromise = function(container) {
  96         var loadingIconPromise = $.Deferred();
  97
  98         addIconToContainerRemoveOnCompletion(container, loadingIconPromise);
  99
 100         return loadingIconPromise;
 101     };
 102
 103     return {
 104         getIcon: getIcon,
 105         addIconToContainer: addIconToContainer,
 106         addIconToContainerWithPromise: addIconToContainerWithPromise,
 107         addIconToContainerRemoveOnCompletion: addIconToContainerRemoveOnCompletion,
 108     };
 109
 110 });