diff --git a/static/index.html b/static/index.html index 29ac9c5..cfdda0b 100644 --- a/static/index.html +++ b/static/index.html @@ -55,7 +55,8 @@ data-direction="vertical" data-target="panels-overlay" data-target-property="--right-width" - data-init-size="384"> + data-init-size="384" + data-min-size="128"> diff --git a/static/resize-handle.js b/static/resize-handle.js index b568746..4dff700 100644 --- a/static/resize-handle.js +++ b/static/resize-handle.js @@ -11,12 +11,10 @@ export class ResizeHandle extends HTMLElement { this.target = document.getElementById(this.targetId); this.targetProperty = this.getAttribute("data-target-property"); this.initSize = parseInt(this.getAttribute("data-init-size")); + this.minSize = parseInt(this.getAttribute("data-min-size")); - this.size = parseInt(localStorage.getItem(this.#localStorageKey)); - if (this.size != this.size) { - this.size = this.initSize; - this.#saveSize(); - } + this.#setSize(parseInt(localStorage.getItem(this.#localStorageKey))); + this.#saveSize(); this.#updateTargetProperty(); this.visual = this.appendChild(document.createElement("div")); @@ -25,6 +23,13 @@ export class ResizeHandle extends HTMLElement { this.#draggingBehaviour(); } + #setSize(newSize) { + if (newSize != newSize) { + this.size = this.initSize; + } + this.size = Math.max(this.minSize, newSize); + } + get #localStorageKey() { return `rkgk.resizeHandle.size.${this.targetId}`; } @@ -48,7 +53,7 @@ export class ResizeHandle extends HTMLElement { let event = await listen([window, "mousemove"], [window, "mouseup"]); if (event.type == "mousemove") { if (this.direction == "vertical") { - this.size = startingSize + (mouseDown.clientX - event.clientX); + this.#setSize(startingSize + (mouseDown.clientX - event.clientX)); } this.#updateTargetProperty(); } else if (event.type == "mouseup") {