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

package/src/animable/absorbable/absorbable.js

@@ -1,134 +1,134 @@
-/**
- * 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;
- */
-
-/**
- * Allow to generate an absorbing animation from a target element to the component
- *
- * @example
- * component.absorb($target);//will create an animation
- * component.absorb($target).then(callback);//enables executing the callback after the animation sequence is over
- * component.absorbBurst($target, [0, 500, 1000]).then(callback);//creates 3 successive absorbing animation respectively at 0, 500 and 1000ms
- *
- * @author Sam <sam@taotesting.com>
- */
-import _ from 'lodash';
-
-import componentFactory from 'ui/component';
-import makeAlignable from 'ui/component/alignable';
-import absorbTpl from 'ui/animable/absorbable/tpl/absorb';
-import 'ui/animable/absorbable/css/absorb.css';
-
-var defaultConfig = {
-    animationDuration: 1
-};
-
-var absorbableComponent = {
-    /**
-     * Generate an absorbing animation from a target element to the component
-     * @param {JQuery} $target - the target dom where the absorb animation should start
-     * @returns {Promise} - resolved when the animation is over
-     */
-    absorb: function absorb($target) {
-        var self = this;
-        var $component = this.getElement();
-        var targetWidth = $target.width();
-        var targetHeight = $target.height();
-        var finalWidth = 10;
-        var finalHeight = 10;
-        var animationDuration = parseInt(this.config.animationDuration, 10) || defaultConfig.animationDuration;
-        var animationStartOffset = 10; //safety duration padding to allow styles to be properly applied
-        var animatedComponent = makeAlignable(componentFactory())
-            .setTemplate(absorbTpl)
-            .init()
-            .render($component)
-            .setSize(targetWidth, targetHeight)
-            .alignWith($target, {
-                hPos: 'center',
-                vPos: 'center',
-                hOrigin: 'center',
-                vOrigin: 'center'
-            });
-
-        if ($component.css('position') === 'static') {
-            $component.css('position', 'relative');
-        }
-
-        return new Promise(function(resolve) {
-            _.delay(function() {
-                //css
-                animatedComponent
-                    .getElement()
-                    .addClass('animate')
-                    .css({
-                        transitionDuration: animationDuration + 's'
-                    });
-
-                animatedComponent.setSize(finalWidth, finalHeight).alignWith($component, {
-                    hPos: 'center',
-                    vPos: 'center',
-                    hOrigin: 'center',
-                    vOrigin: 'center',
-                    hOffset: targetWidth / 2 - finalWidth / 2,
-                    vOffset: targetHeight / 2 - finalHeight / 2
-                });
-
-                _.delay(function() {
-                    animatedComponent.destroy();
-                    resolve(self); //finish the animation by resolving the promise
-                }, 1000 * animationDuration + animationStartOffset);
-            }, animationStartOffset);
-        });
-    },
-
-    /**
-     * Generate a sequence of absorbing animation from a target element to the component.
-     *
-     * @param {JQuery} $target - the target dom where the absorb animation should start
-     * @param {Array} delayArray - the array of time an absorb animation should successively start
-     * @returns {Promise} - resolved when the animation is over
-     */
-    absorbBurst: function($target, delayArray) {
-        var animations = [];
-        var self = this;
-
-        delayArray = _.isArray(delayArray) ? delayArray : [0];
-
-        _.forEach(delayArray, function(startTimeOffset) {
-            animations.push(
-                new Promise(function(resolve) {
-                    _.delay(function() {
-                        self.absorb($target).then(resolve);
-                    }, startTimeOffset);
-                })
-            );
-        });
-        return Promise.all(animations);
-    }
-};
-
-/**
- * @param {Component} component - an instance of ui/component
- * @param {Object} config
- */
-export default function makeAbsorbable(component, config) {
-    _.assign(component, absorbableComponent);
-
-    return component.off('.makeAbsorbable').on('init.makeAbsorbable', function() {
-        _.defaults(this.config, config || {}, defaultConfig);
-    });
-}
+/**
+ * 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;
+ */
+
+/**
+ * Allow to generate an absorbing animation from a target element to the component
+ *
+ * @example
+ * component.absorb($target);//will create an animation
+ * component.absorb($target).then(callback);//enables executing the callback after the animation sequence is over
+ * component.absorbBurst($target, [0, 500, 1000]).then(callback);//creates 3 successive absorbing animation respectively at 0, 500 and 1000ms
+ *
+ * @author Sam <sam@taotesting.com>
+ */
+import _ from 'lodash';
+
+import componentFactory from 'ui/component';
+import makeAlignable from 'ui/component/alignable';
+import absorbTpl from 'ui/animable/absorbable/tpl/absorb';
+import 'ui/animable/absorbable/css/absorb.css';
+
+var defaultConfig = {
+    animationDuration: 1
+};
+
+var absorbableComponent = {
+    /**
+     * Generate an absorbing animation from a target element to the component
+     * @param {JQuery} $target - the target dom where the absorb animation should start
+     * @returns {Promise} - resolved when the animation is over
+     */
+    absorb: function absorb($target) {
+        var self = this;
+        var $component = this.getElement();
+        var targetWidth = $target.width();
+        var targetHeight = $target.height();
+        var finalWidth = 10;
+        var finalHeight = 10;
+        var animationDuration = parseInt(this.config.animationDuration, 10) || defaultConfig.animationDuration;
+        var animationStartOffset = 10; //safety duration padding to allow styles to be properly applied
+        var animatedComponent = makeAlignable(componentFactory())
+            .setTemplate(absorbTpl)
+            .init()
+            .render($component)
+            .setSize(targetWidth, targetHeight)
+            .alignWith($target, {
+                hPos: 'center',
+                vPos: 'center',
+                hOrigin: 'center',
+                vOrigin: 'center'
+            });
+
+        if ($component.css('position') === 'static') {
+            $component.css('position', 'relative');
+        }
+
+        return new Promise(function(resolve) {
+            _.delay(function() {
+                //css
+                animatedComponent
+                    .getElement()
+                    .addClass('animate')
+                    .css({
+                        transitionDuration: animationDuration + 's'
+                    });
+
+                animatedComponent.setSize(finalWidth, finalHeight).alignWith($component, {
+                    hPos: 'center',
+                    vPos: 'center',
+                    hOrigin: 'center',
+                    vOrigin: 'center',
+                    hOffset: targetWidth / 2 - finalWidth / 2,
+                    vOffset: targetHeight / 2 - finalHeight / 2
+                });
+
+                _.delay(function() {
+                    animatedComponent.destroy();
+                    resolve(self); //finish the animation by resolving the promise
+                }, 1000 * animationDuration + animationStartOffset);
+            }, animationStartOffset);
+        });
+    },
+
+    /**
+     * Generate a sequence of absorbing animation from a target element to the component.
+     *
+     * @param {JQuery} $target - the target dom where the absorb animation should start
+     * @param {Array} delayArray - the array of time an absorb animation should successively start
+     * @returns {Promise} - resolved when the animation is over
+     */
+    absorbBurst: function($target, delayArray) {
+        var animations = [];
+        var self = this;
+
+        delayArray = _.isArray(delayArray) ? delayArray : [0];
+
+        _.forEach(delayArray, function(startTimeOffset) {
+            animations.push(
+                new Promise(function(resolve) {
+                    _.delay(function() {
+                        self.absorb($target).then(resolve);
+                    }, startTimeOffset);
+                })
+            );
+        });
+        return Promise.all(animations);
+    }
+};
+
+/**
+ * @param {Component} component - an instance of ui/component
+ * @param {Object} config
+ */
+export default function makeAbsorbable(component, config) {
+    _.assign(component, absorbableComponent);
+
+    return component.off('.makeAbsorbable').on('init.makeAbsorbable', function() {
+        _.defaults(this.config, config || {}, defaultConfig);
+    });
+}

