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

package/src/liststyler.js

@@ -1,155 +1,155 @@
-/*
- * 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;
- *
- */
-
-/**
- *
- * @author dieter <dieter@taotesting.com>
- * @requires jquery
- * @requires lodash
- * @requires core/pluginifier
- * @requires util/strPad
- * @requires util/capitalize
- */
-import $ from 'jquery';
-import _ from 'lodash';
-import Pluginifier from 'core/pluginifier';
-import capitalize from 'util/capitalize';
-
-var ns = 'liststyler';
-
-var currStyle = '';
-
-var defaults = {
-    selected: null
-};
-
-/**
- * list styles - at the time of writing this is the list of cross browser compatible
- * styles.
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
- */
-var listStyles = {
-    none: '',
-    disc: '\u25cf',
-    circle: '\u25cb',
-    square: '\u25fd',
-    decimal: '1',
-    'decimal-leading-zero': '01',
-    'lower-alpha': 'a',
-    'upper-alpha': 'A',
-    'lower-roman': 'i',
-    'upper-roman': 'I',
-    'lower-greek': '\u03b1',
-    armenian: '\u0531',
-    georgian: '\u10d0'
-};
-
-/**
- * Populate selectBox with options
- *
- * @param selectBox
- * @param selectedStyle
- */
-function populate(selectBox, selectedStyle) {
-    _.forOwn(listStyles, function(symbol, style) {
-        selectBox.options.add(new Option(capitalize(style.replace(/-/g, ' ')), style, false, style === selectedStyle));
-    });
-}
-
-/**
- * Prepare select2 formatting
- *
- * @param state
- * @returns {*}
- */
-function formatState(state) {
-    var symbol = listStyles[state.id];
-    return $('<span/>', { text: state.text, 'data-symbol': symbol });
-}
-
-/**
- * Hint: to get a proper two-column design of the select box you should a fixed font
- *
- * @type {{init: init}}
- */
-var ListStyler = {
-    /**
-         * Initialize the plugin.
-         *
-         * Called the jQuery way once registered by the Pluginifier.
-
-         * @example $('selector').liststyler();
-         * @public
-         *
-         * @constructor
-         * @param options
-         * @returns {*}
-         */
-    init: function(options) {
-        return this.each(function() {
-            var $elt = $(this);
-
-            //get options using default
-            options = $.extend(true, {}, defaults, options);
-
-            populate(this, options.selected);
-
-            currStyle = options.selected;
-
-            $elt.on('change', function() {
-                $elt.trigger('stylechange.' + ns, { newStyle: this.value, oldStyle: currStyle });
-                currStyle = this.value;
-            });
-
-            $elt.select2({
-                formatResult: formatState,
-                width: 'element',
-                minimumResultsForSearch: Infinity
-            });
-
-            /**
-             * The plugin has been created
-             * @event ListStyler#create.toggler
-             */
-            $elt.trigger('create.' + ns);
-        });
-    },
-
-    /**
-     * Destroy the plugin completely.
-     * Called the jQuery way once registered by the Pluginifier.
-     *
-     * @example $('selector').toggler('destroy');
-     * @public
-     */
-    destroy: function() {
-        this.each(function() {
-            var $elt = $(this);
-
-            /**
-             * The plugin have been destroyed.
-             * @event ListStyler#destroy.toggler
-             */
-            $elt.trigger('destroy.' + ns);
-        });
-    }
-};
-
-//Register the toggler to behave as a jQuery plugin.
-Pluginifier.register(ns, ListStyler);
+/*
+ * 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;
+ *
+ */
+
+/**
+ *
+ * @author dieter <dieter@taotesting.com>
+ * @requires jquery
+ * @requires lodash
+ * @requires core/pluginifier
+ * @requires util/strPad
+ * @requires util/capitalize
+ */
+import $ from 'jquery';
+import _ from 'lodash';
+import Pluginifier from 'core/pluginifier';
+import capitalize from 'util/capitalize';
+
+var ns = 'liststyler';
+
+var currStyle = '';
+
+var defaults = {
+    selected: null
+};
+
+/**
+ * list styles - at the time of writing this is the list of cross browser compatible
+ * styles.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
+ */
+var listStyles = {
+    none: '',
+    disc: '\u25cf',
+    circle: '\u25cb',
+    square: '\u25fd',
+    decimal: '1',
+    'decimal-leading-zero': '01',
+    'lower-alpha': 'a',
+    'upper-alpha': 'A',
+    'lower-roman': 'i',
+    'upper-roman': 'I',
+    'lower-greek': '\u03b1',
+    armenian: '\u0531',
+    georgian: '\u10d0'
+};
+
+/**
+ * Populate selectBox with options
+ *
+ * @param selectBox
+ * @param selectedStyle
+ */
+function populate(selectBox, selectedStyle) {
+    _.forOwn(listStyles, function(symbol, style) {
+        selectBox.options.add(new Option(capitalize(style.replace(/-/g, ' ')), style, false, style === selectedStyle));
+    });
+}
+
+/**
+ * Prepare select2 formatting
+ *
+ * @param state
+ * @returns {*}
+ */
+function formatState(state) {
+    var symbol = listStyles[state.id];
+    return $('<span/>', { text: state.text, 'data-symbol': symbol });
+}
+
+/**
+ * Hint: to get a proper two-column design of the select box you should a fixed font
+ *
+ * @type {{init: init}}
+ */
+var ListStyler = {
+    /**
+         * Initialize the plugin.
+         *
+         * Called the jQuery way once registered by the Pluginifier.
+
+         * @example $('selector').liststyler();
+         * @public
+         *
+         * @constructor
+         * @param options
+         * @returns {*}
+         */
+    init: function(options) {
+        return this.each(function() {
+            var $elt = $(this);
+
+            //get options using default
+            options = $.extend(true, {}, defaults, options);
+
+            populate(this, options.selected);
+
+            currStyle = options.selected;
+
+            $elt.on('change', function() {
+                $elt.trigger('stylechange.' + ns, { newStyle: this.value, oldStyle: currStyle });
+                currStyle = this.value;
+            });
+
+            $elt.select2({
+                formatResult: formatState,
+                width: 'element',
+                minimumResultsForSearch: Infinity
+            });
+
+            /**
+             * The plugin has been created
+             * @event ListStyler#create.toggler
+             */
+            $elt.trigger('create.' + ns);
+        });
+    },
+
+    /**
+     * Destroy the plugin completely.
+     * Called the jQuery way once registered by the Pluginifier.
+     *
+     * @example $('selector').toggler('destroy');
+     * @public
+     */
+    destroy: function() {
+        this.each(function() {
+            var $elt = $(this);
+
+            /**
+             * The plugin have been destroyed.
+             * @event ListStyler#destroy.toggler
+             */
+            $elt.trigger('destroy.' + ns);
+        });
+    }
+};
+
+//Register the toggler to behave as a jQuery plugin.
+Pluginifier.register(ns, ListStyler);

