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

package/src/switch/switch.js

@@ -1,195 +1,195 @@
-/**
- * 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-2019 (original work) Open Assessment Technologies SA ;
- */
-
-/**
- * A switch component, toggles between on and off
- *
- * @example
- * switchFactory(container, config)
- *     .on('change', function(value){
- *              console.log('The light is ' + value);
- *     });
- *
- * @author Bertrand Chevrier <bertrand@taotesting.com>
- */
-import $ from 'jquery';
-import _ from 'lodash';
-import __ from 'i18n';
-import component from 'ui/component';
-import uuid from 'lib/uuid';
-import switchTpl from 'ui/switch/tpl/switch';
-import 'ui/switch/css/switch.css';
-
-var states = {
-    on: 'on',
-    off: 'off'
-};
-
-var defaultConfig = {
-    on: {
-        label: __('On')
-    },
-    off: {
-        label: __('Off'),
-        active: true
-    },
-    title: ''
-};
-
-/**
- * The factory that creates a switch component
- *
- * @param {jQueryElement} $container - where to append the component
- * @param {Object} config - the component config
- * @param {Object} [config.on] - the on config
- * @param {String} [config.on.label] - the on button label
- * @param {Boolean} [config.on.active = false] - the default state
- * @param {Object} [config.off] - the off config
- * @param {String} [config.off.label] - the off button label
- * @param {Boolean} [config.off.active = true] - the default state
- * @param {String} [config.title] - the component title tooltip
- * @param {String} [config.name] - the component name (used by the element)
- * @param {Boolean} [config.monoStyle] - true if the styling should match for off & on
- * @returns {switchComponent} the component
- */
-export default function switchFactory($container, config) {
-    var onElt;
-    var offElt;
-
-    /**
-     * The component API
-     */
-    var api = {
-        /**
-         * Retrieve the component name
-         * @returns {String} it's name
-         */
-        getName: function getName() {
-            return this.config.name;
-        },
-
-        /**
-         * Is the switch on ?
-         * @returns {Boolean}
-         */
-        isOn: function isOn() {
-            return this.is(states.on);
-        },
-
-        /**
-         * Is the switch off ?
-         * @returns {Boolean}
-         */
-        isOff: function isOff() {
-            return !this.is(states.on);
-        },
-
-        /**
-         * Switch On (if not yet on)
-         * @returns {switchComponent}  chains
-         * @fires switchComponent#change
-         * @fires switchComponent#on
-         */
-        setOn: function setOn() {
-            if (!this.isOn()) {
-                this.setState(states.on, true);
-            }
-            if (this.is('rendered')) {
-                offElt.removeClass('active');
-                onElt.addClass('active');
-
-                this.trigger('change', states.on).trigger(states.on);
-            }
-            return this;
-        },
-
-        /**
-         * Switch Off (if not yet off)
-         * @returns {switchComponent}  chains
-         * @fires switchComponent#change
-         * @fires switchComponent#off
-         */
-        setOff: function setOff() {
-            if (!this.isOff()) {
-                this.setState(states.on, false);
-            }
-            if (this.is('rendered')) {
-                onElt.removeClass('active');
-                offElt.addClass('active');
-                this.trigger('change', states.off).trigger(states.off);
-            }
-            return this;
-        },
-
-        /**
-         * Toggle on/off
-         * @returns {switchComponent}  chains
-         */
-        toggle: function toggle() {
-            return this.isOn() ? this.setOff() : this.setOn();
-        },
-
-        /**
-         * Get the value
-         * @returns {String} on/off
-         */
-        getValue: function getValue() {
-            return this.is(states.on) ? states.on : states.off;
-        }
-    };
-
-    var switchComponent = component(api, defaultConfig)
-        .setTemplate(switchTpl)
-        .on('init', function() {
-            //generates a name if none
-            if (!this.config.name) {
-                this.config.name = 'switch-' + uuid();
-            }
-
-            //keeps defaults values if overridden
-            this.config.on = _.defaults(this.config.on, defaultConfig.on);
-            this.config.off = _.defaults(this.config.off, defaultConfig.off);
-
-            //initial state
-            if (this.config.on.active === true) {
-                this.config.off.active = false;
-                this.setOn();
-            } else {
-                this.setOff();
-            }
-
-            this.render($container);
-        })
-        .on('render', function() {
-            var self = this;
-            var $component = this.getElement();
-            onElt = $('.' + states.on, $component);
-            offElt = $('.' + states.off, $component);
-
-            //switch
-            $(':checkbox', $component).on('change', function(e) {
-                e.preventDefault();
-                self.toggle();
-            });
-        });
-
-    _.defer(function() {
-        switchComponent.init(config);
-    });
-    return switchComponent;
-}
+/**
+ * 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-2019 (original work) Open Assessment Technologies SA ;
+ */
+
+/**
+ * A switch component, toggles between on and off
+ *
+ * @example
+ * switchFactory(container, config)
+ *     .on('change', function(value){
+ *              console.log('The light is ' + value);
+ *     });
+ *
+ * @author Bertrand Chevrier <bertrand@taotesting.com>
+ */
+import $ from 'jquery';
+import _ from 'lodash';
+import __ from 'i18n';
+import component from 'ui/component';
+import uuid from 'lib/uuid';
+import switchTpl from 'ui/switch/tpl/switch';
+import 'ui/switch/css/switch.css';
+
+var states = {
+    on: 'on',
+    off: 'off'
+};
+
+var defaultConfig = {
+    on: {
+        label: __('On')
+    },
+    off: {
+        label: __('Off'),
+        active: true
+    },
+    title: ''
+};
+
+/**
+ * The factory that creates a switch component
+ *
+ * @param {jQueryElement} $container - where to append the component
+ * @param {Object} config - the component config
+ * @param {Object} [config.on] - the on config
+ * @param {String} [config.on.label] - the on button label
+ * @param {Boolean} [config.on.active = false] - the default state
+ * @param {Object} [config.off] - the off config
+ * @param {String} [config.off.label] - the off button label
+ * @param {Boolean} [config.off.active = true] - the default state
+ * @param {String} [config.title] - the component title tooltip
+ * @param {String} [config.name] - the component name (used by the element)
+ * @param {Boolean} [config.monoStyle] - true if the styling should match for off & on
+ * @returns {switchComponent} the component
+ */
+export default function switchFactory($container, config) {
+    var onElt;
+    var offElt;
+
+    /**
+     * The component API
+     */
+    var api = {
+        /**
+         * Retrieve the component name
+         * @returns {String} it's name
+         */
+        getName: function getName() {
+            return this.config.name;
+        },
+
+        /**
+         * Is the switch on ?
+         * @returns {Boolean}
+         */
+        isOn: function isOn() {
+            return this.is(states.on);
+        },
+
+        /**
+         * Is the switch off ?
+         * @returns {Boolean}
+         */
+        isOff: function isOff() {
+            return !this.is(states.on);
+        },
+
+        /**
+         * Switch On (if not yet on)
+         * @returns {switchComponent}  chains
+         * @fires switchComponent#change
+         * @fires switchComponent#on
+         */
+        setOn: function setOn() {
+            if (!this.isOn()) {
+                this.setState(states.on, true);
+            }
+            if (this.is('rendered')) {
+                offElt.removeClass('active');
+                onElt.addClass('active');
+
+                this.trigger('change', states.on).trigger(states.on);
+            }
+            return this;
+        },
+
+        /**
+         * Switch Off (if not yet off)
+         * @returns {switchComponent}  chains
+         * @fires switchComponent#change
+         * @fires switchComponent#off
+         */
+        setOff: function setOff() {
+            if (!this.isOff()) {
+                this.setState(states.on, false);
+            }
+            if (this.is('rendered')) {
+                onElt.removeClass('active');
+                offElt.addClass('active');
+                this.trigger('change', states.off).trigger(states.off);
+            }
+            return this;
+        },
+
+        /**
+         * Toggle on/off
+         * @returns {switchComponent}  chains
+         */
+        toggle: function toggle() {
+            return this.isOn() ? this.setOff() : this.setOn();
+        },
+
+        /**
+         * Get the value
+         * @returns {String} on/off
+         */
+        getValue: function getValue() {
+            return this.is(states.on) ? states.on : states.off;
+        }
+    };
+
+    var switchComponent = component(api, defaultConfig)
+        .setTemplate(switchTpl)
+        .on('init', function() {
+            //generates a name if none
+            if (!this.config.name) {
+                this.config.name = 'switch-' + uuid();
+            }
+
+            //keeps defaults values if overridden
+            this.config.on = _.defaults(this.config.on, defaultConfig.on);
+            this.config.off = _.defaults(this.config.off, defaultConfig.off);
+
+            //initial state
+            if (this.config.on.active === true) {
+                this.config.off.active = false;
+                this.setOn();
+            } else {
+                this.setOff();
+            }
+
+            this.render($container);
+        })
+        .on('render', function() {
+            var self = this;
+            var $component = this.getElement();
+            onElt = $('.' + states.on, $component);
+            offElt = $('.' + states.off, $component);
+
+            //switch
+            $(':checkbox', $component).on('change', function(e) {
+                e.preventDefault();
+                self.toggle();
+            });
+        });
+
+    _.defer(function() {
+        switchComponent.init(config);
+    });
+    return switchComponent;
+}

