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

package/dist/keyNavigation/navigator.js

@@ -5,194 +5,166 @@ 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 = {
+    const defaults = {
       defaultPosition: -1,
       keepState: false,
       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) {
-      var navigatorConfig = Object.assign({}, defaults, config || {});
-
-      var id = navigatorConfig.id || _.uniqueId('navigator_');
-
-      var $group = navigatorConfig.group && $(navigatorConfig.group).addClass('key-navigation-group').attr('data-navigation-id', id);
-
+      const navigatorConfig = Object.assign({}, defaults, config || {});
+      const id = navigatorConfig.id || _.uniqueId('navigator_');
+      const $group = navigatorConfig.group && $(navigatorConfig.group).addClass('key-navigation-group').attr('data-navigation-id', id);
       if (navigatorConfig.group && (!$group.length || !$.contains(document.body, $group.get(0)))) {
         throw new TypeError('group element does not exist');
       }
-
-      var navigableElements = navigatorConfig.elements || [];
-      var lastPosition = -1;
-      var focusOutObserver;
-      /**
-       * Checks if the navigable element is available
-       * @param {navigableDomElement} navigable
-       * @returns {Boolean}
+      const navigableElements = navigatorConfig.elements || [];
+      let lastPosition = -1;
+      let focusOutObserver;
+
+      /**
+       * Checks if the navigable element is available
+       * @param {navigableDomElement} navigable
+       * @returns {Boolean}
        */
+      const isNavigableAvailable = navigable => navigable && navigable.isVisible() && navigable.isEnabled();
 
-      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}
        */
+      const isNavigableFocused = navigable => isNavigableAvailable(navigable) && navigable.isFocused();
 
-
-      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}
        */
