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

package/src/autoscroll.js

@@ -1,57 +1,57 @@
-/**
- * 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) 2016 (original work) Open Assessment Technologies SA ;
- */
-/**
- * @author Jean-Sébastien Conan <jean-sebastien.conan@vesperiagroup.com>
- */
-import $ from 'jquery';
-
-
-/**
- * Keep a component element visible inside a container.
- * If the element is outside the container viewport, scroll to display it.
- * @param {String|jQuery|HTMLElement} element
- * @param {String|jQuery|HTMLElement} container
- * @returns {Promise} Returns a Promise that will always be resolved when the scroll is done
- */
-function autoscroll(element, container) {
-    return new Promise(function(resolve) {
-        var $element = $(element);
-        var $container = $(container || $element.parent());
-        var currentScrollTop, minScrollTop, maxScrollTop, scrollTop;
-
-        if ($element.length && $container.length) {
-            currentScrollTop = $container.scrollTop();
-            maxScrollTop = $element.offset().top - $container.offset().top + currentScrollTop;
-            minScrollTop = maxScrollTop - $container.height() + $element.outerHeight();
-
-            scrollTop = Math.max(Math.min(maxScrollTop, currentScrollTop), minScrollTop);
-            if (scrollTop !== currentScrollTop) {
-                $container
-                    .animate({ scrollTop: scrollTop })
-                    .promise()
-                    .done(resolve);
-            } else {
-                resolve();
-            }
-        } else {
-            resolve();
-        }
-    });
-}
-
-export default autoscroll;
+/**
+ * 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) 2016 (original work) Open Assessment Technologies SA ;
+ */
+/**
+ * @author Jean-Sébastien Conan <jean-sebastien.conan@vesperiagroup.com>
+ */
+import $ from 'jquery';
+
+
+/**
+ * Keep a component element visible inside a container.
+ * If the element is outside the container viewport, scroll to display it.
+ * @param {String|jQuery|HTMLElement} element
+ * @param {String|jQuery|HTMLElement} container
+ * @returns {Promise} Returns a Promise that will always be resolved when the scroll is done
+ */
+function autoscroll(element, container) {
+    return new Promise(function(resolve) {
+        var $element = $(element);
+        var $container = $(container || $element.parent());
+        var currentScrollTop, minScrollTop, maxScrollTop, scrollTop;
+
+        if ($element.length && $container.length) {
+            currentScrollTop = $container.scrollTop();
+            maxScrollTop = $element.offset().top - $container.offset().top + currentScrollTop;
+            minScrollTop = maxScrollTop - $container.height() + $element.outerHeight();
+
+            scrollTop = Math.max(Math.min(maxScrollTop, currentScrollTop), minScrollTop);
+            if (scrollTop !== currentScrollTop) {
+                $container
+                    .animate({ scrollTop: scrollTop })
+                    .promise()
+                    .done(resolve);
+            } else {
+                resolve();
+            }
+        } else {
+            resolve();
+        }
+    });
+}
+
+export default autoscroll;

package/src/badge/badge.js