package/src/animable/absorbable/css/absorb.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 */
@@ -44,5 +44,5 @@ Usage:
             user-select: none;
     background: linear-gradient(to bottom, white, black);
 }
-
+
 /*# sourceMappingURL=absorb.css.map */

package/src/animable/absorbable/scss/absorb.scss

@@ -1,37 +1,37 @@
-@import 'inc/bootstrap';
-
-$animationFunction: cubic-bezier(0.2, 0.6, 1, 0.4);
-$background: $darkBarTxt;
-.absorbable {
-    z-index: 1; //create a stacking context to ensure it is display on top of its container
-    border-radius: 0%;
-    background: $background;
-    opacity: 0;
-    &.animate {
-        transform: translateZ(0);
-        transition-timing-function: $animationFunction;
-        @include animation(absorbable-opacity 2s $animationFunction 1);
-    }
-    @include keyframes(absorbable-opacity) {
-        0% {
-            opacity: 0;
-        }
-        20% {
-            opacity: 0.3;
-            border-radius: 20%;
-        }
-        60% {
-            opacity: 0.9;
-        }
-        100% {
-            border-radius: 50%;
-        }
-    }
-
-    .example {
-        display: grid;
-        transition: all 0.5s;
-        user-select: none;
-        background: linear-gradient(to bottom, white, black);
-    }
-}
+@import 'inc/bootstrap';
+
+$animationFunction: cubic-bezier(0.2, 0.6, 1, 0.4);
+$background: $darkBarTxt;
+.absorbable {
+    z-index: 1; //create a stacking context to ensure it is display on top of its container
+    border-radius: 0%;
+    background: $background;
+    opacity: 0;
+    &.animate {
+        transform: translateZ(0);
+        transition-timing-function: $animationFunction;
+        @include animation(absorbable-opacity 2s $animationFunction 1);
+    }
+    @include keyframes(absorbable-opacity) {
+        0% {
+            opacity: 0;
+        }
+        20% {
+            opacity: 0.3;
+            border-radius: 20%;
+        }
+        60% {
+            opacity: 0.9;
+        }
+        100% {
+            border-radius: 50%;
+        }
+    }
+
+    .example {
+        display: grid;
+        transition: all 0.5s;
+        user-select: none;
+        background: linear-gradient(to bottom, white, black);
+    }
+}

