diff --git a/app/renderer/js/main.js b/app/renderer/js/main.js index 9251e66f5..fb9e6ad02 100644 --- a/app/renderer/js/main.js +++ b/app/renderer/js/main.js @@ -158,38 +158,29 @@ class ServerManagerView { initSidebar() { const showSidebar = ConfigUtil.getConfigItem('showSidebar', true); this.toggleSidebar(showSidebar); - // Allow dragging of server tabs and update the data-tab-id - const _this = this; + const onEnd = (function onDragEnd(event) { + const newTabs = []; + const domains = []; + const tabElements = document.querySelectorAll('#tabs-container .tab'); + tabElements.forEach((el, index) => { + const oldIndex = +Number(el.getAttribute('data-tab-id')); + el.setAttribute('data-tab-id', index.toString()); + domains.push(DomainUtil.getDomain(oldIndex)); + newTabs.push(this.tabs[oldIndex]); + }); + for (let index = 0; index < domains.length; ++index) { + DomainUtil.updateDomain(index, domains[index]); + } + this.tabs = newTabs; + ipcRenderer.send('update-menu', { + tabs: this.tabs, + activeTabIndex: this.activeTabIndex + }); + }).bind(this); this.$sortable = Sortable.create(this.$drag, { dataIdAttr: 'data-sortable-id', - onEnd(event) { - const newTabs = []; - const domains = []; - const tabElements = document.querySelectorAll('#tabs-container .tab'); - tabElements.forEach((el, index) => { - const oldIndex = +Number(el.getAttribute('data-tab-id')); - newTabs.push(_this.tabs[oldIndex]); - el.setAttribute('data-tab-id', index.toString()); - domains.push(DomainUtil.getDomain(oldIndex)); - }); - for (let index = 0; index < domains.length; ++index) { - DomainUtil.updateDomain(index, domains[index]); - } - _this.tabs = newTabs; - let direction = 0; - const { oldIndex, newIndex } = event; - if (newIndex > oldIndex) { - direction = 1; - } else { - direction = -1; - } - this.setState({ direction, oldIndex, newIndex }); - ipcRenderer.send('update-menu', { - tabs: _this.tabs, - activeTabIndex: _this.activeTabIndex - }); - } + onEnd }); } @@ -341,15 +332,7 @@ class ServerManagerView { // To handle position of servers' tooltip due to scrolling of list of organizations // This could not be handled using CSS, hence the top of the tooltip is made same // as that of its parent element. - let top = null; - const { dragged } = this.state; - if (dragged && index >= dragged.oldIndex && index < dragged.newIndex) { - top = this.$serverIconTooltip[index + (Number(dragged.direction) * -1 * (dragged.newIndex - dragged.oldIndex))].parentElement.getBoundingClientRect().top; - } else if (index === dragged.newIndex) { - top = this.$serverIconTooltip[index + (Number(dragged.direction) * (dragged.newIndex - dragged.oldIndex))].parentElement.getBoundingClientRect().top; - } else { - top = this.$serverIconTooltip[index].parentElement.getBoundingClientRect().top; - } + const top = this.$serverIconTooltip[index].parentElement.getBoundingClientRect().top; this.$serverIconTooltip[index].style.top = top + 'px'; }