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

package/src/switch/scss/switch.scss

@@ -1,83 +1,83 @@
-@import 'inc/bootstrap';
-
-@mixin switch-default {
-    color: $textColor;
-    background-color : $uiClickableDefaultBg;
-    transition: background-color .4s ease-out;
-}
-
-@mixin switch-active-on {
-    color: white;
-    background-color: $info;
-    transition: background-color .4s ease-out;
-}
-
-@mixin switch-active-off {
-    color: white;
-    background-color: $uiClickableActiveBg;
-    transition: background-color .4s ease-out;
-}
-
-.switch {
-
-    display: inline-block;
-    position: relative;
-
-    input {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        z-index: 100;
-        opacity: 0;
-        cursor: pointer;
-    }
-    label {
-        border: solid 1px $uiClickableActiveBg;
-        background-color : $uiClickableDefaultBg;
-
-        @include border-radius(2);
-        padding: 1px;
-        span {
-            display: inline-block;
-            position: relative;
-
-            min-width: 50px;
-
-            @include border-radius(2);
-            text-align: center;
-        }
-    }
-    input ~ label {
-        .on{
-            @include switch-default;
-        }
-        .off{
-            @include switch-active-off;
-        }
-    }
-    input:checked ~ label {
-        .on{
-            @include switch-active-on;
-        }
-        .off{
-            @include switch-default;
-        }
-    }
-    input:focus ~ label {
-        border: solid 1px $info;
-    }
-
-    // optional class which makes 'off' appearance match 'on'
-    &.monostyle {
-        input ~ label {
-            .off{
-                @include switch-active-on;
-            }
-        }
-        input:checked ~ label {
-            .off{
-                @include switch-default;
-            }
-        }
-    }
-}
+@import 'inc/bootstrap';
+
+@mixin switch-default {
+    color: $textColor;
+    background-color : $uiClickableDefaultBg;
+    transition: background-color .4s ease-out;
+}
+
+@mixin switch-active-on {
+    color: white;
+    background-color: $info;
+    transition: background-color .4s ease-out;
+}
+
+@mixin switch-active-off {
+    color: white;
+    background-color: $uiClickableActiveBg;
+    transition: background-color .4s ease-out;
+}
+
+.switch {
+
+    display: inline-block;
+    position: relative;
+
+    input {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+        opacity: 0;
+        cursor: pointer;
+    }
+    label {
+        border: solid 1px $uiClickableActiveBg;
+        background-color : $uiClickableDefaultBg;
+
+        @include border-radius(2);
+        padding: 1px;
+        span {
+            display: inline-block;
+            position: relative;
+
+            min-width: 50px;
+
+            @include border-radius(2);
+            text-align: center;
+        }
+    }
+    input ~ label {
+        .on{
+            @include switch-default;
+        }
+        .off{
+            @include switch-active-off;
+        }
+    }
+    input:checked ~ label {
+        .on{
+            @include switch-active-on;
+        }
+        .off{
+            @include switch-default;
+        }
+    }
+    input:focus ~ label {
+        border: solid 1px $info;
+    }
+
+    // optional class which makes 'off' appearance match 'on'
+    &.monostyle {
+        input ~ label {
+            .off{
+                @include switch-active-on;
+            }
+        }
+        input:checked ~ label {
+            .off{
+                @include switch-default;
+            }
+        }
+    }
+}

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>