diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index d48dd8ad..3bfc70fb 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -166,6 +166,8 @@ class Manager { document.getElementById("reset-layout").addEventListener("click", this.app.resetLayout.bind(this.app)); this.addListeners("#clr-io,#btn-close-all-tabs", "click", this.input.clearAllIoClick, this.input); this.addListeners("#open-file,#open-folder", "change", this.input.inputOpen, this.input); + document.getElementById("btn-open-file").addEventListener("click", this.input.inputOpenClick.bind(this.input)); + document.getElementById("btn-open-folder").addEventListener("click", this.input.folderOpenClick.bind(this.input)); this.addListeners("#input-wrapper", "dragover", this.input.inputDragover, this.input); this.addListeners("#input-wrapper", "dragleave", this.input.inputDragleave, this.input); this.addListeners("#input-wrapper", "drop", this.input.inputDrop, this.input); @@ -187,8 +189,6 @@ class Manager { document.getElementById("input-num-results").addEventListener("keyup", this.input.filterTabSearch.bind(this.input)); document.getElementById("input-filter-refresh").addEventListener("click", this.input.filterTabSearch.bind(this.input)); this.addDynamicListener(".input-filter-result", "click", this.input.filterItemClick, this.input); - document.getElementById("btn-open-file").addEventListener("click", this.input.inputOpenClick.bind(this.input)); - document.getElementById("btn-open-folder").addEventListener("click", this.input.folderOpenClick.bind(this.input)); // Output diff --git a/src/web/utils/sidePanel.mjs b/src/web/utils/sidePanel.mjs index a8de0931..b54c08a0 100644 --- a/src/web/utils/sidePanel.mjs +++ b/src/web/utils/sidePanel.mjs @@ -138,7 +138,6 @@ class PanelGroup { this.dom = undefined; this.classes = ""; this.panels = []; - this.bufferWidth = 0; this.syncClasses(); } @@ -159,6 +158,7 @@ class PanelGroup { if (this.dom) { this.dom.remove(); this.dom = undefined; + this.setScrollerMargin(0); } return; } @@ -171,21 +171,30 @@ class PanelGroup { } let curDOM = this.dom.firstChild; + let bufferWidth = 0; for (const panel of this.panels) { + bufferWidth += panel.width; if (panel.dom.parentNode === this.dom) { while (curDOM !== panel.dom) curDOM = rm(curDOM); curDOM = curDOM.nextSibling; } else { this.dom.insertBefore(panel.dom, curDOM); - this.bufferWidth = panel.width; panel.dom.style.width = panel.width + "px"; - this.dom.style.width = this.bufferWidth + "px"; + this.dom.style.width = bufferWidth + "px"; } } while (curDOM) curDOM = rm(curDOM); + this.setScrollerMargin(bufferWidth); + } + + /** + * Sets the margin of the cm-scroller element to make room for the panel + */ + setScrollerMargin(width) { + const parent = this.container || this.view.dom; const margin = this.left ? "marginLeft" : "marginRight"; - parent.querySelector(".cm-scroller").style[margin] = this.bufferWidth + "px"; + parent.querySelector(".cm-scroller").style[margin] = width + "px"; } /** diff --git a/src/web/waiters/InputWaiter.mjs b/src/web/waiters/InputWaiter.mjs index 3a63321d..5f5ec8be 100644 --- a/src/web/waiters/InputWaiter.mjs +++ b/src/web/waiters/InputWaiter.mjs @@ -805,9 +805,10 @@ class InputWaiter { e.stopPropagation(); e.preventDefault(); // Dragleave often fires when moving between lines in the editor. - // If the target element is within the input-text element, we are still on target. - if (!this.inputTextEl.contains(e.target)) + // If the from element is within the input-text element, we are still on target. + if (!this.inputTextEl.contains(e.fromElement)) { e.target.closest("#input-text").classList.remove("dropping-file"); + } } /** @@ -994,6 +995,9 @@ class InputWaiter { if (changeOutput) { this.manager.output.changeTab(inputNum, false); } + + // Set cursor focus to current tab + this.inputEditorView.focus(); } /** @@ -1108,7 +1112,7 @@ class InputWaiter { * @param {number} inputNum - The inputNum of the new tab * @param {boolean} [changeTab=true] - If true, changes to the new tab once it's been added */ - addTab(inputNum, changeTab = true) { + addTab(inputNum, changeTab=true) { const tabsWrapper = document.getElementById("input-tabs"), numTabs = tabsWrapper.children.length;