commit 7246af80e16d369d8ab214b680d62db9bd512027 Author: Ward Truyen Date: Sat Sep 21 16:23:13 2024 +0200 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100755 index 0000000..85e7c1d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/.idea/ diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b3089b0 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Ward Truyen + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..43c263a --- /dev/null +++ b/README.md @@ -0,0 +1,66 @@ +``` +* _ . _ _____ .----..----. .-. .-..-..-. .-. .--. .-. +* | |/ \| |[_ _]| {__ | {) }| .`-'. ||~|| .`| | / {} \ | | +* | ,-, | | | | {__ | .-. \| |\ /| || || |\ |/ /\ \| `--. +* '-' `-' '-' `----'`-' `-'`-' ` `-'`-'`-' `-'`-' `-'`----' +``` + +# For terminal fun on the web. + +## About + +WTerminal is written in JavaScript and CSS. For use in websites. No compiling needed. 1 big class. +This can be used as a dropdown terminal and as a terminal on the page(static), at the same time. +It provides easy tools for printing- and changing public variables(javascript) and cookies. +The terminal is useful for testing/logging-debugging without opening the console every time. +WTerminal instances can be augmented with extention-commands and extention-aliases without changing the terminal.js code. + +## Screenshots + +Sample terminal as a static element + +![Screenshot static](public/screenshot1.png) + +Sample terminal as a dropdown after playing ping pong + +![Screenshot dropdown](public/screenshot2.png) + +Sample terminal as a dropdown + darkmode + +![Screenshot dropdown](public/screenshot5.png) + +Terminal for testing + +![Screenshot dropdown](public/screenshot3.png) + +Terminal for testing + darkmode + +![Screenshot dropdown](public/screenshot4.png) + +Terminal as extention (surfing youtube) + +![Screenshot dropdown](public/screenshot6.png) + +## Testing + +To test WTerminal I use serve on the src folder, [the npm package serve](https://www.npmjs.com/package/serve). +``` +serve src/ +``` + +To install serve i suggest the following command: +``` +npm install --global serve +``` + +## Terminal as WebExtension + +You can also use this terminal-project as a (Temporary) browser-extension. Get a terminal everywhere you surf. + +- [firefox addon paage](https://addons.mozilla.org/en-US/firefox/addon/wterminal/) + +How to documentation: + +- [MDN WebExtension](https://developer.mozilla.org/en-US/diocs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension) +- [firefox info](https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html#this-firefox) +- [firefox about:debugging](about:debugging) diff --git a/icons/favicon.ico b/icons/favicon.ico new file mode 100644 index 0000000..f9b5f37 Binary files /dev/null and b/icons/favicon.ico differ diff --git a/icons/icon.png b/icons/icon.png new file mode 100644 index 0000000..730ab05 Binary files /dev/null and b/icons/icon.png differ diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..2d974f6 --- /dev/null +++ b/manifest.json @@ -0,0 +1,25 @@ +{ + + "manifest_version": 2, + "name": "WTerminal", + "version": "1.0.1", + "description": "Adds a dropdown terminal to all webpages", + "author": "Ward Truyen", + + "icons": { + "48": "icons/icon.png" + }, + + "content_scripts": [ + { + "matches": [""], + "js": ["src/wterminal.js", "src/wterminal-addon.js", + "src/termext/ext-cookies.js", "src/termext/ext-eval.js", + "src/termext/ext-popvar.js", "src/termext/ext-passw.js", "src/termext/ext-timerdebug.js", + "src/termext/ext-transfer.js", "src/termext/ext-stresstest.js", "src/termext/ext-variables.js"], + "css": ["src/wterminal.css"] + } + ] + +} + diff --git a/public/screenshot1.png b/public/screenshot1.png new file mode 100644 index 0000000..301e617 Binary files /dev/null and b/public/screenshot1.png differ diff --git a/public/screenshot2.png b/public/screenshot2.png new file mode 100644 index 0000000..819d824 Binary files /dev/null and b/public/screenshot2.png differ diff --git a/public/screenshot3.png b/public/screenshot3.png new file mode 100644 index 0000000..eceed86 Binary files /dev/null and b/public/screenshot3.png differ diff --git a/public/screenshot4.png b/public/screenshot4.png new file mode 100644 index 0000000..96ed6af Binary files /dev/null and b/public/screenshot4.png differ diff --git a/public/screenshot5.png b/public/screenshot5.png new file mode 100644 index 0000000..f6a7118 Binary files /dev/null and b/public/screenshot5.png differ diff --git a/public/screenshot6.png b/public/screenshot6.png new file mode 100644 index 0000000..4d44c48 Binary files /dev/null and b/public/screenshot6.png differ diff --git a/src/termext/ext-cookies.js b/src/termext/ext-cookies.js new file mode 100644 index 0000000..7fbf648 --- /dev/null +++ b/src/termext/ext-cookies.js @@ -0,0 +1,103 @@ +/* Author: Ward Truyen +* Version: 1.0.0 +* About: Cookie data managing +*/ + +if (WTerminal) { + const initTerminalCookieCommands = function() { + //getcookie + WTerminal.terminalAddCommand("getcookie", (term, argLine) => { + function getCookie(name, defaultValue = undefined) { + if (name === null || name === undefined || typeof name != "string" || name == '') { + console.log('error: cookie needs a name'); + return; + } + let pair = document.cookie.split(/; */).find((row) => row.startsWith(name + '=')) + //console.log("cookie pair: ", pair); + if (pair === undefined) + return defaultValue; + else + return pair.split('=')[1]; + } + return getCookie(...WTerminal.splitToArguments(argLine)); + }); + //setcookie + WTerminal.terminalAddCommand("setcookie", (term, argLine) => { + function setCookie(name, value = 1, days = 7) { + let date = new Date(); + date.setDate(date.getDate() + days); // add x days to date + document.cookie = name + "=" + value + "; expires=" + date.toUTCString() + "; SameSite=strict; Secure"; + } + return setCookie(...WTerminal.splitToArguments(argLine)); + }); + //removecookies + WTerminal.terminalAddCommand("removecookies", function(term) { + function removeCookie(name) { + document.cookie = name + "=0; max-age=-1" + "; SameSite=strict; Secure"; + } + if (document.cookie == '') { + term.printError("No cookies found."); + return; + } + const cookies = document.cookie.split(/; */); + term.printLn("Cookies found: " + cookies.length); + cookies.forEach(c => { + const name = c.split('=')[0]; + term.printLn("removing: " + name); + removeCookie(name); + }); + }); + //cookies + WTerminal.terminalAddCommand("cookies", + function(term, argLine) { + if (document.cookie === '') { + if (!argLine.includes("-s")) term.printError("No cookies found.") + } else { + term.printList(document.cookie.split(/; */), false); + } + }, + function(term) { + term.printLn("Usage:"); + term.printLn(" cookies //Prints all cookies."); + term.printLn(" cookies -s //(silent)Prints only cookies, no error."); + }); + //doCookiesWork + WTerminal.terminalAddCommand("docookieswork", (term) => { + function getCookie(name, defaultValue = undefined) { + if (name === null || name === undefined || typeof name != "string" || name == '') { + console.log('error: cookie needs a name'); + return; + } + let pair = document.cookie.split(/; */).find((row) => row.startsWith(name + '=')) + //console.log("cookie pair: ", pair); + if (pair === undefined) + return defaultValue; + else + return pair.split('=')[1]; + } + function setCookie(name, value = 1, days = 7) { + let date = new Date(); + date.setDate(date.getDate() + days); // add x days to date + document.cookie = name + "=" + value + "; expires=" + date.toUTCString() + "; SameSite=strict; Secure"; + } + function removeCookie(name) { + document.cookie = name + "=0; max-age=-1" + "; SameSite=strict; Secure"; + } + const name = "testCookie"; + setCookie(name); + let itWorks = getCookie(name) !== undefined; + if (itWorks) { + removeCookie(name); + } + term.printLn(itWorks); + return itWorks; + }); + } + + //init + if (document.body) { + initTerminalCookieCommands(); + } else { + window.addEventListener("load", initTerminalCookieCommands); + } +} diff --git a/src/termext/ext-eval.js b/src/termext/ext-eval.js new file mode 100644 index 0000000..50dea3a --- /dev/null +++ b/src/termext/ext-eval.js @@ -0,0 +1,32 @@ +/* Author: Ward Truyen +* Version: 1.0.0 +* About: This adds the eval command to the terminal. +*/ +{ + const evalHelp = function(term) { + term.printLn("Uses the function eval(string) on the argLine"); + } + const evalRun = function(term, argLine) { + try { + const result = eval(argLine); + term.printVar(result, '`' + argLine + '`'); + return result; + } catch (error) { + term.printError(`Eval error: \`${argLine}\` -> ${error.message}`); + } + }; + + const initTerminalEvalCommand = function() { + if (WTerminal === undefined) { //is WTerminal not available? + console.error("WTerminal is missing!"); + return; + } + WTerminal.terminalAddCommand("eval", evalRun, evalHelp); + }; + //init + if (document.body) { + initTerminalEvalCommand(); + } else { + window.addEventListener("load", initTerminalEvalCommand); + } +} diff --git a/src/termext/ext-featuretest.js b/src/termext/ext-featuretest.js new file mode 100644 index 0000000..dc4eb79 --- /dev/null +++ b/src/termext/ext-featuretest.js @@ -0,0 +1,42 @@ +/* Author: Ward Truyen +* Version: 1.0.0 +* About: This adds the test command to the terminal. +* current test is to get local variables +*/ +{ + const help = function(term) { + term.printLn("Runs a test (nothing)."); + } + const run = function(term) { + term.printLn("Feature test warning: Under construction, can have unexpected results, errors and crashes."); + // todo: add test ... like throw errors and stuff + + // throw {name : "NotImplementedError", message : "too lazy to implement"}; + // throw new Error("too lazy to implement", "some name perhaps?"); + // class TerminalError extends Error{ + // constructor(msg, name="TerminalError"){ + // super(msg); + // this.name = name; + // } + // } + // throw new TerminalError("my message", "MyName"); + let num = 1; + num.toPrecision(500); + }; + + const addExtention = function() { + if (WTerminal === undefined) { //is WTerminal not available? + console.error("AddExtention Error: WTerminal is missing!"); + return; + } + WTerminal.terminalAddCommand("featuretest", run, help); + //add alias + WTerminal.terminalAddAlias("ft", "featuretest"); + }; + //init + if (document.body) { + addExtention(); + } else { + window.addEventListener("load", addExtention); + } +} diff --git a/src/termext/ext-passw.js b/src/termext/ext-passw.js new file mode 100644 index 0000000..0a6e563 --- /dev/null +++ b/src/termext/ext-passw.js @@ -0,0 +1,96 @@ +/* Author: Ward Truyen +* Version: 1.0.0 +* About: This adds a password generatiing- and testing function +*/ +{ + + const generatePasswordHelp = function(term) { + term.printLn("Generates a new password and prints it out. But also copies it for you."); + } + const generatePassword = function(term, argLine) { + const UPPERCASE_LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + const LOWERCASE_LETTERS = "abcdefghijklmnopqrstuvwxyz"; + const NUMBERS = "1234567890"; + const SPECIAL_CHARACTERS = "!@#$%^&*()_-+=,./<>\\|[]{}"; + const ALL_CHARACTERS = UPPERCASE_LETTERS + LOWERCASE_LETTERS + NUMBERS + SPECIAL_CHARACTERS; + let passwd = ""; + let length = 15; + for (let i = 0; i < length; i++) { + passwd += ALL_CHARACTERS.charAt(Math.floor(Math.random() * ALL_CHARACTERS.length)); + } + const el = document.createElement('span'); + el.innerText = passwd; + // el.style.fontSize = 'x-large'; + el.style.paddingLeft = '1em'; + term.printLn("Generated password(length=" + length + "):", el); + navigator.clipboard.writeText(passwd); + }; + + const isPasswordSafeHelp = function(term) { + term.printLn("Checks if a password is posted as breached by pwnedpasswords.com"); + }; + const isPasswordSafe = function(term, argLine) { + const sha1 = function(string) { + const buffer = new TextEncoder("utf-8").encode(string); + return crypto.subtle.digest("SHA-1", buffer).then(function(buffer) { + // Get the hex code + let hexCodes = []; + const padding = '00000000' + const view = new DataView(buffer); + for (let i = 0; i < view.byteLength; i += 4) { + // Using getUint32 reduces the number of iterations needed (we process 4 bytes each time) + const value = view.getUint32(i) + // toString(16) will give the hex representation of the number without padding + const stringValue = value.toString(16) + // We use concatenation and slice for padding + const paddedValue = (padding + stringValue).slice(-padding.length) + hexCodes.push(paddedValue); + } + // Join all the hex strings into one + return hexCodes.join(""); + }); + }; + const password = argLine; + term.printLn("Checking password, please wait..."); + + sha1(password).then((hash) => { + fetch("https://api.pwnedpasswords.com/range/" + hash.substr(0, 5)).then((response) => response.text()).then((response) => { + + const respLines = response.split('\n'); + const hashSub = hash.slice(5).toUpperCase(); + let isSafe = true; + // console.log('hash: ' + hashSub); + for (let i in respLines) { + // console.log(i+': '+respLines[i]) + if (respLines[i].substring(0, hashSub.length) == hashSub) { + isSafe = false; + break; + } + } + if (isSafe) { + term.printLn("Password is safe."); + } else { + term.printLn("Password has been breached."); + } + }).catch((err) => { + outputSafe.innerText = "Could not check if password is safe: " + err; + }); + }); + }; + + const initTerminalPasswCommands = function() { + if (WTerminal === undefined) { //is WTerminal not available? + console.error("WTerminal is missing!"); + return; + } + + WTerminal.terminalAddCommand("generatepassword", generatePassword, generatePasswordHelp); + WTerminal.terminalAddCommand("ispasswordsafe", isPasswordSafe, isPasswordSafeHelp); + }; + //init + if (document.body) { + initTerminalPasswCommands(); + } else { + window.addEventListener("load", initTerminalPasswCommands); + } +} diff --git a/src/termext/ext-popvar.js b/src/termext/ext-popvar.js new file mode 100644 index 0000000..421e141 --- /dev/null +++ b/src/termext/ext-popvar.js @@ -0,0 +1,164 @@ +/* Author: Ward Truyen +* Version: 1.0.0 +* About: This adds the test command to the terminal. +* current test is to get local variables +*/ + +{// this code block hides the variables below from other scripts. + const runPopVar = function(term, argLine) { + const PAUSE_SYMBOL = "◼"; + const INTERVAL_TIME = "1000"; // 1000 == 1second + + 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(); + 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.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); + } + + 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; + 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); + } + + 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 = (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 + + 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); + } + }// runPopvar + + const initTerminalVariableCommands = function() { + const ext = { + popvar: { + run: runPopVar, + help: function(term) { + term.printLn("Creates a popup window with (refreshable) the given variable contents."); + term.printBold("Usage:"); + term.printLn("popvar VARIABLE_NAME //shows VARIABLE_NAME contents in a popup"); + term.printBold("Samples:"); + term.printLn("popvar terminal //Shows the terminal variable contents in a popup"); + } + }, + }; + + const aliases = { + pop: "popvar", + pt: "popvar terminal", + }; + + if (WTerminal === undefined) { //is WTerminal not available? + console.error("WTerminal is missing!"); + return; + } + //add commands in ext + for (let c of Object.keys(ext)) { + WTerminal.terminalAddCommand(c, ext[c].run, ext[c].help); + } + //add aliases + for (let c of Object.keys(aliases)) { + WTerminal.terminalAddAlias(c, aliases[c]); + } + }; + + //init + if (document.body) { + initTerminalVariableCommands(); + } else { + window.addEventListener("load", initTerminalVariableCommands); + } +} diff --git a/src/termext/ext-stresstest.js b/src/termext/ext-stresstest.js new file mode 100644 index 0000000..771b4b4 --- /dev/null +++ b/src/termext/ext-stresstest.js @@ -0,0 +1,40 @@ +/* Author: Ward Truyen +* Version: 1.0.0 +* About: This adds the test command to the terminal. +* current test is to get local variables +*/ + +{// this code block hides the variables below from other scripts. + const initTerminalStressTestCommand = function() { + const help = function(term) { + term.printLn("Runs a stress test on the terminal."); + }; + const run = function(term, argLine) { + const testArgLine = function(str) { + term.printVar(WTerminal.splitToArguments(str), '`' + argLine + '`.splitToArguments()'); + }; + if (argLine != '') testArgLine(argLine); + term.terminalCommand("? && alias && const && option && date && time && uptime && starttime && echo OK", true); + term.terminalCommand("? help && help alias && ? const && ? option && ? date && ? time && ? uptime", true); + term.terminalCommand("thisterminal && gg", true); + term.terminalCommand('gdb && result .2 && result .children.0 && result .innerHTML', true); + term.terminalCommand('eval 10000+4*(1+4*10) + Math.PI', true); + term.terminalCommand('dovar alert "finished stresstest"', true); + // term.terminalCommand('dovar document.getElementById ' + TERMINAL_OUTPUT_ID + ' && result .innerHTML', true); + + return term.lastResult; + }; + //add command + if (WTerminal === undefined) { + console.error("WTerminal is missing!"); + return; + } + WTerminal.terminalAddCommand("stresstest", run, help); + }; + //init + if (document.body) { + initTerminalStressTestCommand(); + } else { + window.addEventListener("load", initTerminalStressTestCommand); + } +} diff --git a/src/termext/ext-timerdebug.js b/src/termext/ext-timerdebug.js new file mode 100644 index 0000000..7440d40 --- /dev/null +++ b/src/termext/ext-timerdebug.js @@ -0,0 +1,45 @@ +/* Author: Ward Truyen +* Version: 1.0.0 +* About: This adds the test command to the terminal. +* current test is to get local variables +*/ +{ + const addExtention = function() { + const help = function(term) { + term.printLn("Installs a logger at setTimeout and setInterval."); + } + const run = function(term) { + //capture setTimeout + const oldSetTimeout = setTimeout; + setTimeout = function() { + const e = new Error('Just for stack trace'); + const result = oldSetTimeout.apply(this, arguments); + if (term) term.printLn(`New timeout ${result} registered.\n from: ${e.stack}`); + else console.log(`New timeout ${result} registered from: ${e.stack}`); + return result; + }; + //capture setInterval + const oldSetInterval = setInterval; + setInterval = function() { + const e = new Error('Just for stack trace'); + const result = oldSetInterval.apply(this, arguments); + if (term) term.printLn(`New interval ${result} registered.\n from: ${e.stack}`); + else console.log(`New interval ${result} registered from: ${e.stack}`); + return result; + } + term.printLn("activated"); + } + + if (WTerminal === undefined) { //is WTerminal not available? + console.error("WTerminal is missing!"); + return; + } + WTerminal.terminalAddCommand("timerdebug", run, help); + }; + //init + if (document.body) { + addExtention(); + } else { + window.addEventListener("load", addExtention); + } +} diff --git a/src/termext/ext-transfer.js b/src/termext/ext-transfer.js new file mode 100644 index 0000000..dcfa49c --- /dev/null +++ b/src/termext/ext-transfer.js @@ -0,0 +1,88 @@ +/* Author: Ward Truyen +* Version: 1.0.0 +* About: This allows the terminal to transfer from add-on to page level, by using the extemtopm command 'transfer'. +* THIS SCRIPT ONLY WORKS FOR A BROWSER-ADDON/EXTENTION! +*/ + +{// this code block hides the variables below from other scripts. + const TRANSFER_COMMAND_NAME = "transfer"; + const TRANSFER_SCRIPT_ID = "terminal-transfer-script"; + + const initTerminalTransferCommand = function() { + const help = function(term) { + term.printLn("Transfers all the terminal functions and variables, from the addon-scope to the document/page-scope"); + } + const run = function(term) { + term.printLn("Transfer warning: Expect difficulties debugging errors."); + term.print("When, after transfer, the new (transfered) terminal does not open check the console,"); + term.printLn("if the error points to document.body.appendChild(scriptNode); then the generated script has a bug."); //generated script == tempScript + + try { + //addon-terminal todo: try adding terminalPrint functions to the page! + let scriptNode = document.getElementById(TRANSFER_SCRIPT_ID); + if (scriptNode === null) { + scriptNode = document.createElement("script"); + scriptNode.id = TRANSFER_SCRIPT_ID; + scriptNode.type = "text/javascript"; + } else { + while (scriptNode.firstChild) { + scriptNode.removeChild(scriptNode.lastChild); + } + } + + //create script + let tempScript = `{ +console.log("loading ${TRANSFER_SCRIPT_ID}"); +`; + tempScript += ` +${WTerminal}; +`; + tempScript += ` +//Relaunch +const relaunchWTerminal = function(){ + try{ + let terminal = new WTerminal("dropdown", null, null); + terminal.terminalOpen(); + terminal.printLn("This Terminal was transfered."); + terminal.commandListExtension = {`; + for (let el in term.commandListExtension) { + if (el == "transfer") continue; + tempScript += `${el}: { run: ${term.commandListExtension[el].run}, help: ${term.commandListExtension[el].help} },` + } + tempScript += ` + }; + terminal.aliasExtensionList = ${JSON.stringify(term.aliasExtensionList)}; + terminal.printLn("Extentions transfered."); + terminal.printLn("Press '"+terminal.options.keyOpen + ((!terminal.options.keyOpenCtrl)?'" + CTRL':'"')+" to open the other terminal."); + } catch(e){ + console.log("failed to transfer terminal"); + console.error(e); + } +}; +relaunchWTerminal(); +}`; + /* tempScript = `console.log("ik werk wel!");`;*/ + scriptNode.appendChild(document.createTextNode(tempScript)); + // scriptNode.innerHTML = tempScript; + if (document.getElementById(TRANSFER_SCRIPT_ID) === null) { + document.body.appendChild(scriptNode); + } + term.printLn("Transfer done"); + term.options.keyOpenCtrl = !term.options.keyOpenCtrl; + term.printLn(`Press '${term.options.keyOpen + ((!term.options.keyOpenCtrl) ? '" + CTRL' : '"')} to open the other terminal.`); + term.terminalClose(); + } catch (e) { + term.printVar("Transfer error: ", e); + return e; + } + }; + + WTerminal.terminalAddCommand(TRANSFER_COMMAND_NAME, run, help); + }; + + if (document.body) { + initTerminalTransferCommand(); + } else { + window.addEventListener("load", initTerminalTransferCommand); + } +} diff --git a/src/termext/ext-variables.js b/src/termext/ext-variables.js new file mode 100644 index 0000000..22225ed --- /dev/null +++ b/src/termext/ext-variables.js @@ -0,0 +1,348 @@ +/* Author: Ward Truyen +* Version: 1.0.0 +* About: This adds the test command to the terminal. +* current test is to get local variables +*/ + +{// this code block hides the variables below from other scripts. + const initTerminalVariableCommands = function() { + const ext = + { + dovar: { + run: function(term, argLine) { + function _doFunction(gVar, functionKey, args) { + if (typeof gVar === "object" && typeof gVar[functionKey] === "function") { + // term.printVar(args, "do args"); + return gVar[functionKey](...args); + } else { + term.printError("Do error: " + functionKey + " is not a function"); + } + }; + /* To run a function of a Class (like document.getElementById(..)) + * We need the parent- /class-object from witch we call it from, to prevent errors (illegal acces) + * todo: ? --> use apply https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply + */ + if (globalThis === undefined) { + term.printError("Do error: Missing globalThis"); + } else if (argLine == '') { + term.printError("Do error: No name"); + } else { + let args = WTerminal.splitToArguments(argLine); + const verbal = args.includes("-v"); + if (verbal) { + args = args.filter(e => e !== '-v'); + } + const gName = args.shift(); //full global function name + args.forEach(e => e = WTerminal.stringToValue(e)); + let pName = gName.split('.'); //last object's parent name + let result; + if (pName.length == 1) { + result = _doFunction(globalThis, gName, args) + } else { + const lastName = pName.pop(); //last object name + result = _doFunction(WTerminal.getGlobalVariable(pName.join('.')), lastName, args); + } + if (verbal) term.printVar(result, gName + "(" + args.join(' ') + ")"); + return result; + } + }, + help: function(term) { + term.printLn("Runs given global function with arguments, and returns result."); + term.printBold("Usage:"); + term.printLn("dovar FUNCTION_NAME [ArgumentS] //Runs function FUNCTION_NAME with optional ArgumentS"); + term.printLn("dovar -v FUNCTION_NAME [ArgumentS] //Same as above but prints result too."); + term.printBold("Samples:"); + term.printLn("dovar window.open https://developer.mozilla.org //Runs function window.open() with the url as argument"); + term.printLn("dovar -v document.getElementById terminal-up //Runs function document.getElementById with terminal-up as argument") + term.printLn("dovar document.body.remove //Warning: removes all page content"); + } + }, + getvar: { + run: function(term, argLine) { + if (globalThis === undefined) { + term.printError("Getvar error: Missing globalThis"); + } else if (argLine == '') { + term.printError("Getvar error: Missing argument: VARIABLE_NAME"); + } else { + let result = {}; + const args = WTerminal.splitToArguments(argLine); + for (const gName of args) { + result[gName] = WTerminal.getGlobalVariable(gName); + } + const keys = Object.keys(result); + if (keys.length == 1) { + return result[keys[0]]; + } else { + return result; + } + } + }, + help: function(term) { + term.printLn("Gets a global variable and returns it."); + term.printLn("The returned result will be found in terminal.lastResult") + term.printBold("Usage:"); + term.printLn("getvar VARIABLE_NAME"); + term.printBold("Samples:"); + term.printLn("getvar terminal //Returns terminal"); + term.printLn("getvar terminal.version //Returns terminal.version"); + term.printLn("getvar var1 var2 var3 //Returns an object with var1 var2 and var3 keys and their global found value."); + term.printLn("getvar document //Returns global document object."); + term.printLn("getvar document.body.children //Returns a list of the children in the body."); + term.printLn("getvar document.head.children //Returns a list of the children in the head."); + } + }, + globals: { + run: function(term) { + if (globalThis !== undefined) { + term.printVar(globalThis, "globalThis"); + } else if (self !== undefined) { + term.printVar(self, "self"); + } else if (global !== undefined) { + term.printVar(global, "global"); + } else { + term.printError("Globals error: No globals!?"); + } + if (document !== undefined && globalThis.document !== document) term.printVar(document, "document"); + }, + help: function(term) { + term.printLn("Prints all global variables."); + } + }, + logvar: { + run: function(term, argLine) { + if (globalThis === undefined) { + term.printError("LogVar error: Missing globalThis"); + } else if (argLine == '') { + term.printError("LogVar error: Missing argument: VARIABLE_NAME"); + } else { + let result = {}; + let args = WTerminal.splitToArguments(argLine); + const returnResult = args.includes("-r"); + if (returnResult) { + args = args.filter(e => e !== '-r'); + } + for (const gName of args) { + result[gName] = WTerminal.getGlobalVariable(gName); + } + if (Object.keys(result).length == 1) { + result = result[Object.keys(result)[0]]; + } + // term.printVar(result); + console.log(result); + if (returnResult) return result; + } + }, + help: function(term) { + term.printLn("Like printvar but Logs variable(s) to console."); + } + }, + printvar: { + run: function(term, argLine) { + if (globalThis === undefined) { + term.printError("PrintVar error: Missing globalThis"); + } else if (argLine == '') { + term.printError("PrintVar error: Missing argument: VARIABLE_NAME"); + } else { + let result = {}; + let args = WTerminal.splitToArguments(argLine); + const returnResult = args.includes("-r"); + if (returnResult) { + args = args.filter(e => e !== '-r'); + } + for (const gName of args) { + result[gName] = WTerminal.getGlobalVariable(gName); + } + const keys = Object.keys(result); + if (keys.length == 1) { + result = result[keys[0]]; + term.printVar(result, keys[0]); + } else { + term.printVar(result); + } + if (returnResult) return result; + } + }, + help: function(term) { + term.printLn("Prints value of global variable."); + term.printBold("Usage:"); + term.printLn("printvar VARIABLE_NAME //Prints variable, returns nothing."); + term.printLn("printvar -r VARIABLE_NAME //Prints variable, returns variable."); + term.printBold("Samples:"); + term.printLn("printvar terminal //Prints terminal"); + term.printLn("printvar terminal.version //Prints terminal.version"); + term.printLn("printvar -r terminal.lastResult //Prints terminal.lastResult and returns it."); + term.printLn("printvar document //Prints global document object."); + term.printLn("printvar document.body.children //Prints body elements."); + term.printLn("printvar document.head.children //Prints head elements."); + } + }, + removevar: { + run: function(term, argLine) { + if (globalThis === undefined) { + term.printError("RemoveVar error: Missing globalThis"); + } else if (argLine == '') { + term.printError("RemoveVar error: Missing arguments"); + } else { + let args = WTerminal.splitToArguments(argLine); + const keys = Object.keys(globalThis); + const verbal = args.includes("-v"); + if (verbal) { + args = args.filter(e => e !== '-v'); + } + let count = 0; + if (args.includes("-a")) { + count = keys.length; + keys.forEach(key => { + if (verbal) term.printLn("removing: " + key) + delete globalThis[key]; + }); + term.printLn("Removed " + count + " keys.") + return; + } else if (args.includes("-n")) { + args = args.filter(e => e !== '-n'); + keys.forEach(key => { + if (globalThis[key] === null || globalThis[key] === undefined) { + if (verbal) term.printLn("removing: " + key) + delete globalThis[key]; + count++; + } + }); + } else if (args.includes("-f")) { + args = args.filter(e => e !== '-f'); + keys.forEach(key => { + if (globalThis[key] !== globalThis && + !(typeof globalThis[key] === "function" && globalThis[key].toString().includes("[native code]"))) { + if (verbal) term.printLn("removing: " + key) + delete globalThis[key]; + count++; + } + }); + } + while (args.length > 0) { + const gName = args.shift(); //full global function name + const pName = gName.split('.'); //last object's parent name + const lastName = pName.pop(); //last object name + let obj = globalThis; + if (pName.length > 0) { + obj = WTerminal.getGlobalVariable(pName.join('.')); //parent object + } + if (obj !== undefined && obj[lastName] !== undefined) { + if (verbal) term.printLn("removing: " + gName) + delete obj[lastName]; + count++; + } else { + if (obj === undefined) { + term.printError("Variable " + pName.join(".") + " = undefined") + } else { + term.printError("Variable " + gName + " = undefined"); + } + } + } + term.printLn("Removed " + (count > 1 ? (count + " keys.") : (count === 0 ? "nothing" : "1 key"))); + } + }, + help: function(term) { + term.printLn("Removes global variables."); + term.printBold("Usage:"); + term.printLn("removevar -v ... //Prints removing VARIABLE_NAME."); + term.printLn("removevar -f //Removes all global variables that are not a parent redefinition or native function."); + term.printLn("removevar -n //Removes all null or undefined global variables."); + term.printLn("removevar -a //Removes ALL global variables."); + term.printLn("removevar VARIABLE_NAMES //Removes the global variables provided.") + term.printBold("Samples:"); + term.printLn("removevar terminal //Removes the global variable terminal."); + term.printLn("removevar var1 var2 //Removes the 2 global variables var1 and var2."); + term.printLn("removevar terminal.history //Removes history from terminal."); + term.printLn("removevar -n terminal.history //Removes history from terminal, and all null or undefined global variables."); + term.printLn("removevar -n -v //Prints variable names of all null or undefined global variables it removes."); + } + }, + setvar: { + run: function(term, argLine) { + if (globalThis === undefined) { + term.printError("Setvar error: Missing globalThis"); + } else { + if (argLine == '') { + term.printError("Setvar error: no name"); + } else { + let args = WTerminal.splitToArguments(argLine); + for (const element of args) { + const keyValuePair = element.split("="); + if(keyValuePair.length < 2) throw new Error("missing arguements."); + const names = keyValuePair[0].split("."); + const value = WTerminal.stringToValue(keyValuePair[1]); + if (names.length == 1) { + globalThis[names[0]] = value; + term.printVar(globalThis[names[0]], keyValuePair[0]); + } else { + let obj = globalThis; + for (let i = 0; i < names.length - 1; i++) { + if (typeof obj[names[i]] === "object") obj = obj[names[i]]; + else { + let rem = names.length - 1 - i; + names.splice(names.length - rem, rem); + let name = names.join('.'); + term.printError(`Variable ${keyValuePair[0]} is not an object!`); + term.printVar(obj[names[i]], name); + return; + }; + } + obj[names[names.length - 1]] = value; + return obj[names[names.length - 1]]; + } + } + } + } + }, + help: function(term) { + term.printBold("Usage:"); + term.printLn("setvar NAME=VALUE //Sets VALUE to a global variable, NAME, and returns it."); + term.printBold("Samples:"); + term.printLn("setvar terminal //Sets terminal to undefined"); + term.printLn("setvar terminal.version=prehistoric //Sets terminal.version to string `prehistoric`"); + term.printLn("setvar myNumber=8 //Sets myNumber to number 8"); + term.printLn("setvar myNumber=(number)-8.1 //Sets myNumber to number -8.1"); + term.printLn("setvar var1 var2 var3 //Creates 3 undefined variables"); + term.printLn("setvar myName=\"Ward Truyen\" //Sets myName to string"); + term.printLn('setvar obj={"1":"test","2":true} //Sets obj to JSON.stringified object'); + term.printLn("setvar myFunc=(function)terminalPrintLn(\"Hello\");//Creates a function"); + term.printLn("setvar myVar=(global)myFunc //Sets(binds) myVar to the contents of myFunc"); + } + }, + }; + const aliases = { + run: "dovar", + pdo: "dovar -v ", + g: "getvar", + gg: "globals", + db: "printvar -r document.body.children", + dh: "printvar -r document.head.children", + gdb: "printvar -r document.body.children ", + gdh: "printvar -r document.head.children ", + result: "printvar -r terminal.lastResult", + error: "printvar terminal.lastError", + pv: "printvar -r ", + terminal: "printvar -r terminal", + // history: "printvar terminal.history", + }; + + //add commands in ext + if (WTerminal === undefined) { + console.error("WTerminal is missing!"); + return; + } + for (let c of Object.keys(ext)) { + WTerminal.terminalAddCommand(c, ext[c].run, ext[c].help); + } + //add aliases + for (let c of Object.keys(aliases)) { + WTerminal.terminalAddAlias(c, aliases[c]); + } + }; + //init + if (document.body) { + initTerminalVariableCommands(); + } else { + window.addEventListener("load", initTerminalVariableCommands); + } +} diff --git a/src/wterminal-addon.js b/src/wterminal-addon.js new file mode 100644 index 0000000..e76ab5a --- /dev/null +++ b/src/wterminal-addon.js @@ -0,0 +1,6 @@ +/* Author: Ward Truyen +* Version: 1.0.0 +* About: this file is needed when the terminal is used as a browser-extention +*/ + +WTerminal.instalDropdownTerminal(); diff --git a/src/wterminal.css b/src/wterminal.css new file mode 100644 index 0000000..6d93b91 --- /dev/null +++ b/src/wterminal.css @@ -0,0 +1,166 @@ +/* Author: Ward Truyen +* Version: 1.1.0 +*/ + +.wterminal-background { + z-index: 9995; + position: fixed; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + color: black; + line-height: normal; + visibility: hidden; + background: unset; + transition: all 0.2s ease-out 0s; +} + +.wterminal-background .wterminal-container{ + position: relative; + margin: 0px auto; + width: 70%; + border: 1px solid #888; + border-top: 0px solid grey; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + padding: 0px 4px 4px 4px; + background: linear-gradient(24deg, rgba(209,211,196,1) 20%, rgba(221,221,221,1) 50%, rgba(221,221,221,1) 70%, rgba(190,199,207,1) 90%); + box-shadow: 3px 3px 3px black; + text-align: left; + margin-top: -50%; +} + +.wterminal-container pre { + color: unset; + border: 2px solid #a0a0a0d0; + min-height: 20em; + max-height: 20em; + margin: 0px 0px 2px; + padding: 2px 4px 6px 4px; + background-color: #F0F0F0; + overflow-y: scroll; + font-family: Monospace, Incosolata, Courier; + font-size: 12px; + line-height: 1.08; + width: unset; +} + +.wterminal-output u{ + /* adds a nice fat blue underline to titles */ + text-decoration-color: #8cb4ff; + text-decoration-thickness: .15rem; + text-underline-offset: .1em; +} + +.wterminal-input { + padding: 1px 2px; + margin: 0px; + background-color: #F0F0F0; + color: black; + border: 1px solid #ccc; + border-radius: 2px; +} + +.wterminal-input:hover{ + background-color: #DDD; +} + +.wterminal-container input[type="submit"]:hover, +.wterminal-container button:hover{ + background-color: #DDD; + cursor: pointer; +} +.wterminal-container input, .wterminal-container label{ + line-height: unset; + display: unset; + /* width: unset; */ + height: unset; + margin: 0; + margin-left: 2px; +} +.wterminal-container input[type="submit"], +.wterminal-container button{ + width: unset; + height: unset; + margin: 0; + margin-left: 2px; + padding: 1px 4px; + color: black; + background-color: #eee; + border: 1px solid #aaa; + border-radius: 3px; + font-weight: normal; +} + +.wterminal-background.wterminal-visible{ + background-color: #0000008F; + backdrop-filter: blur(4px); + visibility: visible; + transition: background-color .1s ease-out 0s, backdrop-filter .1s ease-out 0s; +} + +.wterminal-visible .wterminal-container{ + margin-top: 0px; + transition: margin-top .2s ease-out 0s; +} + +.wterminal-container form{ + margin-left: 2px; +} + +/* Width */ +@media screen and (max-width: 480px) { + .wterminal-input{ + width: 40%; + } +} +@media screen and (min-width: 480px) and (max-width: 720px) { + .wterminal-input{ + width: 50%; + } +} +@media screen and (min-width: 720px) and (max-width: 1080px) { + .wterminal-input{ + width: 60%; + } +} +@media screen and (min-width: 1080px) { + .wterminal-input{ + width: 70%; + } +} + +/* Height */ +@media screen and (min-height: 512px) and (max-height: 1024px) { + .wterminal-background .wterminal-container .wterminal-output{ + min-height: 32em; + max-height: 32em; + } +} +@media screen and (min-height: 1024px) and (max-height: 1536px) { + .wterminal-background .wterminal-container .wterminal-output{ + min-height: 48em; + max-height: 48em; + } +} +@media screen and (min-height: 1536px) { + .wterminal-background .wterminal-container .wterminal-output{ + min-height: 64em; + max-height: 64em; + } +} + +.theme-dark .wterminal-background .wterminal-container{ + color: #F0F0F0; + background: #303030; +} + +.theme-dark .wterminal-container pre, +.theme-dark .wterminal-container button, +.theme-dark .wterminal-container input +{ + background-color: black; + /* color: #F0F0F0; */ + color: white; +} diff --git a/src/wterminal.js b/src/wterminal.js new file mode 100644 index 0000000..aa969aa --- /dev/null +++ b/src/wterminal.js @@ -0,0 +1,1353 @@ +/* Author: Ward Truyen +* Version: 1.3.1 +* About: This started as a library of functions for output/printing to a 'terminal' +* But then the terminal got bigger and more fun! +*/ +class WTerminal { + //TERMINAL const + static get VERSION() { return "1.3.2"; }; // 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. + static get OUTPUT_CLASS() { return "wterminal-output"; }; // the class from the 
 tag where we will to print to.
