@oat-sa/tao-core-ui 1.64.2 → 1.65.0

package/dist/keyNavigation/navigator.js

@@ -5,23 +5,23 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
     eventifier = eventifier && Object.prototype.hasOwnProperty.call(eventifier, 'default') ? eventifier['default'] : eventifier;
     navigableDomElement = navigableDomElement && Object.prototype.hasOwnProperty.call(navigableDomElement, 'default') ? navigableDomElement['default'] : navigableDomElement;
 
-    /*
-     * 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-2020 (original work) Open Assessment Technologies SA;
-     *
+    /*
+     * 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-2020 (original work) Open Assessment Technologies SA;
+     *
      */
     const defaults = {
       defaultPosition: -1,
@@ -30,18 +30,18 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
       propagateTab: true
     };
 
-    /**
-     * Create a keyNavigator
-     *
-     * @param config - the config
-     * @param {String} config.id - global unique id to define this group
-     * @param {jQuery} config.elements - the group of element to be keyboard-navigated
-     * @param {jQuery} [config.group] - the container the group of elements belong to
-     * @param {Number|Function} [config.defaultPosition=0] - the default position the group should set the focus on (could be a function to compute the position)
-     * @param {Boolean} [config.keepState=false] - define if the position should be saved in memory after the group blurs and re-focuses
-     * @param {Boolean} [config.loop=false] - define if the navigation should loop after reaching the last or the first element
-     * @param {Boolean} [config.propagateTab=true] - allows the key event to propagate when the Tab key is pressed.
-     * @returns {keyNavigator}
+    /**
+     * Create a keyNavigator
+     *
+     * @param config - the config
+     * @param {String} config.id - global unique id to define this group
+     * @param {jQuery} config.elements - the group of element to be keyboard-navigated
+     * @param {jQuery} [config.group] - the container the group of elements belong to
+     * @param {Number|Function} [config.defaultPosition=0] - the default position the group should set the focus on (could be a function to compute the position)
+     * @param {Boolean} [config.keepState=false] - define if the position should be saved in memory after the group blurs and re-focuses
+     * @param {Boolean} [config.loop=false] - define if the navigation should loop after reaching the last or the first element
+     * @param {Boolean} [config.propagateTab=true] - allows the key event to propagate when the Tab key is pressed.
+     * @returns {keyNavigator}
      */
     function keyNavigatorFactory(config) {
       const navigatorConfig = Object.assign({}, defaults, config || {});
@@ -54,25 +54,25 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
       let lastPosition = -1;
       let focusOutObserver;
 
-      /**
-       * Checks if the navigable element is available
-       * @param {navigableDomElement} navigable
-       * @returns {Boolean}
+      /**
+       * Checks if the navigable element is available
+       * @param {navigableDomElement} navigable
+       * @returns {Boolean}
        */
       const isNavigableAvailable = navigable => navigable && navigable.isVisible() && navigable.isEnabled();
 
-      /**
-       * Checks if the navigable element is focused
-       * @param {navigableDomElement} navigable
-       * @returns {Boolean}
+      /**
+       * Checks if the navigable element is focused
+       * @param {navigableDomElement} navigable
+       * @returns {Boolean}
        */
       const isNavigableFocused = navigable => isNavigableAvailable(navigable) && navigable.isFocused();
 
-      /**
-       * Gets the closest allowed position to the right
-       *
-       * @param {Number} fromPosition - the starting position
-       * @returns {Number}
+      /**
+       * Gets the closest allowed position to the right
+       *
+       * @param {Number} fromPosition - the starting position
+       * @returns {Number}
        */
       const getClosestPositionRight = fromPosition => {
         for (let pos = fromPosition; pos < navigableElements.length; pos++) {
@@ -83,11 +83,11 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
         return -1;
       };
 
-      /**
-       * Gets the closest allowed position to the left
-       *
-       * @param {Number} fromPosition - the starting position
-       * @returns {Number}
+      /**
+       * Gets the closest allowed position to the left
+       *
+       * @param {Number} fromPosition - the starting position
+       * @returns {Number}
        */
       const getClosestPositionLeft = fromPosition => {
         for (let pos = fromPosition; pos >= 0; pos--) {
@@ -98,15 +98,15 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
         return -1;
       };
 
-      /**
-       * The navigation group object
-       *
-       * @typedef keyNavigator
+      /**
+       * The navigation group object
+       *
+       * @typedef keyNavigator
        */
       const keyNavigator = eventifier({
-        /**
-         * Setups the navigator
-         * @returns {keyNavigator}
+        /**
+         * Setups the navigator
+         * @returns {keyNavigator}
          */
         init() {
           if ($group) {
@@ -152,9 +152,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           });
           return this;
         },
-        /**
-         * Destroys and cleanup
-         * @returns {keyNavigator}
+        /**
+         * Destroys and cleanup
+         * @returns {keyNavigator}
          */
         destroy() {
           if ($group) {
@@ -172,38 +172,38 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           lastPosition = -1;
           return this;
         },
-        /**
-         * Gets the navigation group id
-         * @returns {String}
+        /**
+         * Gets the navigation group id
+         * @returns {String}
          */
         getId() {
           return id;
         },
-        /**
-         * Gets the type of navigable element
-         * @returns {String}
+        /**
+         * Gets the type of navigable element
+         * @returns {String}
          */
         getType() {
           return 'navigator';
         },
-        /**
-         * Gets the defined group the navigator group belongs to
-         * @returns {jQuery}
+        /**
+         * Gets the defined group the navigator group belongs to
+         * @returns {jQuery}
          */
         getElement() {
           return $group;
         },
-        /**
-         * Returns the current cursor of the navigator
-         * @returns {Object}
+        /**
+         * Returns the current cursor of the navigator
+         * @returns {Object}
          */
         getCursor() {
           return this.getCursorAt(this.getCurrentPosition());
         },
-        /**
-         * Gets a navigable at a given position
-         * @param {Number} position
-         * @returns {navigableDomElement}
+        /**
+         * Gets a navigable at a given position
+         * @param {Number} position
+         * @returns {navigableDomElement}
          */
         getNavigableAt(position) {
           if (position >= 0 && navigableElements[position]) {
@@ -211,10 +211,10 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           }
           return null;
         },
-        /**
-         * Gets the cursor at a given position
-         * @param {Number} position
-         * @returns {Object}
+        /**
+         * Gets the cursor at a given position
+         * @param {Number} position
+         * @returns {Object}
          */
         getCursorAt(position) {
           const navigable = this.getNavigableAt(position);
@@ -223,21 +223,21 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
             navigable
           };
         },
-        /**
-         * Sets the focus to the element at the given position
-         *
-         * @param {Number} position
-         * @returns {keyNavigator}
-         * @fires blur on the previous cursor
-         * @fires focus on the new cursor
+        /**
+         * Sets the focus to the element at the given position
+         *
+         * @param {Number} position
+         * @returns {keyNavigator}
+         * @fires blur on the previous cursor
+         * @fires focus on the new cursor
          */
         setCursorAt(position) {
           if (navigableElements[position]) {
             const cursor = this.getCursorAt(lastPosition);
             if (cursor.navigable) {
-              /**
-               * @event blur
-               * @param {Object} cursor
+              /**
+               * @event blur
+               * @param {Object} cursor
                */
               this.trigger('blur', cursor);
             }
@@ -245,17 +245,17 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
             lastPosition = position;
             navigableElements[position].focus(direction);
 
-            /**
-             * @event focus
-             * @param {Object} cursor
+            /**
+             * @event focus
+             * @param {Object} cursor
              */
             this.trigger('focus', this.getCursor());
           }
           return this;
         },
-        /**
-         * Returns the current position in the navigator
-         * @returns {Number}
+        /**
+         * Returns the current position in the navigator
+         * @returns {Number}
          */
         getCurrentPosition() {
           if (document.activeElement) {
@@ -263,9 +263,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           }
           return -1;
         },
-        /**
-         * Returns the current navigable in the navigator
-         * @returns {Object}
+        /**
+         * Returns the current navigable in the navigator
+         * @returns {Object}
          */
         getCurrentNavigable() {
           const position = this.getCurrentPosition();
@@ -274,16 +274,16 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           }
           return null;
         },
-        /**
-         * Returns the array of navigable objects composing the navigator
-         * @returns {Array}
+        /**
+         * Returns the array of navigable objects composing the navigator
+         * @returns {Array}
          */
         getNavigableElements() {
           return navigableElements.slice();
         },
-        /**
-         * Checks if the group and at least one navigable element is visible
-         * @returns {boolean}
+        /**
+         * Checks if the group and at least one navigable element is visible
+         * @returns {boolean}
          */
         isVisible() {
           if (!$group || $group.is(':visible')) {
@@ -291,9 +291,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           }
           return false;
         },
-        /**
-         * Checks if the group and at least one navigable element is enabled
-         * @returns {Boolean}
+        /**
+         * Checks if the group and at least one navigable element is enabled
+         * @returns {Boolean}
          */
         isEnabled() {
           if (!$group || !$group.is(':disabled')) {
@@ -301,9 +301,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           }
           return false;
         },
-        /**
-         * Checks if at least one navigable element is focused
-         * @returns {Boolean}
+        /**
+         * Checks if at least one navigable element is focused
+         * @returns {Boolean}
          */
         isFocused() {
           if (document.activeElement) {
@@ -311,28 +311,28 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           }
           return false;
         },
-        /**
-         * Sets the focus on the first available focusable element
-         * @returns {keyNavigator}
+        /**
+         * Sets the focus on the first available focusable element
+         * @returns {keyNavigator}
          */
         first() {
           this.setCursorAt(getClosestPositionRight(0));
           return this;
         },
-        /**
-         * Sets the focus on the last available focusable element
-         * @returns {keyNavigator}
+        /**
+         * Sets the focus on the last available focusable element
+         * @returns {keyNavigator}
          */
         last() {
           this.setCursorAt(getClosestPositionLeft(navigableElements.length - 1));
           return this;
         },
-        /**
-         * Moves the cursor to the next position
-         *
-         * @returns {keyNavigator}
-         * @fires upperbound when we cannot move further
-         * @fires next when the cursor successfully moved to the next position
+        /**
+         * Moves the cursor to the next position
+         *
+         * @returns {keyNavigator}
+         * @fires upperbound when we cannot move further
+         * @fires next when the cursor successfully moved to the next position
          */
         next() {
           let position = this.getCurrentPosition();
@@ -343,17 +343,17 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
             } else if (navigatorConfig.loop) {
               this.first();
             } else {
-              /**
-               * reaching the end of the list
-               * @event upperbound
+              /**
+               * reaching the end of the list
+               * @event upperbound
                */
               this.trigger('upperbound');
             }
             const cursor = this.getCursor();
 
-            /**
-             * @event next
-             * @param {Object} cursor
+            /**
+             * @event next
+             * @param {Object} cursor
              */
             this.trigger('next', cursor);
           } else {
@@ -361,12 +361,12 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           }
           return this;
         },
-        /**
-         * Moves the cursor to the previous position
-         *
-         * @returns {keyNavigator}
-         * @fires lowerbound when we cannot move lower
-         * @fires previous when the cursor successfully moved to the previous position
+        /**
+         * Moves the cursor to the previous position
+         *
+         * @returns {keyNavigator}
+         * @fires lowerbound when we cannot move lower
+         * @fires previous when the cursor successfully moved to the previous position
          */
         previous() {
           let position = this.getCurrentPosition();
@@ -377,17 +377,17 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
             } else if (navigatorConfig.loop) {
               this.last();
             } else {
-              /**
-               * reaching the end of the list
-               * @event lowerbound
+              /**
+               * reaching the end of the list
+               * @event lowerbound
                */
               this.trigger('lowerbound');
             }
             const cursor = this.getCursor();
 
-            /**
-             * @event previous
-             * @param {Object} cursor
+            /**
+             * @event previous
+             * @param {Object} cursor
              */
             this.trigger('previous', cursor);
           } else {
@@ -395,28 +395,28 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           }
           return this;
         },