package/src/switch/tpl/switch.tpl

@@ -1,7 +1,7 @@
-<div class="switch {{#if monoStyle}}monostyle{{/if}}" title="{{title}}">
-    <input type="checkbox" name="{{name}}" {{#if on.active}}checked{{/if}}>
-    <label>
-        <span class="off {{#if off.active}}active{{/if}}">{{off.label}}</span>
-        <span class="on  {{#if on.active}}active{{/if}}">{{on.label}}</span>
-    </label>
-</div>
+<div class="switch {{#if monoStyle}}monostyle{{/if}}" title="{{title}}">
+    <input type="checkbox" name="{{name}}" {{#if on.active}}checked{{/if}}>
+    <label>
+        <span class="off {{#if off.active}}active{{/if}}">{{off.label}}</span>
+        <span class="on  {{#if on.active}}active{{/if}}">{{on.label}}</span>
+    </label>
+</div>

package/src/tableModel.js

@@ -1,112 +1,112 @@
-/**
- * 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;
- */
-/**
- * Build a model of a table to allow easier cell access
- * !!! WARNING: does not work with merged cells yet!!!
- *
- * @author Christophe Noël <christophe@taotesting.com>
- */
-import _ from 'lodash';
-import $ from 'jquery';
-
-export default function tableModelFactory($table) {
-    /**
-     * {jQuery[]} - array of jQuery collections of cells by row
-     * @example var $row2Cells = cellsByRow[2];
-     */
-    var cellsByRow;
-
-    /**
-     * Synchronize the model with the table markup
-     */
-    function update() {
-        var rowsInOrder = [] // we need multiple selectors to preserve visual order (vs. DOM order)
-            .concat($table.find('thead tr').toArray())
-            .concat($table.find('tbody tr').toArray())
-            .concat($table.find('tfoot tr').toArray());
-
-        cellsByRow = [];
-
-        rowsInOrder.forEach(function(row) {
-            var $row = $(row),
-                $rowCells = $row.find('th,td');
-
-            cellsByRow.push($rowCells);
-        });
-    }
-
-    /**
-     * @return {Number} - the number of row in the table
-     */
-    function getRowCount() {
-        return cellsByRow.length;
-    }
-
-    /**
-     * Return a jQuery selections of all the cells in the given row.
-     * @param {Number} index - row index. If negative, starts with the right of the table
-     * @returns {jQuery}
-     */
-    function getRowCells(index) {
-        if (index < 0) {
-            index = index + cellsByRow.length;
-        }
-        return cellsByRow[index] || $();
-    }
-
-    /**
-     * @return {Number} - the number of columns in the table
-     */
-    function getColCount() {
-        return cellsByRow[0].length; // very naive. What happens with merged cells ?
-    }
-
-    /**
-     * Return a jQuery selections of all the cells in the given column.
-     * @param {Number} index - column index. If negative, starts with the right of the table
-     * @returns {jQuery}
-     */
-    function getColCells(index) {
-        var columnCells = [];
-
-        if (_.isFinite(index)) {
-            cellsByRow.forEach(function($row) {
-                var cell = $row.get(index);
-                if (cell) {
-                    columnCells.push(cell);
-                }
-            });
-        }
-
-        return columnCells.length ? $(columnCells) : $();
-    }
-
-    if ($table && $table.is('table')) {
-        update();
-    } else {
-        throw new TypeError('$table should contain a reference to a table element');
-    }
-
-    return {
-        getRowCount: getRowCount,
-        getRowCells: getRowCells,
-        getColCount: getColCount,
-        getColCells: getColCells,
-        update: update
-    };
-}
+/**
+ * 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;
+ */
+/**
+ * Build a model of a table to allow easier cell access
+ * !!! WARNING: does not work with merged cells yet!!!
+ *
+ * @author Christophe Noël <christophe@taotesting.com>
+ */
+import _ from 'lodash';
+import $ from 'jquery';
+
+export default function tableModelFactory($table) {
+    /**
+     * {jQuery[]} - array of jQuery collections of cells by row
+     * @example var $row2Cells = cellsByRow[2];
+     */
+    var cellsByRow;
+
+    /**
+     * Synchronize the model with the table markup
+     */
+    function update() {
+        var rowsInOrder = [] // we need multiple selectors to preserve visual order (vs. DOM order)
+            .concat($table.find('thead tr').toArray())
+            .concat($table.find('tbody tr').toArray())
+            .concat($table.find('tfoot tr').toArray());
+
+        cellsByRow = [];
+
+        rowsInOrder.forEach(function(row) {
+            var $row = $(row),
+                $rowCells = $row.find('th,td');
+
+            cellsByRow.push($rowCells);
+        });
+    }
+
+    /**
+     * @return {Number} - the number of row in the table
+     */
+    function getRowCount() {
+        return cellsByRow.length;
+    }
+
+    /**
+     * Return a jQuery selections of all the cells in the given row.
+     * @param {Number} index - row index. If negative, starts with the right of the table
+     * @returns {jQuery}
+     */
+    function getRowCells(index) {
+        if (index < 0) {
+            index = index + cellsByRow.length;
+        }
+        return cellsByRow[index] || $();
+    }
+
+    /**
+     * @return {Number} - the number of columns in the table
+     */
+    function getColCount() {
+        return cellsByRow[0].length; // very naive. What happens with merged cells ?
+    }
+
+    /**
+     * Return a jQuery selections of all the cells in the given column.
+     * @param {Number} index - column index. If negative, starts with the right of the table
+     * @returns {jQuery}
+     */
+    function getColCells(index) {
+        var columnCells = [];
+
+        if (_.isFinite(index)) {
+            cellsByRow.forEach(function($row) {
+                var cell = $row.get(index);
+                if (cell) {
+                    columnCells.push(cell);
+                }
+            });
+        }
+
+        return columnCells.length ? $(columnCells) : $();
+    }
+
+    if ($table && $table.is('table')) {
+        update();
+    } else {
+        throw new TypeError('$table should contain a reference to a table element');
+    }
+
+    return {
+        getRowCount: getRowCount,
+        getRowCells: getRowCells,
+        getColCount: getColCount,
+        getColCells: getColCells,
+        update: update
+    };
+}

package/src/tabs/css/tabs.css

@@ -1,17 +1,17 @@
-/*
-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 */
-/** Styles for a group of buttons to be glued together into a tabs-like bar
- *  Intended use:
- *  <ul class="tab-group">
- *    <li class="tab">
- *      <button>
+/** Styles for a group of buttons to be glued together into a tabs-like bar
+ *  Intended use:
+ *  <ul class="tab-group">
+ *    <li class="tab">
+ *      <button>
  */
 .tab-group {
     list-style: none;
@@ -68,5 +68,5 @@ Usage:
 .tab-group .tab.active button:hover {
     background-color: #3e7da7;
 }
-
+
 /*# sourceMappingURL=tabs.css.map */