@sapui5/sap.ushell 1.136.2 → 1.138.0

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

@@ -12,7 +12,7 @@ sap.ui.define([
     "sap/ui/thirdparty/jquery",
     "sap/ushell/Config",
     "sap/ushell/Container"
-], function (
+], (
     Localization,
     Extend,
     Device,
@@ -21,12 +21,12 @@ sap.ui.define([
     jQuery,
     Config,
     Container
-) {
+) => {
     "use strict";
 
-    var CollisionModule = function (settings) {
+    function CollisionModule (settings) {
         this.init(settings);
-    };
+    }
 
     CollisionModule.prototype = {
         settings: null,
@@ -62,7 +62,7 @@ sap.ui.define([
             this.currentGroup = null;
             this.groupsList = null;
             this.allGroups = null;
-            //setting contains thisLayout property
+            // setting contains thisLayout property
             this.settings = this.settings || settings;
             Extend(this, this.settings);
             this.tileWidth = this.thisLayout.styleInfo.tileWidth;
@@ -83,8 +83,8 @@ sap.ui.define([
         },
 
         moveDraggable: function (moveX, moveY, aTabBarItemsLocation) {
-            var oCollision = this.getCollisionObject(moveX, moveY, aTabBarItemsLocation);
-            var bNeedsPlaceHolder;
+            const oCollision = this.getCollisionObject(moveX, moveY, aTabBarItemsLocation);
+            let bNeedsPlaceHolder;
             if (oCollision) {
                 this._toggleAnchorItemHighlighting(false);
                 if (oCollision.collidedObjectType !== "TabBar") {
@@ -156,7 +156,7 @@ sap.ui.define([
         },
 
         saveLinkBoundingRects: function (elLink) {
-            var oLink = Element.getElementById(elLink.getAttribute("id"));
+            const oLink = Element.getElementById(elLink.getAttribute("id"));
             this.draggedLinkBoundingRects = oLink.getBoundingRects();
         },
 
@@ -164,15 +164,15 @@ sap.ui.define([
             // The reason behind the numbers of left adjustment and right adjustment is that the total distance between links is 22px, but the division to left and right is like
             // that because the space taken by marker is not equal on the left and right side and this is in order to place the marker properly with the first link in a row.
             // For RTL the numbers are different because of the different offsets.
-            var oFirstLineModeContainerBoundingClientRect = oContainer.getDomRef().getElementsByClassName("sapUshellLineModeContainer")[0].getBoundingClientRect();
-            var nContainerLeftOffset = oFirstLineModeContainerBoundingClientRect.left;
-            var nContainerTopOffset = oFirstLineModeContainerBoundingClientRect.top;
-            var nRightAdjustment = this.rightToLeft ? 20 : -1;
-            var nLeftAdjustment = this.rightToLeft ? 42 : 21;
-            var right = aRects[aRects.length - 1].offset.x - nContainerLeftOffset + aRects[aRects.length - 1].width - nRightAdjustment;
-            var left = aRects[this.rightToLeft ? aRects.length - 1 : 0].offset.x - nContainerLeftOffset - nLeftAdjustment;
-            var topLeft = aRects[this.rightToLeft ? aRects.length - 1 : 0].offset.y - nContainerTopOffset;
-            var topRight = aRects[this.rightToLeft ? 0 : aRects.length - 1].offset.y - nContainerTopOffset;
+            const oFirstLineModeContainerBoundingClientRect = oContainer.getDomRef().getElementsByClassName("sapUshellLineModeContainer")[0].getBoundingClientRect();
+            const nContainerLeftOffset = oFirstLineModeContainerBoundingClientRect.left;
+            const nContainerTopOffset = oFirstLineModeContainerBoundingClientRect.top;
+            const nRightAdjustment = this.rightToLeft ? 20 : -1;
+            const nLeftAdjustment = this.rightToLeft ? 42 : 21;
+            let right = aRects[aRects.length - 1].offset.x - nContainerLeftOffset + aRects[aRects.length - 1].width - nRightAdjustment;
+            let left = aRects[this.rightToLeft ? aRects.length - 1 : 0].offset.x - nContainerLeftOffset - nLeftAdjustment;
+            let topLeft = aRects[this.rightToLeft ? aRects.length - 1 : 0].offset.y - nContainerTopOffset;
+            let topRight = aRects[this.rightToLeft ? 0 : aRects.length - 1].offset.y - nContainerTopOffset;
 
             if (document.body.classList.contains("sapUiSizeCompact")) {
                 topLeft -= 6;
@@ -197,30 +197,29 @@ sap.ui.define([
         },
 
         _changeLinkPlaceholder: function (oLink, oContainer) {
-            var oCurrentLinkBoundingRect = this.aLinksBoundingRects[oLink.link.getId()];
-            var left = oCurrentLinkBoundingRect.left;
-            var topLeft = oCurrentLinkBoundingRect.topLeft;
-            var topRight = oCurrentLinkBoundingRect.topRight;
-            var right = oCurrentLinkBoundingRect.right;
+            const oCurrentLinkBoundingRect = this.aLinksBoundingRects[oLink.link.getId()];
+            const left = oCurrentLinkBoundingRect.left;
+            const topLeft = oCurrentLinkBoundingRect.topLeft;
+            const topRight = oCurrentLinkBoundingRect.topRight;
+            const right = oCurrentLinkBoundingRect.right;
 
             if (!oContainer.getDomRef().querySelector("#sapUshellLinkDropMarker")) {
                 this._removeLinkDropMarker();
-                var oInnerContainer = oContainer.getDomRef().getElementsByClassName("sapUshellLinksInnerContainer")[0];
+                const oInnerContainer = oContainer.getDomRef().getElementsByClassName("sapUshellLinksInnerContainer")[0];
                 jQuery(oInnerContainer).prepend(this.LinkDropMarker);
             }
-            this.LinkDropMarker.style.left = (oLink.leftSide ? left : right) + "px";
-            this.LinkDropMarker.style.top = (oLink.leftSide ? topLeft : topRight) + "px";
+            this.LinkDropMarker.style.left = `${oLink.leftSide ? left : right}px`;
+            this.LinkDropMarker.style.top = `${oLink.leftSide ? topLeft : topRight}px`;
             this.isLinkMarkerShown = true;
         },
 
         showTilePlaceholder: function (currentGroup, bTileChangedGroup, bTilesToLinks) {
-            var tiles;
-            var row = this.curTouchMatrixCords.row;
-            var column = this.curTouchMatrixCords.column;
+            const row = this.curTouchMatrixCords.row;
+            const column = this.curTouchMatrixCords.column;
             this.domRef = this.item.getDomRef() ? this.item.getDomRef() : this.domRef;
             this.domRef.style.display = "";
             this.removeExcludedElementsFromMatrix(this.aExcludedControlClass);
-            tiles = this.tiles || this.thisLayout.getGroupTiles(this.endGroup).slice(0);
+            const tiles = this.tiles || this.thisLayout.getGroupTiles(this.endGroup).slice(0);
             if (this.matrix[row] && typeof this.matrix[row][column] === "object") {
                 this.handleMatrixCollision(tiles, currentGroup, bTileChangedGroup, bTilesToLinks);
                 return;
@@ -231,7 +230,7 @@ sap.ui.define([
         removeTilePlaceholder: function () {
             this.domRef = this.item.getDomRef() || this.domRef;
 
-            var currentHostTiles = this.thisLayout.getGroupTiles(this.currentGroup);
+            let currentHostTiles = this.thisLayout.getGroupTiles(this.currentGroup);
             currentHostTiles = currentHostTiles.slice(0);
             if (this.startArea !== "links" && currentHostTiles.indexOf(this.item) > -1) {
                 currentHostTiles.splice(currentHostTiles.indexOf(this.item), 1);
@@ -241,15 +240,15 @@ sap.ui.define([
             }
 
             this.thisLayout.initGroupDragMode(this.endGroup);
-            var currentGroupMatrix = this.thisLayout.organizeGroup(currentHostTiles);
+            const currentGroupMatrix = this.thisLayout.organizeGroup(currentHostTiles);
             this.thisLayout.renderLayoutGroup(this.currentGroup, currentGroupMatrix);
         },
 
         handlePlaceholderChange: function () {
-            var currentGroup = this.currentGroup;
-            var bTileChangedGroup = (this.endGroup !== this.currentGroup);
-            var bTilesToLinks = this.endAreaChanged && this.endArea === "links";
-            var bIsTabBarGroupSwitched = this.thisLayout.isTabBarActive() && this.groupSwitched;
+            const currentGroup = this.currentGroup;
+            const bTileChangedGroup = (this.endGroup !== this.currentGroup);
+            const bTilesToLinks = this.endAreaChanged && this.endArea === "links";
+            const bIsTabBarGroupSwitched = this.thisLayout.isTabBarActive() && this.groupSwitched;
 
             this.tiles = this.thisLayout.getGroupTiles(this.endGroup).slice(0);
             this.matrix = this.thisLayout.organizeGroup(this.tiles);
@@ -270,9 +269,9 @@ sap.ui.define([
         },
 
         handleMatrixCollision: function (tiles, currentGroup, bTileChangedGroup, bTilesToLinks) {
-            var replacedTile = this.matrix[this.curTouchMatrixCords.row][this.curTouchMatrixCords.column];
-            var replacedTileIndex = tiles.indexOf(replacedTile);
-            var currentTileIndex = tiles.indexOf(this.item);
+            let replacedTile = this.matrix[this.curTouchMatrixCords.row][this.curTouchMatrixCords.column];
+            const replacedTileIndex = tiles.indexOf(replacedTile);
+            const currentTileIndex = tiles.indexOf(this.item);
 
             if (this.rightToLeft) {
                 this.collisionLeft = !this.collisionLeft;
@@ -288,7 +287,7 @@ sap.ui.define([
                 this._handleTileReplace(tiles, currentGroup);
                 return;
             }
-            var newTilesOrder = this.changeTilesOrder(this.item, replacedTile, tiles, this.matrix);
+            const newTilesOrder = this.changeTilesOrder(this.item, replacedTile, tiles, this.matrix);
             if (newTilesOrder && !this.isLinkMarkerShown) {
                 this._handleTileReplace(newTilesOrder, currentGroup);
             }
@@ -304,32 +303,32 @@ sap.ui.define([
             }
             this.currentGroup = this.endGroup;
 
-            var currentTiles = this.thisLayout.getGroupTiles(currentGroup);
+            const currentTiles = this.thisLayout.getGroupTiles(currentGroup);
             this.thisLayout.initGroupDragMode(this.endGroup);
-            var currentMatrix = this.thisLayout.organizeGroup(currentTiles);
+            const currentMatrix = this.thisLayout.organizeGroup(currentTiles);
             this.thisLayout.renderLayoutGroup(currentGroup, currentMatrix);
         },
 
         _handleMoveOutOfBorders: function (tiles, currentGroup) {
-            var maxTile = this.findTileToPlaceAfter(this.matrix, tiles);
-            if (tiles[maxTile + 1] == this.item) {
+            const maxTile = this.findTileToPlaceAfter(this.matrix, tiles);
+            if (tiles[maxTile + 1] === this.item) {
                 return;
             }
 
-            var replacedTile;
+            let replacedTile;
             if (tiles[maxTile + 1]) {
                 replacedTile = tiles[maxTile + 1];
             } else if (this.currentGroup.getShowPlaceholder()) {
                 replacedTile = tiles[0];
             }
-            var newTilesOrder = this.changeTilesOrder(this.item, replacedTile, tiles, this.matrix);
+            const newTilesOrder = this.changeTilesOrder(this.item, replacedTile, tiles, this.matrix);
             if (newTilesOrder) {
                 this._handleTileReplace(newTilesOrder, currentGroup);
             }
         },
 
         _handleChangedGroup: function (currentGroup) {
-            var currentHostTiles = this.thisLayout.getGroupTiles(this.currentGroup);
+            let currentHostTiles = this.thisLayout.getGroupTiles(this.currentGroup);
             if (this.currentGroup === this.startGroup && (this.startArea === "tiles" || this.intersectedLinkPlaceHolder)) {
                 currentHostTiles = currentHostTiles.slice(0);
                 if (currentHostTiles.indexOf(this.item) > -1) {
@@ -340,7 +339,7 @@ sap.ui.define([
             if (this.startGroup === this.endGroup && this.startArea === "tiles") {
                 this.tiles.splice(this.tiles.indexOf(this.item), 1);
             }
-            var oItemDomRef = this.item.getDomRef() || this.domRef;
+            const oItemDomRef = this.item.getDomRef() || this.domRef;
             if (this.startArea === "links" && !this.intersectedLinkPlaceHolder) {
                 this.switchLinkWithClone(this.item);
             }
@@ -353,7 +352,7 @@ sap.ui.define([
             this.currentGroup = this.endGroup;
 
             this.thisLayout.initGroupDragMode(this.endGroup);
-            var currentGroupMatrix = this.thisLayout.organizeGroup(currentHostTiles);
+            const currentGroupMatrix = this.thisLayout.organizeGroup(currentHostTiles);
             this.thisLayout.renderLayoutGroup(currentGroup, currentGroupMatrix);
         },
 
@@ -366,21 +365,21 @@ sap.ui.define([
         },
 
         _getIntersectedLink: function (collidedGroup, moveX, moveY) {
-            var elLink = document.getElementsByClassName("sapUshellLinkTile")[0];
+            const elLink = document.getElementsByClassName("sapUshellLinkTile")[0];
 
             if (!elLink) {
                 return;
             }
-            var collidedGroupRect = collidedGroup.getDomRef().querySelector(".sapUshellLineModeContainer").getBoundingClientRect();
-            var bCozyLayout = !document.body.classList.contains("sapUiSizeCompact");
+            const collidedGroupRect = collidedGroup.getDomRef().querySelector(".sapUshellLineModeContainer").getBoundingClientRect();
+            const bCozyLayout = !document.body.classList.contains("sapUiSizeCompact");
             // the reason for devision in 31 is related to link height - which is 34, then each link overlaps with its neighbours by 3px
             // so the absolute height needed to calculate the intersected link is 31, with cozy layout the height is 48 (45 after reducing the overlap)
-            var nRow = Math.floor((moveY - collidedGroupRect.top) / (bCozyLayout ? 45 : 31));
-            var aCollidedLinkAreas = this.collidedLinkAreas[collidedGroup.getId()];
-            var column;
+            let nRow = Math.floor((moveY - collidedGroupRect.top) / (bCozyLayout ? 45 : 31));
+            const aCollidedLinkAreas = this.collidedLinkAreas[collidedGroup.getId()];
+            let column;
 
             if (this.rightToLeft) {
-                column = Math.floor((collidedGroupRect.right - moveX) / 20); //see _addLinkToHashMap to understand the devision in 20
+                column = Math.floor((collidedGroupRect.right - moveX) / 20); // see _addLinkToHashMap to understand the devision in 20
             } else {
                 column = Math.floor((moveX - collidedGroupRect.left) / 20);
             }
@@ -389,7 +388,7 @@ sap.ui.define([
                 return aCollidedLinkAreas[nRow][column];
             } else if (aCollidedLinkAreas.length) { // in edit mode we enable to drop to empty link area, this condition will prevent "index out of bounds exception" error
                 // in case links area is not empty, but (moveX,MoveY) mouse position is in link area and not on link, we define the last link in line as intersected link
-                var linksAreaRowLength = aCollidedLinkAreas.length;
+                const linksAreaRowLength = aCollidedLinkAreas.length;
                 if (nRow >= linksAreaRowLength) {
                     nRow = linksAreaRowLength - 1;
                 }
@@ -403,31 +402,31 @@ sap.ui.define([
 
         _mapGroupLinks: function (collidedGroup) {
             // check if mapping of this group was already done
-            var sGroupId = collidedGroup.getId();
+            const sGroupId = collidedGroup.getId();
             if (!this.collidedLinkAreas[sGroupId] || this.bElapseGroupLinksMap) {
                 this.bElapseGroupLinksMap = false;
-                var aLinks = collidedGroup.getLinks();
-                var collidedLinksHashMap = [];
-                var iLastLinkOffset;
-                var aRects;
-                var iRow = 0;
+                const aLinks = collidedGroup.getLinks();
+                const collidedLinksHashMap = [];
+                let iLastLinkOffset;
+                let aRects;
+                let iRow = 0;
                 this.collidedLinkAreas.push(collidedGroup.getId());
-                aLinks.forEach(function (oItem) {
+                aLinks.forEach((oItem) => {
                     aRects = this._getLinkBoundingRects(oItem, collidedGroup);
-                    aRects.forEach(function (oRect) {
+                    aRects.forEach((oRect) => {
                         if (oRect.offset.y > iLastLinkOffset) {
                             iRow++;
                         }
                         iLastLinkOffset = oRect.offset.y;
                         this._addLinkToHashMap(collidedLinksHashMap, collidedGroup, oRect, iRow, oItem);
-                    }.bind(this));
-                }.bind(this));
+                    });
+                });
                 this.collidedLinkAreas[sGroupId] = collidedLinksHashMap;
             }
         },
 
         _getLinkBoundingRects: function (oLink, collidedGroup) {
-            var aRects = oLink.getBoundingRects();
+            let aRects = oLink.getBoundingRects();
             if (this.item && this.item.getId() === oLink.getId()) {
                 aRects = this.draggedLinkBoundingRects;
             }
@@ -441,9 +440,9 @@ sap.ui.define([
             if (!collidedLinksHashMap[nRow]) {
                 collidedLinksHashMap[nRow] = [];
             }
-            for (var i = 0; i <= (oRect.width + 20) / 20; i++) {
+            for (let i = 0; i <= (oRect.width + 20) / 20; i++) {
                 // we duplicate the link in the matrix in order to be able to find it in O(1). We devide by 20 because thats the "space" between links
-                var link = {
+                const link = {
                     link: oLink,
                     leftSide: !this.rightToLeft
                 };
@@ -455,7 +454,7 @@ sap.ui.define([
         },
 
         _isLinkAreaIntersection: function (collidedGroup, moveX, moveY) {
-            var innerContainerElement = collidedGroup.getInnerContainersDomRefs();
+            const innerContainerElement = collidedGroup.getInnerContainersDomRefs();
             // In case link area is empty of links it should not appear in normal mode.
             // Tile container will return empty links area domref only when it is in edit mode.
             // Otherwise, we should not check collisions on it.
@@ -478,8 +477,8 @@ sap.ui.define([
         },
 
         _toggleTileCloneHoverOpacity: function (bValue) {
-            var aClonedTileElements = document.getElementsByClassName("sapUshellTile-clone");
-            for (var i = 0; i < aClonedTileElements.length; ++i) {
+            const aClonedTileElements = document.getElementsByClassName("sapUshellTile-clone");
+            for (let i = 0; i < aClonedTileElements.length; ++i) {
                 aClonedTileElements[i].classList.toggle("sapUshellTileDragOpacity", bValue);
             }
         },
@@ -491,8 +490,8 @@ sap.ui.define([
 
             this._mapGroupLinks(collidedGroup);
             this.matrix = this.matrix || this.thisLayout.organizeGroup(this.thisLayout.getGroupTiles(collidedGroup));
-            var intersectedLink = this._getIntersectedLink(collidedGroup, moveX, moveY);
-            var bChangePlaceHolder = false;
+            const intersectedLink = this._getIntersectedLink(collidedGroup, moveX, moveY);
+            let bChangePlaceHolder = false;
             if (intersectedLink) {
                 bChangePlaceHolder = this._isLinksEquals(this.intersectedLink, intersectedLink);
                 this.intersectedLink = intersectedLink;
@@ -505,10 +504,10 @@ sap.ui.define([
 
         _markEmptyLinkArea: function (collidedGroup) {
             if (!collidedGroup.getLinks().length) { // empty link area
-                var oCollidedGroupDomRef = collidedGroup.getDomRef();
+                const oCollidedGroupDomRef = collidedGroup.getDomRef();
                 if (oCollidedGroupDomRef) {
-                    var aLineModeContainerElements = oCollidedGroupDomRef.getElementsByClassName("sapUshellLineModeContainer");
-                    for (var i = 0; i < aLineModeContainerElements.length; ++i) {
+                    const aLineModeContainerElements = oCollidedGroupDomRef.getElementsByClassName("sapUshellLineModeContainer");
+                    for (let i = 0; i < aLineModeContainerElements.length; ++i) {
                         aLineModeContainerElements[i].classList.add("sapUshellEmptyLinkAreaHover");
                     }
                 }
@@ -516,19 +515,19 @@ sap.ui.define([
         },
 
         _removeEmptyLinkAreaMark: function () {
-            var aLineModeContainerElements = document.getElementsByClassName("sapUshellLineModeContainer");
-            for (var i = 0; i < aLineModeContainerElements.length; ++i) {
+            const aLineModeContainerElements = document.getElementsByClassName("sapUshellLineModeContainer");
+            for (let i = 0; i < aLineModeContainerElements.length; ++i) {
                 aLineModeContainerElements[i].classList.remove("sapUshellEmptyLinkAreaHover");
             }
         },
 
         reorderTilesInDom: function () {
-            var jsSelectedTile = this.item.getDomRef() ? this.item.getDomRef() : this.domRef;
-            var iSelectedTileIndex = jQuery(jsSelectedTile).index();
-            var jqSelectedTileGroup = jQuery(jsSelectedTile).closest(".sapUshellTilesContainer-sortable");
-            var destTileIndex = this.calcDestIndexInGroup();
-            var jqTargetGroup = jQuery(this.endGroup.getDomRef()).find(".sapUshellTilesContainer-sortable");
-            var jqGroupTiles = jqTargetGroup.find(".sapUshellTile");
+            const jsSelectedTile = this.item.getDomRef() ? this.item.getDomRef() : this.domRef;
+            const iSelectedTileIndex = jQuery(jsSelectedTile).index();
+            const jqSelectedTileGroup = jQuery(jsSelectedTile).closest(".sapUshellTilesContainer-sortable");
+            const destTileIndex = this.calcDestIndexInGroup();
+            const jqTargetGroup = jQuery(this.endGroup.getDomRef()).find(".sapUshellTilesContainer-sortable");
+            let jqGroupTiles = jqTargetGroup.find(".sapUshellTile");
 
             if (this.startArea === "tiles") {
                 // remove the dragged tile
@@ -548,11 +547,11 @@ sap.ui.define([
         },
 
         calcDestIndexInGroup: function () {
-            var lastTileId;
-            var tilesCount = 0;
-            var i;
-            var j;
-            var bItemFound = false;
+            let lastTileId;
+            let tilesCount = 0;
+            let i;
+            let j;
+            let bItemFound = false;
 
             for (i = 0; i < this.matrix.length && !bItemFound; i++) {
                 for (j = 0; j < this.matrix[i].length; j++) {
@@ -590,9 +589,9 @@ sap.ui.define([
         },
 
         _getLinkDropMarkerElement: function () {
-            var elLinkDropMarker = document.createElement("DIV");
-            var elMarkerDot = document.createElement("DIV");
-            var elMarkerLine = document.createElement("DIV");
+            const elLinkDropMarker = document.createElement("DIV");
+            const elMarkerDot = document.createElement("DIV");
+            const elMarkerLine = document.createElement("DIV");
 
             elLinkDropMarker.setAttribute("id", "sapUshellLinkDropMarker");
             elMarkerDot.setAttribute("id", "sapUshellLinkDropMarkerDot");
@@ -614,8 +613,8 @@ sap.ui.define([
         _getDestinationIndex: function (sType) {
             if (sType === "links") {
                 if (this.intersectedLink) {
-                    var intersectedLinkIndex = this.endGroup.getLinks().indexOf(this.intersectedLink.link);
-                    var draggedItemIndex = this.endGroup.getLinks().indexOf(this.item);
+                    let intersectedLinkIndex = this.endGroup.getLinks().indexOf(this.intersectedLink.link);
+                    const draggedItemIndex = this.endGroup.getLinks().indexOf(this.item);
                     if (this.intersectedLink.leftSide) {
                         intersectedLinkIndex = this.rightToLeft ? intersectedLinkIndex + 1 : intersectedLinkIndex - 1;
                     }
@@ -634,21 +633,18 @@ sap.ui.define([
         },
 
         layoutEndCallback: function () {
-            var response;
-            var oSourceGroup;
-            var oDestinationGroup;
-
             this._removeLinkDropMarker();
             if (this.endArea !== "links" && !this.tiles) {
                 return { tile: this.item };
             }
-            oSourceGroup = this._getDragSourceGroup();
+            const oSourceGroup = this._getDragSourceGroup();
+            // eslint-disable-next-line no-use-before-define
             if (!Layout.isTabBarActive() || !this.bIsTabBarCollision) {
                 this.targetGroup = "";
             }
-            oDestinationGroup = this._getDestGroupObject(this.targetGroup);
+            const oDestinationGroup = this._getDestGroupObject(this.targetGroup);
 
-            response = {
+            const response = {
                 srcGroup: oSourceGroup,
                 dstGroup: oDestinationGroup,
                 dstGroupData: this._getDropTargetGroup(),
@@ -666,7 +662,7 @@ sap.ui.define([
         },
 
         _getDragSourceGroup: function () {
-            var oSourceGroup;
+            let oSourceGroup;
 
             oSourceGroup = this.startGroup;
             // TabBar use-case and the current group is not the one from which the tile was dragged
@@ -679,7 +675,7 @@ sap.ui.define([
             return oSourceGroup;
         },
 
-        /**
+        /*
          * Returns the destination group of the drag&drop action.
          * There are two options:
          *   1. In case of TabBar mode, when the drop action was done on a tab (i.e. another group) -
@@ -689,7 +685,7 @@ sap.ui.define([
          *      then the returned value is destination group UI control
          */
         _getDropTargetGroup: function () {
-            var oDestinationGroup;
+            let oDestinationGroup;
 
             // TabBar use-case,  and the drop action was done on a tab
             if (this.thisLayout.isTabBarActive() && this.thisLayout.isOnTabBarElement()) {
@@ -700,14 +696,14 @@ sap.ui.define([
             return oDestinationGroup;
         },
 
-        /**
+        /*
          * Returns the index of the dropped tile in the destination group.
          * In case of TabBar mode, when the drop action was done on a tab (i.e. another group) -
          * then the tile should be places as the last tile in the destination group
          */
         _getDestinationTileIndex: function () {
-            var sDestinationModelGroupId;
-            var oModelGroup;
+            let sDestinationModelGroupId;
+            let oModelGroup;
 
             if (this.thisLayout.isTabBarActive() && this.thisLayout.isOnTabBarElement()) {
                 sDestinationModelGroupId = this._getDropTargetGroup().groupId;
@@ -721,7 +717,7 @@ sap.ui.define([
             if (a1.length !== a2.length) {
                 return false;
             }
-            for (var i = 0; i < a1.length; i++) {
+            for (let i = 0; i < a1.length; i++) {
                 if (a1[i] !== a2[i]) {
                     return false;
                 }
@@ -729,23 +725,17 @@ sap.ui.define([
             return true;
         },
 
-        reorderTilesView: function (tiles/*, group*/) {
+        reorderTilesView: function (tiles/* , group */) {
             this.tiles = tiles;
             this.matrix = this.thisLayout.organizeGroup(tiles);
         },
 
-        /**
-         * @param item
-         * @param replacedTile
-         * @param tiles
-         * @returns {*}
-         */
         changeTilesOrder: function (item, replacedTile, tiles, matrix) {
-            var newTiles = tiles.slice(0);
-            var deletedItemIndex = newTiles.indexOf(item);
-            var newMatrix;
-            var cords;
-            var newCords;
+            const newTiles = tiles.slice(0);
+            const deletedItemIndex = newTiles.indexOf(item);
+            let newMatrix;
+            let cords;
+            let newCords;
 
             if (deletedItemIndex > -1) {
                 newTiles.splice(deletedItemIndex, 1);
@@ -755,14 +745,14 @@ sap.ui.define([
             } else {
                 newTiles.push(item);
             }
-            if (this.currentGroup == this.endGroup) {
+            if (this.currentGroup === this.endGroup) {
                 if (this.compareArrays(tiles, newTiles)) {
                     return false;
                 }
                 newMatrix = this.thisLayout.organizeGroup(newTiles);
                 cords = this.thisLayout.getTilePositionInMatrix(item, matrix);
                 newCords = this.thisLayout.getTilePositionInMatrix(item, newMatrix);
-                if ((cords.row == newCords.row) && (cords.col == newCords.col)) {
+                if ((cords.row === newCords.row) && (cords.col === newCords.col)) {
                     return false;
                 }
             }
@@ -776,13 +766,13 @@ sap.ui.define([
         },
 
         findTileToPlaceAfter: function (curMatrix, tiles) {
-            var x = (this.thisLayout.rightToLeft) ? 0 : this.curTouchMatrixCords.column;
-            var iIncrease = (this.thisLayout.rightToLeft) ? 1 : -1;
-            var maxTile = 0;
-            var i;
-            var j;
-            var tileIndex;
-            var rowLength = curMatrix[0].length;
+            let x = (this.thisLayout.rightToLeft) ? 0 : this.curTouchMatrixCords.column;
+            const iIncrease = (this.thisLayout.rightToLeft) ? 1 : -1;
+            let maxTile = 0;
+            let i;
+            let j;
+            let tileIndex;
+            const rowLength = curMatrix[0].length;
 
             for (i = this.curTouchMatrixCords.row; i >= 0; i--) {
                 for (j = x; j >= 0 && j < rowLength; j += iIncrease) {
@@ -805,16 +795,16 @@ sap.ui.define([
          * To avoid this, we look for the height of the parent node in case a group is empty (the parent node has a height).
          * We also check that the element isn't an empty link container, as returning an overlap to it would lead to a bug.
          *
-         * @param element The element that is being dragged
-         * @param moveX The X coordinate of the element's current position
-         * @param moveY The Y coordinate of the element's current position
-         * @returns {boolean}
+         * @param {HTMLElement} element The element that is being dragged
+         * @param {int}  moveX The X coordinate of the element's current position
+         * @param {int} moveY The Y coordinate of the element's current position
+         * @returns {boolean} whether there is an intersection.
          * @private
          */
         _isElementCollideByGivenCordinates: function (element, moveX, moveY) {
-            var tilesRect = element.getBoundingClientRect();
-            var isHorizontalIntersection = false;
-            var isVerticalIntersection = false;
+            let tilesRect = element.getBoundingClientRect();
+            let isHorizontalIntersection = false;
+            let isVerticalIntersection = false;
 
             if (tilesRect.height === 0 && !element.classList.contains("sapUshellNoLinksAreaPresent")) {
                 tilesRect = element.parentNode.getBoundingClientRect();
@@ -825,15 +815,15 @@ sap.ui.define([
             return isHorizontalIntersection && isVerticalIntersection;
         },
 
-        //Returns the collided tile element position in this.matrix
+        // Returns the collided tile element position in this.matrix
         _getMatrixCordinatesOfTouchedTile: function (collidedGroup, moveX, moveY) {
-            var curTouchMatrixCords = Extend({}, this.curTouchMatrixCords);
-            var tilesRect = collidedGroup.getInnerContainersDomRefs()[0].getBoundingClientRect();
+            let curTouchMatrixCords = Extend({}, this.curTouchMatrixCords);
+            const tilesRect = collidedGroup.getInnerContainersDomRefs()[0].getBoundingClientRect();
 
             this.matrix = this.matrix || this.thisLayout.organizeGroup(this.thisLayout.getGroupTiles(collidedGroup));
-            var offset = this.rightToLeft ? (tilesRect.right + (-1) * moveX) : (tilesRect.left * (-1) + moveX);
-            var matrixTouchY = (tilesRect.top * (-1) + moveY) / (this.tileHeight + this.tileMargin);
-            var matrixTouchX = offset / (this.tileWidth + this.tileMargin);
+            const offset = this.rightToLeft ? (tilesRect.right + (-1) * moveX) : (tilesRect.left * (-1) + moveX);
+            const matrixTouchY = (tilesRect.top * (-1) + moveY) / (this.tileHeight + this.tileMargin);
+            const matrixTouchX = offset / (this.tileWidth + this.tileMargin);
 
             curTouchMatrixCords = {
                 row: Math.floor(matrixTouchY),
@@ -844,15 +834,15 @@ sap.ui.define([
         },
 
         _getCollidedGroup: function (moveX, moveY) {
-            for (var i = 0; i < this.groupsList.length; i++) {
-                var oGroup = this.groupsList[i];
-                var innerContainerElements = oGroup.getInnerContainersDomRefs();
+            for (let i = 0; i < this.groupsList.length; i++) {
+                const oGroup = this.groupsList[i];
+                const innerContainerElements = oGroup.getInnerContainersDomRefs();
 
                 if (!innerContainerElements) {
                     continue;
                 }
 
-                for (var j = 0; j < innerContainerElements.length; j++) { // innerContainerElement[0]: intersect in tile area, innerContainerElement[1]: intersect in link area
+                for (let j = 0; j < innerContainerElements.length; j++) { // innerContainerElement[0]: intersect in tile area, innerContainerElement[1]: intersect in link area
                     if (innerContainerElements[j] && this._isElementCollideByGivenCordinates(innerContainerElements[j], moveX, moveY)) {
                         /*
                          * Collapse the empty groups with no overlap to the dragged tile.
@@ -861,20 +851,20 @@ sap.ui.define([
                          * the empty groups are quite thin and we would move the focus away from the group the user is hovering over.
                          * To avoid this, we only collapse groups if the user is hovering a non-empty group.
                          */
-                        var bCurrentGroupHasNoTiles = !oGroup.groupHasTiles();
-                        for (var idx = this.groupsList.length - 1; idx >= i; idx--) {
+                        const bCurrentGroupHasNoTiles = !oGroup.groupHasTiles();
+                        for (let idx = this.groupsList.length - 1; idx >= i; idx--) {
                             if (bCurrentGroupHasNoTiles) { // we always collapse groups underneath the current one, as this is fine.
                                 break;
                             }
                             if (!this.groupsList[idx].groupHasTiles()) {
-                                var oLastGroupExpanded = this.groupsList[idx].getDomRef();
+                                const oLastGroupExpanded = this.groupsList[idx].getDomRef();
 
                                 if (!oLastGroupExpanded || !oLastGroupExpanded.classList.contains("sapUshellInDragMode")) {
                                     continue;
                                 }
 
-                                var aInnerElements = oLastGroupExpanded.getElementsByClassName("sapUshellInner");
-                                for (var k = 0; k < aInnerElements.length; k++) {
+                                const aInnerElements = oLastGroupExpanded.getElementsByClassName("sapUshellInner");
+                                for (let k = 0; k < aInnerElements.length; k++) {
                                     aInnerElements[k].removeAttribute("style");
                                 }
                             }
@@ -887,7 +877,7 @@ sap.ui.define([
 
         // if return value is false it means that no  change has been done
         _handleTileAreaIntersection: function (collidedGroup, moveX, moveY) {
-            var curTouchMatrixCords = this._getMatrixCordinatesOfTouchedTile(collidedGroup, moveX, moveY);
+            const curTouchMatrixCords = this._getMatrixCordinatesOfTouchedTile(collidedGroup, moveX, moveY);
 
             // if place of the tile is the same place as it was, nothing need to be done
             if ((collidedGroup === this.endGroup) &&
@@ -910,13 +900,11 @@ sap.ui.define([
         },
 
         _getGroupCollisionObject: function (moveX, moveY) {
-            var collidedGroup;
-            var bLinkAreaIntersection;
-            collidedGroup = this._getCollidedGroup(moveX, moveY);
+            const collidedGroup = this._getCollidedGroup(moveX, moveY);
             if (!collidedGroup || collidedGroup.getIsGroupLocked()) {
                 return undefined;
             }
-            bLinkAreaIntersection = this._isLinkAreaIntersection(collidedGroup, moveX, moveY);
+            const bLinkAreaIntersection = this._isLinkAreaIntersection(collidedGroup, moveX, moveY);
             this.endGroup = collidedGroup;
             if (!this.tiles) {
                 this.tiles = this.thisLayout.getGroupTiles(this.endGroup).slice(0);
@@ -931,13 +919,9 @@ sap.ui.define([
         },
 
         /**
-         * @param {int} moveX
-         * @param {int} moveY
-         * @param {string} collidedObjectType: One of the following strings "Group", "TabBar"
-         * @returns {{
-         *     collidedObjectType: String,
-         *     collidedObject: Object
-         *   }} A collision object
+         * @param {int} moveX The X coordinate of the element's current position
+         * @param {int} moveY The Y coordinate of the element's current position
+         * @returns {object} A collision object
          */
         getCollisionObject: function (moveX, moveY) {
             // If TabBar collision timer is on (counting 800ms of long drop)- then it should be cleared since the dragged object was just moved
@@ -952,10 +936,10 @@ sap.ui.define([
         },
 
         _isTabBarScrollArea: function (moveY) {
-            var iAnchorBarHeight = jQuery("#anchorNavigationBar").height() || 0;
-            var oAnchorBarOffset = jQuery("#anchorNavigationBar").offset();
-            var iAnchorBarOffsetTop = oAnchorBarOffset ? oAnchorBarOffset.top : 0;
-            var iY = iAnchorBarHeight + iAnchorBarOffsetTop;
+            const iAnchorBarHeight = jQuery("#anchorNavigationBar").height() || 0;
+            const oAnchorBarOffset = jQuery("#anchorNavigationBar").offset();
+            const iAnchorBarOffsetTop = oAnchorBarOffset ? oAnchorBarOffset.top : 0;
+            const iY = iAnchorBarHeight + iAnchorBarOffsetTop;
 
             return iAnchorBarHeight > 0 && (moveY > iY) && (moveY < iY + 30);
         },
@@ -965,14 +949,14 @@ sap.ui.define([
         },
 
         _isTabBarCollision: function (moveY) {
-            var iAnchorBarHeight = jQuery("#anchorNavigationBar").height() || 0;
-            var oAnchorBarOffset = jQuery("#anchorNavigationBar").offset();
-            var iAnchorBarOffsetTop = oAnchorBarOffset ? oAnchorBarOffset.top : 0;
+            const iAnchorBarHeight = jQuery("#anchorNavigationBar").height() || 0;
+            const oAnchorBarOffset = jQuery("#anchorNavigationBar").offset();
+            const iAnchorBarOffsetTop = oAnchorBarOffset ? oAnchorBarOffset.top : 0;
 
             return (moveY < iAnchorBarHeight + iAnchorBarOffsetTop && moveY > iAnchorBarOffsetTop);
         },
 
-        /**
+        /*
          * Handling TabBar use-case when the dragged tile (actually - the cursor) is on a TabBar item.
          * Steps:
          *   1. Get the relevant TabBar item on which the cursor is
@@ -982,16 +966,17 @@ sap.ui.define([
          *   5. Measure 800ms in order to identify long-drop use-case
          */
         _handleTabBarCollision: function (moveX, aTabBarItemsLocation) {
-            var oHighlightedTabItem = this._getTabBarHoverItem(moveX, aTabBarItemsLocation);
+            const oHighlightedTabItem = this._getTabBarHoverItem(moveX, aTabBarItemsLocation);
 
             // In TabBar, the dragged tile (clone) appears with opacity
+            // eslint-disable-next-line no-use-before-define
             if (Layout.isTabBarActive()) {
                 this._toggleTileCloneHoverOpacity(true);
             }
             this.lastHighlitedTabItem = oHighlightedTabItem;
             this.thisLayout.setOnTabBarElement(true);
             // In case that the tile is dragged onto the overflow arrow of the TabBar
-            var isOverflowCollision = this._handleOverflowCollision(moveX);
+            const isOverflowCollision = this._handleOverflowCollision(moveX);
             if (isOverflowCollision) {
                 return;
             }
@@ -1005,12 +990,12 @@ sap.ui.define([
             // In TabBar mode there is no other group (UI5 control) then the current one
             this.targetGroup = oHighlightedTabItem;
             this.sDragTargetGroupModelId = oHighlightedTabItem.getAttribute("modelGroupId");
-            var iTargetGroupIndex = this._getTabBarGroupIndexByModelId(this.sDragTargetGroupModelId);
+            const iTargetGroupIndex = this._getTabBarGroupIndexByModelId(this.sDragTargetGroupModelId);
             // The timer that counts 800ms is cleared, since the cursor was moved
             if (this.thisLayout.oTabBarItemClickTimer) {
                 clearTimeout(this.thisLayout.oTabBarItemClickTimer);
             }
-            var oDropTargetGroupModel = this._getModelGroupById(this._getDropTargetGroup().groupId);
+            const oDropTargetGroupModel = this._getModelGroupById(this._getDropTargetGroup().groupId);
             if (oDropTargetGroupModel.isGroupLocked) {
                 this._toggleTabBarOverflowArrows(false);
                 this.thisLayout.setOnTabBarElement(false);
@@ -1025,8 +1010,8 @@ sap.ui.define([
                 this.sDragStartGroupModelId = this.startGroup.getGroupId();
             }
             // Start counting 800ms in order to identify long-drag use-case
-            this.thisLayout.oTabBarItemClickTimer = setTimeout(function () {
-                var currentTabBarItem = this._getSelectedTabBarItem();
+            this.thisLayout.oTabBarItemClickTimer = setTimeout(() => {
+                const currentTabBarItem = this._getSelectedTabBarItem();
                 if (this.lastHighlitedTabItem === currentTabBarItem) {
                     return;
                 }
@@ -1035,22 +1020,22 @@ sap.ui.define([
                 this._prepareDomForDragAndDrop();
                 // Remove the dragged tile from the source group before switching to the target group
                 this.startGroup.removeAggregation("tiles", this.item, true);
-                var bDraggedBackToSourceGroup = this.sDragStartGroupModelId === this.sDragTargetGroupModelId;
-                this.item.getBindingContext().oModel.setProperty(this.draggedTileModelPath + "/draggedInTabBarToSourceGroup", bDraggedBackToSourceGroup);
+                const bDraggedBackToSourceGroup = this.sDragStartGroupModelId === this.sDragTargetGroupModelId;
+                this.item.getBindingContext().oModel.setProperty(`${this.draggedTileModelPath}/draggedInTabBarToSourceGroup`, bDraggedBackToSourceGroup);
                 this.groupSwitched = true;
                 // Triggering the flow of TabBar item press
                 EventBus.getInstance().publish("launchpad", "switchTabBarItem", { iGroupIndex: iTargetGroupIndex });
-                var aThisGroups = this.thisLayout.getGroups();
+                const aThisGroups = this.thisLayout.getGroups();
                 this.endGroup = aThisGroups[0];
                 this.bElapseGroupLinksMap = true;
-            }.bind(this), 800);
+            }, 800);
 
             if ((this.tiles === null) && (this.endGroup)) {
                 this.tiles = this.thisLayout.getGroupTiles(this.endGroup).slice(0);
             }
             // The TabBar item that is currently touched by the cursor should be highlighted
-            var aHoveredTabBarItems = document.getElementsByClassName("sapUshellTabBarHoverOn");
-            for (var i = aHoveredTabBarItems.length - 1; i >= 0; --i) {
+            const aHoveredTabBarItems = document.getElementsByClassName("sapUshellTabBarHoverOn");
+            for (let i = aHoveredTabBarItems.length - 1; i >= 0; --i) {
                 aHoveredTabBarItems[i].classList.remove("sapUshellTabBarHoverOn");
             }
             oHighlightedTabItem.classList.add("sapUshellTabBarHoverOn");
@@ -1059,17 +1044,17 @@ sap.ui.define([
         },
 
         _prepareDomForDragAndDrop: function () {
-            var oItemDomRef = this.item.getDomRef();
+            const oItemDomRef = this.item.getDomRef();
             if (Device.system.tablet) {
-                var oClonedDomRef = oItemDomRef.cloneNode(true);
-                var oParentElement = oItemDomRef.parentNode;
+                const oClonedDomRef = oItemDomRef.cloneNode(true);
+                const oParentElement = oItemDomRef.parentNode;
                 this.origItemId = oItemDomRef.getAttribute("id");
                 this.origItemDataSapUi = oItemDomRef.getAttribute("data-sap-ui");
                 oItemDomRef.removeAttribute("id");
                 oItemDomRef.removeAttribute("data-sap-ui");
                 oItemDomRef.style.display = "none";
                 oClonedDomRef.style.display = "none";
-                var oDashBoardGroups = document.getElementById("dashboardGroups");
+                const oDashBoardGroups = document.getElementById("dashboardGroups");
                 oDashBoardGroups.parentNode.appendChild(oItemDomRef);
                 oParentElement.appendChild(oClonedDomRef);
                 this.draggedTileDomRef = oItemDomRef;
@@ -1081,7 +1066,7 @@ sap.ui.define([
         },
 
         _appendTargetGroupDomRefWithDraggedTile: function () {
-            var oEndGroupInnerDomRef = this.endGroup.getInnerContainerDomRefs() ? this.endGroup.getInnerContainerDomRefs()[0] : null;
+            const oEndGroupInnerDomRef = this.endGroup.getInnerContainerDomRefs() ? this.endGroup.getInnerContainerDomRefs()[0] : null;
             if (!this.item.getDomRef()) {
                 if (Device.system.tablet) {
                     this.draggedTileDomRef.setAttribute("id", this.origItemId);
@@ -1106,9 +1091,9 @@ sap.ui.define([
         },
 
         _getTabBarGroupIndexByModelId: function (sGroupModelId) {
-            var sTempGroupModelId;
+            let sTempGroupModelId;
 
-            for (var index = 0; index < this.allGroups.length; ++index) {
+            for (let index = 0; index < this.allGroups.length; ++index) {
                 sTempGroupModelId = this.allGroups[index].groupId;
                 if (sGroupModelId === sTempGroupModelId) {
                     return index;
@@ -1117,11 +1102,11 @@ sap.ui.define([
         },
 
         _getModelGroupById: function (sGroupModelId) {
-            var aModelGroups = this.thisLayout.getAllGroups();
-            var oTempModelGroup;
-            var sTempModelGroupId;
+            const aModelGroups = this.thisLayout.getAllGroups();
+            let oTempModelGroup;
+            let sTempModelGroupId;
 
-            for (var index = 0; index < aModelGroups.length; ++index) {
+            for (let index = 0; index < aModelGroups.length; ++index) {
                 oTempModelGroup = aModelGroups[index];
                 sTempModelGroupId = oTempModelGroup.groupId;
                 if (sTempModelGroupId === sGroupModelId) {
@@ -1131,8 +1116,8 @@ sap.ui.define([
         },
 
         _handleOverflowCollision: function (moveX) {
-            var oAnchor = Element.getElementById("anchorNavigationBar");
-            var sOverflowSide = this._calculateOverflowButtonSideCollision(moveX);
+            const oAnchor = Element.getElementById("anchorNavigationBar");
+            const sOverflowSide = this._calculateOverflowButtonSideCollision(moveX);
 
             // Right overflow
             if (sOverflowSide === "right") {
@@ -1142,7 +1127,7 @@ sap.ui.define([
                     this.tabBarArrowCollisionRight = true;
                 }
                 return true;
-            } else if (sOverflowSide === "left") { //Left Overflow
+            } else if (sOverflowSide === "left") { // Left Overflow
                 // Only if we didn't stay on the left overflow button
                 if (!this.tabBarArrowCollisionLeft) {
                     oAnchor._scrollToGroupByGroupIndex(0, 5000);
@@ -1155,15 +1140,15 @@ sap.ui.define([
         },
 
         _calculateOverflowButtonSideCollision: function (moveX) {
-            var anchorRightOverflowArrow = jQuery(".sapUshellAnchorRightOverFlowButton");
-            var anchorRightOverflowArrowLeftOffset = anchorRightOverflowArrow.offset().left;
-            var anchorItemOverFlow = jQuery(".sapUshellAnchorItemOverFlow");
-            var anchorItemOverFlowOffset = anchorItemOverFlow.offset().left;
-            var anchorLeftOverflowArrow = jQuery(".sapUshellAnchorLeftOverFlowButton");
-            var anchorLeftOverflowArrowLeftOffset = anchorLeftOverflowArrow.offset().left;
-            var anchorOverflowArrowLeftWidth = 32;
-            var jqAnchor = jQuery("#anchorNavigationBar");
-            var anchorBarOffsetLeft = jqAnchor.offset().left;
+            const anchorRightOverflowArrow = jQuery(".sapUshellAnchorRightOverFlowButton");
+            const anchorRightOverflowArrowLeftOffset = anchorRightOverflowArrow.offset().left;
+            const anchorItemOverFlow = jQuery(".sapUshellAnchorItemOverFlow");
+            const anchorItemOverFlowOffset = anchorItemOverFlow.offset().left;
+            const anchorLeftOverflowArrow = jQuery(".sapUshellAnchorLeftOverFlowButton");
+            const anchorLeftOverflowArrowLeftOffset = anchorLeftOverflowArrow.offset().left;
+            const anchorOverflowArrowLeftWidth = 32;
+            const jqAnchor = jQuery("#anchorNavigationBar");
+            const anchorBarOffsetLeft = jqAnchor.offset().left;
 
             if (moveX > anchorRightOverflowArrowLeftOffset && moveX < anchorItemOverFlowOffset) {
                 return "right";
@@ -1174,8 +1159,8 @@ sap.ui.define([
         },
 
         _resetOverFlowButtonElements: function () {
-            var bTablet = Device.system.tablet;
-            var anchorBar = jQuery(bTablet ? ".sapUshellAnchorNavigationBarItemsScroll" : ".sapUshellAnchorNavigationBarItems");
+            const bTablet = Device.system.tablet;
+            const anchorBar = jQuery(bTablet ? ".sapUshellAnchorNavigationBarItemsScroll" : ".sapUshellAnchorNavigationBarItems");
 
             anchorBar.stop();
             this.tabBarArrowCollisionRight = false;
@@ -1183,28 +1168,28 @@ sap.ui.define([
         },
 
         _toggleTabBarOverflowArrows: function (bShow) {
-            var anchorRightOverflowArrow = document.getElementsByClassName("sapUshellAnchorRightOverFlowButton");
-            var anchorLeftOverflowArrow = document.getElementsByClassName("sapUshellAnchorLeftOverFlowButton");
+            const anchorRightOverflowArrow = document.getElementsByClassName("sapUshellAnchorRightOverFlowButton");
+            const anchorLeftOverflowArrow = document.getElementsByClassName("sapUshellAnchorLeftOverFlowButton");
 
-            for (var i = 0; i < anchorRightOverflowArrow.length; ++i) {
+            for (let i = 0; i < anchorRightOverflowArrow.length; ++i) {
                 anchorRightOverflowArrow[i].classList.toggle("sapUshellTabBarOverflowButton", bShow);
             }
-            for (var j = 0; j < anchorLeftOverflowArrow.length; ++j) {
+            for (let j = 0; j < anchorLeftOverflowArrow.length; ++j) {
                 anchorLeftOverflowArrow[j].classList.toggle("sapUshellTabBarOverflowButton", bShow);
             }
         },
 
         _getTabBarHoverItem: function (moveX, aTabBarItemsLocation) {
-            var iLeftTabBarOffset = jQuery(".sapUshellAnchorItem:not(.sapUshellShellHidden)").eq(0).offset().left;
+            const iLeftTabBarOffset = jQuery(".sapUshellAnchorItem:not(.sapUshellShellHidden)").eq(0).offset().left;
             if (moveX - iLeftTabBarOffset <= 0) {
                 return;
             }
-            var iNumOfBasicUnits = Math.round((moveX - iLeftTabBarOffset) / 10);
+            let iNumOfBasicUnits = Math.round((moveX - iLeftTabBarOffset) / 10);
             if (iNumOfBasicUnits >= aTabBarItemsLocation.length) {
                 iNumOfBasicUnits = aTabBarItemsLocation.length - 1;
             }
-            var oHighlightedTabItemIndexInBar = aTabBarItemsLocation[iNumOfBasicUnits];
-            var aTabBarItems = document.getElementsByClassName("sapUshellAnchorItem");
+            const oHighlightedTabItemIndexInBar = aTabBarItemsLocation[iNumOfBasicUnits];
+            const aTabBarItems = document.getElementsByClassName("sapUshellAnchorItem");
 
             return aTabBarItems[oHighlightedTabItemIndexInBar];
         },
@@ -1217,9 +1202,9 @@ sap.ui.define([
             if (!this.matrix) {
                 return;
             }
-            var newMatrix = this.matrix.map(function (row) {
-                return row.map(function (item) {
-                    var isRemoveRequired = aExcludedControlClass.some(function (controlClass) {
+            const newMatrix = this.matrix.map((row) => {
+                return row.map((item) => {
+                    const isRemoveRequired = aExcludedControlClass.some((controlClass) => {
                         return item instanceof controlClass;
                     });
                     return (isRemoveRequired) ? undefined : item;
@@ -1243,20 +1228,20 @@ sap.ui.define([
         }
     };
 
-    var LayoutConstructor = function () { };
-    var fnPromiseResolve;
+    function LayoutConstructor () { }
+    let fnPromiseResolve;
     LayoutConstructor.prototype = {
 
-        _initDeferred: new Promise(function (fnResolve) { fnPromiseResolve = fnResolve; }),
+        _initDeferred: new Promise((fnResolve) => { fnPromiseResolve = fnResolve; }),
 
         init: function (cfg) {
             // in some devices this code runs before css filed were loaded and we don't get the correct styleInfo object
-            var timeoutLayoutInfo = function () {
-                var sContainerId = (this.container && this.container.getAttribute("id")) || "";
+            const timeoutLayoutInfo = function () {
+                const sContainerId = (this.container && this.container.getAttribute("id")) || "";
                 if (sContainerId.includes("destroyed")) {
                     return; // container was already destroyed
                 }
-                var styleInfo = this.getStyleInfo(this.container);
+                const styleInfo = this.getStyleInfo(this.container);
                 if (styleInfo.tileWidth > 0) {
                     this.isInited = true;
                     this.reRenderGroupsLayout();
@@ -1275,12 +1260,12 @@ sap.ui.define([
             this.oTabBarItemClickTimer = new Date();
             this.bTabBarModeActive = false;
             this.bOnTabBarElement = false;
-            var oLaunchpageService = Container.getServiceAsync("FlpLaunchPage");
+            const oLaunchpageService = Container.getServiceAsync("FlpLaunchPage");
             if (oLaunchpageService) {
-                oLaunchpageService.then(function (oLaunchPageService) {
+                oLaunchpageService.then((oLaunchPageService) => {
                     this.oLaunchPageService = oLaunchPageService;
                     timeoutLayoutInfo();
-                }.bind(this));
+                });
             } else {
                 timeoutLayoutInfo();
             }
@@ -1319,15 +1304,15 @@ sap.ui.define([
         },
 
         getStyleInfo: function (container) {
-            var tile = document.createElement("div");
-            var containerId = container.getAttribute("id");
+            const tile = document.createElement("div");
+            const containerId = container.getAttribute("id");
             container = containerId ? document.getElementById(containerId) : container;
             if (!container) { // container is not rendered
                 return {};
             }
             tile.className = "sapUshellTile";
 
-            var sizeBehavior = Config.last("/core/home/sizeBehavior");
+            const sizeBehavior = Config.last("/core/home/sizeBehavior");
             if (sizeBehavior === "Small") {
                 tile.classList.add("sapUshellSmall");
             }
@@ -1335,9 +1320,9 @@ sap.ui.define([
             tile.style.position = "absolute";
             tile.style.visibility = "hidden";
             container.appendChild(tile);
-            var tileStyle = window.getComputedStyle(tile);
-            var containerStyle = window.getComputedStyle(container);
-            var info = {
+            const tileStyle = window.getComputedStyle(tile);
+            const containerStyle = window.getComputedStyle(container);
+            const info = {
                 tileMarginHeight: parseFloat(tileStyle.marginBottom, 10) + parseFloat(tileStyle.marginTop, 10),
                 tileMarginWidth: parseFloat(tileStyle.marginLeft, 10) + parseFloat(tileStyle.marginRight, 10),
                 tileWidth: tile.offsetWidth,
@@ -1361,7 +1346,7 @@ sap.ui.define([
             return this.cfg.isTabBarActive ? this.cfg.isTabBarActive() : false;
         },
 
-        getTilesInRow: function (/*bIslink*/) {
+        getTilesInRow: function (/* bIslink */) {
             return this.tilesInRow;
         },
 
@@ -1369,7 +1354,7 @@ sap.ui.define([
             this.tilesInRow = tilesInRow;
         },
 
-        /**
+        /*
          * Returns an {x,y} object of  coordinates for placing the tile
          * Returns false if the space is taken by another tile already
          */
@@ -1383,11 +1368,11 @@ sap.ui.define([
             if (typeof matrix[place.y][place.x] !== "undefined") {
                 return false;
             }
-            var p = Extend({}, place);
+            const p = Extend({}, place);
             if (bIsLinkTiles || (tile && tile.getLong && !tile.getLong())) {
                 return [p];
             }
-            var cords = [p];
+            const cords = [p];
             if (tile && tile.getLong && tile.getLong()) {
                 if ((place.x + 1) >= matrix[0].length || (typeof matrix[p.y][p.x + 1] !== "undefined")) {
                     return false;
@@ -1397,21 +1382,18 @@ sap.ui.define([
             return cords;
         },
 
-        /**
-         * @param tile
-         * @param matrix
-         * @param cords
+        /*
          * Places the given tile in the given coordinates in matrix
          */
         placeTile: function (tile, matrix, cords) {
-            for (var i = 0; i < cords.length; i++) {
+            for (let i = 0; i < cords.length; i++) {
                 matrix[cords[i].y][cords[i].x] = tile;
             }
         },
 
         getTilePositionInMatrix: function (tile, matrix) {
-            for (var iRow = 0; iRow < matrix.length; iRow++) {
-                for (var iCol = 0; iCol < matrix[iRow].length; iCol++) {
+            for (let iRow = 0; iRow < matrix.length; iRow++) {
+                for (let iCol = 0; iCol < matrix[iRow].length; iCol++) {
                     if (matrix[iRow][iCol] === tile) {
                         return { row: iRow, col: iCol };
                     }
@@ -1420,20 +1402,15 @@ sap.ui.define([
             return false;
         },
 
-        /**
-         * @param matrix
-         * @param tiles
-         * @param startRow
-         * @param endRow
-         * @returns {int}
+        /*
          * Fills the given matrix row with tiles.
          */
         fillRowsInLine: function (matrix, tiles, row, bIsLinkTiles) {
             if (!tiles.length) {
                 return 0;
             }
-            var cords;
-            for (var j = 0; j < matrix[0].length && tiles.length; j++) {
+            let cords;
+            for (let j = 0; j < matrix[0].length && tiles.length; j++) {
                 cords = this.checkPlaceForTile(tiles[0], matrix, { x: j, y: row }, bIsLinkTiles);
                 if (cords) {
                     this.placeTile(tiles[0], matrix, cords);
@@ -1442,27 +1419,23 @@ sap.ui.define([
             }
         },
 
-        /**
-         * @param tiles
-         * @param containerInfo
-         * @returns {int[]}
-         *
+        /*
          * Organizes tiles from array to matrix by filing fixed length rows tile-by-tile
-         * Returnes the new matrix
+         * Returns the new matrix
          */
         organizeGroup: function (tiles, bIsLinkTiles) {
-            //copy of tilesCopy array
-            var tilesCopy = tiles.slice(0);
-            var tilesMatrix = [];
-            var currentRow = 0;
+            // copy of tilesCopy array
+            const tilesCopy = tiles.slice(0);
+            let tilesMatrix = [];
+            let currentRow = 0;
             tilesMatrix.push(new Array(bIsLinkTiles ? Math.floor(this.tilesInRow / 2) : this.tilesInRow));
 
             while (tilesCopy.length) {
-                this.fillRowsInLine(tilesMatrix, tilesCopy, currentRow, bIsLinkTiles); //to do: get the declaration outside
+                this.fillRowsInLine(tilesMatrix, tilesCopy, currentRow, bIsLinkTiles); // to do: get the declaration outside
                 currentRow++;
             }
             if (this.rightToLeft) {
-                for (var i = 0; i < tilesMatrix.length; i++) {
+                for (let i = 0; i < tilesMatrix.length; i++) {
                     tilesMatrix[i].reverse();
                 }
             }
@@ -1472,10 +1445,10 @@ sap.ui.define([
 
         /* If there is a row with no tiles - it is removed from the matrix */
         cleanRows: function (tilesMatrix) {
-            var doneChecking = false;
+            let doneChecking = false;
 
-            for (var row = tilesMatrix.length - 1; row > 0 && !doneChecking; row--) {
-                for (var col = 0; col < tilesMatrix[row].length && !doneChecking; col++) {
+            for (let row = tilesMatrix.length - 1; row > 0 && !doneChecking; row--) {
+                for (let col = 0; col < tilesMatrix[row].length && !doneChecking; col++) {
                     if (typeof tilesMatrix[row][col] === "object") {
                         doneChecking = true;
                     }
@@ -1489,7 +1462,7 @@ sap.ui.define([
 
         setGroupsLayout: function (group, matrix) {
             if (group.getIsGroupLocked() && matrix.length > 0) {
-                var parentContainer = group.getDomRef().parentElement;
+                const parentContainer = group.getDomRef().parentElement;
 
                 group.getDomRef().style.width = "";
                 parentContainer.style.width = "";
@@ -1498,14 +1471,14 @@ sap.ui.define([
         },
 
         calcTilesInRow: function (containerWidth, tileWidth, tileMargin) {
-            var tilesInRow = Math.floor(containerWidth / (tileWidth + tileMargin));
+            let tilesInRow = Math.floor(containerWidth / (tileWidth + tileMargin));
             // Min number of tile in row that was predefined by UI
             tilesInRow = (tilesInRow < this.minTilesinRow ? this.minTilesinRow : tilesInRow);
             return tilesInRow;
         },
 
         getGroupTiles: function (oGroup) {
-            var aTiles = oGroup.getTiles();
+            const aTiles = oGroup.getTiles();
             // insert plus tile only in non empty groups
             if (oGroup.getShowPlaceholder()) {
                 aTiles.push(oGroup.oPlusTile);
@@ -1518,20 +1491,20 @@ sap.ui.define([
             if (!this.isInited) {
                 return;
             }
-            var styleInfo = this.getStyleInfo(this.container);
+            const styleInfo = this.getStyleInfo(this.container);
             if (!styleInfo.tileWidth) {
                 return;
             }
             this.styleInfo = styleInfo;
             this.tilesInRow = this.calcTilesInRow(styleInfo.containerWidth, styleInfo.tileWidth, styleInfo.tileMarginWidth);
             groups = groups || this.getGroups();
-            for (var i = 0; i < groups.length; i++) {
+            for (let i = 0; i < groups.length; i++) {
                 if (groups[i].getDomRef && !groups[i].getDomRef()) {
                     // we don't render invisible groups
                     continue;
                 }
-                var tiles = this.getGroupTiles(groups[i]);
-                var groupLayoutMatrix = this.organizeGroup(tiles);
+                const tiles = this.getGroupTiles(groups[i]);
+                const groupLayoutMatrix = this.organizeGroup(tiles);
                 this.setGroupsLayout(groups[i], groupLayoutMatrix);
             }
         },
@@ -1541,20 +1514,20 @@ sap.ui.define([
         },
 
         endDragMode: function () {
-            var groups = this.getGroups();
-            for (var i = 0; i < groups.length; i++) {
-                var oGroupElement = groups[i].getDomRef();
+            const groups = this.getGroups();
+            for (let i = 0; i < groups.length; i++) {
+                const oGroupElement = groups[i].getDomRef();
                 if (!oGroupElement || !oGroupElement.classList.contains("sapUshellInDragMode")) {
                     continue;
                 }
                 oGroupElement.classList.remove("sapUshellInDragMode");
-                var tiles = this.getGroupTiles(groups[i]);
-                for (var j = 0; j < tiles.length; j++) {
+                const tiles = this.getGroupTiles(groups[i]);
+                for (let j = 0; j < tiles.length; j++) {
                     tiles[j].getDomRef().removeAttribute("style");
                 }
 
-                var aInnerElements = oGroupElement.getElementsByClassName("sapUshellInner");
-                for (var k = 0; k < aInnerElements.length; k++) {
+                const aInnerElements = oGroupElement.getElementsByClassName("sapUshellInner");
+                for (let k = 0; k < aInnerElements.length; k++) {
                     aInnerElements[k].removeAttribute("style");
                 }
             }
@@ -1564,15 +1537,15 @@ sap.ui.define([
             if (group.$().hasClass("sapUshellInDragMode")) {
                 return;
             }
-            var tiles = this.getGroupTiles(group);
-            var groupLayoutMatrix = this.organizeGroup(tiles);
+            const tiles = this.getGroupTiles(group);
+            const groupLayoutMatrix = this.organizeGroup(tiles);
             group.$().addClass("sapUshellInDragMode");
             this.renderLayoutGroup(group, groupLayoutMatrix);
         },
 
         calcTranslate: function (row, col) {
-            var translateX = col * (this.styleInfo.tileWidth + this.styleInfo.tileMarginWidth);
-            var translateY = row * (this.styleInfo.tileHeight + this.styleInfo.tileMarginHeight);
+            let translateX = col * (this.styleInfo.tileWidth + this.styleInfo.tileMarginWidth);
+            const translateY = row * (this.styleInfo.tileHeight + this.styleInfo.tileMarginHeight);
             // for RTL need negative X
             if (this.layoutEngine.rightToLeft) {
                 translateX = -translateX;
@@ -1581,12 +1554,12 @@ sap.ui.define([
         },
 
         renderLayoutGroup: function (group, groupLayoutMatrix) {
-            var currentTile;
+            let currentTile;
 
             this.styleInfo = this.getStyleInfo(this.container);
 
-            for (var i = 0; i < groupLayoutMatrix.length; i++) {
-                for (var j = 0; j < groupLayoutMatrix[i].length; j++) {
+            for (let i = 0; i < groupLayoutMatrix.length; i++) {
+                for (let j = 0; j < groupLayoutMatrix[i].length; j++) {
                     if (currentTile === groupLayoutMatrix[i][j]) {
                         continue;
                     } else {
@@ -1599,6 +1572,6 @@ sap.ui.define([
             }
         }
     };
-    var Layout = new LayoutConstructor();
+    const Layout = new LayoutConstructor();
     return Layout;
 });