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