package/src/animable/pulsable/css/pulse.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 */
@@ -35,5 +35,5 @@ Usage:
 .pulsable.animate {
     animation: pulsable-pulse 1s ease-out infinite;
 }
-
+
 /*# sourceMappingURL=pulse.css.map */

package/src/animable/pulsable/pulsable.js

@@ -1,90 +1,90 @@
-/**
- * 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;
- */
-
-/**
- * Allow to generate a pulsing animation for a component
- *
- * @example
- * component.pulse(3);//will have the component pulse for 3 times
- * component.pulse(3).then(callback);//enables executing the callback after the animation sequence is over
- *
- * @author Sam <sam@taotesting.com>
- */
-
-import _ from 'lodash';
-
-import componentFactory from 'ui/component';
-import makeAlignable from 'ui/component/alignable';
-import pulseTpl from 'ui/animable/pulsable/tpl/pulse';
-import 'ui/animable/pulsable/css/pulse.css';
-
-var defaultConfig = {
-    pulseCount: 3
-};
-
-var pulsableComponent = {
-    /**
-     * Show a pulse animation for a given number of time
-     * @param {Integer} [pulseCount] - number of time the component should pulse, if it is not given, takes the value define in the config
-     * @returns {Promise}
-     */
-    pulse: function pulse(pulseCount) {
-        var self = this;
-        var $component, pulseNb, animatedComponent;
-
-        if (this.config && this.is('rendered')) {
-            $component = this.getElement();
-
-            if ($component.css('position') === 'static') {
-                $component.css('position', 'relative');
-            }
-
-            pulseNb = parseInt(pulseCount || this.config.pulseCount || defaultConfig.pulseCount, 10);
-            animatedComponent = makeAlignable(componentFactory())
-                .setTemplate(pulseTpl)
-                .init()
-                .render($component)
-                .alignWith($component, {
-                    hPos: 'center',
-                    vPos: 'center',
-                    hOrigin: 'center',
-                    vOrigin: 'center'
-                });
-
-            return new Promise(function(resolve) {
-                _.delay(function() {
-                    animatedComponent.destroy();
-                    resolve(self);
-                }, pulseNb * 1000); //one pulse per second
-            });
-        }
-        return Promise.resolve(this);
-    }
-};
-
-/**
- * @param {Component} component - an instance of ui/component
- * @param {Object} config
- */
-export default function makePulsable(component, config) {
-    _.assign(component, pulsableComponent);
-
-    return component.off('.makePulsable').on('init.makePulsable', function() {
-        _.defaults(this.config, config || {}, defaultConfig);
-    });
-}
+/**
+ * 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;
+ */
+
+/**
+ * Allow to generate a pulsing animation for a component
+ *
+ * @example
+ * component.pulse(3);//will have the component pulse for 3 times
+ * component.pulse(3).then(callback);//enables executing the callback after the animation sequence is over
+ *
+ * @author Sam <sam@taotesting.com>
+ */
+
+import _ from 'lodash';
+
+import componentFactory from 'ui/component';
+import makeAlignable from 'ui/component/alignable';
+import pulseTpl from 'ui/animable/pulsable/tpl/pulse';
+import 'ui/animable/pulsable/css/pulse.css';
+
+var defaultConfig = {
+    pulseCount: 3
+};
+
+var pulsableComponent = {
+    /**
+     * Show a pulse animation for a given number of time
+     * @param {Integer} [pulseCount] - number of time the component should pulse, if it is not given, takes the value define in the config
+     * @returns {Promise}
+     */
+    pulse: function pulse(pulseCount) {
+        var self = this;
+        var $component, pulseNb, animatedComponent;
+
+        if (this.config && this.is('rendered')) {
+            $component = this.getElement();
+
+            if ($component.css('position') === 'static') {
+                $component.css('position', 'relative');
+            }
+
+            pulseNb = parseInt(pulseCount || this.config.pulseCount || defaultConfig.pulseCount, 10);
+            animatedComponent = makeAlignable(componentFactory())
+                .setTemplate(pulseTpl)
+                .init()
+                .render($component)
+                .alignWith($component, {
+                    hPos: 'center',
+                    vPos: 'center',
+                    hOrigin: 'center',
+                    vOrigin: 'center'
+                });
+
+            return new Promise(function(resolve) {
+                _.delay(function() {
+                    animatedComponent.destroy();
+                    resolve(self);
+                }, pulseNb * 1000); //one pulse per second
+            });
+        }
+        return Promise.resolve(this);
+    }
+};
+
+/**
+ * @param {Component} component - an instance of ui/component
+ * @param {Object} config
+ */
+export default function makePulsable(component, config) {
+    _.assign(component, pulsableComponent);
+
+    return component.off('.makePulsable').on('init.makePulsable', function() {
+        _.defaults(this.config, config || {}, defaultConfig);
+    });
+}