+  static get INPUT_CLASS() { return "wterminal-input"; }; //  class.
+  static get VISIBLE_CLASS() { return "wterminal-visible"; }; // the class that (by default) hides the terminal when set to the terminal-background div.
+  //globals (for fun experiments)
+  static get GLOBAL_LAST_RESULT() { return true; }; // when true: creates global terminal variable lastResult when a command reurns something
+  static get GLOBAL_LAST_ERROR() { return true; }; // when true: creates global terminal variable lastError when a command throws an error
+  static get GLOBAL_HISTORY() { return false; }; // when true: creates global terminal variable history and stores entered commands
+  //start up values: auto insert & logo print
+  static get AUTO_INSERT_GLOBAL_TEST_VARIABLES() { return false; }; // when true: adds extra global terminal variables for testing printVar (commands: gg, terminal)
+  static get AUTO_INSERT_DROPDOWN() { return false; }; // when true: automaticly inserts a hidden div containing the terminal in html.body
+  static get PRINT_LOGO() { return true; }; // when true: prints the WTerminal logo after terminal construction
+  //Options: open/close
+  static get KEY_OPEN() { return 'Backquote'; }; // 'Backquote' is the event.code to look for on keyDown to open the terminal.
+  static get KEY_OPEN_CTRL() { return false; }; // When true: ctrl-key must be pressed together with WTerminal.KEY_OPEN.
+  static get KEY_CLOSE() { return 'Escape'; }; // 'Escape' is the event.code to look for on keyDown to close the terminal.
+  static get KEY_HISTORY() { return 'ArrowUp'; }; // 'ArrowUp' is the event.code to look for on keyDown of the input-field to get previous command'
+  //Options: output
+  static get PRINT_TO_CONSOLE_LOG() { return false; }; // when true: printing logs to console too.
+  //Options: input
+  static get SLASH_COMMANDS() { return false; }; // when true: all the commands start with a forward slash.
+  static get INPUT_STRICT() { return true; }; // when true: input commands must strictly match.
+  static get PRINT_ALIAS_CHANGE() { return false; }; // when true: prints the change when an alias is used
+  static get PRINT_INNER_COMMANDS() { return false; }; // when true: prints the multiple-commands after && split
+  static get PRINT_COMMAND_RETURN() { return false; }; // when true: prints returned value of executed command, if anny
+  static get MAX_HISTORY() { return 32; }; // the maximum length of the history we keep
+  //Options: extensions
+  static get PRINT_ALIAS_ADD() { return false; }; // when true: prints anny added alias
+  static get PRINT_EXTENSION_ADD() { return false; }; // when true: prints anny extension command names that are added
+  //Options; }; TPO aka terminalPrintObject static get
+  static get TPO_UNKNOWN_OBJECT_PRINT() { return false; }; // when true and printVar detects an empty unkown object, then it prints prototype stuff
+  static get TPO_OBJECT_PREFIX() { return "|  "; }; // when printVar is printing keys of an object, this is added in front.
+  static get TPO_SPECIAL_PREFIX() { return " *" + WTerminal.TPO_OBJECT_PREFIX; }; // when printVar is printing special (keyless or HTMLElement) objects
+  static get TPO_MAX_DEPTH() { return 8; }; // when printVar is gooing this deep in objects it stops
+  static get TPO_INNER_MAX_LENGTH() { return 64; }; // when objects in objects are bigger than this it prints an empty code block { length=100  (too long) }
+
+  static terminals = {};
+
+  static createElement(tagName, tagAttributes, ...tagContents) {
+    const el = document.createElement(tagName);
+    if (typeof tagAttributes === 'object' && tagAttributes != null) {
+      for (let ta of Object.keys(tagAttributes)) {
+        el.setAttribute(ta, tagAttributes[ta]);
+      }
+    }
+    for (let tc of tagContents) {
+      if (typeof tc === "string") {
+        el.appendChild(document.createTextNode(tc))
+        continue;
+      } else if (typeof tc === 'object') {
+        if (tc instanceof HTMLElement) {
+          el.appendChild(tc)
+          continue;
+        }
+      }
+      el.appendChild(document.createTextNode(tc.toString()))
+    }
+    return el;
+  };
+
+  static splitToArguments(str) {
+    function _countChar(str, char) {
+      let index = str.indexOf(char);
+      let count = 0;
+      while (index != -1) {
+        count++;
+        index = str.indexOf(char, index + 1);
+      }
+      return count;
+    }
+    function _reconnectWordsByQuote(words, quoteCharacter) {
+      let quoteCounts = [];
+      for (let i = 0; i < words.length; i++) {
+        quoteCounts[i] = _countChar(words[i], quoteCharacter);
+      }
+      for (let i = 0; i < words.length; i++) {
+        quoteCounts[i] = quoteCounts[i] % 2;
+      }
+      let quotes = [];
+      let quotesIndex = 0;
+      let harvesting = false;
+      for (let i = 0; i < quoteCounts.length; i++) {
+        if (harvesting) {
+          quotes[quotesIndex] += " " + words[i];
+          if (quoteCounts[i] == 1) {
+            harvesting = false;
+            quotesIndex++;
+          }
+        } else {
+          if (quoteCounts[i] == 1) {
+            harvesting = true;
+            quotes[quotesIndex] = words[i];
+          }
+        }
+      }
+      for (let i = 0; i < quotes.length; i++) {
+        if (quotes[i].startsWith(quoteCharacter)) quotes[i] = quotes[i].replaceAll(quoteCharacter, '');
+      }
+      quotesIndex = 0;
+      let removing = false;
+      for (let i = quoteCounts.length - 1; i >= 0; i--) {
+        if (removing) {
+          words.splice(i, 1);
+          if (quoteCounts[i] == 1) {
+            removing = false;
+            words.splice(i, 0, quotes[quotesIndex]);//insert quote
+          }
+        } else {
+          if (quoteCounts[i] == 1) {
+            removing = true;
+            words.splice(i, 1);
+          }
+        }
+      }
+      return words;
+    }
+
+    let args = str.split(" ");
+    args = _reconnectWordsByQuote(args, '"');
+    args = _reconnectWordsByQuote(args, "'");
+    args = _reconnectWordsByQuote(args, '`');
+    return args;
+  };
+
+  static stringToValue(str) {
+    if (typeof str !== "string") {
+      throw new Error("StringToValue error: str must be a string!");
+    }
+    if (str === "true") return true;
+    else if (str === "false") return false;
+    else if (str.startsWith("(global)") || str.startsWith("(Global)")) {
+      return WTerminal.getGlobalVariable(str.substring(8));
+    } else if (str.startsWith("(number)") || str.startsWith("(Number)")) {
+      str = str.substring(8);
+      return str.includes(".") ? parseFloat(str) : parseInt(str);
+    } else if (str.startsWith("{")) {
+      str = str.replaceAll("'", '"'); //must have double quotes
+      // str = str.replaceAll(' ', ''); //should have 1 space-character behind each comma ... ? auto minify?
+      try {
+        return JSON.parse(str);
+      } catch (e) {
+        if (e instanceof SyntaxError) {
+          let err = new Error(e);
+          err.message = e.message + `\n\`${str}\``;
+          // err.data = str;
+          throw err;
+        }
+        throw new Error(e);
+      }
+    } else if (str.startsWith("(function)") || str.startsWith("(Function)")) {
+      return new Function(str.substring(10));
+    } else if (str.startsWith("'") || str.startsWith('"')) {
+      return str.substring(1, str.length - 1);
+    } else if (!isNaN(parseFloat(str)) && isFinite(str)) {
+      return str.includes(".") ? parseFloat(str) : parseInt(str);
+    } else {
+      return str;
+    }
+  }
+
+  static getGlobalVariable(gName) {
+    if (globalThis === undefined) {
+      throw new Error("Missing globalThis");
+    } else {
+      if (gName == '') {
+        throw new Error("Missing argument: VARIABLE_NAME");
+      } else {
+        const names = gName.split(".");
+        if (names.length == 1) {
+          return globalThis[gName];
+        } else {
+          let obj = globalThis;
+          for (let i = 0; i < names.length - 1; i++) {
+            const nobj = obj[names[i]]; // nobj is short for new object
+            if (typeof nobj === "object" && nobj !== null) obj = nobj;
+            else {
+              let rem = names.length - 1 - i;
+              names.splice(names.length - rem, rem);
+              let name = names.join('.');
+              throw new Error(name + " is " + nobj === null ? 'null' : 'not an object');
+            };
+          }
+          return obj[names[names.length - 1]];
+        }
+      }
+    }
+  };
+
+  constructor(name, locationId, options) {
+    // use name in static storage of terminals
+    this.name = name;
+    this.locationId = location;
+    WTerminal.terminals[name] = this;
+
+    //create terminal elements
+    const container = WTerminal.createElement('div', { class: WTerminal.CONTAINER_CLASS, title: "Terminal" });
+    const output = WTerminal.createElement('pre', { class: WTerminal.OUTPUT_CLASS, title: "Terminal output" });
+    const inputForm = WTerminal.createElement('form', { style: "display: inline;", onsubmit: "return false;" });
+    const inputLabel = WTerminal.createElement('label', null, "Input:");
+    const inputText = WTerminal.createElement('input', { class: WTerminal.INPUT_CLASS, title: "Terminal input", type: "text", name: WTerminal.INPUT_CLASS, placeholder: "help" });
+    const inputSubmit = WTerminal.createElement('input', { title: "Submit input", type: "submit", value: "Enter" });
+    const controls = WTerminal.createElement('span', { style: "float: right;" });
+    const btnScrollTop = WTerminal.createElement('button', { title: "Scroll to top" });//, "↑")
+    btnScrollTop.innerHTML = "↑";
+    const btnScrollBottom = WTerminal.createElement('button', { title: "Scroll to bottom" });//, "↓")
+    btnScrollBottom.innerHTML = "↓";
+    this.outputEl = output;
+    this.inputTextEl = inputText;
+
+    // this.inputTextEl.addEventListener("focus", (e)=>{
+    //   console.log("focus input");
+    // });
+    // insert submit function
+    this.onInputFormSubmit = function(event) {
+      event.stopPropagation();
+      this.submitTerminalInput();
+      return false;
+    };
+    inputForm.onsubmit = (e) => this.onInputFormSubmit(e);
+
+    // insert button functions
+    this.scrollToTop = function() {
+      this.outputEl.scrollTop = 0;
+      this.inputTextEl.focus();
+    }
+    btnScrollTop.onclick = () => this.scrollToTop();
+
+    this.scrollToBottom = function() {
+      this.outputEl.scrollTop = this.outputEl.scrollHeight;
+      this.inputTextEl.focus();
+    }
+    btnScrollBottom.onclick = () => this.scrollToBottom();
+
+    container.onclick = function(event) {
+      // clicking in the terminal should not close it
+      event.stopPropagation();
+      // return false;
+    };
+
+    // install shortcuts: up-history && close
+    this.onInputTextKeyDown = function(event) {
+      if (event.repeat == false) {
+        if (event.code == this.options.keyHistory) {
+          if (this.history instanceof Array) {
+            this.inputTextEl.value = this.history[0];
+            event.preventDefault();
+            return false;
+          }
+        }
+        if (event.code == this.options.keyClose && this.isTerminalOpen()) {
+          if (typeof this.backgroundEl !== "undefined") {
+            this.terminalClose();
+          }
+          event.preventDefault();
+          return false;
+        }
+      }
+    };
+    inputText.addEventListener("keydown", (e) => this.onInputTextKeyDown(e));
+
+    inputForm.appendChild(inputLabel);
+    inputForm.appendChild(inputText);
+    inputForm.appendChild(inputSubmit);
+    controls.appendChild(btnScrollTop);
+    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)
+      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();
+      this.onDocBodyKeyDown = function(event) {
+        //this.printLn('keydown.code ' + event.code);
+        //console.log('terminal keydown.code ' + event.code);
+        //this.printVar(event, "keydownEvent");
+        if (event.repeat == false) {
+          if (event.code == this.options.keyOpen && (this.options.keyOpenCtrl ? event.ctrlKey : !event.ctrlKey) && !this.isTerminalOpen()) {
+            this.terminalOpen();
+            event.preventDefault();
+            return false;
+          } else if (event.code == this.options.keyClose && this.isTerminalOpen()) {
+            if (typeof this.backgroundEl !== "undefined") {
+              this.terminalClose();
+            }
+            event.preventDefault();
+            return false;
+          }
+        }
+      };
+      document.body.addEventListener("keydown", (e) => this.onDocBodyKeyDown(e));
+
+      // close terminal events
+      this.onBackgroundClick = function(event) {
+        // clicking next to the terminal is closing it
+        if (this.isTerminalOpen()) {
+          this.terminalClose();
+          event.stopPropagation();
+        }
+      };
+      background.onclick = (e) => this.onBackgroundClick(e);
+
+      controls.appendChild(btnClose);
+      container.appendChild(controls);
+      background.appendChild(container);
+      document.body.appendChild(background);
+    } else {
+      let locEl = document.getElementById(locationId);
+
+      container.appendChild(controls);
+      locEl.appendChild(container);
+    }
+
+    // use function-options-var to overwrite default options todo: !!
+    this.options = {
+      //open/close
+      keyOpen: WTerminal.KEY_OPEN,
+      keyOpenCtrl: WTerminal.KEY_OPEN_CTRL,
+      keyClose: WTerminal.KEY_CLOSE,
+      keyHistory: WTerminal.KEY_HISTORY,
+      //output
+      printToConsoleLog: WTerminal.PRINT_TO_CONSOLE_LOG,
+      //input
+      slashCommands: WTerminal.SLASH_COMMANDS,
+      inputStrict: WTerminal.INPUT_STRICT,
+      printAliasChange: WTerminal.PRINT_ALIAS_CHANGE,
+      printInnerCommands: WTerminal.PRINT_INNER_COMMANDS,
+      printCommandReturn: WTerminal.PRINT_COMMAND_RETURN,
+      maxHistory: WTerminal.MAX_HISTORY,
+      //extensions
+      printExtensionAdd: WTerminal.PRINT_EXTENSION_ADD,
+      printAliasAdd: WTerminal.PRINT_ALIAS_ADD,
+      //TPO aka terminalPrintObject const
+      tpo_unknownObjectPrint: WTerminal.TPO_UNKNOWN_OBJECT_PRINT,
+      tpo_objectPrefix: WTerminal.TPO_OBJECT_PREFIX,
+      tpo_specialPrefix: WTerminal.TPO_SPECIAL_PREFIX,
+      tpo_maxDepth: WTerminal.TPO_MAX_DEPTH,
+      tpo_innerMaxLength: WTerminal.TPO_INNER_MAX_LENGTH,
+    };
+
+    // finish loading: Welcome prints
+    this.aliasExtensionList = {};
+    this.commandListExtension = {};
+    this.startupDate = new Date();
+    this.printLn(`WTerminal ${WTerminal.VERSION} initialized on `, this.startupDate);
+    if (WTerminal.PRINT_LOGO) {
+      this.printLn(" _  .  _  _____ .----..----. .-.   .-..-..-. .-.  .--.  .-.   ");
+      this.printLn("| |/ \\| |[_   _]| {__ | {)  }| .`-'. ||~|| .`| | / {} \\ | |   ");
+      this.printLn("|  ,-,  |  | |  | {__ | .-. \\| |\\ /| || || |\\  |/  /\\  \\| `--.");
+      this.printLn("'-'   `-'  '-'  `----'`-' `-'`-' ` `-'`-'`-' `-'`-'  `-'`----'");
+    }
+  }
+
+  //#region output 
+  print(...args) {
+    if (this.options.printToConsoleLog) {
+      console.log("terminalPrint: ", ...args);
+    }
+    for (let arg of args) {
+      if (arg instanceof HTMLElement) {
+        this.outputEl.appendChild(arg);
+      } else {
+        this.outputEl.appendChild(document.createTextNode(new String(arg)));
+      }
+    }
+    this.outputEl.scrollTop = this.outputEl.scrollHeight;
+  };
+  printLn(...args) {
+    if (this.options.printToConsoleLog) {
+      console.log("terminalPrintLn: ", ...args);
+    }
+    for (let arg of args) {
+      if (arg instanceof HTMLElement) {
+        this.outputEl.appendChild(arg);
+      } else {
+        this.outputEl.appendChild(document.createTextNode(new String(arg)));
+      }
+    }
+    this.outputEl.appendChild(document.createElement('br'));
+    this.outputEl.scrollTop = this.outputEl.scrollHeight;
+  };
+
+  clearOutput() {
+    if (this.options.printToConsoleLog) {
+      console.log("Terminal cleared");
+    }
+    this.outputEl.replaceChildren();
+    this.outputEl.scrollTop = this.outputEl.scrollHeight;
+  };
+  //#endregion
+
+  static print(...args) {
+    for (const tName in this.terminals) {
+      const t = this.terminals[tName];
+      t.print(...args)
+    }
+  }
+
+  static printLn(...args) {
+    for (const tName in this.terminals) {
+      const t = this.terminals[tName];
+      t.printLn(...args)
+    }
+  }
+
+  //#region extra-output
+  /* prints out bold */
+  printBold = function(text) {
+    this.printLn(WTerminal.createElement('b', null, text));
+  }
+  /* prints out underlined */
+  printTitle(title, useTags = true, char = "=") {
+    if (title && typeof title === "string" && title.length > 0) {
+      if (useTags == false) {
+        this.printLn(title);
+        let underline = "";
+        for (let i = 0; i < title.length; i++) {
+          underline += char;
+        }
+        this.printLn(underline);
+      } else {
+        this.printLn(WTerminal.createElement('u', null, WTerminal.createElement('b', null, title)));
+      }
+    }
+  };
+
+  /* prints out with red text */
+  printError(...args) {
+    this.printLn(WTerminal.createElement('span', { style: "color: red;" }, ...args));
+  };
+
+  printList(list, printKeys = true) {
+    if (typeof list !== "object") {
+      this.printError("printList error: Not a list");
+      return;
+    }
+    if (list === null) return;
+
+    const keys = Object.keys(list);
+    if (keys.length == 0) {
+      if (list.length !== undefined && list.length > 0) {
+        for (let i = 0; i < list.length; i++) {
+          const t = typeof (list[i]);
+          if (t === "undefined") {
+            this.printLn("undefined");
+          } else if (t === "string") {
+            this.printLn('`', list[i], '`');
+          } else if (t === "object" && list[i] === null) {
+            this.printLn("null");
+          } else {
+            this.printLn(list[i]);
+          }
+        }
+      }
+    } else if (printKeys) {
+      keys.forEach((key) => {
+        const t = typeof (list[key]);
+        if (t === "undefined") {
+          this.printLn(key, " = undefined");
+        } else if (t === "string") {
+          this.printLn(key, ' = `', list[key], '`');
+        } else if (t === "object" && list[key] === null) {
+          this.printLn(key, " = null");
+        } else {
+          this.printLn(key, " = ", list[key]);
+        }
+      });
+    } else {
+      keys.forEach((key) => {
+        const t = typeof (list[key]);
+        if (t === "undefined") {
+          this.printLn("undefined");
+        } else if (t === "string") {
+          this.printLn('`', list[key], '`');
+        } else if (t === "object" && obj === null) {
+          this.printLn("null");
+        } else {
+          this.printLn(list[key]);
+        }
+      });
+    }
+  };
+
+  /* prints out var/object content */
+  printVar(obj, name = "var", prefix = "") {
+    if (this.options.printToConsoleLog) {
+      console.log("terminalPrintVar: ", name, " = ", obj);
+    }
+    const t = typeof (obj);
+    if (t === "undefined") {
+      this.printLn(prefix, name, " = undefined");
+      return;
+    } else if (t === "string") {
+      this.printLn(prefix, name, ' = `', obj, '`');
+      return;
+    } else if (t === "object" && obj === null) {
+      this.printLn(prefix, name, " = null");
+      return;
+    } else if (t !== "object") {
+      if (t === "function") {
+        this.printLn(prefix, name, " = ", obj.toString());
+      } else if (t === "number" || t === "boolean") {
+        this.printLn(prefix, name, " = ", obj);
+      } else {
+        this.printLn(prefix, name, " = ", "(", typeof (obj), ") ", obj);
+      }
+      return;
+    }
+    this._printObject(obj, name, prefix);
+  };//-> function printVar
+
+  /* internal/private function: get Object Type */
+  static _getObjType(obj) {
+    let objType = typeof obj;
+    if (obj !== null) {
+      if (obj instanceof Date) {
+        objType += " Date";
+      } else if (obj instanceof Float32Array) {
+        objType += " Float32Array";
+      } else if (obj instanceof Float64Array) {
+        objType += " Float64Array";
+      } else {
+        try {
+          let className = Object.getPrototypeOf(obj).toString().replace('[', '').replace(']', '');
+          if (className == 'object Object' && typeof obj.constructor != 'undefined') {
+            objType += ' ' + obj.constructor.name;
+          } else {
+            objType = className;
+          }
+        } catch (e) {
+          if (obj instanceof Element) {
+            objType += " Element";
+          } else {
+            // this.printError("Bad prototype toString");
+            try {
+              if (className == 'object Object' && typeof obj.constructor != 'undefined') {
+                objType += ' ' + obj.constructor.name;
+              }
+            } catch { }
+          }
+        }
+      }
+    }
+    return objType;
+  }
+
+  /* internal/private function: print Object*/
+  _printObject(obj, name, prefix = "", lvl = 0) {
+    if (obj === null) {
+      this.printLn(prefix, name, " = null");
+    } else if (lvl > this.options.tpo_maxDepth) {
+      this.printLn(prefix, name, " = {} max depth reached(" + lvl + ")");
+    } else {
+      const keys = Object.keys(obj);
+      if (keys.length === 0) {
+        // special objects: no keys
+        if (obj instanceof Date) {
+          this.printLn(prefix, name, " = (Date)", obj.toString());
+        } else if (obj instanceof Array) {
+          this.printLn(prefix, name, " = []");
+        } else if (obj instanceof HTMLElement) {
+          this.printLn(prefix, name, " = (", WTerminal._getObjType(obj), "){");
+          this.printLn(prefix + this.options.tpo_specialPrefix, "tagName = ", obj.tagName);
+          if (obj.attributes.length != 0) {
+            let attr = {};
+            for (let i = 0; i < obj.attributes.length; i++) {
+              let a = obj.attributes[i];
+              if (a.value !== '') {
+                attr[a.name] = a.value;
+              }
+            }
+            // this.printLn(prefix + this.options.tpo_specialPrefix, "attributes = { ", attr, " }");
+            this.printVar(attr, "attributes", prefix + this.options.tpo_specialPrefix);
+          }
+          if (obj.children && obj.children.length > 0) {
+            this.printLn(prefix + this.options.tpo_specialPrefix, "childrenCount = ", obj.children.length);
+          }
+          this.printLn(prefix, "}");
+        } else if (obj instanceof Error) {
+          this.printLn(prefix, name, " = (", WTerminal._getObjType(obj), "){}");
+          const pre = prefix + this.options.tpo_specialPrefix;
+          this.printLn(pre, "message = ", obj.message);
+          this.printLn(pre, "name = ", obj.name);
+          try { this.printLn(pre, "fileName = ", obj.fileName); } catch { }
+          try { this.printLn(pre, "lineNumber = ", obj.lineNumber); } catch { }
+          try { this.printLn(pre, "columnNumber = ", obj.columnNumber); } catch { }
+          try { this.printLn(pre, "stack = ", obj.columnNumber); } catch { }
+        } else if (Object.getPrototypeOf(obj) == "[object Object]") {
+          this.printLn(prefix, name, " = {}");
+        } else {
+          // all properties hidden
+          this.printLn(prefix, name, " = (", WTerminal._getObjType(obj), "){}");
+          if (this.options.tpo_unknownObjectPrint) {
+            const pre = prefix + this.options.tpo_specialPrefix;
+            this.printLn(pre, "isSealed = ", Object.isSealed(obj))
+            this.printLn(pre, "isFrozen = ", Object.isFrozen(obj));
+            this.printLn(pre, "isExtensible = ", Object.isExtensible(obj));
+            this.printLn(pre, "prototype = ", Object.getPrototypeOf(obj));
+            this.printLn(pre, "prototype.prototype = ", Object.getPrototypeOf(Object.getPrototypeOf(obj)));
+            this.printVar(Object.getOwnPropertyNames(obj), ".propertyNames", pre);
+            this.printVar(Object.getOwnPropertyDescriptors(obj), "propertyDescriptors", pre);
+          }
+        }
+      } else {
+        // print keys of object
+        const isArray = obj instanceof Array || obj instanceof HTMLCollection;
+        if (isArray) {
+          if (obj instanceof Array) {
+            this.printLn(prefix, name, " = [ length: ", keys.length);
+          } else {
+            let t = "unknown Object";
+            try {
+              t = WTerminal._getObjType(obj);
+            } catch (e) { }
+            this.printLn(prefix, name, " = (", t, ")[ length: ", keys.length);
+          }
+        } else {
+          let t = "unknown Object";
+          try {
+            t = WTerminal._getObjType(obj);
+          } catch (e) { }
+          this.printLn(prefix, name, " = (", t, "){ length: ", keys.length);
+        }
+        if (lvl !== 0 && keys.length > this.options.tpo_innerMaxLength) {
+          this.printLn(prefix + this.options.tpo_objectPrefix, "(too long)");
+        } else {
+          const prefixIn = prefix + this.options.tpo_objectPrefix;
+          keys.forEach((key, index) => {
+            const type = typeof (obj[key]);
+            const position = isArray ? key : (index + ": " + key);
+            if (obj[key] === obj) {
+              this.printLn(prefixIn, position, " = (parent redefinition) ");
+            } else if (type === "function" || type === "undefined") {
+              this.printLn(prefixIn, position, " = (", type, ") ");
+            } else if (type === "boolean" || type === "number") {
+              this.printLn(prefixIn, position, ' = ', obj[key]);
+            } else if (type === "string") {
+              this.printLn(prefixIn, position, ' = `', obj[key], '`');
+            } else if (type === "object") {
+              this._printObject(obj[key], position, prefixIn, lvl + 1);
+            } else {
+              this.printLn(prefixIn, position, " = (", type, ") ", obj[key]);
+            }
+          });//-> forEach key
+        }
+        this.printLn(prefix, isArray ? "]" : "}");
+      }//-> if keys
+    }//-> if obj, lvl
+  }//-> function _printObject
+  //#endregion
+
+  submitTerminalInput() {
+    const input = this.inputTextEl.value;
+    if (input.length > 0) {
+      if (this.options.slashCommands && !input.startsWith("/")) {
+        //# if not a command: print
+        this.printLn(input);
+      } else {
+        //# if it's a command: execute
+        this.terminalCommand(this.options.slashCommands ? input.substring(1) : input);
+      }
+    }
+    this.inputTextEl.value = ""; //# clear the input field
+    this.inputTextEl.focus();
+    return false;  //# prevent 
 from submitting
+  };
+
+  terminalClose() {
+    const terminalBackground = this.backgroundEl;
+    if (terminalBackground && terminalBackground.classList.contains(WTerminal.VISIBLE_CLASS)) {
+      terminalBackground.classList.remove(WTerminal.VISIBLE_CLASS);
+    } else if (typeof terminalBackground === "undefined") {
+      this.printError("This is not a dropdown terminal.");
+    }
+  };
+
+  terminalOpen() {
+    const terminalBackground = this.backgroundEl;
+    if (terminalBackground === null) return;
+    if (!terminalBackground.classList.contains(WTerminal.VISIBLE_CLASS)) {
+      terminalBackground.classList.add(WTerminal.VISIBLE_CLASS);
+    }
+    // this.inputTextEl.focus();
+    this.outputEl.scrollTop = this.outputEl.scrollHeight;
+    setTimeout(() => this.inputTextEl.focus(), 100);
+  };
+
+  terminalOpenClose() {
+    const terminalBackground = this.backgroundEl;
+    if (terminalBackground === null) return;
+    if (!terminalBackground.classList.contains(WTerminal.VISIBLE_CLASS)) {
+      terminalBackground.classList.add(WTerminal.VISIBLE_CLASS);
+      // this.inputTextEl.focus();
+      this.outputEl.scrollTop = this.outputEl.scrollHeight;
+      setInterval(() => this.inputTextEl.focus(), 100);
+    } else {
+      terminalBackground.classList.remove(WTerminal.VISIBLE_CLASS);
+    }
+  }
+
+  isTerminalOpen() {
+    const terminalBackground = this.backgroundEl;
+    if (terminalBackground)
+      return terminalBackground.classList.contains(WTerminal.VISIBLE_CLASS);
+    return true;
+  };
+
+  terminalConst() {
+    const c = {};
+    c.version = WTerminal.VERSION;
+    //css & html element relations:
+    c.backgroundClass = WTerminal.BACKGROUND_CLASS;
+    c.containerClass = WTerminal.CONTAINER_CLASS;
+    c.outputClass = WTerminal.OUTPUT_CLASS;
+    c.inputClass = WTerminal.INPUT_CLASS;
+    c.visibleClass = WTerminal.VISIBLE_CLASS;
+    //globals
+    c.globalLastResult = WTerminal.GLOBAL_LAST_RESULT;
+    c.globalLastError = WTerminal.GLOBAL_LAST_ERROR;
+    c.globalHistory = WTerminal.GLOBAL_HISTORY;
+    //auto insert
+    c.globalTestVariables = WTerminal.AUTO_INSERT_GLOBAL_TEST_VARIABLES;
+    c.autoInsertDropdown = WTerminal.AUTO_INSERT_DROPDOWN;
+    c.printLogo = WTerminal.PRINT_LOGO;
+    //Options: open/close
+    c.keyOpen = WTerminal.KEY_OPEN;
+    c.keyOpenCtrl = WTerminal.KEY_OPEN_CTRL;
+    c.keyClose = WTerminal.KEY_CLOSE;
+    c.keyHistory = WTerminal.KEY_HISTORY;
+    //Options: output
+    c.defaultPrintToConsoleLog = WTerminal.PRINT_TO_CONSOLE_LOG;
+    //Options: input
+    c.defaultSlashCommands = WTerminal.SLASH_COMMANDS;
+    c.defaultInputStrict = WTerminal.INPUT_STRICT;
+    c.defaultPrintAliasChange = WTerminal.PRINT_ALIAS_CHANGE;
+    c.defaultPrintInnerCommands = WTerminal.PRINT_INNER_COMMANDS;
+    c.defaultPrintCommandReturn = WTerminal.PRINT_COMMAND_RETURN;
+    c.defaultMaxHistory = WTerminal.MAX_HISTORY;
+    //Options: extensions
+    c.defaultPrintExtensionAdd = WTerminal.PRINT_EXTENSION_ADD;
+    c.defaultPrintAliasAdd = WTerminal.PRINT_ALIAS_ADD;
+    //Options: TPO aka terminalPrintObject const
+    c.tpo_defaultUnknownObjectPrint = WTerminal.TPO_UNKNOWN_OBJECT_PRINT;
+    c.tpo_defaultObjectPrefix = WTerminal.TPO_OBJECT_PREFIX;
+    c.tpo_defaultSpecialPrefix = WTerminal.TPO_SPECIAL_PREFIX;
+    c.tpo_defaultMaxDepth = WTerminal.TPO_MAX_DEPTH;
+    c.tpo_defaultInnerMaxLength = WTerminal.TPO_INNER_MAX_LENGTH;
+    return c;
+  }
+
+  //#region input
+  /* List of standard aliases + replacement
+   */
+  static aliasList = Object.freeze({ //freeze object to make it immutable/const-value
+    "?": "help",
+    "??": "help help",
+    cmdlist: "help",
+    print: "echo",
+    version: "const version ",
+  });
+
+  /* List of standard commands + functions
+   */
+  static commandList = Object.freeze({ //freeze object to make it immutable/const-value
+    alias: {
+      run: function(term) {
+        term.printList(WTerminal.aliasList);
+        term.printList(term.aliasExtensionList);
+      },
+      help: function(term) {
+        term.printBold("Usage:");
+        term.printLn("alias               //Prints all aliases");
+        term.printBold("About alias usage:");
+        term.printLn("An alias-name has no spaces, but the alias-value can have multiple spaces.");
+        term.printLn("When the terminal detects an alias-name as the first input word, it gets replaced to the alias-value.");
+        term.printLn("When the alias-value contains a space, then the arguments will be");
+        term.printLn("  joined with the alias-value without a space joining them.");
+        term.printBold("Samples of using an alias:");
+        term.printLn("?                   //Changes to: `help`");
+        term.printLn("? clear             //Changes to: `help clear`");
+        term.printLn("version             //Changes to: `const version ` (command, space at the end)");
+        term.printLn("version clear       //Changes to: `const version clear`");
+        term.printLn("terminal            //Changes to: `printvar -r terminal` (command, no space at the end)");
+      }
+    },
+    clear: {
+      run: function(term) {
+        term.clearOutput();
+      },
+      help: function(term) {
+        term.printLn("Clears terminal output.");
+      }
+    },
+    close: {
+      run: function(term) {
+        term.terminalClose();
+      },
+      help: function(term) {
+        term.printLn("Closes dropdown terminal.");
+      }
+    },
+    const: {
+      run: function(term, argLine) {
+        const c = term.terminalConst();
+
+        if (argLine == "") {
+          term.printVar(c, "const");
+          return c;
+        } else if (c[argLine] !== undefined) {
+          term.printVar(c[argLine], argLine);
+          return c[argLine];
+        }
+      },
+      help: function(term) {
+        term.printBold("Usage:");
+        term.printLn("const               //Prints & returns all constant variables.");
+        term.printLn("const version       //Prints & returns only the version constant.");
+      }
+    },
+    date: {
+      run: function(term) {
+        const d = new Date().toDateString();
+        term.printLn("The date is " + d);
+        return d;
+      },
+      help: function(term) {
+        term.printLn("Returns the date.");
+      }
+    },
+    echo: {
+      run: function(term, argLine) {
+        if (argLine.charAt(0) == '-') {
+          if (argLine.charAt(1) == 'r') {
+            term.printError(argLine.substring(3));
+            return;
+          } else if (argLine.charAt(1) == 'g') {
+            term.printLn(WTerminal.createElement('span', { style: "color: green;" }, argLine.substring(3)));
+            return;
+          } else if (argLine.charAt(1) == 'b') {
+            term.printLn(WTerminal.createElement('span', { style: "color: blue;" }, argLine.substring(3)));
+            return;
+          }
+        }
+        term.printLn(argLine);
+      },
+      help: function(term) {
+        term.printLn("Prints arguments.");
+        term.printBold("Usage:");
+        term.printLn('echo hello          //Prints "hello".');
+        term.printLn('echo -r hello       //Prints "hello", but in red.');
+        term.printLn('echo -g hello       //Prints "hello", but in green.');
+        term.printLn('echo -b hello       //Prints "hello", but in blue.');
+      }
+    },
+    height: {
+      run: function(term, argLine) {
+        if (argLine === "undefined") {
+          term.outputEl.style.minHeight = ''; // sample 40em (40 lines)
+          term.outputEl.style.maxHeight = '';
+        } else if (argLine) {
+          term.outputEl.style.minHeight = argLine; // sample 40em (40 lines)
+          term.outputEl.style.maxHeight = argLine;
+        } else {
+          if (term.outputEl.style.minHeight)
+            term.printLn("height: " + term.outputEl.style.minHeight);
+          else
+            term.printLn("at original height.");
+          // term.printLn("height: " + getComputedStyle(term.outputEl).getPropertyValue('heiht'));
+        }
+      },
+      help: function(term) {
+        term.printLn("prints or sets the height of the terminal-output element")
+        term.printLn("height             // prints the terminal-output height")
+        term.printLn("height 40em        // sets terminal-output height to 40 lines")
+        term.printLn("height undefined   // sets terminal-output height to original value")
+      }
+    },
+    help: {
+      run: function(term, argLine) {
+        if (argLine == '') {
+          if (term.backgroundEl) {
+            term.print(`Open the terminal with ${(term.options.keyOpenCtrl ? "CTRL + " : "")}the ${term.options.keyOpen}-key. `);
+            term.printLn(`Close the terminal with the ${term.options.keyClose}-key. `);
+          }
+          term.printLn(`Use the ${term.options.keyHistory}-key to get previous command. `)
+          term.printLn(`Type a command, optionally add some arguments, and press enter or click on submit.`);
+          term.printBold("Basic commands:");
+          Object.keys(WTerminal.commandList).forEach((command, i) => {
+            if (i == 0) {
+              term.print("  " + command);
+            } else if (i % 10 == 0) {
+              term.printLn(", ");
+              term.print("    " + command);
+            } else {
+              term.print(", " + command);
+            }
+          });
+          term.printLn();
+          term.printBold("Extension commands:");
+          Object.keys(term.commandListExtension).forEach((command, i) => {
+            if (i == 0) {
+              term.print("  " + command);
+            } else if (i % 10 == 0) {
+              term.printLn(", ");
+              term.print("    " + command);
+            } else {
+              term.print(", " + command);
+            }
+          });
+          term.printLn();
+          term.printBold("Using help:");
+          term.printLn("help [COMMAND_NAME] //Prints help, optionally on a command");
+          term.printBold("Samples of help:");
+          term.printLn("help                //Prints this help again.");
+          term.printLn("help help           //Prints more help.");
+          term.printLn("help option         //Prints help on the option command.");
+          term.printLn("help alias          //Prints help on the alias command.");
+        } else {
+          if (WTerminal.commandList[argLine] !== undefined) {
+            WTerminal.commandList[argLine].help(term);
+          } else if (term.commandListExtension[argLine] !== undefined) {
+            if (typeof term.commandListExtension[argLine].help === "function") {
+              term.commandListExtension[argLine].help(term);
+            } else {
+              term.printLn("No help for command: \"" + argLine + "\"");
+            }
+          } else {
+            term.printError("Help error: Unknown command: \"" + argLine + "\"");
+          }
+        }
+      },
+      help: function(term) {
+        term.printLn("Prints help about the terminal or given command.");
+        term.printBold("For terminal help use:");
+        term.printLn("help");
+        term.printBold("For help on a command use:");
+        term.printLn("help commandName");
+        term.printBold("Samples of help:");
+        term.printLn("help            //prints terminal help.");
+        term.printLn("help help       //prints this help again.");
+        term.printLn("help option      //prints help on the option command.");
+        term.printLn("help alias      //prints help on the alias command.");
+        term.printBold("Advanced usage:")
+        term.printLn("Previous commands are stored in `terminal.history`")
+        term.printLn("Every command is a function, the result of executing this");
+        term.printLn("   will be stored in the global variable `terminal.lastResult`.");
+        term.printLn("Multiple commands can be chained, separated by `&&`.");
+        term.printBold("Advanced samples:");
+        term.printLn("const version && printvar terminal");
+        term.printLn("  //Gets version value, automatically stores it in terminal.lastResult");
+        term.printLn("  //  then prints out the terminal variable (you will see lastResult in there)");
+        term.printLn("printvar -r document.body.children && printvar -r terminal.lastResult.0.children");
+        term.printLn("  //Get, print and return html body tag's children");
+        term.printLn("  //  && print out the children property of first element (of body).");
+        term.printLn("gdb && result .0.children  // does the same as above");
+      }
+    },
+    history: {
+      run: function(term) {
+        term.printList(term.history, "history");
+      },
+      help: function(term) {
+        term.printLn("prints this terminal's history");
+      }
+    },
+    option: {
+      run: function(term, argLine) {
+        if (argLine == '') {
+          term.printList(term.options);
+        } else {
+          let args = WTerminal.splitToArguments(argLine);
+          for (const element of args) {
+            if (!element.includes("=")) {
+              throw new Error("Option set error: argument is missing \"=\"");
+            }
+            const keyValuePair = element.split("=");
+            const name = keyValuePair[0];
+            if (term.options[name] === undefined) {
+              throw new Error("Option set error: invalid option name `" + name + "`");
+            }
+            term.options[name] = stringToValue(keyValuePair[1]);
+          }
+          return this.options; //todo: make clone for security?
+        }
+      },
+      help: function(term) {
+        term.printBold("Usage:");
+        term.printLn("option                           //Prints & returns all the options used.");
+        term.printLn("option [VARIABLE_NAME=VALUE]     //Sets option VARIABLE_NAME to the following value.");
+        term.printBold("Samples:");
+        term.printLn("option printAliasChange=true     //Sets option printAliasChange to true.");
+        term.printLn("option printCommandReturn=true   //Sets option printCommandReturn to true.");
+        term.printLn("option tpo_objectPrefix=\"#  \"    //Sets objectPrefix to `#  `.")
+      }
+    },
+    reload: {
+      run: function(term) {
+        location.reload();
+      },
+      help: function(term) {
+        term.printLn("Reloads page.");
+      }
+    },
+    thisterminal: {
+      run: function(term) {
+        term.printVar(term, "terminal");
+      },
+      help: function(term) {
+        term.printLn("prints this terminal object")
+      }
+    },
+    terminalnames: {
+      run: function(term) {
+        term.printList(Object.keys(WTerminal.terminals));
+      },
+      help: function(term) {
+        term.printLn("prints the names of all terminal objects")
+      }
+    },
+    time: {
+      run: function(term) {
+        const d = new Date();
+        const t = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
+        term.printLn("The time is " + t);
+        return t;
+      },
+      help: function(term) {
+        term.printLn("Returns the current time.");
+      }
+    },
+    uptime: {
+      run: function(term) {
+        const newDate = new Date();
+        let diffTime = Math.abs(newDate - term.startupDate);
+
+        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+        if (diffDays > 0) {
+          term.print(diffDays + " days ");
+          diffTime -= diffDays * (1000 * 60 * 60 * 24);
+        }
+
+        const diffHours = Math.floor(diffTime / (1000 * 60 * 60));
+        if (diffHours > 0) {
+          term.print(diffHours + " hours ");
+          diffTime -= diffHours * (1000 * 60 * 60);
+        }
+
+        const diffMinutes = Math.floor(diffTime / (1000 * 60));
+        if (diffMinutes > 0) {
+          term.print(diffMinutes + " minutes ");
+          diffTime -= diffMinutes * (1000 * 60);
+        }
+
+        const diffSeconds = Math.floor(diffTime / (1000));
+        if (diffSeconds > 0) {
+          term.print(diffSeconds + " seconds ");
+          diffTime -= diffSeconds * (1000);
+        }
+
+        if (diffTime > 0) {
+          term.print(diffTime + " milliseconds ");
+        }
+        term.printLn();
+      },
+      help: function(term) {
+        term.printLn("Prints how long the terminal has been up.");
+      }
+    },
+    starttime: {
+      run: function(term) {
+        term.printLn("Terminal initialized on ", term.startupDate);
+        return term.startupDate;
+      },
+      help: function(term) {
+        term.printLn("Returns when the terminal was started/initialized.");
+      }
+    },
+  });
+
+  /* non static -> adds command to this terminal
+   */
+  terminalAddComand(name, run, help) {
+    if (name === undefined || typeof name !== "string") {
+      this.printError("TerminalAddCommand error: Variable name must be a string.");
+      return;
+    }
+    if (name === '') {
+      this.printError("TerminalAddCommand error: Variable name can not be empty.");
+      return;
+    }
+    if (name.includes(' ')) {
+      this.printError("TerminalAddCommand error: Variable name can have spaces.");
+      return;
+    }
+    if (run === undefined || typeof run !== "function") {
+      this.printError("TerminalAddCommand error: Variable run must be a function.");
+      return;
+    }
+    if (help !== undefined && typeof run !== "function") {
+      this.printError("TerminalAddCommand error: Variable help must be a function or undefined.");
+      return;
+    }
+    if (this.options.printExtensionAdd) this.printLn("Command extension added: " + name);
+    this.commandListExtension[name] = { run: run, help: help };
+  }
+
+  /* static -> adds command to all terminals
+   */
+  static terminalAddCommand(name, run, help) {
+    for (const tName in this.terminals) {
+      const t = this.terminals[tName];
+      t.terminalAddComand(name, run, help);
+    }
+  }
+
+  /* non static -> adds alias to this terminal
+   */
+  terminalAddAlias(name, alias) {
+    if (typeof name !== "string") {
+      this.printError("AddAlias error: name must be a string.");
+      return false;
+    }
+    if (name.includes(' ')) {
+      this.printError("AddAlias error: name can not have spaces.")
+      return false;
+    }
+    if (typeof alias !== "string") {
+      this.printError("AddAlias error: alias must be a string.");
+      return false;
+    }
+    if (this.options.printAliasAdd) this.printLn(`Alias added: ${name} = \`${alias}\``);
+    this.aliasExtensionList[name] = alias;
+    return true;
+  }
+
+  /* static -> adds alias to all terminals
+   */
+  static terminalAddAlias(name, alias) {
+    for (const tName in this.terminals) {
+      const t = this.terminals[tName];
+      t.terminalAddAlias(name, alias);
+    }
+  }
+
+  /* Runs through a commandline searching for subCommands split by &&
+   */
+  terminalCommand(cmdLine, isSuperCommand = false) {
+    if (typeof cmdLine !== "string") {
+      this.printError("Error: Wrong cmdLine type: " + typeof cmdLine);
+      return;
+    }
+    if (cmdLine == '') return;
+
+    cmdLine = cmdLine.trim();
+    // print input
+    if (isSuperCommand) {
+      this.printLn(WTerminal.createElement('u', null, 'super-command#'), WTerminal.createElement('b', null, " ", cmdLine));
+    } else {
+      let d = new Date();
+      if (this.outputEl.innerHTML != '') this.print('\n');
+      this.printLn(WTerminal.createElement('u', null, "(" + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() + ")#"), WTerminal.createElement('b', null, " ", cmdLine));
+    }
+    // execute
+    let result;
+    try {
+      if (cmdLine.includes("&&")) {
+        // multiple commands
+        let commands = cmdLine.split("&&");
+        // this.printList(commands); 
+        for (let command of commands) {
+          command = command.trim();
+          if (this.options.printInnerCommands) this.printLn(WTerminal.createElement("u", null, "inner-command#"), WTerminal.createElement("b", null, " ", command));
+          result = this._terminalCommand(command);
+        }
+      } else {
+        // single command
+        result = this._terminalCommand(cmdLine);
+      }
+    } catch (e) {
+      // this.printError("Command error: ", e)
+      this.printError("Command error:");
+      this.printVar(e, "error");
+      this.lastError = e;
+      if (WTerminal.GLOBAL_LAST_ERROR) {
+        if (typeof globalThis.terminal !== "object") {
+          globalThis.terminal = {};
+        }
+        globalThis.terminal.lastError = e;
+      }
+      // return e;
+    }
+    // keep a history
+    if (this.history === undefined || !(this.history instanceof Array)) {
+      this.history = [];
+    }
+    this.history.unshift(cmdLine);
+    if (this.history.length > this.options.maxHistory) {
+      this.history.splice(this.options.maxHistory);
+    }
+    if (WTerminal.GLOBAL_HISTORY) {
+      if (typeof globalThis.terminal !== "object") {
+        globalThis.terminal = {};
+      }
+      if (globalThis.terminal.history === undefined || !(globalThis.terminal.history instanceof Array)) {
+        globalThis.terminal.history = [];
+      }
+      globalThis.terminal.history.unshift(cmdLine);
+      if (globalThis.terminal.history.length > this.options.maxHistory) {
+        globalThis.terminal.history.splice(this.options.maxHistory);
+      }
+    }
+    return result;
+  };
+
+  /* Only runs subcommands 
+   * For internal use only
+   */
+  _terminalCommand(cmdLine) {
+    if (cmdLine == '') return;
+    // get target values
+    const split = cmdLine.split(' ');
+    let command = split.shift();
+    let argLine = split.join(' ');
+
+    // not strict
+    if (!this.options.inputStrict) {
+      command = command.toLowerCase();
+    }
+    // check for alias
+    let al;
+    if (WTerminal.aliasList[command]) {
+      al = WTerminal.aliasList[command];
+    } else if (this.aliasExtensionList[command]) {
+      al = this.aliasExtensionList[command];
+    }
+    if (al !== undefined) {
+      if (al.includes(" ")) {
+        //new command and argument
+        al = al.split(" ");
+        command = al.shift();
+        argLine = (al.join(' ') + argLine).trim();
+      } else {
+        //new command only
+        command = al;
+      }
+      if (this.options.printAliasChange) {
+        this.printLn("Alias found#", WTerminal.createElement('b', null, command + " " + argLine));
+      }
+    }
+    // execute
+    let result;
+    if (WTerminal.commandList[command]) {
+      result = WTerminal.commandList[command].run(this, argLine);
+    } else if (this.commandListExtension[command]) {
+      result = this.commandListExtension[command].run(this, argLine);
+    } else {
+      this.printError("Error: Unknown command: \"" + command + "\"");
+      this.printLn("Try help");
+      return;
+    }
+    // print result
+    if (this.options.printCommandReturn) {
+      this.printVar(result, `Result of \`${cmdLine}\``);
+    }
+    // store result
+    this.lastResult = result;
+    if (WTerminal.GLOBAL_LAST_RESULT) {
+      if (typeof globalThis.terminal !== "object" && typeof result !== "undefined") {
+        globalThis.terminal = {};
+      }
+      if (typeof globalThis.terminal === 'object' &&
+        (typeof globalThis.terminal.lastResult !== "undefined" || typeof result !== "undefined")) {
+        globalThis.terminal.lastResult = result;
+      }
+    }
+    return result;
+  }//-> function _terminalCommand
+  //#endregion
+
+  /* installs a dropdown Terminal if it doesnt exist
+   */
+  static instalDropdownTerminal() {
+    if (WTerminal.terminals.dropdown) return;
+    if (document.body) {
+      new WTerminal('dropdown', null, null);
+    } else {
+      window.addEventListener("load", () => new WTerminal('dropdown', null, null));
+    }
+  }
+
+  /* short for openDropdownTerminal
+   */
+  static open() {
+    if (WTerminal.terminals.dropdown) {
+      WTerminal.terminals.dropdown.terminalOpen();
+    } else {
+      if (confirm("Dropdown terminal is not available. Create terminal?")) {
+        instalDropdownTerminal();
+        WTerminal.terminals.dropdown.terminalOpen();
+      }
+    }
+  }
+
+}//-> class WTerminal
+
+//#region init
+//Globals
+if (WTerminal.AUTO_INSERT_GLOBAL_TEST_VARIABLES) {
+  globalThis.terminal = {};
+  globalThis.terminal.version = WTerminal.VERSION;
+  globalThis.terminal.terminals = WTerminal.terminals;
+  globalThis.terminal.wterminal = WTerminal;
+  // terminal.options = options;
+  globalThis.terminal.testvars = {};
+  const p = globalThis.terminal.testvars;
+  p.hello = "Hello World!";
+  p.multilineStr = `one
+two
+three`;
+  p.emptyArray = [];
+  p.emptyObject = {};
+  p.newArray = new Array();
+  p.newDate = new Date();
+  p.newSet = new Set();
+  p.newMap = new Map();
+  p.testArray1 = ["three", "two", "one"];
+  p.testArray1 = ["three", 2, true, { 1: 1, '2': 2, 'three': 3 }];
+  // p.testKeys = { 1:1, '2':2, 'three':3 };// 1 is a number. 2 is a string. => at runtime keys are always strings (even in an Array)
+}
+
+if (WTerminal.AUTO_INSERT_DROPDOWN) {
+  WTerminal.instalDropdownTerminal();
+}
+//#endregion
+
+/* get a registered WTerminal, preferrably by name, if not it returns the first of the list.
+ */
+const getWTerminal = function(name) {
+  if (name === undefined) for (const t in WTerminal.terminals) return WTerminal.terminals[t];
+  return WTerminal.terminals[name];
+}