@oat-sa/tao-core-ui 1.60.2 → 1.62.0

package/dist/themeLoader.js

@@ -3,58 +3,59 @@ define(['jquery', 'lodash'], function ($, _) { 'use strict';
     $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
     _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
 
-    /*
-     * This program is free software; you can redistribute it and/or
-     * modify it under the terms of the GNU General Public License
-     * as published by the Free Software Foundation; under version 2
-     * of the License (non-upgradable).
-     *
-     * This program is distributed in the hope that it will be useful,
-     * but WITHOUT ANY WARRANTY; without even the implied warranty of
-     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-     * GNU General Public License for more details.
-     *
-     * You should have received a copy of the GNU General Public License
-     * along with this program; if not, write to the Free Software
-     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-     *
-     * Copyright (c) 2014-2021 (original work) Open Assessment Technologies SA (under the project TAO-PRODUCT);
-     *
+    /*
+     * This program is free software; you can redistribute it and/or
+     * modify it under the terms of the GNU General Public License
+     * as published by the Free Software Foundation; under version 2
+     * of the License (non-upgradable).
+     *
+     * This program is distributed in the hope that it will be useful,
+     * but WITHOUT ANY WARRANTY; without even the implied warranty of
+     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     * GNU General Public License for more details.
+     *
+     * You should have received a copy of the GNU General Public License
+     * along with this program; if not, write to the Free Software
+     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+     *
+     * Copyright (c) 2014-2021 (original work) Open Assessment Technologies SA (under the project TAO-PRODUCT);
+     *
      */
 
-    var prefix = 'custom-theme-'; //where to attach the stylesheets
+    //used to differentiate the stylesheets
+    const prefix = 'custom-theme-';
 
-    var $container = $('head').length ? $('head') : $('body');
-    var ns = 'themeloader';
-    /**
-     * @typedef {Object} Theme
-     * @property {String} id - theme identifier (unique)
-     * @property {String} path  - theme location
-     * @property {String} [name] - name to display
-     */
+    //where to attach the stylesheets
+    const $container = $('head').length ? $('head') : $('body');
+    const ns = 'themeloader';
 
-    /**
-     * Trigger a theme change that is slightly delayed to be
-     * reasonably sure all styles have been applied.
-     *
-     * @param themeId
+    /**
+     * @typedef {Object} Theme
+     * @property {String} id - theme identifier (unique)
+     * @property {String} path  - theme location
+     * @property {String} [name] - name to display
      */
 
+    /**
+     * Trigger a theme change that is slightly delayed to be
+     * reasonably sure all styles have been applied.
+     *
+     * @param themeId
+     */
     function triggerThemeChange(themeId) {
-      _.delay(function () {
-        $(document).trigger("themechange.".concat(ns), [themeId]).trigger('themeapplied', [themeId]);
+      _.delay(() => {
+        $(document).trigger(`themechange.${ns}`, [themeId]).trigger('themeapplied', [themeId]);
       }, 200);
     }
-    /**
-     * Create a stylesheet tag
-     * @param {Theme} theme - the theme
-     * @return {jQuery} the link node
-     */
-
 
+    /**
+     * Create a stylesheet tag
+     * @param {Theme} theme - the theme
+     * @return {jQuery} the link node
+     */
     function createStyleSheet(theme) {
-      var suffix = theme.id === 'base' ? 'base' : 'theme';
-      var type = "".concat(prefix).concat(suffix);
+      const suffix = theme.id === 'base' ? 'base' : 'theme';
+      const type = `${prefix}${suffix}`;
       return $('<link>').attr({
         rel: 'stylesheet',
         type: 'text/css',
@@ -64,124 +65,108 @@ define(['jquery', 'lodash'], function ($, _) { 'use strict';
         'data-id': theme.id
       });
     }
-    /**
-     * Get the stylesheet
-     * @param {String} id - the theme identifier
-     * @returns {jQuery} the link
-     */
-
 
+    /**
+     * Get the stylesheet
+     * @param {String} id - the theme identifier
+     * @returns {jQuery} the link
+     */
     function getLink(id) {
-      return $("link[data-id=\"".concat(id, "\"][data-type^=\"").concat(prefix, "\"]"), $container);
+      return $(`link[data-id="${id}"][data-type^="${prefix}"]`, $container);
     }
-    /**
-     * Is the stylesheet attached to the container ?
-     * @param {String} id - the theme identifier
-     */
-
 
+    /**
+     * Is the stylesheet attached to the container ?
+     * @param {String} id - the theme identifier
+     */
     function isAttached(id) {
       return getLink(id).length > 0;
     }
-    /**
-     * Enable some nodes
-     * @param {jQuery} $nodes - the nodes to enable
-     * @returns {jQuery}
-     */
-
 
+    /**
+     * Enable some nodes
+     * @param {jQuery} $nodes - the nodes to enable
+     * @returns {jQuery}
+     */
     function enable($nodes) {
       $nodes.prop('disabled', false).removeProp('disabled').removeAttr('disabled');
     }
-    /**
-     * Disable some nodes
-     * @param {jQuery} $nodes - the nodes to disable
-     * @returns {jQuery}
-     */
-
 
+    /**
+     * Disable some nodes
+     * @param {jQuery} $nodes - the nodes to disable
+     * @returns {jQuery}
+     */
     function disable($nodes) {
       return $nodes.prop('disabled', true).attr('disabled', true); //add attr only for easiest inspection
     }
-    /**
-     * The themeLoader is a factory that returns a loader. Configured to load the given styles.
-     *
-     * @param {Object} config - the themes configuration
-     * @param {String} config.base - the location of the base style
-     * @param {String} [config.default] - the name of the default theme (one of the key of the available list )
-     * @param {Theme[]} config.available - the list of available themes
-     * @returns {Object} the loader
-     * @throws TypeError if the config hasn't the correct form
-     */
-
 
+    /**
+     * The themeLoader is a factory that returns a loader. Configured to load the given styles.
+     *
+     * @param {Object} config - the themes configuration
+     * @param {String} config.base - the location of the base style
+     * @param {String} [config.default] - the name of the default theme (one of the key of the available list )
+     * @param {Theme[]} config.available - the list of available themes
+     * @returns {Object} the loader
+     * @throws TypeError if the config hasn't the correct form
+     */
     function themeLoader(config) {
-      /*
-       * validate config
+      /*
+       * validate config
        */
       if (!_.isPlainObject(config)) {
         throw new TypeError('Theme loader configuration is required');
       }
-
       if (!_.isString(config.base)) {
         throw new TypeError('Theme loader configuration is an object with a base property configuration');
       }
-
       if (!_.isArray(config.available) || !config.available.length) {
         throw new TypeError('No theme declared in the configuration');
       }
-
-      for (var i in config.available) {
+      for (let i in config.available) {
         if (!_.isPlainObject(config.available[i]) || _.isEmpty(config.available[i].id) || _.isEmpty(config.available[i].path)) {
           throw new TypeError('There is a theme that does not contain an id or a path');
         }
       }
-      /*
-       * Extract data from config
-       */
-
 
-      var defaultTheme = config.default || _.first(_.pluck(config.available, 'id'));
-
-      var activeTheme = defaultTheme;
-      var themes = [{
+      /*
+       * Extract data from config
+       */
+      const defaultTheme = config.default || _.first(_.pluck(config.available, 'id'));
+      let activeTheme = defaultTheme;
+      const themes = [{
         id: 'base',
         path: config.base,
         name: 'TAO'
       }].concat(config.available);
-      var styles = {};
-
-      _.forEach(themes, function (theme) {
+      const styles = {};
+      _.forEach(themes, theme => {
         if (isAttached(theme.id)) {
           styles[theme.id] = getLink(theme.id);
         } else {
           styles[theme.id] = createStyleSheet(theme);
         }
       });
-      /**
-       * The loader instance
-       */
-
 
+      /**
+       * The loader instance
+       */
       return {
-        /**
-         * Load the themes
-         * @param {Boolean} [preload=false] - Only preload the themes without activating them
-         * @returns {Object} chains
+        /**
+         * Load the themes
+         * @param {Boolean} [preload=false] - Only preload the themes without activating them
+         * @returns {Object} chains
          */
-        load: function load(preload) {
-          _.forEach(styles, function ($link, id) {
+        load(preload) {
+          _.forEach(styles, ($link, id) => {
             if (!isAttached(id)) {
               if (!preload && id === activeTheme) {
-                $link.on('load', function () {
-                  return triggerThemeChange(id);
-                });
+                $link.on('load', () => triggerThemeChange(id));
               }
-
               disable($link);
               $container.append($link);
             }
-
             if (!preload) {
               if (id !== 'base' && id !== defaultTheme) {
                 disable($link);
@@ -192,47 +177,42 @@ define(['jquery', 'lodash'], function ($, _) { 'use strict';
               }
             }
           });
-
           return this;
         },
-
-        /**
-         * Unload the stylesheets (disable them)
-         * @returns {Object} chains
+        /**
+         * Unload the stylesheets (disable them)
+         * @returns {Object} chains
          */
-        unload: function unload() {
-          disable($("link[data-type^=\"".concat(prefix, "\"]"), $container));
+        unload() {
+          disable($(`link[data-type^="${prefix}"]`, $container));
           return this;
         },
-
-        /**
-         * Change the current theme
-         * @param {String} id - the theme id to use
-         * @returns {Object} chains
+        /**
+         * Change the current theme
+         * @param {String} id - the theme id to use
+         * @returns {Object} chains
          */
-        change: function change(id) {
+        change(id) {
           //support to change to the "default" theme regardless it's id
           if (_.contains(['base', 'default'], id) && !isAttached(id)) {
             id = defaultTheme;
           }
-
           if (isAttached(id)) {
             //disable all
-            disable($("link[data-type=\"".concat(prefix, "theme\"]"), $container)); //enable the theme only
+            disable($(`link[data-type="${prefix}theme"]`, $container));
 
+            //enable the theme only
             enable(getLink(id));
             activeTheme = id;
             triggerThemeChange(activeTheme);
           }
-
           return this;
         },
-
-        /**
-         * Return the current theme
-         * @returns {String} activeTheme
+        /**
+         * Return the current theme
+         * @returns {String} activeTheme
          */
-        getActiveTheme: function getActiveTheme() {
+        getActiveTheme() {
           return activeTheme;
         }
       };

package/dist/themes.js

@@ -3,161 +3,147 @@ define(['lodash', 'module'], function (_, module) { 'use strict';
     _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
     module = module && Object.prototype.hasOwnProperty.call(module, 'default') ? module['default'] : module;
 
-    /*
-     * This program is free software; you can redistribute it and/or
-     * modify it under the terms of the GNU General Public License
-     * as published by the Free Software Foundation; under version 2
-     * of the License (non-upgradable).
-     *
-     * This program is distributed in the hope that it will be useful,
-     * but WITHOUT ANY WARRANTY; without even the implied warranty of
-     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-     * GNU General Public License for more details.
-     *
-     * You should have received a copy of the GNU General Public License
-     * along with this program; if not, write to the Free Software
-     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-     *
-     * Copyright (c) 2015 (original work) Open Assessment Technologies SA
-     *
+    /*
+     * This program is free software; you can redistribute it and/or
+     * modify it under the terms of the GNU General Public License
+     * as published by the Free Software Foundation; under version 2
+     * of the License (non-upgradable).
+     *
+     * This program is distributed in the hope that it will be useful,
+     * but WITHOUT ANY WARRANTY; without even the implied warranty of
+     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     * GNU General Public License for more details.
+     *
+     * You should have received a copy of the GNU General Public License
+     * along with this program; if not, write to the Free Software
+     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+     *
+     * Copyright (c) 2015 (original work) Open Assessment Technologies SA
+     *
      */
     var themesConfig;
     var defaultNamespacePrefix = 'items';
-    /**
-     * Let you access to platform themes
-     * @exports ui/themes
-     */
 
+    /**
+     * Let you access to platform themes
+     * @exports ui/themes
+     */
     var themes = {
-      /**
-       * Gets module config clone. Checks if there are differences between actual module config and a clone. If needed -
-       * clones it again.
-       *
-       * @returns {Object}
+      /**
+       * Gets module config clone. Checks if there are differences between actual module config and a clone. If needed -
+       * clones it again.
+       *
+       * @returns {Object}
        */
       getConfig: function getConfig() {
         // set theme config from module.config() if it is not defined
         if (!themesConfig) {
           this.setConfig(module.config());
         }
-
         return themesConfig;
       },
-
-      /**
-       * Set themes config
-       * @param {Object} config Themes config
+      /**
+       * Set themes config
+       * @param {Object} config Themes config
        */
-      setConfig: function setConfig(config) {
+      setConfig(config) {
         themesConfig = _.cloneDeep(config);
       },
-
-      /**
-       * Gets default namespace prefix - currently 'items'
-       *
-       * @returns {string}
+      /**
+       * Gets default namespace prefix - currently 'items'
+       *
+       * @returns {string}
        */
       getDefaultNamespacePrefix: function getDefaultNamespacePrefix() {
         return defaultNamespacePrefix;
       },
-
-      /**
-       * Get the themes config.
-       * @example themes().get('items');
-       *
-       * If the config contains a activeNamespace property (for example, 'ns1'), then it will appended to the requested key
-       * For example, this will actually returns entries registered in 'items_ns1'
-       * @example themes().get('items');
-       *
-       * Namespace can by manually specified by a parameter. In that case, activeNamespace property is ignored.
-       * @example themes().get('items', 'ns2');
-       *
-       * @param {String} what - themes are classified, what is the theme for ?
-       * @param {String} [ns] - namespace of the 'what'
-       * @returns {Object?} the themes config
+      /**
+       * Get the themes config.
+       * @example themes().get('items');
+       *
+       * If the config contains a activeNamespace property (for example, 'ns1'), then it will appended to the requested key
+       * For example, this will actually returns entries registered in 'items_ns1'
+       * @example themes().get('items');
+       *
+       * Namespace can by manually specified by a parameter. In that case, activeNamespace property is ignored.
+       * @example themes().get('items', 'ns2');
+       *
+       * @param {String} what - themes are classified, what is the theme for ?
+       * @param {String} [ns] - namespace of the 'what'
+       * @returns {Object?} the themes config
        */
       get: function get(what, ns) {
         var config = this.getConfig();
-
         if (ns) {
           what += '_' + ns;
         } else if (config.activeNamespace && config[what + '_' + config.activeNamespace]) {
           what += '_' + config.activeNamespace;
         }
-
         if (_.isPlainObject(config[what])) {
           return config[what];
         }
       },
-
-      /**
-       * Get the list of available themes.
-       *
-       * @example themes().getAvailable('items');
-       *
-       * If the config contains a activeNamespace property (for example, 'ns1'), then it will appended to the requested key
-       * For example, this will actually returns entries registered in 'items_ns1'
-       * @example themes().getAvailable('items');
-       *
-       * Namespace can by manually specified by a parameter. In that case, activeNamespace property is ignored.
-       * @example themes().getAvailable('items', 'ns2');
-       * *
-       * @param {String} what - themes are classified, what is the theme for ?
-       * @param {String} [ns] - namespace of the 'what'
-       * @returns {Array} the themes
+      /**
+       * Get the list of available themes.
+       *
+       * @example themes().getAvailable('items');
+       *
+       * If the config contains a activeNamespace property (for example, 'ns1'), then it will appended to the requested key
+       * For example, this will actually returns entries registered in 'items_ns1'
+       * @example themes().getAvailable('items');
+       *
+       * Namespace can by manually specified by a parameter. In that case, activeNamespace property is ignored.
+       * @example themes().getAvailable('items', 'ns2');
+       * *
+       * @param {String} what - themes are classified, what is the theme for ?
+       * @param {String} [ns] - namespace of the 'what'
+       * @returns {Array} the themes
        */
       getAvailable: function getAvailable(what, ns) {
         var available = [];
         var themes = this.get(what, ns);
-
         if (themes && _.isArray(themes.available)) {
           available = themes.available;
         }
-
         return available;
       },
-
-      /**
-       * Get active namespace for themes
-       *
-       * Get activeNamespace property value from the config
-       *
-       * @returns {String} activeNamespace
+      /**
+       * Get active namespace for themes
+       *
+       * Get activeNamespace property value from the config
+       *
+       * @returns {String} activeNamespace
        */
       getActiveNamespace: function getActiveNamespace() {
         return this.getConfig().activeNamespace;
       },
-
-      /**
-       * Set active namespace for themes
-       *
-       * Explicitly sets activeNamespace property into config.
-       *
-       * @param {String} ns - activeNamespace value to be set into config
+      /**
+       * Set active namespace for themes
+       *
+       * Explicitly sets activeNamespace property into config.
+       *
+       * @param {String} ns - activeNamespace value to be set into config
        */
       setActiveNamespace: function setActiveNamespace(ns) {
         this.getConfig().activeNamespace = ns;
       },
-
-      /**
-       * Gets the current theme data from config
-       *
-       * @param {String} what - if provided themes data is loaded for provided argument. If not - will return "default" data - for `items`
-       *
-       * @example themes().getCurrentThemeData('items');
-       * @example themes().getCurrentThemeData();
-       * Both examples will return same data. Next example will load the theme data for 'platform' (if it exists):
-       * @example themes().getCurrentThemeData('platform');
-       *
-       * @returns {Object} the current theme data
+      /**
+       * Gets the current theme data from config
+       *
+       * @param {String} what - if provided themes data is loaded for provided argument. If not - will return "default" data - for `items`
+       *
+       * @example themes().getCurrentThemeData('items');
+       * @example themes().getCurrentThemeData();
+       * Both examples will return same data. Next example will load the theme data for 'platform' (if it exists):
+       * @example themes().getCurrentThemeData('platform');
+       *
+       * @returns {Object} the current theme data
        */
       getCurrentThemeData: function getCurrentThemeData(what) {
         var themeNamespace = this.getActiveNamespace();
-
         if (!what) {
           what = this.getDefaultNamespacePrefix();
         }
-
         return this.get(what, themeNamespace);
       }
     };