@oat-sa/tao-core-ui 1.58.1 → 1.58.2

package/dist/keyNavigation/navigableDomElement.js

@@ -23,14 +23,14 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
      * Copyright (c) 2017-2020 (original work) Open Assessment Technologies SA;
      *
      */
-    const navigableCls = 'key-navigation-highlight';
-    const eventNS = '.ui-key-navigator';
+    var navigableCls = 'key-navigation-highlight';
+    var eventNS = '.ui-key-navigator';
     /**
      * The list of mandatory methods a navigable element must expose.
      * @type {String[]}
      */
 
-    const navigableApi = ['init', 'destroy', 'getType', 'getElement', 'isVisible', 'isEnabled', 'isFocused', 'blur', 'focus'];
+    var navigableApi = ['init', 'destroy', 'getType', 'getElement', 'isVisible', 'isEnabled', 'isFocused', 'blur', 'focus'];
     /**
      * From a dom element, create a navigable element compatible with ui/KeyNavigator/navigator
      * @param {String|Element|jQuery} element
@@ -41,9 +41,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
      */
 
     function navigableDomElement(element) {
-      const $element = $(element);
-      const shortcuts = shortcutRegistry($element);
-      let initialTabIndex = null;
+      var $element = $(element);
+      var shortcuts = shortcutRegistry($element);
+      var initialTabIndex = null;
       /**
        * @typedef navigableDomElement
        */
@@ -54,21 +54,25 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
          * @param {Boolean} propagateTab - allows the key event to propagate when the Tab key is pressed.
          * @returns {navigableDomElement}
          */
-        init() {
-          let {
-            propagateTab = false
-          } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        init: function init() {
+          var _this = this;
 
-          const keyboard = (key, el) => {
+          var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+              _ref$propagateTab = _ref.propagateTab,
+              propagateTab = _ref$propagateTab === void 0 ? false : _ref$propagateTab;
+
+          var keyboard = function keyboard(key, el) {
             /**
              * @event key
              * @param {String} key
              * @param {Element} el
              */
-            this.trigger('key', key, el);
+            _this.trigger('key', key, el);
           };
 
-          const isInput = $el => $el.is(':text,textarea');
+          var isInput = function isInput($el) {
+            return $el.is(':text,textarea');
+          };
 
           if (!$element.length) {
             throw new TypeError('dom element does not exist');
@@ -76,21 +80,21 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
 
           initialTabIndex = $element.attr('tabindex'); // add a tabindex to enable focusing, this tabindex is not actually used in tabbing order
 
-          $element.addClass(navigableCls).attr('tabindex', -1).on(`focus${eventNS}`, e => {
+          $element.addClass(navigableCls).attr('tabindex', -1).on("focus".concat(eventNS), function (e) {
             /**
              * @event focus
              * @param {Element} el
              */
-            this.trigger('focus', e.target);
-          }).on(`blur${eventNS}`, e => {
+            _this.trigger('focus', e.target);
+          }).on("blur".concat(eventNS), function (e) {
             /**
              * @event blur
              * @param {Element} el
              */
-            this.trigger('blur', e.target);
+            _this.trigger('blur', e.target);
           }) // requires a keyup event to make unselecting radio button work with space bar
-          .on(`keyup${eventNS}`, e => {
-            const keyCode = e.keyCode ? e.keyCode : e.charCode;
+          .on("keyup".concat(eventNS), function (e) {
+            var keyCode = e.keyCode ? e.keyCode : e.charCode;
 
             if (keyCode === 32) {
               // if the inner element is an input we let the space work
@@ -103,11 +107,13 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
             }
           }); // init standard key bindings
 
-          shortcuts.clear().add('tab shift+tab', (e, key) => keyboard(key, e.target), {
+          shortcuts.clear().add('tab shift+tab', function (e, key) {
+            return keyboard(key, e.target);
+          }, {
             propagate: !!propagateTab,
             prevent: true
-          }).add('up down left right', (e, key) => {
-            const $target = $(e.target);
+          }).add('up down left right', function (e, key) {
+            var $target = $(e.target);
 
             if (!isInput($target)) {
               if (!$target.is('img') && !$target.hasClass('key-navigation-scrollable') && !($target.hasClass('key-navigation-scrollable-up') && (key === 'up' || key === 'left')) && !($target.hasClass('key-navigation-scrollable-down') && (key === 'down' || key === 'right'))) {
@@ -119,7 +125,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
             }
           }, {
             propagate: false
-          }).add('enter', e => {
+          }).add('enter', function (e) {
             if (!isInput($(e.target))) {
               if (!e.target.classList.contains('key-navigation-actionable')) {
                 //prevent activating the element when typing a text
@@ -138,7 +144,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
          * Destroys the navigableDomElement instance
          * @returns {navigableDomElement}
          */
-        destroy() {
+        destroy: function destroy() {
           $element.removeClass(navigableCls).off(eventNS);
 
           if (initialTabIndex || initialTabIndex === 0) {
@@ -160,7 +166,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
          * Gets the type of navigable element
          * @returns {String}
          */
-        getType() {
+        getType: function getType() {
           return 'element';
         },
 
@@ -168,7 +174,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
          * Gets the dom element
          * @returns {jQuery}
          */
-        getElement() {
+        getElement: function getElement() {
           return $element;
         },
 
@@ -176,7 +182,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
          * Checks if the navigable element is visible
          * @returns {Boolean}
          */
-        isVisible() {
+        isVisible: function isVisible() {
           return $element.is(':visible');
         },
 
@@ -184,7 +190,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
          * Checks if the navigable element is enabled
          * @returns {Boolean}
          */
-        isEnabled() {
+        isEnabled: function isEnabled() {
           return !$element.is(':disabled');
         },
 
@@ -192,8 +198,8 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
          * Checks if the navigable element is focused
          * @returns {Boolean}
          */
-        isFocused() {
-          const el = $element.get(0);
+        isFocused: function isFocused() {
+          var el = $element.get(0);
           return document.activeElement && el === document.activeElement;
         },
 
@@ -201,7 +207,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
          * Removes the focus from the navigable element
          * @returns {navigableDomElement}
          */
-        blur() {
+        blur: function blur() {
           $element.blur();
           return this;
         },
@@ -210,11 +216,10 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
          * Sets the focus on the navigable element
          * @returns {navigableDomElement}
          */
-        focus() {
+        focus: function focus() {
           $element.focus();
           return this;
         }
-
       });
     }
     /**
@@ -223,14 +228,18 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
      * @returns {Array}
      */
 
-    navigableDomElement.createFromDoms = $elements => {
-      const list = [];
+    navigableDomElement.createFromDoms = function ($elements) {
+      var list = [];
 
-      const addElement = element => list.push(navigableDomElement(element));
+      var addElement = function addElement(element) {
+        return list.push(navigableDomElement(element));
+      };
 
       if ($elements) {
         if ($elements instanceof $) {
-          $elements.each((i, element) => addElement(element));
+          $elements.each(function (i, element) {
+            return addElement(element);
+          });
         } else {
           _.forEach($elements, addElement);
         }
@@ -246,7 +255,11 @@ define(['jquery', 'lodash', 'core/eventifier', 'util/shortcut/registry'], functi
      */
 
 
-    navigableDomElement.isNavigableElement = navigable => !!navigable && navigableApi.every(n => 'function' === typeof navigable[n]);
+    navigableDomElement.isNavigableElement = function (navigable) {
+      return !!navigable && navigableApi.every(function (n) {
+        return 'function' === typeof navigable[n];
+      });
+    };
 
     return navigableDomElement;
 

package/dist/keyNavigation/navigator.js

@@ -23,7 +23,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
      * Copyright (c) 2017-2020 (original work) Open Assessment Technologies SA;
      *
      */
-    const defaults = {
+    var defaults = {
       defaultPosition: -1,
       keepState: false,
       loop: false,
@@ -44,26 +44,28 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
      */
 
     function keyNavigatorFactory(config) {
-      const navigatorConfig = Object.assign({}, defaults, config || {});
+      var navigatorConfig = Object.assign({}, defaults, config || {});
 
-      const id = navigatorConfig.id || _.uniqueId('navigator_');
+      var id = navigatorConfig.id || _.uniqueId('navigator_');
 
-      const $group = navigatorConfig.group && $(navigatorConfig.group).addClass('key-navigation-group').attr('data-navigation-id', id);
+      var $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');
       }
 
-      const navigableElements = navigatorConfig.elements || [];
-      let lastPosition = -1;
-      let focusOutObserver;
+      var navigableElements = navigatorConfig.elements || [];
+      var lastPosition = -1;
+      var 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
@@ -71,7 +73,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
        */
 
 
-      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
        *
@@ -80,8 +84,8 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
        */
 
 
-      const getClosestPositionRight = fromPosition => {
-        for (let pos = fromPosition; pos < navigableElements.length; pos++) {
+      var getClosestPositionRight = function getClosestPositionRight(fromPosition) {
+        for (var pos = fromPosition; pos < navigableElements.length; pos++) {
           if (isNavigableAvailable(navigableElements[pos])) {
             return pos;
           }
@@ -97,8 +101,8 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
        */
 
 
-      const getClosestPositionLeft = fromPosition => {
-        for (let pos = fromPosition; pos >= 0; pos--) {
+      var getClosestPositionLeft = function getClosestPositionLeft(fromPosition) {
+        for (var pos = fromPosition; pos >= 0; pos--) {
           if (isNavigableAvailable(navigableElements[pos])) {
             return pos;
           }
@@ -113,29 +117,31 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
        */
 
 
-      const keyNavigator = eventifier({
+      var keyNavigator = eventifier({
         /**
          * Setups the navigator
          * @returns {keyNavigator}
          */
-        init() {
+        init: function init() {
+          var _this = this;
+
           if ($group) {
             //add the focusin and focus out class for group highlighting
-            $group.on(`focusin.${this.getId()}`, () => {
-              if (this.isFocused()) {
+            $group.on("focusin.".concat(this.getId()), function () {
+              if (_this.isFocused()) {
                 $group.addClass('focusin');
               }
-            }).on(`focusout.${this.getId()}`, () => {
-              if (!this.isFocused()) {
+            }).on("focusout.".concat(this.getId()), function () {
+              if (!_this.isFocused()) {
                 $group.removeClass('focusin');
               }
             });
-            focusOutObserver = new MutationObserver(() => {
-              if (!this.isVisible() && $group.hasClass('focusin')) {
+            focusOutObserver = new MutationObserver(function () {
+              if (!_this.isVisible() && $group.hasClass('focusin')) {
                 $group.removeClass('focusin');
               }
             });
-            $group.each(index => {
+            $group.each(function (index) {
               focusOutObserver.observe($group.get(index), {
                 childList: true,
                 subtree: true
@@ -143,7 +149,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
             });
           }
 
-          navigableElements.forEach(navigable => {
+          navigableElements.forEach(function (navigable) {
             if (!navigableDomElement.isNavigableElement(navigable)) {
               throw new TypeError('not a valid navigable element');
             }
@@ -154,13 +160,15 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
               });
             }
 
-            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);
+            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);
 
               if (cursor.navigable) {
-                this.trigger('blur', cursor);
+                _this.trigger('blur', cursor);
               }
             });
           });
@@ -171,17 +179,19 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Destroys and cleanup
          * @returns {keyNavigator}
          */
-        destroy() {
+        destroy: function destroy() {
+          var _this2 = this;
+
           if ($group) {
-            $group.off(`.${this.getId()}`).removeClass('focusin');
+            $group.off(".".concat(this.getId())).removeClass('focusin');
           }
 
           if (focusOutObserver) {
             focusOutObserver.disconnect();
           }
 
-          navigableElements.forEach(navigable => {
-            navigable.off(`.${this.getId}`);
+          navigableElements.forEach(function (navigable) {
+            navigable.off(".".concat(_this2.getId));
 
             if (navigable.getType() === 'element') {
               navigable.destroy();
@@ -195,7 +205,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Gets the navigation group id
          * @returns {String}
          */
-        getId() {
+        getId: function getId() {
           return id;
         },
 
@@ -203,7 +213,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Gets the type of navigable element
          * @returns {String}
          */
-        getType() {
+        getType: function getType() {
           return 'navigator';
         },
 
@@ -211,7 +221,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Gets the defined group the navigator group belongs to
          * @returns {jQuery}
          */
-        getElement() {
+        getElement: function getElement() {
           return $group;
         },
 
@@ -219,7 +229,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Returns the current cursor of the navigator
          * @returns {Object}
          */
-        getCursor() {
+        getCursor: function getCursor() {
           return this.getCursorAt(this.getCurrentPosition());
         },
 
@@ -228,7 +238,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * @param {Number} position
          * @returns {navigableDomElement}
          */
-        getNavigableAt(position) {
+        getNavigableAt: function getNavigableAt(position) {
           if (position >= 0 && navigableElements[position]) {
             return navigableElements[position];
           }
@@ -241,11 +251,11 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * @param {Number} position
          * @returns {Object}
          */
-        getCursorAt(position) {
-          const navigable = this.getNavigableAt(position);
+        getCursorAt: function getCursorAt(position) {
+          var navigable = this.getNavigableAt(position);
           return {
             position: navigable ? position : -1,
-            navigable
+            navigable: navigable
           };
         },
 
@@ -257,9 +267,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * @fires blur on the previous cursor
          * @fires focus on the new cursor
          */
-        setCursorAt(position) {
+        setCursorAt: function setCursorAt(position) {
           if (navigableElements[position]) {
-            const cursor = this.getCursorAt(lastPosition);
+            var cursor = this.getCursorAt(lastPosition);
 
             if (cursor.navigable) {
               /**
@@ -269,7 +279,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
               this.trigger('blur', cursor);
             }
 
-            const direction = position - lastPosition;
+            var direction = position - lastPosition;
             lastPosition = position;
             navigableElements[position].focus(direction);
             /**
@@ -287,7 +297,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Returns the current position in the navigator
          * @returns {Number}
          */
-        getCurrentPosition() {
+        getCurrentPosition: function getCurrentPosition() {
           if (document.activeElement) {
             return _.findIndex(navigableElements, isNavigableFocused);
           }
@@ -299,8 +309,8 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Returns the current navigable in the navigator
          * @returns {Object}
          */
-        getCurrentNavigable() {
-          const position = this.getCurrentPosition();
+        getCurrentNavigable: function getCurrentNavigable() {
+          var position = this.getCurrentPosition();
 
           if (position >= 0) {
             return navigableElements[position];
@@ -313,7 +323,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Returns the array of navigable objects composing the navigator
          * @returns {Array}
          */
-        getNavigableElements() {
+        getNavigableElements: function getNavigableElements() {
           return navigableElements.slice();
         },
 
@@ -321,9 +331,11 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Checks if the group and at least one navigable element is visible
          * @returns {boolean}
          */
-        isVisible() {
+        isVisible: function isVisible() {
           if (!$group || $group.is(':visible')) {
-            return navigableElements.some(navigable => navigable.isVisible());
+            return navigableElements.some(function (navigable) {
+              return navigable.isVisible();
+            });
           }
 
           return false;
@@ -333,9 +345,11 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Checks if the group and at least one navigable element is enabled
          * @returns {Boolean}
          */
-        isEnabled() {
+        isEnabled: function isEnabled() {
           if (!$group || !$group.is(':disabled')) {
-            return navigableElements.some(navigable => navigable.isEnabled());
+            return navigableElements.some(function (navigable) {
+              return navigable.isEnabled();
+            });
           }
 
           return false;
@@ -345,9 +359,11 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Checks if at least one navigable element is focused
          * @returns {Boolean}
          */
-        isFocused() {
+        isFocused: function isFocused() {
           if (document.activeElement) {
-            return navigableElements.some(navigable => navigable.isFocused());
+            return navigableElements.some(function (navigable) {
+              return navigable.isFocused();
+            });
           }
 
           return false;
@@ -357,7 +373,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Sets the focus on the first available focusable element
          * @returns {keyNavigator}
          */
-        first() {
+        first: function first() {
           this.setCursorAt(getClosestPositionRight(0));
           return this;
         },
@@ -366,7 +382,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Sets the focus on the last available focusable element
          * @returns {keyNavigator}
          */
-        last() {
+        last: function last() {
           this.setCursorAt(getClosestPositionLeft(navigableElements.length - 1));
           return this;
         },
@@ -378,8 +394,8 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * @fires upperbound when we cannot move further
          * @fires next when the cursor successfully moved to the next position
          */
-        next() {
-          let position = this.getCurrentPosition();
+        next: function next() {
+          var position = this.getCurrentPosition();
 
           if (position >= 0) {
             position = getClosestPositionRight(position + 1);
@@ -396,7 +412,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
               this.trigger('upperbound');
             }
 
-            const cursor = this.getCursor();
+            var cursor = this.getCursor();
             /**
              * @event next
              * @param {Object} cursor
@@ -417,8 +433,8 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * @fires lowerbound when we cannot move lower
          * @fires previous when the cursor successfully moved to the previous position
          */
-        previous() {
-          let position = this.getCurrentPosition();
+        previous: function previous() {
+          var position = this.getCurrentPosition();
 
           if (position >= 0) {
             position = getClosestPositionLeft(position - 1);
@@ -435,7 +451,7 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
               this.trigger('lowerbound');
             }
 
-            const cursor = this.getCursor();
+            var cursor = this.getCursor();
             /**
              * @event previous
              * @param {Object} cursor
@@ -456,8 +472,8 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * @returns {keyNavigator}
          * @fires activate
          */
-        activate(target) {
-          const cursor = this.getCursor();
+        activate: function activate(target) {
+          var cursor = this.getCursor();
 
           if (cursor.navigable) {
             /**
@@ -475,8 +491,8 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          * Blurs the focused element, if any
          * @returns {keyNavigator}
          */
-        blur() {
-          const cursor = this.getCursorAt(lastPosition);
+        blur: function blur() {
+          var cursor = this.getCursorAt(lastPosition);
 
           if (cursor.navigable) {
             cursor.navigable.blur();
@@ -493,9 +509,9 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
          *                                 A negative direction will lead to the last focusable element.
          * @returns {keyNavigator}
          */
-        focus() {
-          let direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-          let position = -1; // try to get the default position
+        focus: function focus() {
+          var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+          var position = -1; // try to get the default position
 
           if (navigatorConfig.keepState && this.getNavigableAt(lastPosition)) {
             position = lastPosition;
@@ -523,9 +539,8 @@ define(['jquery', 'lodash', 'core/eventifier', 'ui/keyNavigation/navigableDomEle
           this.setCursorAt(getClosestPositionRight(position));
           return this;
         }
-
       });
-      return keyNavigator.init().on('key', (key, el) => {
+      return keyNavigator.init().on('key', function (key, el) {
         if (key === 'space' || key === 'enter') {
           keyNavigator.activate(el);
         } else {