package/src/loadingButton/css/button.css

@@ -1,9 +1,9 @@
-/*
-Usage:
-- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
-   if 3 colors used then the position of each will be 33,33%
-- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
-   first param - color, second - position. Also you can use px or other valid units for set position.
+/*
+Usage:
+- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
+   if 3 colors used then the position of each will be 33,33%
+- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
+   first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
@@ -51,5 +51,5 @@ Usage:
 .loading-button.terminated .terminated-label {
     display: inline-block;
 }
-
+
 /*# sourceMappingURL=button.css.map */

package/src/loadingButton/loadingButton.js

@@ -1,110 +1,110 @@
-/**
- * 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) 2017 (original work) Open Assessment Technologies SA ;
- */
-
-/**
- * A button component used to trigger lengthy action.
- * It has its own lifecycle: render -> started -> terminated [-> reset]
- *
- * @example
- * loadingButtonFactory({
- *          type : 'info',
- *          icon : 'property-advanced',
- *          title : 'Execute my script',
- *          label : 'Run',
- *          terminatedLabel : 'Terminated'
- *     });
- *
- * @author Sam <sam@taotesting.com>
- */
-
-import _ from 'lodash';
-import component from 'ui/component';
-import buttonTpl from 'ui/loadingButton/tpl/button';
-import 'ui/loadingButton/css/button.css';
-
-var _defaults = {
-    type: 'info',
-    icon: 'property-advanced',
-    title: '',
-    label: 'OK',
-    terminatedLabel: 'FINISHED'
-};
-
-var buttonApi = {
-    start: function start() {
-        this.setState('started', true);
-        this.trigger('started');
-    },
-    terminate: function terminate() {
-        if (this.is('started')) {
-            this.setState('started', false);
-            this.setState('terminated', true);
-            this.disable();
-            this.trigger('terminated');
-        }
-        return this;
-    },
-    reset: function reset() {
-        if (this.is('terminated')) {
-            this.setState('terminated', false);
-            this.enable();
-            this.trigger('reset');
-        }
-        return this;
-    }
-};
-
-/**
- * Create a button with the lifecycle : render -> started -> terminated [-> reset]
- * @param {Object} config - the component config
- * @param {String} config.type - the icon type (info, success, error)
- * @param {String} config.icon - the button icon
- * @param {String} config.label - the button's label
- * @param {String} [config.title] - the button's title
- * @param {String} [config.terminatedLabel] - the button's label when terminated
- * @return {loadingButton} the component
- *
- * @event started - Emitted when the button is clicked and the triggered action supposed to be started
- * @event terminated - Emitted when the button action is stopped, interrupted
- * @event reset - Emitted when the button revert from the terminated stated to the initial one
- */
-export default function loadingButtonFactory(config) {
-    var initConfig = _.defaults(config || {}, _defaults);
-
-    /**
-     * @typedef {loadingButton} the component
-     */
-    return component(buttonApi)
-        .setTemplate(buttonTpl)
-        .on('enable', function() {
-            this.getElement().removeProp('disabled');
-        })
-        .on('disable', function() {
-            this.getElement().prop('disabled', true);
-        })
-        .on('render', function() {
-            var self = this;
-            this.getElement().on('click', function(e) {
-                e.preventDefault();
-                if (!self.is('disabled') && !self.is('started') && !self.is('terminated')) {
-                    self.start();
-                }
-            });
-        })
-        .init(initConfig);
-}
+/**
+ * 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) 2017 (original work) Open Assessment Technologies SA ;
+ */
+
+/**
+ * A button component used to trigger lengthy action.
+ * It has its own lifecycle: render -> started -> terminated [-> reset]
+ *
+ * @example
+ * loadingButtonFactory({
+ *          type : 'info',
+ *          icon : 'property-advanced',
+ *          title : 'Execute my script',
+ *          label : 'Run',
+ *          terminatedLabel : 'Terminated'
+ *     });
+ *
+ * @author Sam <sam@taotesting.com>
+ */
+
+import _ from 'lodash';
+import component from 'ui/component';
+import buttonTpl from 'ui/loadingButton/tpl/button';
+import 'ui/loadingButton/css/button.css';
+
+var _defaults = {
+    type: 'info',
+    icon: 'property-advanced',
+    title: '',
+    label: 'OK',
+    terminatedLabel: 'FINISHED'
+};
+
+var buttonApi = {
+    start: function start() {
+        this.setState('started', true);
+        this.trigger('started');
+    },
+    terminate: function terminate() {
+        if (this.is('started')) {
+            this.setState('started', false);
+            this.setState('terminated', true);
+            this.disable();
+            this.trigger('terminated');
+        }
+        return this;
+    },
+    reset: function reset() {
+        if (this.is('terminated')) {
+            this.setState('terminated', false);
+            this.enable();
+            this.trigger('reset');
+        }
+        return this;
+    }
+};
+
+/**
+ * Create a button with the lifecycle : render -> started -> terminated [-> reset]
+ * @param {Object} config - the component config
+ * @param {String} config.type - the icon type (info, success, error)
+ * @param {String} config.icon - the button icon
+ * @param {String} config.label - the button's label
+ * @param {String} [config.title] - the button's title
+ * @param {String} [config.terminatedLabel] - the button's label when terminated
+ * @return {loadingButton} the component
+ *
+ * @event started - Emitted when the button is clicked and the triggered action supposed to be started
+ * @event terminated - Emitted when the button action is stopped, interrupted
+ * @event reset - Emitted when the button revert from the terminated stated to the initial one
+ */
+export default function loadingButtonFactory(config) {
+    var initConfig = _.defaults(config || {}, _defaults);
+
+    /**
+     * @typedef {loadingButton} the component
+     */
+    return component(buttonApi)
+        .setTemplate(buttonTpl)
+        .on('enable', function() {
+            this.getElement().removeProp('disabled');
+        })
+        .on('disable', function() {
+            this.getElement().prop('disabled', true);
+        })
+        .on('render', function() {
+            var self = this;
+            this.getElement().on('click', function(e) {
+                e.preventDefault();
+                if (!self.is('disabled') && !self.is('started') && !self.is('terminated')) {
+                    self.start();
+                }
+            });
+        })
+        .init(initConfig);
+}

