Add a Quake-style drop-down console example

1j01 · Sep 16, 2019 · 7add3ff · 7add3ff
1 parent 03ec7a2
commit 7add3ff
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -95,8 +95,7 @@ body {
 }
 ```
 
-If you want a Quake-style dropdown console, [just ask](https://github.com/1j01/simple-console/issues/7)
-and I'll be happy to cook up an example for you.
+For a Quake-style dropdown console, see the [Tilde Dropdown Console Example](tilde.html).
 
 ### Dark Mode
 

diff --git a/tilde.html b/tilde.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<head>
+	<meta charset="utf-8">
+	<title>Simple Console - Tilde Dropdown Console Example</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="simple-console.css">
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
+</head>
+<body>
+	<style>
+		h1, p {
+			margin: 0.5rem 0;
+		}
+		h1 {
+			font-family: "Open Sans", sans-serif;
+			font-weight: normal;
+		}
+		a {
+			color: #4078c0;
+		}
+		a:not(:hover) {
+			text-decoration: none;
+		}
+		code {
+			font-family: inherit;
+			padding: 0.1em 0.2em;
+			border: 1px solid rgba(128, 128, 128, 0.5);
+			border-radius: 0.1em;
+		}
+
+		/* Tilde Dropdown CSS: */
+		.simple-console {
+			position: fixed;
+			opacity: 0;
+			transition:
+				opacity 0.2s ease,
+				top 0.2s ease,
+				bottom 0.2s ease,
+				left 0.2s ease,
+				right 0.2s ease;
+			outline: 1px solid gray;
+			/* remove this to use theme switching: */
+			background: white;
+			color: black;
+		}
+		.console-open .simple-console {
+			opacity: 1;
+		}
+		.console-anchor-top .simple-console,
+		.console-anchor-bottom .simple-console {
+			width: 100%;
+			height: 40%;
+			left: 0;
+			right: 0;
+		}
+		.console-anchor-left .simple-console,
+		.console-anchor-right .simple-console {
+			width: 40%;
+			height: 100%;
+			top: 0;
+			bottom: 0;
+		}
+		.console-anchor-top .simple-console {
+			top: -100%;
+		}
+		.console-anchor-bottom .simple-console {
+			bottom: -100%;
+		}
+		.console-anchor-left .simple-console {
+			left: -100%;
+		}
+		.console-anchor-right .simple-console {
+			right: -100%;
+		}
+		.console-anchor-top.console-open .simple-console {
+			top: 0%;
+		}
+		.console-anchor-bottom.console-open .simple-console {
+			bottom: 0%;
+		}
+		.console-anchor-left.console-open .simple-console {
+			left: 0%;
+		}
+		.console-anchor-right.console-open .simple-console {
+			right: 0%;
+		}
+	</style>
+	<h1>Simple Console</h1>
+	<h2>Tilde Dropdown Console Example</h2>
+	<p>Press the tilde (~) / backtick (`) key to open the console.</p>
+	<div>
+		<label>
+			Open from:
+			<select id="open-from-side">
+				<option value="top" selected>Top</option>
+				<option value="bottom">Bottom</option>
+				<option value="left">Left</option>
+				<option value="right">Right</option>
+			</select>
+		</label>
+	</div>
+	<script src="simple-console.js"></script>
+	<script src="demo.js"></script>
+	<script src="tilde.js"></script>
+</body>
diff --git a/tilde.js b/tilde.js
@@ -0,0 +1,40 @@
+
+const KEY_CODE_TILDE = 192;
+const KEY_CODE_ESCAPE = 27;
+const container = document.body;
+const consoleInput = con.input; //document.querySelector(".simple-console-input");
+
+window.addEventListener("keydown", (event)=> {
+	var wasOpen = container.classList.contains("console-open");
+	if (event.keyCode === KEY_CODE_ESCAPE) {
+		container.classList.remove("console-open");
+	}
+	if (
+		event.target.classList.contains("simple-console-input") ||
+		!(event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.defaultPrevented)
+	) {
+		// TODO: if needed to type tildes/backticks, perhaps require a modifier like Ctrl+` / Ctrl+~ as the shortcut
+		// if (event.keyCode === KEY_CODE_TILDE && (event.ctrlKey || event.metaKey)) {
+		if (event.keyCode === KEY_CODE_TILDE) {
+			container.classList.toggle("console-open");
+		}
+	}
+	var nowOpen = container.classList.contains("console-open");
+	if (wasOpen !== nowOpen) {
+		event.preventDefault();
+		if (nowOpen) {
+			consoleInput.focus();
+		} else {
+			consoleInput.blur();
+		}
+	}
+});
+
+const sideSelect = document.getElementById("open-from-side");
+const updateSide = (event)=> {
+	var side = sideSelect.value;
+	container.classList.remove("console-anchor-top", "console-anchor-bottom", "console-anchor-left", "console-anchor-right");
+	container.classList.add(`console-anchor-${side}`);
+};
+sideSelect.addEventListener("change", updateSide);
+updateSide();