From 3360ddb918dd2b03d1b26ef426d271537d932bfb Mon Sep 17 00:00:00 2001 From: Ward Truyen Date: Sun, 19 Oct 2025 00:22:23 +0200 Subject: [PATCH] feat: max-heigt on popvar-window --- src/js/termext/ext-popvar.js | 199 ++++++++++++++++++----------------- 1 file changed, 101 insertions(+), 98 deletions(-) diff --git a/src/js/termext/ext-popvar.js b/src/js/termext/ext-popvar.js index 421e141..24d5633 100644 --- a/src/js/termext/ext-popvar.js +++ b/src/js/termext/ext-popvar.js @@ -5,120 +5,123 @@ */ {// this code block hides the variables below from other scripts. - const runPopVar = function(term, argLine) { - const PAUSE_SYMBOL = "◼"; - const INTERVAL_TIME = "1000"; // 1000 == 1second + const PAUSE_SYMBOL = "◼"; + const INTERVAL_TIME = "1000"; // 1000 == 1second + const OUTPUT_STYLE = 'margin: 2px; font-family: Monospace, Incosolata, Courier; font-size: 12px; line-height: 1.05;'; + const CONTAINER_STYLE = 'border: 1px solid black; z-index: 9990; position: absolute; background: #e0eaefa0; border-radius: 2px; backdrop-filter: blur(3px) brightness(80%); box-shadow: 3px 3px 3px #00000086; max-height: 80%; overflow-y: hidden; min-width: 40em;'; + const SCROLL_DIV_STYLE = 'overflow-y: scroll; max-height: calc(80vh - 80px);';//' + (window.innerHeight * 0.8 - 80) + 'px;'; - class PopUpWindow { - static popupCounter = 0; - constructor(variableName, term) { - this.variableName = variableName; - this.printVar = term.printVar; - this._getObjType = term._getObjType; - this._printObject = term._printObject; - this.printLn = term.printLn; - this.options = {}; - let o = this.options; - let to = term.options; - o.printToConsoleLog = false; - o.tpo_unknownObjectPrint = to.tpo_unknownObjectPrint; - o.tpo_objectPrefix = to.tpo_objectPrefix; - o.tpo_specialPrefix = to.tpo_specialPrefix; - o.tpo_maxDepth = to.tpo_maxDepth; - o.tpo_innerMaxLength = to.tpo_innerMaxLength; - this.createPopup(); - this.printVariable(); + class PopVarWindow { + static popupCounter = 0; + constructor(variableName, term) { + this.variableName = variableName; + this.printVar = term.printVar; + this._getObjType = term._getObjType; + this._printObject = term._printObject; + this.printLn = term.printLn; + this.print = term.print; + this.options = {}; + let o = this.options; + let to = term.options; + o.printToConsoleLog = false; + o.tpo_unknownObjectPrint = to.tpo_unknownObjectPrint; + o.tpo_objectPrefix = to.tpo_objectPrefix; + o.tpo_specialPrefix = to.tpo_specialPrefix; + o.tpo_maxDepth = to.tpo_maxDepth; + o.tpo_innerMaxLength = to.tpo_innerMaxLength; + this.createPopup(); + this.printVariable(); + this.intervalId = setInterval(() => this.printVariable(), INTERVAL_TIME); + } + + createPopup() { + const t = 2 + PopVarWindow.popupCounter++; + const containerStyle = CONTAINER_STYLE + ` top: ${t}em; left: ${t}em;`; + this.container = WTerminal.createElement('div', { style: containerStyle, title: this.variableName }); + this.outputEl = WTerminal.createElement('pre', { style: OUTPUT_STYLE }); + this.btnPauseContinue = WTerminal.createElement('button', { title: "pause" }); + this.btnPauseContinue.innerHTML = PAUSE_SYMBOL; + this.btnPauseContinue.addEventListener("click", () => this.onPausePlay()); + const btnRefresh = WTerminal.createElement('button', { title: "refresh" }); + btnRefresh.innerHTML = '↻'; + btnRefresh.addEventListener("click", () => this.printVariable()); + const btnClose = WTerminal.createElement('button', { title: 'close' }); + btnClose.addEventListener("click", () => this.closePopup()); + btnClose.innerHTML = "✖"; + const headerDiv = WTerminal.createElement('div', { style: "border-bottom: 1px solid black; padding: 2px; background: #00000060" }); + headerDiv.appendChild(btnRefresh); + headerDiv.appendChild(this.btnPauseContinue); + headerDiv.appendChild(document.createTextNode(" Popvar " + PopVarWindow.popupCounter)); + const spanForClose = WTerminal.createElement('span', { style: "float: right;" }, btnClose); + headerDiv.appendChild(spanForClose); + this.container.appendChild(headerDiv); + const scrollDiv = WTerminal.createElement('div', { style: SCROLL_DIV_STYLE }); + scrollDiv.appendChild(this.outputEl); + this.container.appendChild(scrollDiv); + document.body.appendChild(this.container); + + headerDiv.onmousedown = (e) => this.startDrag(e); + } + + onPausePlay() { + if (this.intervalId === 0) { this.intervalId = setInterval(() => this.printVariable(), INTERVAL_TIME); - } - - createPopup() { - const t = 2 + PopUpWindow.popupCounter++; - let containerStyle = 'border: 1px solid black; z-index: 9990; position: absolute; background: #ffffffa0; border-radius: 2px; backdrop-filter: blur(3px); box-shadow: 3px 3px 3px #00000066;'; - containerStyle += ` top: ${t}em; left: ${t}em;`; - this.container = WTerminal.createElement('div', { style: containerStyle, title: this.variableName }); - const outputStyle = 'margin: 2px; font-family: Monospace, Incosolata, Courier; font-size: 12px; line-height: 1.05;';// overflow-y: scroll; max-height: ' + (window.innerHeight-80) +'px;'; - this.outputEl = WTerminal.createElement('pre', { style: outputStyle }); - this.btnPauseContinue = WTerminal.createElement('button', { title: "pause" }); + this.printVariable(); this.btnPauseContinue.innerHTML = PAUSE_SYMBOL; - this.btnPauseContinue.addEventListener("click", () => this.onPausePlay()); - let btnRefresh = WTerminal.createElement('button', { title: "refresh" }); - btnRefresh.innerHTML = '↻'; - btnRefresh.addEventListener("click", () => this.printVariable()); - let btnClose = WTerminal.createElement('button', { title: 'close' }); - btnClose.addEventListener("click", () => this.closePopup()); - btnClose.innerHTML = "✖"; - let headerDiv = WTerminal.createElement('div', { style: "border-bottom: 1px solid black; padding: 2px; background: #00000060" }); - headerDiv.appendChild(btnRefresh); - headerDiv.appendChild(this.btnPauseContinue); - headerDiv.appendChild(document.createTextNode(" Popvar " + PopUpWindow.popupCounter)); - let spanForClose = WTerminal.createElement('span', { style: "float: right;" }, btnClose); - headerDiv.appendChild(spanForClose); - this.container.appendChild(headerDiv); - this.container.appendChild(this.outputEl); - document.body.appendChild(this.container); - - headerDiv.onmousedown = (e) => this.startDrag(e); + this.btnPauseContinue.title = "pause"; + } else { + clearInterval(this.intervalId); + this.intervalId = 0; + this.btnPauseContinue.innerHTML = "►"; + this.btnPauseContinue.title = "play"; } + } - onPausePlay() { - if (this.intervalId === 0) { - this.intervalId = setInterval(() => this.printVariable(), INTERVAL_TIME); - this.printVariable(); - this.btnPauseContinue.innerHTML = PAUSE_SYMBOL; - this.btnPauseContinue.title = "pause"; - } else { - clearInterval(this.intervalId); - this.intervalId = 0; - this.btnPauseContinue.innerHTML = "►"; - this.btnPauseContinue.title = "play"; - } - } + printVariable() { + const oldOutput = this.outputEl; + this.outputEl = WTerminal.createElement('pre', { style: OUTPUT_STYLE }); + this.printVar(WTerminal.getGlobalVariable(this.variableName), this.variableName); + oldOutput.replaceWith(this.outputEl); + } - printVariable() { - const oldOutput = this.outputEl; - const outputStyle = 'margin: 2px; font-family: Monospace, Incosolata, Courier; font-size: 12px; line-height: 1.05;';// overflow-y: scroll; max-height: ' + (window.innerHeight-80) +'px;'; - this.outputEl = WTerminal.createElement('pre', { style: outputStyle }); - this.printVar(WTerminal.getGlobalVariable(this.variableName), this.variableName); - oldOutput.replaceWith(this.outputEl); - } + closePopup() { + document.body.removeChild(this.container); + } - closePopup() { - document.body.removeChild(this.container); - } + startDrag(e) { + if (e.button !== 0) return; + e.preventDefault(); + this.pos3 = e.clientX; + this.pos4 = e.clientY; + document.onmouseup = () => this.endDrag(); + document.onmousemove = (e) => this.dragPopup(e); + } - startDrag(e) { - if (e.button !== 0) return; - e.preventDefault(); - this.pos3 = e.clientX; - this.pos4 = e.clientY; - document.onmouseup = () => this.endDrag(); - document.onmousemove = (e) => this.dragPopup(e); - } + dragPopup(e) { + // e = e || window.event; + e.preventDefault(); + this.pos1 = this.pos3 - e.clientX; + this.pos2 = this.pos4 - e.clientY; + this.pos3 = e.clientX; + this.pos4 = e.clientY; + this.container.style.top = Math.max(this.container.offsetTop - this.pos2, 0) + "px"; + this.container.style.left = Math.max(this.container.offsetLeft - this.pos1, 0) + "px"; + } - dragPopup(e) { - // e = e || window.event; - e.preventDefault(); - this.pos1 = this.pos3 - e.clientX; - this.pos2 = this.pos4 - e.clientY; - this.pos3 = e.clientX; - this.pos4 = e.clientY; - this.container.style.top = (this.container.offsetTop - this.pos2) + "px"; - this.container.style.left = (this.container.offsetLeft - this.pos1) + "px"; - } - - endDrag() { - document.onmouseup = null; - document.onmousemove = null; - } - };//class PopUpWindow + endDrag() { + document.onmouseup = null; + document.onmousemove = null; + } + };//class PopUpWindow + const runPopVar = function(term, argLine) { if (globalThis === undefined) { term.printError("Popvar error: Missing globalThis"); } else if (argLine == '') { term.printError("Popvar error: No name"); } else { // return new PopUpWindow(argLine, term); - new PopUpWindow(argLine, term); + new PopVarWindow(argLine, term); } }// runPopvar