@@ -1,119 +1,119 @@
-/**
- * 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 badge component used to indicate the status of a list of process or elements
- *
- * @example
- * badgeFactory({
- *          type : 'info',
- *          value : 2,
- *          loading : true
- *     });
- *
- * @author Sam <sam@taotesting.com>
- */
-
-import _ from 'lodash';
-import hider from 'ui/hider';
-import component from 'ui/component';
-import badgeTpl from 'ui/badge/tpl/badge';
-import 'ui/badge/css/badge.css';
-
-var _defaults = {
-    loading: false,
-    type: 'info',
-    value: 0
-};
-
-var _allowedTypes = ['success', 'warning', 'error', 'info'];
-
-var badgeApi = {
-    /**
-     * Update and refresh the rendering of the badge
-     * @param {Object} config - the display config
-     * @param {Number} config.value - the number to be display in the badge, if above 99, the 99+ will be displayed instead
-     * @param {String} config.type - define the type of the badge (success, error, info)
-     * @param {Boolean} [config.loading] - if true, show the loading animation around it
-     * @returns {badgeApi}
-     */
-    update: function update(config) {
-        var $component = this.getElement();
-        var $border = $component.find('.badge-border');
-        var $badge = $component
-            .find('.badge')
-            .removeClass('badge-info badge-success badge-warning badge-error icon-result-ok');
-        var $loader = $component.find('.loader');
-        var displayValue;
-
-        _.assign(this.config, config);
-
-        if (this.config && this.config.value) {
-            displayValue = parseInt(this.config.value, 10);
-            displayValue = displayValue > 99 ? '99+' : displayValue; //only display up to a value of 99
-
-            //set status
-            if (_allowedTypes.indexOf(this.config.type) === -1) {
-                throw new Error('Invalid badge type : '.this.config.type);
-            }
-            $badge.addClass('badge-' + this.config.type).html(displayValue);
-
-            //if any is running
-            if (this.config.loading) {
-                //replace by loading
-                hider.show($loader);
-                hider.hide($border);
-            } else {
-                hider.hide($loader);
-                hider.show($border);
-            }
-        } else {
-            //idle state as no border nor loader
-            hider.hide($loader);
-            hider.hide($border);
-
-            //set the complete state (with the check box icon and clear any number in it)
-            $badge.addClass('icon-result-ok').empty();
-        }
-        return this;
-    }
-};
-
-/**
- * Create a badge that indicates the status and a number
- *
- * @param {Object} config - the component config
- * @param {Number} config.value - the number to be display in the badge, if above 99, the 99+ will be displayed instead
- * @param {String} config.type - define the type of the badge (success, error, info)
- * @param {Boolean} [config.loading] - if true, show the loading animation around it
- * @returns {badge} the component
- */
-export default function badgeFactory(config) {
-    var initConfig = _.defaults(config || {}, _defaults);
-
-    /**
-     * The component
-     * @typedef {ui/component} badge
-     */
-    return component(badgeApi)
-        .setTemplate(badgeTpl)
-        .on('render', function() {
-            this.update(this.config);
-        })
-        .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 badge component used to indicate the status of a list of process or elements
+ *
+ * @example
+ * badgeFactory({
+ *          type : 'info',
+ *          value : 2,
+ *          loading : true
+ *     });
+ *
+ * @author Sam <sam@taotesting.com>
+ */
+
+import _ from 'lodash';
+import hider from 'ui/hider';
+import component from 'ui/component';
+import badgeTpl from 'ui/badge/tpl/badge';
+import 'ui/badge/css/badge.css';
+
+var _defaults = {
+    loading: false,
+    type: 'info',
+    value: 0
+};
+
+var _allowedTypes = ['success', 'warning', 'error', 'info'];
+
+var badgeApi = {
+    /**
+     * Update and refresh the rendering of the badge
+     * @param {Object} config - the display config
+     * @param {Number} config.value - the number to be display in the badge, if above 99, the 99+ will be displayed instead
+     * @param {String} config.type - define the type of the badge (success, error, info)
+     * @param {Boolean} [config.loading] - if true, show the loading animation around it
+     * @returns {badgeApi}
+     */
+    update: function update(config) {
+        var $component = this.getElement();
+        var $border = $component.find('.badge-border');
+        var $badge = $component
+            .find('.badge')
+            .removeClass('badge-info badge-success badge-warning badge-error icon-result-ok');
+        var $loader = $component.find('.loader');
+        var displayValue;
+
+        _.assign(this.config, config);
+
+        if (this.config && this.config.value) {
+            displayValue = parseInt(this.config.value, 10);
+            displayValue = displayValue > 99 ? '99+' : displayValue; //only display up to a value of 99
+
+            //set status
+            if (_allowedTypes.indexOf(this.config.type) === -1) {
+                throw new Error('Invalid badge type : '.this.config.type);
+            }
+            $badge.addClass('badge-' + this.config.type).html(displayValue);
+
+            //if any is running
+            if (this.config.loading) {
+                //replace by loading
+                hider.show($loader);
+                hider.hide($border);
+            } else {
+                hider.hide($loader);
+                hider.show($border);
+            }
+        } else {
+            //idle state as no border nor loader
+            hider.hide($loader);
+            hider.hide($border);
+
+            //set the complete state (with the check box icon and clear any number in it)
+            $badge.addClass('icon-result-ok').empty();
+        }
+        return this;
+    }
+};
+
+/**
+ * Create a badge that indicates the status and a number
+ *
+ * @param {Object} config - the component config
+ * @param {Number} config.value - the number to be display in the badge, if above 99, the 99+ will be displayed instead
+ * @param {String} config.type - define the type of the badge (success, error, info)
+ * @param {Boolean} [config.loading] - if true, show the loading animation around it
+ * @returns {badge} the component
+ */
+export default function badgeFactory(config) {
+    var initConfig = _.defaults(config || {}, _defaults);
+
+    /**
+     * The component
+     * @typedef {ui/component} badge
+     */
+    return component(badgeApi)
+        .setTemplate(badgeTpl)
+        .on('render', function() {
+            this.update(this.config);
+        })
+        .init(initConfig);
+}

package/src/badge/css/badge.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 */
@@ -110,5 +110,5 @@ Usage:
     top: 1px;
     left: 2px;
 }
-
+
 /*# sourceMappingURL=badge.css.map */

package/src/badge/scss/badge.scss

