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

package/dist/mediaEditor/plugins/mediaDimension/mediaDimensionComponent.js

@@ -23,24 +23,24 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
     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) {
@@ -124,20 +124,20 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
     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\" style=\"display:-moz-box;\">\r\n            <input type=\"text\" name=\"width\" id=\"media-sizer-percent-width\" data-validate=\"$numeric\" data-validate-option=\"$allowEmpty;\"/>\r\n            <span class=\"unit-indicator\">%</span>\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        <div class=\"media-sizer-sync\">\r\n            <span class=\"icon-link\"></span>\r\n        </div>\r\n        <div>\r\n            <label for=\"media-sizer-pixel-width\">"
+      + "</label>\n        <span class=\"item-editor-unit-input-box\" style=\"display:-moz-box;\">\n            <input type=\"text\" name=\"width\" id=\"media-sizer-percent-width\" data-validate=\"$numeric\" data-validate-option=\"$allowEmpty;\"/>\n            <span class=\"unit-indicator\">%</span>\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        <div class=\"media-sizer-sync\">\n            <span class=\"icon-link\"></span>\n        </div>\n        <div>\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\" style=\"display:-moz-box;\">\r\n                <input type=\"text\" name=\"width\" id=\"media-sizer-pixel-width\" data-validate=\"$numeric\" data-validate-option=\"$allowEmpty;\"/>\r\n                <span class=\"unit-indicator\">px</span>\r\n            </span>\r\n            </div>\r\n        <div>\r\n            <label for=\"media-sizer-pixel-height\">"
+      + "</label>\n            <span class=\"item-editor-unit-input-box\" style=\"display:-moz-box;\">\n                <input type=\"text\" name=\"width\" id=\"media-sizer-pixel-width\" data-validate=\"$numeric\" data-validate-option=\"$allowEmpty;\"/>\n                <span class=\"unit-indicator\">px</span>\n            </span>\n            </div>\n        <div>\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\" style=\"display:-moz-box;\">\r\n                <input type=\"text\" name=\"height\" id=\"media-sizer-pixel-height\" data-validate=\"$numeric\" data-validate-option=\"$allowEmpty;\"/>\r\n                <span class=\"unit-indicator\">px</span>\r\n            </span>\r\n        </div>\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    </div>\r\n</div>\r\n";
+      + "</label>\n            <span class=\"item-editor-unit-input-box\" style=\"display:-moz-box;\">\n                <input type=\"text\" name=\"height\" id=\"media-sizer-pixel-height\" data-validate=\"$numeric\" data-validate-option=\"$allowEmpty;\"/>\n                <span class=\"unit-indicator\">px</span>\n            </span>\n        </div>\n        <div class=\"media-sizer-reset media-sizer-reset-pixel\" data-unit=\"pixel\">\n            <span class=\"icon-reset\"></span>\n        </div>\n    </div>\n</div>\n";
     return buffer;
     });
   function tpl(data, options, asString) {
@@ -145,70 +145,70 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
     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) 2018  (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) 2018  (original work) Open Assessment Technologies SA;
    */
-  /**
-   * Size properties of the media
-   * @typedef {Object} sizeProps
-   * @property px {{
-   *        natural: {
-   *          width: number,
-   *          height: number,
-   *        },
-   *        current: {
-   *          width: number,
-   *          height: number,
-   *        }
-   *      }}
-   * @property '%' {{
-   *        natural: {
-   *          width: number,
-   *          height: number,
-   *        },
-   *        current: {
-   *          width: number,
-   *          height: number,
-   *        }
-   *      }}
-   * @property ratio {{
-   *   natural: number,
-   *   current: number
-   * }}
-   * @property currentUtil string
+  /**
+   * Size properties of the media
+   * @typedef {Object} sizeProps
+   * @property px {{
+   *        natural: {
+   *          width: number,
+   *          height: number,
+   *        },
+   *        current: {
+   *          width: number,
+   *          height: number,
+   *        }
+   *      }}
+   * @property '%' {{
+   *        natural: {
+   *          width: number,
+   *          height: number,
+   *        },
+   *        current: {
+   *          width: number,
+   *          height: number,
+   *        }
+   *      }}
+   * @property ratio {{
+   *   natural: number,
+   *   current: number
+   * }}
+   * @property currentUtil string
    */
 
-  /**
-   * Default values
-   * precision - precision for all calculations (0.00001)
-   *
-   * @type {{
-   *    showResponsiveToggle: boolean,
-   *    showSync: boolean,
-   *    showReset: boolean,
-   *    denyCustomRatio: boolean,
-   *    width: number,
-   *    height: number,
-   *    minWidth: number,
-   *    maxWidth: number,
-   *    sizeProps: sizeProps,
-   *    precision: number
-   * }}
-   * @private
+  /**
+   * Default values
+   * precision - precision for all calculations (0.00001)
+   *
+   * @type {{
+   *    showResponsiveToggle: boolean,
+   *    showSync: boolean,
+   *    showReset: boolean,
+   *    denyCustomRatio: boolean,
+   *    width: number,
+   *    height: number,
+   *    minWidth: number,
+   *    maxWidth: number,
+   *    sizeProps: sizeProps,
+   *    precision: number
+   * }}
+   * @private
    */
 
   var defaultConfig = {
@@ -247,48 +247,48 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
     maxWidth: 0,
     precision: 5
   };
