@oat-sa/tao-core-ui 1.54.2 → 1.55.0

package/dist/mediasizer.js

@@ -22,24 +22,24 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
     hb.registerHelper('__', function (key) {
       return __(key);
     });
-    /**
-     * Register dompurify helper
-     *
-     * https://github.com/cure53/DOMPurify
-     * with config SAFE_FOR_TEMPLATES: true
-     * to make output safe for template systems
+    /**
+     * Register dompurify helper
+     *
+     * https://github.com/cure53/DOMPurify
+     * with config SAFE_FOR_TEMPLATES: true
+     * to make output safe for template systems
      */
 
     hb.registerHelper('dompurify', function (context) {
       return DOMPurify.sanitize(context);
     });
-    /**
-     * Register join helper
-     *
-     * Example :
-     * var values = {a:v1, b:v2, c:v3};
-     * Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
-     * Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
+    /**
+     * Register join helper
+     *
+     * Example :
+     * var values = {a:v1, b:v2, c:v3};
+     * Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
+     * Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
      */
 
     hb.registerHelper('join', function (arr, keyValueGlue, fragmentGlue, wrapper) {
@@ -123,20 +123,20 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
     return "checked=\"checked\"";
     }
 
-    buffer += "<div class=\"media-sizer media-sizer-synced\">\r\n\r\n    <div class=\"media-sizer-responsive-toggle\">\r\n        <label>\r\n        <input type=\"checkbox\" ";
+    buffer += "<div class=\"media-sizer media-sizer-synced\">\n\n    <div class=\"media-sizer-responsive-toggle\">\n        <label>\n        <input type=\"checkbox\" ";
     stack1 = helpers['if'].call(depth0, (depth0 && depth0.responsive), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
     if(stack1 || stack1 === 0) { buffer += stack1; }
-    buffer += " class=\"media-mode-switch\"/>\r\n        <span class=\"icon-checkbox\"></span>\r\n        "
+    buffer += " class=\"media-mode-switch\"/>\n        <span class=\"icon-checkbox\"></span>\n        "
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Responsive mode", options) : helperMissing.call(depth0, "__", "Responsive mode", options)))
-      + "\r\n        </label>\r\n        <span class=\"icon-help tooltipstered\" data-tooltip=\"~ .tooltip-content:first\" data-tooltip-theme=\"warning\"></span>\r\n\r\n        <div class=\"tooltip-content\">\r\n            "
+      + "\n        </label>\n        <span class=\"icon-help tooltipstered\" data-tooltip=\"~ .tooltip-content:first\" data-tooltip-theme=\"warning\"></span>\n\n        <div class=\"tooltip-content\">\n            "
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Media resize along with their container, e.g. 50% means half of the container size not half of the media size.", options) : helperMissing.call(depth0, "__", "Media resize along with their container, e.g. 50% means half of the container size not half of the media size.", options)))
-      + "\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"media-sizer-percent\">\r\n        <label for=\"media-sizer-percent-width\">"
+      + "\n        </div>\n    </div>\n\n\n    <div class=\"media-sizer-percent\">\n        <label for=\"media-sizer-percent-width\">"
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Size", options) : helperMissing.call(depth0, "__", "Size", options)))
-      + "</label>\r\n        <span class=\"item-editor-unit-input-box\">\r\n            <input type=\"text\" name=\"width\" id=\"media-sizer-percent-width\" data-validate=\"$numeric\" data-validate-option=\"$allowEmpty;\"/>\r\n        </span>\r\n\r\n        <div class=\"media-sizer-reset media-sizer-reset-percent\" data-unit=\"percent\">\r\n            <span class=\"icon-reset\"></span>\r\n        </div>\r\n\r\n        <div class=\"media-sizer-slider-box\">\r\n            <div class=\"media-sizer-slider\"></div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"media-sizer-pixel\">\r\n        <label for=\"media-sizer-pixel-width\">"
+      + "</label>\n        <span class=\"item-editor-unit-input-box\">\n            <input type=\"text\" name=\"width\" id=\"media-sizer-percent-width\" data-validate=\"$numeric\" data-validate-option=\"$allowEmpty;\"/>\n        </span>\n\n        <div class=\"media-sizer-reset media-sizer-reset-percent\" data-unit=\"percent\">\n            <span class=\"icon-reset\"></span>\n        </div>\n\n        <div class=\"media-sizer-slider-box\">\n            <div class=\"media-sizer-slider\"></div>\n        </div>\n    </div>\n\n    <div class=\"media-sizer-pixel\">\n        <label for=\"media-sizer-pixel-width\">"
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Width", options) : helperMissing.call(depth0, "__", "Width", options)))
-      + "</label>\r\n        <span class=\"item-editor-unit-input-box\">\r\n            <input type=\"text\" name=\"width\" id=\"media-sizer-pixel-width\" data-validate=\"$numeric\" data-validate-option=\"$allowEmpty;\"/>\r\n        </span>\r\n\r\n        <label for=\"media-sizer-pixel-height\">"
+      + "</label>\n        <span class=\"item-editor-unit-input-box\">\n            <input type=\"text\" name=\"width\" id=\"media-sizer-pixel-width\" data-validate=\"$numeric\" data-validate-option=\"$allowEmpty;\"/>\n        </span>\n\n        <label for=\"media-sizer-pixel-height\">"
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Height", options) : helperMissing.call(depth0, "__", "Height", options)))
-      + "</label>\r\n        <span class=\"item-editor-unit-input-box\">\r\n            <input type=\"text\" name=\"height\" id=\"media-sizer-pixel-height\" data-validate=\"$numeric\" data-validate-option=\"$allowEmpty;\"/>\r\n        </span>\r\n\r\n        <div class=\"media-sizer-sync\">\r\n            <span class=\"icon-link\"></span>\r\n        </div>\r\n\r\n        <div class=\"media-sizer-reset media-sizer-reset-pixel\" data-unit=\"pixel\">\r\n            <span class=\"icon-reset\"></span>\r\n        </div>\r\n\r\n        <div class=\"media-sizer-slider-box\">\r\n            <div class=\"media-sizer-slider\"></div>\r\n            <div class=\"media-sizer-cover\"></div>\r\n        </div>\r\n    </div>\r\n</div>";
+      + "</label>\n        <span class=\"item-editor-unit-input-box\">\n            <input type=\"text\" name=\"height\" id=\"media-sizer-pixel-height\" data-validate=\"$numeric\" data-validate-option=\"$allowEmpty;\"/>\n        </span>\n\n        <div class=\"media-sizer-sync\">\n            <span class=\"icon-link\"></span>\n        </div>\n\n        <div class=\"media-sizer-reset media-sizer-reset-pixel\" data-unit=\"pixel\">\n            <span class=\"icon-reset\"></span>\n        </div>\n\n        <div class=\"media-sizer-slider-box\">\n            <div class=\"media-sizer-slider\"></div>\n            <div class=\"media-sizer-cover\"></div>\n        </div>\n    </div>\n</div>";
     return buffer;
     });
   function tpl(data, options, asString) {
@@ -144,37 +144,37 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
     return (asString || true) ? html : $(html);
   }
 