@@ -1,93 +1,93 @@
-@import "inc/bootstrap";
-
-$background: $darkBar;
-$foreground: $darkBarTxt;
-$brightOrange : rgb(209, 108, 85);//special color to make the warning color better for the badge
-
-.badge-component {
-    position: relative;
-    .loader:not(.hidden) {
-        position: relative;
-        top:-1px;
-        width:25px;
-        height:25px;
-        border-radius:50%;
-        @include animation(badge-component-rotate 1.4s infinite linear);
-        @include vendor-prefix(background, linear-gradient(left, rgba($foreground,1) 10%, rgba($foreground,0) 42%), value);
-        @include vendor-prefix(transform, translateZ(0));
-        @include keyframes(badge-component-rotate) {
-            0% {
-                @include vendor-prefix(transform, rotate(0deg));
-            }
-            100% {
-                @include vendor-prefix(transform, rotate(360deg));
-            }
-        }
-        &:before {
-            width:50%;
-            height:50%;
-            background: $foreground;
-            border-radius: 100% 0 0 0;
-            position:absolute;
-            top:0;
-            left:0;
-            content:'';
-        }
-        &:after {
-            background: $background;
-            width:75%;
-            height:75%;
-            border-radius:50%;
-            content:'';
-            margin:auto;
-            position: absolute;
-            top: 0; left: 0; bottom: 0; right: 0;
-        }
-    }
-    .badge{
-        background: $foreground;
-        @include vendor-prefix(user-select, none);
-        @include font-size(12);
-        width:19px;
-        height:19px;
-        border-radius:50%;
-        position: absolute;
-        top: 2px;
-        left: 3px;
-        padding-top: 1px;
-        text-align: center;
-        display: inline-block;
-        &.badge-info{
-            color: whiten($info, 0.9);
-            background: whiten($info, 0.2);
-        }
-        &.badge-success{
-            color: whiten($success, 0.9);
-            background: whiten($success, 0.2);
-        }
-        &.badge-warning{
-            color: whiten($brightOrange, 0.9);
-            background: $brightOrange;
-        }
-        &.badge-error{
-            color: whiten($error, 0.9);
-            background: $error;
-        }
-        &.icon-result-ok{
-            &::before{
-                top: 3px;
-                position: relative;
-                color: blue;
-            }
-        }
-    }
-    .badge-border{
-        background: $foreground;
-        width:21px;
-        height:21px;
-        border-radius:50%;
-        position: absolute;
-        top: 1px;
-        left: 2px;
-    }
+@import "inc/bootstrap";
+
+$background: $darkBar;
+$foreground: $darkBarTxt;
+$brightOrange : rgb(209, 108, 85);//special color to make the warning color better for the badge
+
+.badge-component {
+    position: relative;
+    .loader:not(.hidden) {
+        position: relative;
+        top:-1px;
+        width:25px;
+        height:25px;
+        border-radius:50%;
+        @include animation(badge-component-rotate 1.4s infinite linear);
+        @include vendor-prefix(background, linear-gradient(left, rgba($foreground,1) 10%, rgba($foreground,0) 42%), value);
+        @include vendor-prefix(transform, translateZ(0));
+        @include keyframes(badge-component-rotate) {
+            0% {
+                @include vendor-prefix(transform, rotate(0deg));
+            }
+            100% {
+                @include vendor-prefix(transform, rotate(360deg));
+            }
+        }
+        &:before {
+            width:50%;
+            height:50%;
+            background: $foreground;
+            border-radius: 100% 0 0 0;
+            position:absolute;
+            top:0;
+            left:0;
+            content:'';
+        }
+        &:after {
+            background: $background;
+            width:75%;
+            height:75%;
+            border-radius:50%;
+            content:'';
+            margin:auto;
+            position: absolute;
+            top: 0; left: 0; bottom: 0; right: 0;
+        }
+    }
+    .badge{
+        background: $foreground;
+        @include vendor-prefix(user-select, none);
+        @include font-size(12);
+        width:19px;
+        height:19px;
+        border-radius:50%;
+        position: absolute;
+        top: 2px;
+        left: 3px;
+        padding-top: 1px;
+        text-align: center;
+        display: inline-block;
+        &.badge-info{
+            color: whiten($info, 0.9);
+            background: whiten($info, 0.2);
+        }
+        &.badge-success{
+            color: whiten($success, 0.9);
+            background: whiten($success, 0.2);
+        }
+        &.badge-warning{
+            color: whiten($brightOrange, 0.9);
+            background: $brightOrange;
+        }
+        &.badge-error{
+            color: whiten($error, 0.9);
+            background: $error;
+        }
+        &.icon-result-ok{
+            &::before{
+                top: 3px;
+                position: relative;
+                color: blue;
+            }
+        }
+    }
+    .badge-border{
+        background: $foreground;
+        width:21px;
+        height:21px;
+        border-radius:50%;
+        position: absolute;
+        top: 1px;
+        left: 2px;
+    }
 }

package/src/badge/tpl/badge.tpl

@@ -1,5 +1,5 @@
-<div class="badge-component">
-    <div class="loader"></div>
-    <span class="badge-border"></span>
-    <span class="badge"></span>
+<div class="badge-component">
+    <div class="loader"></div>
+    <span class="badge-border"></span>
+    <span class="badge"></span>
 </div>

package/src/breadcrumbs/css/breadcrumbs.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 */
@@ -81,5 +81,5 @@ Usage:
 .breadcrumbs li.breadcrumb:hover ul {
     display: block;
 }
-
+
 /*# sourceMappingURL=breadcrumbs.css.map */