package/src/loadingButton/scss/button.scss

@@ -1,42 +1,42 @@
-@import "inc/bootstrap";
-
-.loading-button{
-    [class^="icon-"], [class*=" icon-"] {
-        padding: 0;
-    }
-    .action-label, .terminated-label{
-        margin-left: 9px;
-    }
-    .spinner-icon, .terminated-label{
-        display: none;
-    }
-    &.started{
-        cursor: default;
-        opacity: 0.5;
-        .spinner-icon{
-            display: inline-block;
-            @include vendor-prefix(transform, translateZ(0));
-            @include vendor-prefix(transform-origin, 50% 50%);
-            @include animation(loading-button-rotate 1.4s infinite linear);
-            @include keyframes(loading-button-rotate) {
-                0% {
-                    @include vendor-prefix(transform, rotate(0deg));
-                }
-                100% {
-                    @include vendor-prefix(transform, rotate(360deg));
-                }
-            }
-        }
-        .start-icon{
-            display: none;
-        }
-    }
-    &.terminated{
-        .action-label{
-            display: none;
-        }
-        .terminated-label{
-            display: inline-block;
-        }
-    }
+@import "inc/bootstrap";
+
+.loading-button{
+    [class^="icon-"], [class*=" icon-"] {
+        padding: 0;
+    }
+    .action-label, .terminated-label{
+        margin-left: 9px;
+    }
+    .spinner-icon, .terminated-label{
+        display: none;
+    }
+    &.started{
+        cursor: default;
+        opacity: 0.5;
+        .spinner-icon{
+            display: inline-block;
+            @include vendor-prefix(transform, translateZ(0));
+            @include vendor-prefix(transform-origin, 50% 50%);
+            @include animation(loading-button-rotate 1.4s infinite linear);
+            @include keyframes(loading-button-rotate) {
+                0% {
+                    @include vendor-prefix(transform, rotate(0deg));
+                }
+                100% {
+                    @include vendor-prefix(transform, rotate(360deg));
+                }
+            }
+        }
+        .start-icon{
+            display: none;
+        }
+    }
+    &.terminated{
+        .action-label{
+            display: none;
+        }
+        .terminated-label{
+            display: inline-block;
+        }
+    }
 }

package/src/loadingButton/tpl/button.tpl

@@ -1,6 +1,6 @@
-<button class="loading-button btn-{{type}} small" type="button" title="{{title}}">
-    <span class="spinner-icon icon-loop spinning"></span>
-    <span class="start-icon icon-{{icon}}"></span>
-    <span class="action-label">{{label}}</span>
-    <span class="terminated-label">{{terminatedLabel}}</span>
+<button class="loading-button btn-{{type}} small" type="button" title="{{title}}">
+    <span class="spinner-icon icon-loop spinning"></span>
+    <span class="start-icon icon-{{icon}}"></span>
+    <span class="action-label">{{label}}</span>
+    <span class="terminated-label">{{terminatedLabel}}</span>
 </button>