package/src/animable/pulsable/scss/pulse.scss

@@ -1,23 +1,23 @@
-@import "inc/bootstrap";
-
-$foreground: $darkBarTxt;
-.pulsable {
-    z-index: 1;//create a stacking context to ensure it is display on top of its container
-    display: block;
-    border-radius: 50%;
-    position: absolute;
-    background: $foreground;
-    width: 1px;
-    height: 1px;
-    top: 0px;
-    left: 0px;
-    box-shadow: 0 0 0 rgba($foreground, 0.6);
-    @include keyframes(pulsable-pulse) {
-        0% {box-shadow: 0 0 0 0 rgba($foreground, 0.6)}
-        50% {box-shadow: 0 0 0 200px rgba($foreground, 0)}
-        100% {box-shadow: 0 0 0 0 rgba($foreground, 0)}
-    }
-    &.animate{
-        @include animation(pulsable-pulse 1s ease-out infinite);
-    }
+@import "inc/bootstrap";
+
+$foreground: $darkBarTxt;
+.pulsable {
+    z-index: 1;//create a stacking context to ensure it is display on top of its container
+    display: block;
+    border-radius: 50%;
+    position: absolute;
+    background: $foreground;
+    width: 1px;
+    height: 1px;
+    top: 0px;
+    left: 0px;
+    box-shadow: 0 0 0 rgba($foreground, 0.6);
+    @include keyframes(pulsable-pulse) {
+        0% {box-shadow: 0 0 0 0 rgba($foreground, 0.6)}
+        50% {box-shadow: 0 0 0 200px rgba($foreground, 0)}
+        100% {box-shadow: 0 0 0 0 rgba($foreground, 0)}
+    }
+    &.animate{
+        @include animation(pulsable-pulse 1s ease-out infinite);
+    }
 }