-        /**
-         * Activates the focused element, if any
-         *
-         * @param {Object} target
-         * @returns {keyNavigator}
-         * @fires activate
+        /**
+         * Activates the focused element, if any
+         *
+         * @param {Object} target
+         * @returns {keyNavigator}
+         * @fires activate
          */
         activate(target) {
           const cursor = this.getCursor();
           if (cursor.navigable) {
-            /**
-             * @event activate
-             * @param {Object} cursor
-             * @param {Object} target
+            /**
+             * @event activate
+             * @param {Object} cursor
+             * @param {Object} target
              */
             this.trigger('activate', cursor, target);
           }
           return this;
         },
-        /**
-         * Blurs the focused element, if any
-         * @returns {keyNavigator}
+        /**
+         * Blurs the focused element, if any
+         * @returns {keyNavigator}
          */
         blur() {
           const cursor = this.getCursorAt(lastPosition);
@@ -425,13 +425,13 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           }
           return this;
         },
-        /**
-         * Sets the focus to the current element
-         * @param {Number} [direction=1] - The direction that lead to this navigator.
-         *                                 This will condition which element to focus if there is no default.
-         *                                 A positive direction (or null) will lead to the first focusable element.
-         *                                 A negative direction will lead to the last focusable element.
-         * @returns {keyNavigator}
+        /**
+         * Sets the focus to the current element
+         * @param {Number} [direction=1] - The direction that lead to this navigator.
+         *                                 This will condition which element to focus if there is no default.
+         *                                 A positive direction (or null) will lead to the first focusable element.
+         *                                 A negative direction will lead to the last focusable element.
+         * @returns {keyNavigator}
          */
         focus() {
           let direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;

package/dist/listbox/css/listbox.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 */
@@ -126,5 +126,5 @@ Usage:
 .listbox.empty .loading, .listbox.empty .list, .listbox.empty .available-list {
     display: none;
 }
-
+
 /*# sourceMappingURL=listbox.css.map */