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

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>