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. {// this code block hides the variables below from other scripts.
const runPopVar = function(term, argLine) {
const PAUSE_SYMBOL = "◼"; const PAUSE_SYMBOL = "◼";
const INTERVAL_TIME = "1000"; // 1000 == 1second 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; static popupCounter = 0;
constructor(variableName, term) { constructor(variableName, term) {
this.variableName = variableName; this.variableName = variableName;
@@ -17,6 +19,7 @@
this._getObjType = term._getObjType; this._getObjType = term._getObjType;
this._printObject = term._printObject; this._printObject = term._printObject;
this.printLn = term.printLn; this.printLn = term.printLn;
this.print = term.print;
this.options = {}; this.options = {};
let o = this.options; let o = this.options;
let to = term.options; let to = term.options;
@@ -32,29 +35,29 @@
} }
createPopup() { createPopup() {
const t = 2 + PopUpWindow.popupCounter++; const t = 2 + PopVarWindow.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;'; const containerStyle = CONTAINER_STYLE + ` top: ${t}em; left: ${t}em;`;
containerStyle += ` top: ${t}em; left: ${t}em;`;
this.container = WTerminal.createElement('div', { style: containerStyle, title: this.variableName }); 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: OUTPUT_STYLE });
this.outputEl = WTerminal.createElement('pre', { style: outputStyle });
this.btnPauseContinue = WTerminal.createElement('button', { title: "pause" }); this.btnPauseContinue = WTerminal.createElement('button', { title: "pause" });
this.btnPauseContinue.innerHTML = PAUSE_SYMBOL; this.btnPauseContinue.innerHTML = PAUSE_SYMBOL;
this.btnPauseContinue.addEventListener("click", () => this.onPausePlay()); this.btnPauseContinue.addEventListener("click", () => this.onPausePlay());
let btnRefresh = WTerminal.createElement('button', { title: "refresh" }); const btnRefresh = WTerminal.createElement('button', { title: "refresh" });
btnRefresh.innerHTML = '↻'; btnRefresh.innerHTML = '↻';
btnRefresh.addEventListener("click", () => this.printVariable()); 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.addEventListener("click", () => this.closePopup());
btnClose.innerHTML = "✖"; 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(btnRefresh);
headerDiv.appendChild(this.btnPauseContinue); headerDiv.appendChild(this.btnPauseContinue);
headerDiv.appendChild(document.createTextNode(" Popvar " + PopUpWindow.popupCounter)); headerDiv.appendChild(document.createTextNode(" Popvar " + PopVarWindow.popupCounter));
let spanForClose = WTerminal.createElement('span', { style: "float: right;" }, btnClose); const spanForClose = WTerminal.createElement('span', { style: "float: right;" }, btnClose);
headerDiv.appendChild(spanForClose); headerDiv.appendChild(spanForClose);
this.container.appendChild(headerDiv); 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); document.body.appendChild(this.container);
headerDiv.onmousedown = (e) => this.startDrag(e); headerDiv.onmousedown = (e) => this.startDrag(e);
@@ -76,8 +79,7 @@
printVariable() { printVariable() {
const oldOutput = this.outputEl; 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: OUTPUT_STYLE });
this.outputEl = WTerminal.createElement('pre', { style: outputStyle });
this.printVar(WTerminal.getGlobalVariable(this.variableName), this.variableName); this.printVar(WTerminal.getGlobalVariable(this.variableName), this.variableName);
oldOutput.replaceWith(this.outputEl); oldOutput.replaceWith(this.outputEl);
} }
@@ -102,8 +104,8 @@
this.pos2 = this.pos4 - e.clientY; this.pos2 = this.pos4 - e.clientY;
this.pos3 = e.clientX; this.pos3 = e.clientX;
this.pos4 = e.clientY; this.pos4 = e.clientY;
this.container.style.top = (this.container.offsetTop - this.pos2) + "px"; this.container.style.top = Math.max(this.container.offsetTop - this.pos2, 0) + "px";
this.container.style.left = (this.container.offsetLeft - this.pos1) + "px"; this.container.style.left = Math.max(this.container.offsetLeft - this.pos1, 0) + "px";
} }
endDrag() { endDrag() {
@@ -112,13 +114,14 @@
} }
};//class PopUpWindow };//class PopUpWindow
const runPopVar = function(term, argLine) {
if (globalThis === undefined) { if (globalThis === undefined) {
term.printError("Popvar error: Missing globalThis"); term.printError("Popvar error: Missing globalThis");
} else if (argLine == '') { } else if (argLine == '') {
term.printError("Popvar error: No name"); term.printError("Popvar error: No name");
} else { } else {
// return new PopUpWindow(argLine, term); // return new PopUpWindow(argLine, term);
new PopUpWindow(argLine, term); new PopVarWindow(argLine, term);
} }
}// runPopvar }// runPopvar