-  /*
-   * 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 ns = 'mediasizer';
   var dataNs = 'ui.' + ns;
   var MediaSizer;
-  /**
-   * default setup
-   *
-   * optional values are:
-   * width | naturalWidth (alias)
-   * height | naturalHeight (alias)
-   * maxWidth
-   * parentSelector
-   *
-   * @type {Object}
+  /**
+   * default setup
+   *
+   * optional values are:
+   * width | naturalWidth (alias)
+   * height | naturalHeight (alias)
+   * maxWidth
+   * parentSelector
+   *
+   * @type {Object}
    */
 
   var defaults = {
@@ -187,34 +187,34 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
     showSync: true,
     size: 100
   };
-  /**
-   * Round a decimal value to n digits
-   *
-   * @param {number} value
-   * @param {int} precision
-   * @returns {number}
-   * @private
+  /**
+   * Round a decimal value to n digits
+   *
+   * @param {number} value
+   * @param {int} precision
+   * @returns {number}
+   * @private
    */
 
   function _round(value, precision) {
     var factor = Math.pow(10, precision);
     return Math.round(value * factor) / factor;
   }
-  /**
-   * The MediaSizer component, that helps you to show/hide an element
-   * @exports ui/toggler
+  /**
+   * The MediaSizer component, that helps you to show/hide an element
+   * @exports ui/toggler
    */
 
 
   MediaSizer = {
-    /**
-     * Returns width, height, target element and the reset button
-     * It's meant to be used when triggering an event
-     *
-     * @param $elt
-     * @param options
-     * @returns {{}}
-     * @private
+    /**
+     * Returns width, height, target element and the reset button
+     * It's meant to be used when triggering an event
+     *
+     * @param $elt
+     * @param options
+     * @returns {{}}
+     * @private
      */
     _publicArgs: function _publicArgs($elt, options) {
       var params = this._getValues($elt);
@@ -224,12 +224,12 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
       return params;
     },
 
-    /**
-     * Creates object that contains all size related data of the medium (= image, video, etc.)
-     *
-     * @param $elt
-     * @returns {{px: {natural: {width: (number|*), height: (number|*)}, current: {width: *, height: *}}, %: {natural: {width: number, height: null}, current: {width: number, height: null}}, ratio: {natural: number, current: number}, containerWidth: , sliders: {%: {min: number, max: number, start: number}, px: {min: number, max: number, start: *}}, currentUnit: string}}
-     * @private
+    /**
+     * Creates object that contains all size related data of the medium (= image, video, etc.)
+     *
+     * @param $elt
+     * @returns {{px: {natural: {width: (number|*), height: (number|*)}, current: {width: *, height: *}}, %: {natural: {width: number, height: null}, current: {width: number, height: null}}, ratio: {natural: number, current: number}, containerWidth: , sliders: {%: {min: number, max: number, start: number}, px: {min: number, max: number, start: *}}, currentUnit: string}}
+     * @private
      */
     _getSizeProps: function _getSizeProps($elt) {
       var options = $elt.data(dataNs),
@@ -317,12 +317,12 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
       };
     },
 
