@oat-sa/tao-core-ui 1.60.2 → 1.61.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;
+     *
      */
     var defaults = {
       defaultPosition: -1,
@@ -29,18 +29,18 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
       loop: false,
       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) {
@@ -57,30 +57,30 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
       var navigableElements = navigatorConfig.elements || [];
       var lastPosition = -1;
       var 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}
        */
 
       var isNavigableAvailable = function isNavigableAvailable(navigable) {
         return 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}
        */
 
 
       var isNavigableFocused = function isNavigableFocused(navigable) {
         return 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}
        */
 
 
@@ -93,11 +93,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}
        */
 
 
@@ -110,17 +110,17 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
 
         return -1;
       };
-      /**
-       * The navigation group object
-       *
-       * @typedef keyNavigator
+      /**
+       * The navigation group object
+       *
+       * @typedef keyNavigator
        */
 
 
       var keyNavigator = eventifier({
-        /**
-         * Setups the navigator
-         * @returns {keyNavigator}
+        /**
+         * Setups the navigator
+         * @returns {keyNavigator}
          */
         init: function init() {
           var _this = this;
@@ -175,9 +175,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           return this;
         },
 
-        /**
-         * Destroys and cleanup
-         * @returns {keyNavigator}
+        /**
+         * Destroys and cleanup
+         * @returns {keyNavigator}
          */
         destroy: function destroy() {
           var _this2 = this;
@@ -201,42 +201,42 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           return this;
         },
 
-        /**
-         * Gets the navigation group id
-         * @returns {String}
+        /**
+         * Gets the navigation group id
+         * @returns {String}
          */
         getId: function getId() {
           return id;
         },
 
-        /**
-         * Gets the type of navigable element
-         * @returns {String}
+        /**
+         * Gets the type of navigable element
+         * @returns {String}
          */
         getType: function 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: function getElement() {
           return $group;
         },
 
-        /**
-         * Returns the current cursor of the navigator
-         * @returns {Object}
+        /**
+         * Returns the current cursor of the navigator
+         * @returns {Object}
          */
         getCursor: function 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: function getNavigableAt(position) {
           if (position >= 0 && navigableElements[position]) {
@@ -246,10 +246,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: function getCursorAt(position) {
           var navigable = this.getNavigableAt(position);
@@ -259,22 +259,22 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           };
         },
 
-        /**
-         * 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: function setCursorAt(position) {
           if (navigableElements[position]) {
             var cursor = this.getCursorAt(lastPosition);
 
             if (cursor.navigable) {
-              /**
-               * @event blur
-               * @param {Object} cursor
+              /**
+               * @event blur
+               * @param {Object} cursor
                */
               this.trigger('blur', cursor);
             }
@@ -282,9 +282,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
             var direction = position - lastPosition;
             lastPosition = position;
             navigableElements[position].focus(direction);
-            /**
-             * @event focus
-             * @param {Object} cursor
+            /**
+             * @event focus
+             * @param {Object} cursor
              */
 
             this.trigger('focus', this.getCursor());
@@ -293,9 +293,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           return this;
         },
 
-        /**
-         * Returns the current position in the navigator
-         * @returns {Number}
+        /**
+         * Returns the current position in the navigator
+         * @returns {Number}
          */
         getCurrentPosition: function getCurrentPosition() {
           if (document.activeElement) {
@@ -305,9 +305,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: function getCurrentNavigable() {
           var position = this.getCurrentPosition();
@@ -319,17 +319,17 @@ 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: function 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: function isVisible() {
           if (!$group || $group.is(':visible')) {
@@ -341,9 +341,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: function isEnabled() {
           if (!$group || !$group.is(':disabled')) {
@@ -355,9 +355,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: function isFocused() {
           if (document.activeElement) {
@@ -369,30 +369,30 @@ 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: function 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: function 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: function next() {
           var position = this.getCurrentPosition();
@@ -405,17 +405,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');
             }
 
             var cursor = this.getCursor();
-            /**
-             * @event next
-             * @param {Object} cursor
+            /**
+             * @event next
+             * @param {Object} cursor
              */
 
             this.trigger('next', cursor);
@@ -426,12 +426,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: function previous() {
           var position = this.getCurrentPosition();
@@ -444,17 +444,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');
             }
 
             var cursor = this.getCursor();
-            /**
-             * @event previous
-             * @param {Object} cursor
+            /**
+             * @event previous
+             * @param {Object} cursor
              */
 
             this.trigger('previous', cursor);
@@ -465,21 +465,21 @@ 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: function activate(target) {
           var 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);
           }
@@ -487,9 +487,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           return this;
         },
 
-        /**
-         * Blurs the focused element, if any
-         * @returns {keyNavigator}
+        /**
+         * Blurs the focused element, if any
+         * @returns {keyNavigator}
          */
         blur: function blur() {
           var cursor = this.getCursorAt(lastPosition);
@@ -501,13 +501,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: function focus() {
           var 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 */