-
-
-      var getClosestPositionRight = function getClosestPositionRight(fromPosition) {
-        for (var pos = fromPosition; pos < navigableElements.length; pos++) {
+      const getClosestPositionRight = fromPosition => {
+        for (let pos = fromPosition; pos < navigableElements.length; pos++) {
           if (isNavigableAvailable(navigableElements[pos])) {
             return pos;
           }
         }
-
         return -1;
       };
-      /**
-       * Gets the closest allowed position to the left
-       *
-       * @param {Number} fromPosition - the starting position
-       * @returns {Number}
-       */
 
-
-      var getClosestPositionLeft = function getClosestPositionLeft(fromPosition) {
-        for (var pos = fromPosition; pos >= 0; pos--) {
+      /**
+       * 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--) {
           if (isNavigableAvailable(navigableElements[pos])) {
             return pos;
           }
         }
-
         return -1;
       };
-      /**
-       * The navigation group object
-       *
-       * @typedef keyNavigator
-       */
-
 
-      var keyNavigator = eventifier({
-        /**
-         * Setups the navigator
-         * @returns {keyNavigator}
+      /**
+       * The navigation group object
+       *
+       * @typedef keyNavigator
+       */
+      const keyNavigator = eventifier({
+        /**
+         * Setups the navigator
+         * @returns {keyNavigator}
          */
-        init: function init() {
-          var _this = this;
-
+        init() {
           if ($group) {
             //add the focusin and focus out class for group highlighting
-            $group.on("focusin.".concat(this.getId()), function () {
-              if (_this.isFocused()) {
+            $group.on(`focusin.${this.getId()}`, () => {
+              if (this.isFocused()) {
                 $group.addClass('focusin');
               }
-            }).on("focusout.".concat(this.getId()), function () {
-              if (!_this.isFocused()) {
+            }).on(`focusout.${this.getId()}`, () => {
+              if (!this.isFocused()) {
                 $group.removeClass('focusin');
               }
             });
-            focusOutObserver = new MutationObserver(function () {
-              if (!_this.isVisible() && $group.hasClass('focusin')) {
+            focusOutObserver = new MutationObserver(() => {
+              if (!this.isVisible() && $group.hasClass('focusin')) {
                 $group.removeClass('focusin');
               }
             });
-            $group.each(function (index) {
+            $group.each(index => {
               focusOutObserver.observe($group.get(index), {
                 childList: true,
                 subtree: true
               });
             });
           }
-
-          navigableElements.forEach(function (navigable) {
+          navigableElements.forEach(navigable => {
             if (!navigableDomElement.isNavigableElement(navigable)) {
               throw new TypeError('not a valid navigable element');
             }
-
             if (navigable.getType() === 'element') {
               navigable.init({
                 propagateTab: navigatorConfig.propagateTab
               });
             }
-
-            navigable.off(".".concat(_this.getId())).on("key.".concat(_this.getId()), function (key, el) {
-              return _this.trigger('key', key, el);
-            }).on("focus.".concat(_this.getId()), function () {
-              lastPosition = _this.getCurrentPosition();
-            }).on("blur.".concat(_this.getId()), function () {
-              var cursor = _this.getCursorAt(lastPosition);
-
+            navigable.off(`.${this.getId()}`).on(`key.${this.getId()}`, (key, el) => this.trigger('key', key, el)).on(`focus.${this.getId()}`, () => {
+              lastPosition = this.getCurrentPosition();
+            }).on(`blur.${this.getId()}`, () => {
+              const cursor = this.getCursorAt(lastPosition);
               if (cursor.navigable) {
-                _this.trigger('blur', cursor);
+                this.trigger('blur', cursor);
               }
             });
           });
           return this;
         },
-
-        /**
-         * Destroys and cleanup
-         * @returns {keyNavigator}
+        /**
+         * Destroys and cleanup
+         * @returns {keyNavigator}
          */
-        destroy: function destroy() {
-          var _this2 = this;
-
+        destroy() {
           if ($group) {
-            $group.off(".".concat(this.getId())).removeClass('focusin');
+            $group.off(`.${this.getId()}`).removeClass('focusin');
           }
-
           if (focusOutObserver) {
             focusOutObserver.disconnect();
           }
-
-          navigableElements.forEach(function (navigable) {
-            navigable.off(".".concat(_this2.getId));
-
+          navigableElements.forEach(navigable => {
+            navigable.off(`.${this.getId}`);
             if (navigable.getType() === 'element') {
               navigable.destroy();
             }
@@ -200,324 +172,276 @@ 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: function getId() {
+        getId() {
           return id;
         },
-
-        /**
-         * Gets the type of navigable element
-         * @returns {String}
+        /**
+         * Gets the type of navigable element
+         * @returns {String}
          */
-        getType: function getType() {
+        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() {
+        getElement() {
           return $group;
         },
-
-        /**
-         * Returns the current cursor of the navigator
-         * @returns {Object}
+        /**
+         * Returns the current cursor of the navigator
+         * @returns {Object}
          */
-        getCursor: function getCursor() {
+        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) {
+        getNavigableAt(position) {
           if (position >= 0 && navigableElements[position]) {
             return navigableElements[position];
           }
-
           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);
+        getCursorAt(position) {
+          const navigable = this.getNavigableAt(position);
           return {
             position: navigable ? position : -1,
-            navigable: navigable
+            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: function setCursorAt(position) {
+        setCursorAt(position) {
           if (navigableElements[position]) {
-            var cursor = this.getCursorAt(lastPosition);
-
+            const cursor = this.getCursorAt(lastPosition);
             if (cursor.navigable) {
-              /**
-               * @event blur
-               * @param {Object} cursor
+              /**
+               * @event blur
+               * @param {Object} cursor
                */
               this.trigger('blur', cursor);
             }
-
-            var direction = position - lastPosition;
+            const direction = position - lastPosition;
             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: function getCurrentPosition() {
+        getCurrentPosition() {
           if (document.activeElement) {
             return _.findIndex(navigableElements, isNavigableFocused);
           }
-
           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();
-
+        getCurrentNavigable() {
+          const position = this.getCurrentPosition();
           if (position >= 0) {
             return navigableElements[position];
           }
-
           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() {
+        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() {
+        isVisible() {
           if (!$group || $group.is(':visible')) {
-            return navigableElements.some(function (navigable) {
-              return navigable.isVisible();
-            });
+            return navigableElements.some(navigable => navigable.isVisible());
           }
-
           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() {
+        isEnabled() {
           if (!$group || !$group.is(':disabled')) {
-            return navigableElements.some(function (navigable) {
-              return navigable.isEnabled();
-            });
+            return navigableElements.some(navigable => navigable.isEnabled());
           }
-
           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() {
+        isFocused() {
           if (document.activeElement) {
-            return navigableElements.some(function (navigable) {
-              return navigable.isFocused();
-            });
+            return navigableElements.some(navigable => navigable.isFocused());
           }
-
           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() {
+        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() {
+        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();
-
+        next() {
+          let position = this.getCurrentPosition();
           if (position >= 0) {
             position = getClosestPositionRight(position + 1);
-
             if (position >= 0) {
               this.setCursorAt(position);
             } 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();
 
-            var cursor = this.getCursor();
-            /**
-             * @event next
-             * @param {Object} cursor
+            /**
+             * @event next
+             * @param {Object} cursor
              */
-
             this.trigger('next', cursor);
           } else {
             this.first();
           }
-
           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();
-
+        previous() {
+          let position = this.getCurrentPosition();
           if (position >= 0) {
             position = getClosestPositionLeft(position - 1);
-
             if (position >= 0) {
               this.setCursorAt(position);
             } 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();
 
-            var cursor = this.getCursor();
-            /**
-             * @event previous
-             * @param {Object} cursor
+            /**
+             * @event previous
+             * @param {Object} cursor
              */
-
             this.trigger('previous', cursor);
           } else {
             this.first();
           }
-
           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();
-
+        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: function blur() {
-          var cursor = this.getCursorAt(lastPosition);
-
+        blur() {
+          const cursor = this.getCursorAt(lastPosition);
           if (cursor.navigable) {
             cursor.navigable.blur();
           }
-
           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;
-          var position = -1; // try to get the default position
+        focus() {
+          let direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+          let position = -1;
 
+          // try to get the default position
           if (navigatorConfig.keepState && this.getNavigableAt(lastPosition)) {
             position = lastPosition;
           } else {
             lastPosition = -1;
-
             if ('undefined' !== typeof navigatorConfig.defaultPosition) {
               if (_.isFunction(navigatorConfig.defaultPosition)) {
                 position = navigatorConfig.defaultPosition(this.getNavigableElements(), direction);
@@ -525,9 +449,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
                 position = navigatorConfig.defaultPosition;
               }
             }
-          } // select the default position with respect to the movement direction
-
+          }
 
+          // select the default position with respect to the movement direction
           if (position === -1) {
             if (direction < 0) {
               position = getClosestPositionLeft(navigableElements.length - 1);
@@ -535,12 +459,11 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
               position = 0;
             }
           }
-
           this.setCursorAt(getClosestPositionRight(position));
           return this;
         }
       });
-      return keyNavigator.init().on('key', function (key, el) {
+      return keyNavigator.init().on('key', (key, el) => {
         if (key === 'space' || key === 'enter') {
           keyNavigator.activate(el);
         } else {