-  /**
-   * Creates mediaDimension component
-   * @param {jQueryElement} $container
-   * @param {Object} media
-   * @param {Object} config
-   * @fires "changed" - on State changed
-   * @returns {component|*} mediaDimensionComponent
+  /**
+   * Creates mediaDimension component
+   * @param {jQueryElement} $container
+   * @param {Object} media
+   * @param {Object} config
+   * @fires "changed" - on State changed
+   * @returns {component|*} mediaDimensionComponent
    */
 
   function mediaDimensionFactory($container, media, config) {
-    /**
-     * Collections of the jquery elements grouped by type
+    /**
+     * Collections of the jquery elements grouped by type
      */
     var $blocks, $slider, $fields;
-    /**
-     * Template of the dimension controller
+    /**
+     * Template of the dimension controller
      */
 
     var $template;
-    /**
-     * Size properties of the media control panel
-     * @typedef {Object} mediaSizeProps
-     * @property showResponsiveToggle boolean
-     * @property responsive boolean
-     * @property sizeProps sizeProps
-     * @property syncDimensions boolean
-     * @property denyCustomRatio boolean
-     * @property precision number
-     * @property showReset boolean
+    /**
+     * Size properties of the media control panel
+     * @typedef {Object} mediaSizeProps
+     * @property showResponsiveToggle boolean
+     * @property responsive boolean
+     * @property sizeProps sizeProps
+     * @property syncDimensions boolean
+     * @property denyCustomRatio boolean
+     * @property precision number
+     * @property showReset boolean
      */
 
-    /**
-     * Configuration
-     * @type {mediaSizeProps}
-     * @private
+    /**
+     * Configuration
+     * @type {mediaSizeProps}
+     * @private
      */
 
     var initialConfig;
-    /**
-     * Calculate propSizes to have correct sizes for the shown image
-     * @param {Object} conf
-     * @returns {Object}
+    /**
+     * Calculate propSizes to have correct sizes for the shown image
+     * @param {Object} conf
+     * @returns {Object}
      */
 
     var calculateCurrentSizes = function calculateCurrentSizes(conf) {
@@ -298,9 +298,9 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
         maxWidth: helper.getMediaContainerWidth(media)
       });
     };
-    /**
-     * Return oroginal size
-     * @returns {Object}
+    /**
+     * Return oroginal size
+     * @returns {Object}
      */
 
 
@@ -311,15 +311,15 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
         height: media.$node[0].naturalHeight || media.$node[0].videoHeight || media.$node[0].height
       };
     }
-    /**
-     * Current component
+    /**
+     * Current component
      */
 
 
     var mediaDimensionComponent = component({
-      /**
-       * Reset the component to the initial state
-       * @returns {component} this
+      /**
+       * Reset the component to the initial state
+       * @returns {component} this
        */
       reset: function reset() {
         var syncDim = initialConfig.syncDimensions;
@@ -344,8 +344,8 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
         return this;
       },
 
-      /**
-       * Apply configurations to the view
+      /**
+       * Apply configurations to the view
        */
       update: function update() {
         // slide sliders
@@ -358,10 +358,10 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
         this.trigger('change', initialConfig);
       }
     }, defaultConfig);
-    /**
-     * Check that input in progress and we don't need to change anything
-     * @param {String|number} val
-     * @returns {RegExpMatchArray | null}
+    /**
+     * Check that input in progress and we don't need to change anything
+     * @param {String|number} val
+     * @returns {RegExpMatchArray | null}
      */
 
     var isInsignificantEnd = function isInsignificantEnd(val) {
@@ -371,12 +371,12 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
 
       return val.match(/\.[0]*$/);
     };
-    /**
-     * Blocks are the two different parts of the form (either width|height or size)
-     *
-     * @param {jQueryElement} $elt
-     * @returns {{}}
-     * @private
+    /**
+     * Blocks are the two different parts of the form (either width|height or size)
+     *
+     * @param {jQueryElement} $elt
+     * @returns {{}}
+     * @private
      */
 
 
@@ -435,12 +435,12 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
       checkMode();
       return _blocks;
     };
-    /**
-     * Toggle width/height synchronization
-     *
-     * @param {jQueryElement} $elt
-     * @returns {*}
-     * @private
+    /**
+     * Toggle width/height synchronization
+     *
+     * @param {jQueryElement} $elt
+     * @returns {*}
+     * @private
      */
 
 
@@ -462,12 +462,12 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
       });
       return $btn;
     };
-    /**
-     * Button to reset the size to its original values
-     *
-     * @param {jQueryElement} $elt
-     * @returns {*}
-     * @private
+    /**
+     * Button to reset the size to its original values
+     *
+     * @param {jQueryElement} $elt
+     * @returns {*}
+     * @private
      */
 
 
@@ -487,11 +487,11 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
       });
       return $btn;
     };
-    /**
-     * Initialize the fields
-     *
-     * @returns {{}}
-     * @private
+    /**
+     * Initialize the fields
+     *
+     * @returns {{}}
+     * @private
      */
 
 
@@ -583,12 +583,12 @@ define(['jquery', 'lodash', 'ui/component', 'handlebars', 'i18n', 'lib/dompurify
 
       return _fields;
     };
-    /**
-     * Initialize the two sliders, one based on pixels the other on percentage
-     *
-     * @param {jQueryElement} $elt
-     * @returns {{}}
-     * @private
+    /**
+     * Initialize the two sliders, one based on pixels the other on percentage
+     *
+     * @param {jQueryElement} $elt
+     * @returns {{}}
+     * @private
      */