WTerminal/wterminal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: max-heigt on popvar-window

Browse Source
This commit is contained in:
Ward Truyen
2025-10-19 00:22:23 +02:00
parent 37d565e98c
commit 3360ddb918
1 changed files with 101 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/js/termext/ext-popvar.js
View File

@@ -5,11 +5,13 @@
*/
{// 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 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 {
class PopVarWindow {
static popupCounter = 0;
constructor(variableName, term) {
this.variableName = variableName;
@@ -17,6 +19,7 @@
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;
@@ -32,29 +35,29 @@
}
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;`;
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 });
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.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());
let btnRefresh = WTerminal.createElement('button', { title: "refresh" });
const btnRefresh = WTerminal.createElement('button', { title: "refresh" });
btnRefresh.innerHTML = '↻';
btnRefresh.addEventListener("click", () => this.printVariable());
let btnClose = WTerminal.createElement('button', { title: 'close' });
const 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" });
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 " + PopUpWindow.popupCounter));
let spanForClose = WTerminal.createElement('span', { style: "float: right;" }, btnClose);
headerDiv.appendChild(document.createTextNode(" Popvar " + PopVarWindow.popupCounter));
const spanForClose = WTerminal.createElement('span', { style: "float: right;" }, btnClose);
headerDiv.appendChild(spanForClose);
this.container.appendChild(headerDiv);
this.container.appendChild(this.outputEl);
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);
@@ -76,8 +79,7 @@
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.outputEl = WTerminal.createElement('pre', { style: OUTPUT_STYLE });
this.printVar(WTerminal.getGlobalVariable(this.variableName), this.variableName);
oldOutput.replaceWith(this.outputEl);
}
@@ -102,8 +104,8 @@
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";
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";
}
endDrag() {
@@ -112,13 +114,14 @@
}
};//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