@sapui5/sap.ushell 1.136.2 → 1.138.0

package/src/main/js/sap/ushell/UIActions.js

@@ -4,105 +4,106 @@ sap.ui.define([
     "sap/ui/core/Element",
     "sap/ui/thirdparty/jquery",
     "sap/base/Log"
-], function (
+], (
     Element,
     jQuery,
     Log
-) {
+) => {
     "use strict";
 
     /**
      * @returns {boolean} true if the current focus is in an input or textarea.
      */
     function isInSelectableArea () {
-        var sTagName = document.activeElement ? document.activeElement.tagName : "";
+        const sTagName = document.activeElement ? document.activeElement.tagName : "";
         return sTagName === "INPUT" || sTagName === "TEXTAREA";
     }
 
-    var UIActions = function (cfg) {
-
+    function UIActions (cfg) {
         if (!cfg || !cfg.rootSelector || !cfg.containerSelector || !cfg.draggableSelector) {
             throw new Error("No configuration object to initialize User Interaction module.");
         }
 
         /* PRIVATE MEMBERS */
-        //TO DO: write optional and mandatory parameters.
-        this.captureStart = null;              // {Function} capture start event X and Y position
-        this.captureMove = null;               // {Function} capture move event X and Y position
-        this.captureEnd = null;                // {Function} capture end event X and Y position
-        this.clickCallback = null;             // {Function} Callback function execute after capture `click` event
-        this.clickEvent = null;                // {string} `click` event
-        this.clickHandler = null;              // {Function} capture click event and prevent the default behaviour on IOS
-        this.clone = null;                     // {Element} cloned draggable element
-        this.cloneClass = null;                // {string} clone CSS Class
-        this.container = null;                 // {Element} content container to be scrolled
-        this.contextMenuEvent = null;          // {string} `contextmenu` event for Windows 8 Chrome
-        this.debug = null;                     // {boolean} for debug mode
-        this.defaultMouseMoveEvent = null;     // {string} `mousemove` event which we need to prevent its default behavior
-        this.deltaTop = 0;                     // (int)  the 'delta' value in px to shift the top position of the clone element
+        // TO DO: write optional and mandatory parameters.
+        this.captureStart = null; // {Function} capture start event X and Y position
+        this.captureMove = null; // {Function} capture move event X and Y position
+        this.captureEnd = null; // {Function} capture end event X and Y position
+        this.clickCallback = null; // {Function} Callback function execute after capture `click` event
+        this.clickEvent = null; // {string} `click` event
+        this.clickHandler = null; // {Function} capture click event and prevent the default behaviour on IOS
+        this.clone = null; // {Element} cloned draggable element
+        this.cloneClass = null; // {string} clone CSS Class
+        this.container = null; // {Element} content container to be scrolled
+        this.contextMenuEvent = null; // {string} `contextmenu` event for Windows 8 Chrome
+        this.debug = null; // {boolean} for debug mode
+        this.defaultMouseMoveEvent = null; // {string} `mousemove` event which we need to prevent its default behavior
+        this.deltaTop = 0; // (int)  the 'delta' value in px to shift the top position of the clone element
         this.disabledDraggableSelector = null; // {string} name of css class to avoid drag (e.g. locked tiles class identifier)
-        this.dragAndScrollCallback = null;     // {Function} Callback function executes while drag mode is active
-        this.dragAndScrollDuration = null;     // {int} Scroll timer duration in ms
-        this.dragAndScrollTimer = null;        // {int} timer ID. Used in drag & scroll animation
-        this.draggable = null;                 // {Array<Element>|NodeList<Element>} list of draggable elements
-        this.placeHolderClass = null;          // {string} placeholder CSS Class
-        this.draggableSelector = null;         // {string} CSS Selector String which specifies the draggable elements
-        this.draggableSelectorExclude = null;  // {string} CSS Selector String which specifies the elements that can not be draggable but can be droppable
-        this.doubleTapCallback = null;         // {Function} Callback function execute when double tap
-        this.doubleTapDelay = null;            // {int} number of milliseconds to recognize double tap
-        this.element = null;                   // {Element} draggable element
-        this.endDragAndScrollCallback = null;  // {Function} Callback function which decides whether to continue with drag and scroll action
-        this.endX = null;                      // {int} X coordinate of end event
-        this.endY = null;                      // {int} Y coordinate of end event
-        this.isLayoutEngine = null;            // {boolean} is layout engine available
-        this.isTouch = null;                   // {boolean} does browser supports touch events
-        this.isCombi = null;                   // {boolean} does browser supports both touch and mouse events
-        this.lastElement = null;               // {Element} last tapped element
-        this.lastTapTime = null;               // {int} number of milliseconds elapsed since last touchstart or mousedown
-        this.lockMode = null;                  // {boolean} if the value is true, preventing change element mode
-        this.log = null;                       // {Function} logs to console in debug mode
-        this.mode = null;                      // {string} current feature mode `normal`, `scroll`, `drag`, `move`
-        this.mouseDownEvent = null;            // {string} 'mousedown'
-        this.mouseMoveEvent = null;            // {string} 'mousemove'
-        this.mouseUpEvent = null;              // {string} 'mouseup'
-        this.moveTolerance = null;             // {int} tolerance in pixels between touchStart/mousedown and touchMove/mousemove
-        this.moveX = null;                     // {int} X coordinate of move event
-        this.moveY = null;                     // {int} Y coordinate of move event
-        this.noop = null;                      // {Function} empty function
+        this.dragAndScrollCallback = null; // {Function} Callback function executes while drag mode is active
+        this.dragAndScrollDuration = null; // {int} Scroll timer duration in ms
+        this.dragAndScrollTimer = null; // {int} timer ID. Used in drag & scroll animation
+        this.draggable = null; // {Array<Element>|NodeList<Element>} list of draggable elements
+        this.placeHolderClass = null; // {string} placeholder CSS Class
+        this.draggableSelector = null; // {string} CSS Selector String which specifies the draggable elements
+        this.draggableSelectorExclude = null; // {string} CSS Selector String which specifies the elements that can not be draggable but can be droppable
+        this.doubleTapCallback = null; // {Function} Callback function execute when double tap
+        this.doubleTapDelay = null; // {int} number of milliseconds to recognize double tap
+        this.element = null; // {Element} draggable element
+        this.endDragAndScrollCallback = null; // {Function} Callback function which decides whether to continue with drag and scroll action
+        this.endX = null; // {int} X coordinate of end event
+        this.endY = null; // {int} Y coordinate of end event
+        this.isLayoutEngine = null; // {boolean} is layout engine available
+        this.isTouch = null; // {boolean} does browser supports touch events
+        this.isCombi = null; // {boolean} does browser supports both touch and mouse events
+        this.lastElement = null; // {Element} last tapped element
+        this.lastTapTime = null; // {int} number of milliseconds elapsed since last touchstart or mousedown
+        this.lockMode = null; // {boolean} if the value is true, preventing change element mode
+        this.log = null; // {Function} logs to console in debug mode
+        this.mode = null; // {string} current feature mode `normal`, `scroll`, `drag`, `move`
+        this.mouseDownEvent = null; // {string} 'mousedown'
+        this.mouseMoveEvent = null; // {string} 'mousemove'
+        this.mouseUpEvent = null; // {string} 'mouseup'
+        this.moveTolerance = null; // {int} tolerance in pixels between touchStart/mousedown and touchMove/mousemove
+        this.moveX = null; // {int} X coordinate of move event
+        this.moveY = null; // {int} Y coordinate of move event
+        this.noop = null; // {Function} empty function
         // {Function} Handler that will be called when drag starts in order to add visual effects. it will be called also for items that are belong to the
         // disabledDraggableSelector, although the drag will be prevented immediately.
         this.onDragStartUIHandler = null;
-        this.onDragEndUIHandler = null;        // {Function} Handler that will be called when drag ends. to revert the drag visual effects.
-        this.preventClickFlag = null;          // {boolean} flag indicates if prevent default click behaviour
-        this.preventClickTimeoutId = null;     // {int}  timer ID. Used to clear click preventing
-        this.scrollContainer = null;           // {Element} the element we would like to transition while drag and scroll
-        this.scrollContainerSelector = null;   // {string} CSS Selector String which specifies the element we would like to transition while drag and scroll
-        this.scrollEvent = null;               // {string} `scroll` event
-        this.scrollTimer = null;               // {int} number of milliseconds elapsed since the last scroll event
-        this.startX = null;                    // {int} X coordinate of start event
-        this.startY = null;                    // {int} Y coordinate of start event
-        this.switchModeDelay = null;           // {int} switch mode delay in ms
-        this.tapsNumber = null;                // {int} the number of taps. could be 0 / 1 / 2
-        this.timer = null;                     // {int} timer ID. Used to decide mode
-        this.scrollHandler = null;             // {Function} scroll event handler
-        this.touchCancelEvent = null;          // {string} `touchcancel` event
-        this.dragCallback = null;              // {Function} Callback function execute when drag mode is active
-        this.onBeforeCreateClone = null;       // {Function} Callback function execute on before clone is created
-        this.endCallback = null;               // {Function} Callback function execute after capture `touchend` or `mouseup` event
-        this.touchEndEvent = null;             // {string} `touchend`
-        this.touchMoveEvent = null;            // {string} `touchmove`
-        this.startCallback = null;             // {Function} Callback function execute after capture `touchstart` or `mousedown` event
-        this.touchStartEvent = null;           // {string} `touchstart`
-        this.wrapper = null;                   // {Element} content container parent
-        this.wrapperRect = null;               // {object} wrapper Bounding Rect
-        this.scrollCallback = null;            // {Function} Callback function when scroll was performed
-        this.draggableElement = null;          // {string} Class which specifies the element that enables drag
-        this.offsetLeft = 0;                   // (int) element left offset
+        this.onDragEndUIHandler = null; // {Function} Handler that will be called when drag ends. to revert the drag visual effects.
+        this.preventClickFlag = null; // {boolean} flag indicates if prevent default click behaviour
+        this.preventClickTimeoutId = null; // {int}  timer ID. Used to clear click preventing
+        this.scrollContainer = null; // {Element} the element we would like to transition while drag and scroll
+        this.scrollContainerSelector = null; // {string} CSS Selector String which specifies the element we would like to transition while drag and scroll
+        this.scrollEvent = null; // {string} `scroll` event
+        this.scrollTimer = null; // {int} number of milliseconds elapsed since the last scroll event
+        this.startX = null; // {int} X coordinate of start event
+        this.startY = null; // {int} Y coordinate of start event
+        this.switchModeDelay = null; // {int} switch mode delay in ms
+        this.tapsNumber = null; // {int} the number of taps. could be 0 / 1 / 2
+        this.timer = null; // {int} timer ID. Used to decide mode
+        this.scrollHandler = null; // {Function} scroll event handler
+        this.touchCancelEvent = null; // {string} `touchcancel` event
+        this.dragCallback = null; // {Function} Callback function execute when drag mode is active
+        this.onBeforeCreateClone = null; // {Function} Callback function execute on before clone is created
+        this.endCallback = null; // {Function} Callback function execute after capture `touchend` or `mouseup` event
+        this.touchEndEvent = null; // {string} `touchend`
+        this.touchMoveEvent = null; // {string} `touchmove`
+        this.startCallback = null; // {Function} Callback function execute after capture `touchstart` or `mousedown` event
+        this.touchStartEvent = null; // {string} `touchstart`
+        this.wrapper = null; // {Element} content container parent
+        this.wrapperRect = null; // {object} wrapper Bounding Rect
+        this.scrollCallback = null; // {Function} Callback function when scroll was performed
+        this.draggableElement = null; // {string} Class which specifies the element that enables drag
+        this.offsetLeft = 0; // (int) element left offset
         this.elementsToCapture = null;
 
         /**
          * Initialize state using configuration
          *
+         * @param {object} cfg configuration object.
+         *
          * @private
          */
         this.init = function (cfg) {
@@ -183,9 +184,9 @@ sap.ui.define([
          * Iterates over array-like object and calls callback function
          * for each item
          *
-         * @param {Array<*>|NodeList|arguments} scope - array-like object
+         * @param {Array<any>|NodeList|arguments} scope - array-like object
          * @param {function} callback - function to be called for each element in scope
-         * @returns {Array<*>|NodeList|Arguments} scope
+         * @returns {Array<any>|NodeList|Arguments} scope
          */
         this.forEach = function (scope, callback) {
             // NodeList and Arguments don't have forEach,
@@ -196,8 +197,8 @@ sap.ui.define([
         /**
          * Returns index of item in array-like object
          *
-         * @param {Array<*>|NodeList|Arguments} scope - array-like object
-         * @param {*} item - item which index to be found
+         * @param {Array<any>|NodeList|Arguments} scope - array-like object
+         * @param {any} item - item which index to be found
          * @returns {int} index of item in the array-like object
          */
         this.indexOf = function (scope, item) {
@@ -209,18 +210,14 @@ sap.ui.define([
         /**
          * Cuts item from array-like object and pastes before reference item
          *
-         * @param {Array<*>|NodeList|Arguments} scope
-         * @param {*} item
-         * @param {*} referenceItem
+         * @param {Array<any>|NodeList|Arguments} scope the scope
+         * @param {any} item the item
+         * @param {any} referenceItem the reference item
          */
         this.insertBefore = function (scope, item, referenceItem) {
-            var itemIndex,
-                referenceItemIndex,
-                splice;
-
-            splice = Array.prototype.splice;
-            itemIndex = this.indexOf(scope, item);
-            referenceItemIndex = this.indexOf(scope, referenceItem);
+            const splice = Array.prototype.splice;
+            const itemIndex = this.indexOf(scope, item);
+            const referenceItemIndex = this.indexOf(scope, referenceItem);
 
             splice.call(
                 scope,
@@ -231,19 +228,19 @@ sap.ui.define([
         };
 
         this.getDraggableElement = function (currentElement) {
-            var element,
-                bIsDraggable = false,
-                bIsExcluded = false;
+            let element;
+            let bIsDraggable = false;
+            let bIsExcluded = false;
 
             this.draggable = jQuery(this.draggableSelector, this.container);
-            //Since we are listening on the root element,
-            //we would like to identify when a draggable element is being touched.
-            //The target element of the event is the lowest element in the DOM hierarchy
-            //where the user touched the screen.
-            //We need to climb in the DOM tree from the target element until we identify the draggable element,
-            //or getting out of container scope.
+            // Since we are listening on the root element,
+            // we would like to identify when a draggable element is being touched.
+            // The target element of the event is the lowest element in the DOM hierarchy
+            // where the user touched the screen.
+            // We need to climb in the DOM tree from the target element until we identify the draggable element,
+            // or getting out of container scope.
             while (typeof element === "undefined" && currentElement !== this.root && !jQuery(currentElement).is(this.draggableSelectorBlocker)) {
-                //Only draggable tiles
+                // Only draggable tiles
                 bIsDraggable = bIsDraggable || jQuery(currentElement).is(this.draggableElement) || this.draggableElement === undefined;
 
                 if (!(jQuery(currentElement).not(this.draggableSelectorExclude).length > 0)) {
@@ -265,7 +262,7 @@ sap.ui.define([
          * @private
          */
         this.captureStart = function (evt) {
-            var eventObj;
+            let eventObj;
 
             if (evt.type === "touchstart" && evt.touches.length === 1) {
                 eventObj = evt.touches[0];
@@ -282,7 +279,7 @@ sap.ui.define([
                 this.startY = this.moveY = eventObj.pageY;
                 this.lastMoveX = 0;
                 this.lastMoveY = 0;
-                //Check if it is a double tap flow or single tap
+                // Check if it is a double tap flow or single tap
                 if (this.lastTapTime && this.lastElement && this.element && (this.lastElement === this.element)
                     && Math.abs(Date.now() - this.lastTapTime) < this.doubleTapDelay) {
                     this.lastTapTime = 0;
@@ -293,13 +290,15 @@ sap.ui.define([
                     this.lastElement = this.element;
                 }
 
-                this.log("captureStart(" + this.startX + ", " + this.startY + ")");
+                this.log(`captureStart(${this.startX}, ${this.startY})`);
             }
         };
 
         /**
          * Handler for `mousedown` or `touchstart`
          *
+         * @param {object} evt the event object.
+         *
          * @private
          */
         this.startHandler = function (evt) {
@@ -319,8 +318,8 @@ sap.ui.define([
                         return;
                     }
                     if (this.isTouch || this.isTouchEvent) {
-                        this.timer = setTimeout(function () {
-                            //In Mobile prevent drag of locked tile
+                        this.timer = setTimeout(() => {
+                            // In Mobile prevent drag of locked tile
                             if (!jQuery(this.element).hasClass(this.disabledDraggableSelector)) {
                                 this.log("mode switched to drag");
                                 this.mode = "drag";
@@ -331,7 +330,7 @@ sap.ui.define([
                                 this.onDragStartUIHandler();
                             }
                             this.isTouchEvent = false;
-                        }.bind(this), this.switchModeDelay);
+                        }, this.switchModeDelay);
                     }
                 }
             }
@@ -344,7 +343,7 @@ sap.ui.define([
          * @private
          */
         this.captureMove = function (evt) {
-            var eventObj;
+            let eventObj;
 
             if (evt.type === "touchmove" && evt.touches.length === 1) {
                 eventObj = evt.touches[0];
@@ -355,25 +354,28 @@ sap.ui.define([
                 this.moveX = eventObj.pageX;
                 this.moveY = eventObj.pageY;
 
-                this.log("captureMove(" + this.moveX + ", " + this.moveY + ")");
+                this.log(`captureMove(${this.moveX}, ${this.moveY})`);
             }
         };
 
         /**
          * Handler for `mousemove` or `touchmove`
          *
+         * @param {Event} evt - mousemove or touchmove event.
+         *
          * @private
          */
         this.moveHandler = function (evt) {
             if (isInSelectableArea()) {
                 return;
             }
-            var isScrolling;
+            let isScrolling;
             this.log("moveHandler");
             this.captureMove(evt);
             if (this.element && evt.type === "mousemove" && evt.buttons === 0) {
                 // mouseup can get lost; cancel dragging if we are in a drag mode but the mouse button is not depressed
-                return this.endHandler(evt);
+                this.endHandler(evt);
+                return;
             }
             switch (this.mode) {
                 case "normal":
@@ -382,7 +384,7 @@ sap.ui.define([
                             this.log("-> normal");
                             clearTimeout(this.timer);
                             delete this.timer;
-                        } else if (this.element) { //In desktop start dragging immediately
+                        } else if (this.element) { // In desktop start dragging immediately
                             this.onDragStartUIHandler();
                             if (!jQuery(this.element).hasClass(this.disabledDraggableSelector)) {
                                 this.log("mode switched to drag");
@@ -390,7 +392,7 @@ sap.ui.define([
                                 this.onBeforeCreateClone(evt, this.element);
                                 this.createClone();
                             } else {
-                                //In case the element has the disable draggable selector, we prevent the drag action and in addition make sure to prevent the click from being executed.
+                                // In case the element has the disable draggable selector, we prevent the drag action and in addition make sure to prevent the click from being executed.
                                 this.preventClick();
                                 this.element = null;
                             }
@@ -448,7 +450,7 @@ sap.ui.define([
          * @private
          */
         this.captureEnd = function (evt) {
-            var eventObj;
+            let eventObj;
 
             if ((evt.type === "touchend" || evt.type === "touchcancel") && (evt.changedTouches.length === 1)) {
                 eventObj = evt.changedTouches[0];
@@ -459,28 +461,27 @@ sap.ui.define([
                 this.endX = eventObj.pageX;
                 this.endY = eventObj.pageY;
 
-                this.log("captureEnd(" + this.endX + ", " + this.endY + ")");
+                this.log(`captureEnd(${this.endX}, ${this.endY})`);
             }
         };
 
         /**
          * Handler for `contextmenu` event. Disable right click on Chrome
          *
+         * @param {object} evt the contextmenu event.
+         *
          * @private
          */
         this.contextMenuHandler = function (evt) {
             if (this.isTouch) {
                 evt.preventDefault();
             }
-
         }.bind(this);
 
         /**
-         *
-         * @param event
+         * @param {object} event the click event.
          */
         this.clickHandler = function (event) {
-
             if (this.preventClickFlag) {
                 this.preventClickFlag = false;
                 event.preventDefault();
@@ -489,7 +490,6 @@ sap.ui.define([
                 clearTimeout(this.preventClickTimeoutId);
             }
             this.clickCallback();
-
         }.bind(this);
 
         /**
@@ -497,23 +497,25 @@ sap.ui.define([
          */
         this.preventClick = function () {
             this.preventClickFlag = true;
-            this.preventClickTimeoutId = setTimeout(function () {
+            this.preventClickTimeoutId = setTimeout(() => {
                 this.preventClickFlag = false;
-            }.bind(this), 100);
+            }, 100);
         };
 
         this.endCallbackAdapter = function (evt, element, optional) {
-            var endResult = this.endCallback.apply(null, arguments);
-            jQuery.when(endResult).then(function () {
+            const endResult = this.endCallback.apply(null, arguments);
+            jQuery.when(endResult).then(() => {
                 this.removeClone(element, optional.clone);
                 this.onDragEndUIHandler(evt);
-            }.bind(this));
+            });
             this.preventClick();
         };
 
         /**
          * Handler for `mouseup` or `touchend`
          *
+         * @param {object} evt the event object.
+         *
          * @private
          */
         this.endHandler = function (evt) {
@@ -565,10 +567,10 @@ sap.ui.define([
         this.scrollHandler = function () {
             clearTimeout(this.scrollTimer);
             this.lockMode = true;
-            //release the scroll lock after 100 ms
-            this.scrollTimer = setTimeout(function () {
+            // release the scroll lock after 100 ms
+            this.scrollTimer = setTimeout(() => {
                 this.lockMode = false;
-            }.bind(this), 500);
+            }, 500);
         }.bind(this);
 
         /**
@@ -577,8 +579,7 @@ sap.ui.define([
          * @private
          */
         this.createClone = function () {
-            var style,
-                rect;
+            let rect;
 
             this.preventClickFlag = true;
             if (Element.getElementById(this.element.id) && Element.getElementById(this.element.id).getBoundingRects) {
@@ -592,14 +593,14 @@ sap.ui.define([
             this.clone = this.element.cloneNode(true);
             this.clone.removeAttribute("id");
             this.clone.removeAttribute("data-sap-ui");
-            this.clone.className += (" " + this.cloneClass);
-            this.element.className += (" " + this.placeHolderClass);
-            style = this.clone.style;
+            this.clone.className += (` ${this.cloneClass}`);
+            this.element.className += (` ${this.placeHolderClass}`);
+            const style = this.clone.style;
             style.position = "fixed";
             style.display = "block";
-            style.top = (rect.top + this.deltaTop) + "px";
-            style.left = rect.left + "px";
-            style.width = rect.width + "px";
+            style.top = `${rect.top + this.deltaTop}px`;
+            style.left = `${rect.left}px`;
+            style.width = `${rect.width}px`;
             style.zIndex = "100";
             this.root.appendChild(this.clone);
             this.log("createClone");
@@ -608,11 +609,14 @@ sap.ui.define([
         /**
          * Remove clone of draggable element
          *
+         * @param {HTMLElement} element the draggable element.
+         * @param {HTMLElement} clone the clone of the draggable element.
+         *
          * @private
          */
         this.removeClone = function (element, clone) {
             this.preventClick();
-            element.className = element.className.split(" " + this.placeHolderClass).join(" ");
+            element.className = element.className.split(` ${this.placeHolderClass}`).join(" ");
             clone.parentElement.removeChild(clone);
             // unset reference to DOM element of the clone, otherwise it will remain DOM fragment
             this.log("removeClone");
@@ -624,44 +628,42 @@ sap.ui.define([
          * @private
          */
         this.translateClone = function () {
-            var deltaX,
-                deltaY;
-
-            deltaX = this.moveX - this.startX;
-            deltaY = this.moveY - this.startY;
-            this.clone.style.webkitTransform = "translate3d(" + deltaX + "px, " + deltaY + "px, 0px)";
-            this.clone.style.mozTransform = "translate3d(" + deltaX + "px, " + deltaY + "px, 0px)";
-            //IE9 contains only 2-D transform
-            this.clone.style.msTransform = "translate(" + deltaX + "px, " + deltaY + "px)";
-            this.clone.style.transform = "translate3d(" + deltaX + "px, " + deltaY + "px, 0px)";
-
-            this.log("translateClone (" + deltaX + ", " + deltaY + ")");
+            const deltaX = this.moveX - this.startX;
+            const deltaY = this.moveY - this.startY;
+            this.clone.style.webkitTransform = `translate3d(${deltaX}px, ${deltaY}px, 0px)`;
+            this.clone.style.mozTransform = `translate3d(${deltaX}px, ${deltaY}px, 0px)`;
+            // IE9 contains only 2-D transform
+            this.clone.style.msTransform = `translate(${deltaX}px, ${deltaY}px)`;
+            this.clone.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0px)`;
+
+            this.log(`translateClone (${deltaX}, ${deltaY})`);
         };
 
         /**
          * Scroll while dragging if needed
          *
+         * @returns {boolean} whether the scrolling is possible.
          * @private
          */
         this.dragAndScroll = function () {
-            var
+            let
                 /**
                  * Indicates how much pixels of draggable element are overflowing in a vertical axis.
                  * When deltaY is negative - content should be scrolled down,
                  * when deltaY is positive - content should be scrolled up,
                  * when deltaY is zero - content should not be scrolled
                  */
-                deltaY,
+                deltaY;
                 /**
                  * Duration of scrolling animation in milliseconds.
                  * Greater value makes scroll faster, lower values - smoother
                  */
-                duration,
-                that = this;
+            let duration;
+            const that = this;
 
             function getDeltaY () {
-                var rect,
-                    delta;
+                let rect;
+                let delta;
 
                 if (that.clone) {
                     rect = that.clone.getBoundingClientRect();
@@ -685,18 +687,18 @@ sap.ui.define([
                 if (that.endDragAndScrollCallback(that.moveY)) {
                     return false;
                 }
-                //Down
+                // Down
                 if (deltaY < 0) {
-                    //Calculate the difference between (document - wrapper) and (difference between : document - wrapper + container height + wrapper height )
+                    // Calculate the difference between (document - wrapper) and (difference between : document - wrapper + container height + wrapper height )
                     return that.wrapper.getBoundingClientRect().top - (that.container.getBoundingClientRect().top + that.container.offsetHeight) + that.wrapper.offsetHeight < 0;
                 }
-                //Up
-                //Calculate the difference between (document - wrapper) and (document - container + container.top)
+                // Up
+                // Calculate the difference between (document - wrapper) and (document - container + container.top)
                 return that.container.getBoundingClientRect().top - (that.wrapper.getBoundingClientRect().top + that.container.offsetTop) < 0;
             }
 
             function start () {
-                that.dragAndScrollTimer = setTimeout(function () {
+                that.dragAndScrollTimer = setTimeout(() => {
                     that.wrapper.scrollTop -= deltaY;
                     that.dragAndScrollTimer = undefined;
                     if ((deltaY = getDeltaY()) !== 0 && isScrollPossible()) {
@@ -709,23 +711,23 @@ sap.ui.define([
             deltaY = getDeltaY();
             if (deltaY !== 0 && !this.dragAndScrollTimer && isScrollPossible()) {
                 duration = this.dragAndScrollDuration;
-                //in IE when reaching the drag and scroll we lose the ref to this.scrollContainer
+                // in IE when reaching the drag and scroll we lose the ref to this.scrollContainer
                 this.scrollContainer = this.scrollContainer || document.querySelector(this.scrollContainerSelector);
                 start();
             }
 
-            this.log("dragAndScroll (" + deltaY + ")");
+            this.log(`dragAndScroll (${deltaY})`);
 
-            return (deltaY != 0) && isScrollPossible();
+            return (deltaY !== 0) && isScrollPossible();
         };
 
         this.moveDraggableVerticalOnly = function () {
-            var hoverElement,
-                isVerticalIntersection,
-                rect,
-                movedElementPositionAboveMiddle = true;
+            let hoverElement;
+            let isVerticalIntersection;
+            let rect;
+            let movedElementPositionAboveMiddle = true;
 
-            this.forEach(this.draggable, function (item, index) {
+            this.forEach(this.draggable, (item, index) => {
                 // There is no way to break native forEach,
                 // so just speed it up using fast check
                 // before executing expensive DOM manipulations
@@ -742,13 +744,12 @@ sap.ui.define([
                         }
                     }
                 }
-            }.bind(this));
+            });
             if (hoverElement && this.element !== hoverElement) {
                 // Reorder draggable elements
                 if (movedElementPositionAboveMiddle) {
                     this.insertBefore(this.draggable, this.element, hoverElement);
                     hoverElement.parentNode.insertBefore(this.element, hoverElement);
-
                 } else {
                     this.insertBefore(this.draggable, this.element, hoverElement.nextSibling);
                     hoverElement.parentNode.insertBefore(this.element, hoverElement.nextSibling);
@@ -756,7 +757,6 @@ sap.ui.define([
 
                 this.lastMoveX = this.moveX;
                 this.lastMoveY = this.moveY;
-
             }
 
             this.log("moveDraggableVerticalOnly");
@@ -766,23 +766,26 @@ sap.ui.define([
          * Move draggable element forward and backward
          * across another draggable elements
          *
+         * @param {int} moveX The X coordinate of the element's current position
+         * @param {int} moveY The Y coordinate of the element's current position
+         *
          * @private
          */
         this.moveDraggable = function (moveX, moveY) {
-            var elementIndex,
-                hoverElement,
-                hoverElementIndex,
-                isHorizontalIntersection,
-                isVerticalIntersection,
-                rect;
-
-            this.forEach(this.draggable, function (item, index) {
+            let elementIndex;
+            let hoverElement;
+            let hoverElementIndex;
+            let isHorizontalIntersection;
+            let isVerticalIntersection;
+            let rect;
+
+            this.forEach(this.draggable, (item, index) => {
                 // There is no way to break native forEach,
                 // so just speed it up using fast check
                 // before executing expensive DOM manipulations
                 if (!hoverElement) {
                     rect = item.getBoundingClientRect();
-                    //style = window.getComputedStyle(item);
+                    // style = window.getComputedStyle(item);
                     isHorizontalIntersection = !(rect.right < this.moveX || rect.left > this.moveX);
                     isVerticalIntersection = !(rect.bottom < this.moveY || rect.top > this.moveY);
                     if (isHorizontalIntersection && isVerticalIntersection) {
@@ -790,12 +793,12 @@ sap.ui.define([
                         hoverElementIndex = index;
                     }
                 }
-            }.bind(this));
+            });
 
             if (hoverElement && this.element !== hoverElement) {
                 // Reorder draggable elements
                 elementIndex = this.indexOf(this.draggable, this.element);
-                //Check if there was enough movement in order to mover the element
+                // Check if there was enough movement in order to mover the element
                 if (Math.abs(this.lastMoveX - this.moveX) >= this.moveTolerance || Math.abs(this.lastMoveY - this.moveY) >= this.moveTolerance) {
                     if (hoverElementIndex <= elementIndex) {
                         hoverElement.parentNode.insertBefore(this.element, hoverElement);
@@ -823,25 +826,24 @@ sap.ui.define([
          */
         this.enable = function () {
             this.log("enable");
-            //Touch Events
+            // Touch Events
             this.root.addEventListener(this.touchMoveEvent, this.moveHandler, true);
-            //Mouse Events
+            // Mouse Events
             this.root.addEventListener(this.mouseMoveEvent, this.moveHandler, true);
-            //Additional Events
+            // Additional Events
             this.root.addEventListener(this.contextMenuEvent, this.contextMenuHandler, false);
             this.root.addEventListener(this.clickEvent, this.clickHandler, true);
             this.root.addEventListener(this.defaultMouseMoveEvent, this.defaultMouseMoveHandler, true);
             this.wrapper.addEventListener(this.scrollEvent, this.scrollHandler, false);
-            //Add event listeners for custom draggable selectors for floating container
+            // Add event listeners for custom draggable selectors for floating container
             if (this.elementsToCapture.length) {
-                var that = this;
+                const that = this;
                 this.elementsToCapture.each(function () {
                     this.addEventListener(that.touchStartEvent, that.startHandler, false);
                     this.addEventListener(that.touchEndEvent, that.endHandler, false);
                     this.addEventListener(that.touchCancelEvent, that.endHandler, false);
                     this.addEventListener(that.mouseDownEvent, that.startHandler, false);
                     this.addEventListener(that.mouseUpEvent, that.endHandler, false);
-
                 });
             } else {
                 this.elementsToCapture.addEventListener(this.touchStartEvent, this.startHandler, false);
@@ -884,14 +886,13 @@ sap.ui.define([
         this.disable = function () {
             this.log("disable");
             if (this.elementsToCapture.length) {
-                var that = this;
+                const that = this;
                 this.elementsToCapture.each(function () {
                     this.removeEventListener(that.touchStartEvent, that.startHandler, false);
                     this.removeEventListener(that.touchEndEvent, that.endHandler, false);
                     this.removeEventListener(that.touchCancelEvent, that.endHandler, false);
                     this.removeEventListener(that.mouseDownEvent, that.startHandler, false);
                     this.removeEventListener(that.mouseUpEvent, that.endHandler, false);
-
                 });
             } else {
                 this.elementsToCapture.removeEventListener(this.touchStartEvent, this.startHandler, false);
@@ -926,12 +927,12 @@ sap.ui.define([
 
         /**
          * @public
-         * @returns {{x: moveX, y: moveY}}
+         * @returns {object} the x and y coordinate.
          */
         this.getMove = function () {
             return { x: this.moveX, y: this.moveY };
         };
-    };
+    }
 
     return UIActions;
 }, /* bExport= */ false);