-    /**
-     * Toggle width/height synchronization
-     *
-     * @param $elt
-     * @returns {*}
-     * @private
+    /**
+     * Toggle width/height synchronization
+     *
+     * @param $elt
+     * @returns {*}
+     * @private
      */
     _initSyncBtn: function _initSyncBtn($elt) {
       var options = $elt.data(dataNs),
@@ -348,12 +348,12 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
       return $syncBtn;
     },
 
-    /**
-     * Button to reset the size to its original values
-     *
-     * @param $elt
-     * @returns {*}
-     * @private
+    /**
+     * Button to reset the size to its original values
+     *
+     * @param $elt
+     * @returns {*}
+     * @private
      */
     _initResetBtn: function _initResetBtn($elt) {
       var options = $elt.data(dataNs),
@@ -372,12 +372,12 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
       return $resetBtn;
     },
 
-    /**
-     * Blocks are the two different parts of the form (either width|height or size)
-     *
-     * @param $elt
-     * @returns {{}}
-     * @private
+    /**
+     * Blocks are the two different parts of the form (either width|height or size)
+     *
+     * @param $elt
+     * @returns {{}}
+     * @private
      */
     _initBlocks: function _initBlocks($elt) {
       var options = $elt.data(dataNs),
@@ -433,12 +433,12 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
       return _blocks;
     },
 
-    /**
-     * Initialize the two sliders, one based on pixels the other on percentage
-     *
-     * @param $elt
-     * @returns {{}}
-     * @private
+    /**
+     * Initialize the two sliders, one based on pixels the other on percentage
+     *
+     * @param $elt
+     * @returns {{}}
+     * @private
      */
     _initSliders: function _initSliders($elt) {
       var options = $elt.data(dataNs),
@@ -466,13 +466,13 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
       return _sliders;
     },
 
-    /**
-     * Synchronize all parameters
-     *
-     * @param $elt
-     * @param $field
-     * @param eventType
-     * @private
+    /**
+     * Synchronize all parameters
+     *
+     * @param $elt
+     * @param $field
+     * @param eventType
+     * @private
      */
     _sync: function _sync($elt, $field, eventType) {
       var self = this;
@@ -574,12 +574,12 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
       $elt.trigger('sizechange.' + ns, self._publicArgs($elt, options));
     },
 
-    /**
-     * Initialize the fields
-     *
-     * @param $elt
-     * @returns {{}}
-     * @private
+    /**
+     * Initialize the fields
+     *
+     * @param $elt
+     * @returns {{}}
+     * @private
      */
     _initFields: function _initFields($elt) {
       var options = $elt.data(dataNs),
@@ -645,12 +645,12 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
       return _fields;
     },
 
-    /**
-     * Retrieve current size values in current unit
-     *
-     * @param $elt
-     * @returns {{}}
-     * @private
+    /**
+     * Retrieve current size values in current unit
+     *
+     * @param $elt
+     * @returns {{}}
+     * @private
      */
     _getValues: function _getValues($elt) {
       var options = $elt.data(dataNs),
@@ -673,15 +673,15 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
       return attr;
     },
 
-    /**
-         * Initialize the plugin.
-         *
-         * Called the jQuery way once registered by the Pluginifier.
-           * @example $('selector').mediaSizer({target : $('target') });
-         * @public
-         *
-         * @constructor
-         * @returns {*}
+    /**
+         * Initialize the plugin.
+         *
+         * Called the jQuery way once registered by the Pluginifier.
+          * @example $('selector').mediaSizer({target : $('target') });
+         * @public
+         *
+         * @constructor
+         * @returns {*}
          */
     init: function init(options) {
       //get options using default
@@ -724,9 +724,9 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
           options.$sliders = MediaSizer._initSliders($elt);
           options.$syncBtn = MediaSizer._initSyncBtn($elt);
           options.$resetBtn = MediaSizer._initResetBtn($elt);
-          /**
-           * The plugin has been created
-           * @event MediaSizer#create.toggler
+          /**
+           * The plugin has been created
+           * @event MediaSizer#create.toggler
            */
 
           $elt.trigger('create.' + ns, MediaSizer._publicArgs($elt, options));
@@ -734,19 +734,19 @@ define(['jquery', 'lodash', 'core/pluginifier', 'handlebars', 'i18n', 'lib/dompu
       });
     },
 
-    /**
-     * Destroy the plugin completely.
-     * Called the jQuery way once registered by the Pluginifier.
-     *
-     * @example $('selector').toggler('destroy');
-     * @public
+    /**
+     * Destroy the plugin completely.
+     * Called the jQuery way once registered by the Pluginifier.
+     *
+     * @example $('selector').toggler('destroy');
+     * @public
      */
     destroy: function destroy() {
       this.each(function () {
         var $elt = $$1(this);
-        /**
-         * The plugin have been destroyed.
-         * @event MediaSizer#destroy.toggler
+        /**
+         * The plugin have been destroyed.
+         * @event MediaSizer#destroy.toggler
          */
 
         $elt.trigger('destroy.' + ns);