fix: allow constructor with 1 arguement

src/dropdown.html

@@ -39,14 +39,14 @@
         &lt;script src="js/wterminal.js"&gt;&lt;/script&gt;</code>
     </p>
     <p>Then add a script ellement with:<br>
-      <code>WTerminal.instalDropdownTerminal();</code>
-      Or
-      <code>new WTerminal("dropdown", null, null);</code>
+        <code>WTerminal.instalDropdownTerminal();</code><br>
+      Or<br>
+      <code>new WTerminal("dropdown");</code><br>
     </p>
     <script>
-      WTerminal.instalDropdownTerminal();
+      // WTerminal.instalDropdownTerminal();
       // Or
-      //new WTerminal("dropdown", null, null);
+      new WTerminal("dropdown");
     </script>
   </main>
 

src/js/termext/ext-popvar.js

@@ -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
 

src/js/wterminal.js

@@ -5,7 +5,7 @@
 */
 class WTerminal {
   //TERMINAL const
-  static get VERSION() { return "1.3.2"; }; // terminal version, duh.
+  static get VERSION() { return "1.3.3"; }; // terminal version, duh.
   //css & html element relations:
   static get BACKGROUND_CLASS() { return "wterminal-background"; }; // blurred background div class, contains it all, hides it all.
   static get CONTAINER_CLASS() { return "wterminal-container"; }; // container div class for all the terminal elements.
@@ -197,10 +197,11 @@ class WTerminal {
   };
 
   constructor(name, locationId, options) {
-    // use name in static storage of terminals
     this.name = name;
-    this.locationId = location;
+    this.locationId = locationId;
+    // use name in static storage of terminals
     WTerminal.terminals[name] = this;
+    // Todo: use options variable ... 
 
     //create terminal elements
     const container = WTerminal.createElement('div', { class: WTerminal.CONTAINER_CLASS, title: "Terminal" });
@@ -275,13 +276,13 @@ class WTerminal {
     controls.appendChild(btnScrollBottom);
     container.appendChild(output);
     container.appendChild(inputForm);
-    if (locationId === null) {    // use location to insert terminal in a div(string id) or dropdown (null)
+    if (locationId === null || typeof locationId === 'undefined') {    // use location to insert terminal in a div(string id) or dropdown (null)
       const background = WTerminal.createElement('div', { class: WTerminal.BACKGROUND_CLASS, title: "Close terminal" });
       this.backgroundEl = background;
 
       const btnClose = WTerminal.createElement('button', { title: "Close terminal" });//, "✖")
       btnClose.innerHTML = "✖";
-      btnClose.onclick = (e) => this.terminalClose();
+      btnClose.onclick = () => this.terminalClose();
       this.onDocBodyKeyDown = function(event) {
         //this.printLn('keydown.code ' + event.code);
         //console.log('terminal keydown.code ' + event.code);
@@ -1296,7 +1297,7 @@ class WTerminal {
     if (document.body) {
       new WTerminal('dropdown', null, null);
     } else {
-      window.addEventListener("load", () => new WTerminal('dropdown', null, null));
+      window.addEventListener("load", () => new WTerminal('dropdown'));
     }
   }
 

src/static-terminal.html

@@ -31,7 +31,7 @@
       element-id("static-terminal") to generate a terminal as a 'static element on our page'.</p>
     <div id="static-terminal"></div>
     <script>
-      new WTerminal("static", "static-terminal", null);
+      new WTerminal("static", "static-terminal");
     </script>
     <div style="padding-top: 4px;">
       Samples:
@@ -47,10 +47,10 @@
         &lt;script src="js/wterminal.js"&gt;&lt;/script&gt;</code>
     </p>
     <p>Where the terminal should be add a div element, with id "static-terminal":<br>
-      <code>&lt;div id="static-terminal"&gt;&lt;/div&gt;</code>
+      <code>&lt;div id="my-terminal-name"&gt;&lt;/div&gt;</code>
     </p>
     <p>Finally add a script element with:<br>
-      <code>new WTerminal("static", "static-terminal", null);</code>
+      <code>new WTerminal("static", "my-terminal-name");</code>
     </p>
   </main>