feat: max-heigt on popvar-window
This commit is contained in:
Ward Truyen
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user