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.
|
{// 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;
|
||||||
this.printVar = term.printVar;
|
this.printVar = term.printVar;
|
||||||
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.options = {};
|
this.print = term.print;
|
||||||
let o = this.options;
|
this.options = {};
|
||||||
let to = term.options;
|
let o = this.options;
|
||||||
o.printToConsoleLog = false;
|
let to = term.options;
|
||||||
o.tpo_unknownObjectPrint = to.tpo_unknownObjectPrint;
|
o.printToConsoleLog = false;
|
||||||
o.tpo_objectPrefix = to.tpo_objectPrefix;
|
o.tpo_unknownObjectPrint = to.tpo_unknownObjectPrint;
|
||||||
o.tpo_specialPrefix = to.tpo_specialPrefix;
|
o.tpo_objectPrefix = to.tpo_objectPrefix;
|
||||||
o.tpo_maxDepth = to.tpo_maxDepth;
|
o.tpo_specialPrefix = to.tpo_specialPrefix;
|
||||||
o.tpo_innerMaxLength = to.tpo_innerMaxLength;
|
o.tpo_maxDepth = to.tpo_maxDepth;
|
||||||
this.createPopup();
|
o.tpo_innerMaxLength = to.tpo_innerMaxLength;
|
||||||
this.printVariable();
|
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);
|
this.intervalId = setInterval(() => this.printVariable(), INTERVAL_TIME);
|
||||||
}
|
this.printVariable();
|
||||||
|
|
||||||
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.btnPauseContinue.innerHTML = PAUSE_SYMBOL;
|
this.btnPauseContinue.innerHTML = PAUSE_SYMBOL;
|
||||||
this.btnPauseContinue.addEventListener("click", () => this.onPausePlay());
|
this.btnPauseContinue.title = "pause";
|
||||||
let btnRefresh = WTerminal.createElement('button', { title: "refresh" });
|
} else {
|
||||||
btnRefresh.innerHTML = '↻';
|
clearInterval(this.intervalId);
|
||||||
btnRefresh.addEventListener("click", () => this.printVariable());
|
this.intervalId = 0;
|
||||||
let btnClose = WTerminal.createElement('button', { title: 'close' });
|
this.btnPauseContinue.innerHTML = "►";
|
||||||
btnClose.addEventListener("click", () => this.closePopup());
|
this.btnPauseContinue.title = "play";
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onPausePlay() {
|
printVariable() {
|
||||||
if (this.intervalId === 0) {
|
const oldOutput = this.outputEl;
|
||||||
this.intervalId = setInterval(() => this.printVariable(), INTERVAL_TIME);
|
this.outputEl = WTerminal.createElement('pre', { style: OUTPUT_STYLE });
|
||||||
this.printVariable();
|
this.printVar(WTerminal.getGlobalVariable(this.variableName), this.variableName);
|
||||||
this.btnPauseContinue.innerHTML = PAUSE_SYMBOL;
|
oldOutput.replaceWith(this.outputEl);
|
||||||
this.btnPauseContinue.title = "pause";
|
}
|
||||||
} else {
|
|
||||||
clearInterval(this.intervalId);
|
|
||||||
this.intervalId = 0;
|
|
||||||
this.btnPauseContinue.innerHTML = "►";
|
|
||||||
this.btnPauseContinue.title = "play";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
printVariable() {
|
closePopup() {
|
||||||
const oldOutput = this.outputEl;
|
document.body.removeChild(this.container);
|
||||||
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() {
|
startDrag(e) {
|
||||||
document.body.removeChild(this.container);
|
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) {
|
dragPopup(e) {
|
||||||
if (e.button !== 0) return;
|
// e = e || window.event;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.pos3 = e.clientX;
|
this.pos1 = this.pos3 - e.clientX;
|
||||||
this.pos4 = e.clientY;
|
this.pos2 = this.pos4 - e.clientY;
|
||||||
document.onmouseup = () => this.endDrag();
|
this.pos3 = e.clientX;
|
||||||
document.onmousemove = (e) => this.dragPopup(e);
|
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) {
|
endDrag() {
|
||||||
// e = e || window.event;
|
document.onmouseup = null;
|
||||||
e.preventDefault();
|
document.onmousemove = null;
|
||||||
this.pos1 = this.pos3 - e.clientX;
|
}
|
||||||
this.pos2 = this.pos4 - e.clientY;
|
};//class PopUpWindow
|
||||||
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
|
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user