Playground CSS improvements

playground.html

@@ -6,74 +6,173 @@
 		<link rel="icon" href="data:;base64,iVBORw0KGgo=">
 		<style type="text/css">
 			/* Structural style */
+			:root, body {
+				width: 100%; height: 100%;
+				padding: 0;
+				margin: 0;
+			}
+			.pane-container {
+				position: absolute;
+				left: 0; top: 0;
+				width: 100%; height: 100%;
+				box-sizing: border-box;
+
+				display: grid;
+				grid-template-columns: auto 1fr;
+			}
+			.left-pane {
+				grid-row: 1; grid-column: 1;
+				resize: horizontal;
+				overflow-x: auto;
+				box-sizing: border-box;
+				min-width: 40vw;
+				max-width: 80vw;
+				border-right: 4px solid var(--color-ui-divider);
+
+				display: grid;
+				grid-template-rows: 32px 1fr;
+				grid-template-columns: 1fr;
+			}
+			.right-pane {
+				grid-row: 1; grid-column: 2;
+				overflow-x: auto;
+				overflow-y: scroll;
+			}
+			.toolbar-pane {
+				grid-row: 1; grid-column: 1;
+				box-sizing: border-box;
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+			}
+			.toolbar-left {
+				grid-column: 1;
+			}
+			.toolbar-right {
+				grid-column: 2;
+			}
+			.editor-pane {
+				grid-row: 2; grid-column: 1;
+			}
+			#markdown-editor {
+				box-sizing: border-box;
+				position: relative;
+				width: 100%;
+				height: 100%;
+				resize: none;
+			}
+			@media screen and (max-width: 800px) {
+				.pane-container {
+					grid-template-columns: 1fr;
+					grid-template-rows: auto 1fr;
+					column-gap: 0;
+				}
+				.left-pane {
+					grid-row: 2; grid-column: 1;
+					resize: none;
+					overflow-x: hidden;
+					min-width: none;
+					max-width: none;
+					width: auto !important; /* undo wide mode resizing */
+					border-right: none;
+					border-top: 4px solid var(--color-ui-divider);
+				}
+				.right-pane {
+					grid-row: 1; grid-column: 1;
+					resize: vertical;
+					min-height: 40vw;
+					max-height: 80vw;
+				}
+			}
+			@media screen and (min-width: 801px) {
+				.right-pane {
+					height: auto !important; /* undo narrow mode resizing */
+				}
+			}
+
+			/* UI aesthetic */
+
 			:root {
 				--color-editor-background: #00a;
 				--color-editor-text: white;
-				--toolbar-background: #ccc;
-				--toolbar-text: #000;
+				--color-toolbar-background: #ccc;
+				--color-toolbar-text: #000;
+				--color-ui-divider: #000;
 			}
 			@media (prefers-color-scheme: dark) {
 				:root {
 					--toolbar-background: #aaa;
+					--color-ui-divider: #999;
 				}
 			}
-			:root, body {
-				width: 100%;
-				height: 100%;
-				padding: 0;
-				margin: 0;
-				background-color: var(--color-background);
-				color: var(--color-text);
+			.toolbar-pane,
+			dialog {
+				font-family: sans-serif;
 			}
-			.inputhalf {
-				position: absolute;
-				width: 50%;
-				height: 100%;
-				left: 0;
-				top: 0;
+
+			.toolbar-pane {
+				background-color: var(--color-toolbar-background);
+				color: var(--color-toolbar-text);
+				border-bottom: 1px solid var(--color-ui-divider);
+				padding: 4px 20px;
+			}
+			.toolbar-left {
+				text-align: left;
+			}
+			.toolbar-right {
+				text-align: right;
+			}
+			#markdown-editor {
+				padding: 1em 2em;
+				border: none;
+				outline: none;
 				background-color: var(--color-editor-background);
 				color: var(--color-editor-text);
 			}
-			.previewhalf {
-				position: absolute;
-				width: 50%;
-				height: 100%;
-				left: 50%;
-				top: 0;
-				overflow-y: auto;
-			}
-			#preview {
+			.preview-container {
 				padding: 1em;
 				margin: 0 auto;
 				max-width: 600px;
+				background-color: var(--color-background);
+				color: var(--color-text);
 			}
-			.toolbar {
-				position: absolute;
-				z-index: 1;
-				background-color: var(--toolbar-background);
-				color: var(--toolbar-text);
-				min-height: 32px;
-				/* max-height: 300px; */
-				width: 100%;
-				border-bottom: 1px solid black;
-				box-sizing: border-box;
-				padding: 4px 20px;
-				font-family: sans-serif;
+
+			dialog#readers-dialog {
+				max-width: 400px;
+				max-height: 400px;
 			}
-			.codeswitch-cont {
-				position: absolute;
-				top: 0;
-				right: 0;
-				height: 31px;
-				z-index: 2;
-				background-color: var(--toolbar-background);
-				color: var(--toolbar-text);
-				padding: 3px 10px;
-				box-sizing: border-box;
+			.dialog-layout {
+				position: relative;
+				width: 100%; height: 100%;
+
+				display: grid;
+				grid-template-rows: 32px 368px; /* can't get overflow to work without explicit height :( */
+			}
+			.dialog-titlebar {
+				grid-row: 1;
+
+				display: grid;
+				grid-template-columns: 1fr auto;
 			}
-			#readercontainer {
+			.dialog-title {
+				grid-column: 1;
+				font-weight: bold;
+			}
+			.dialog-close {
+				grid-column: 2;
+				text-align: right;
+			}
+			.dialog-content {
+				grid-row: 2;
 				overflow-y: scroll;
 			}
+			.reader-list {
+				position: relative;
+				width: 100%; height: 100%;
+			}
+
+
+			/* --- old ----------------------------------------- */
+
 			.reader-header {
 				margin-top: 0.25em;
 				font-weight: bold;
@@ -82,20 +181,9 @@
 				display: inline-block;
 				padding: 4px 8px;
 				border: 1px dotted gray;
+				border-radius: 8px;
 				margin: 4px;
 			}
-			#markdowninput {
-				position: absolute;
-				box-sizing: border-box;
-				top: 32px;
-				width: 100%;
-				height: calc(100% - 32px);
-				margin: 0;
-				padding: 1em 2em;
-				border: 0;
-				background-color: var(--color-editor-background);
-				color: var(--color-editor-text);
-			}
 			.calculated {
 				background-color: var(--color-calculated-background);
 				font-style: italic;
@@ -112,36 +200,36 @@
 			:root {
 				--color-background: #fffff8;
 				--color-text: #111;
+				--color-text-secondary: #666;
 				--color-table-header: #ddd;
 				--color-table-border: black;
 				--color-calculated-background: #eee;
 				--color-highlight: #ff0;
 				--color-highlight-text: #111;
+				--color-rule: #111;
 			}
 			@media (prefers-color-scheme: dark) {
 				:root {
 					--color-background: #151515;
 					--color-text: #ddd;
+					--color-text-secondary: #999;
 					--color-table-header: #333;
 					--color-table-border: #ccc;
 					--color-calculated-background: #444;
 					--color-highlight: #88f;
 					--color-highlight-text: #ddd;
+					--color-rule: #ddd;
 				}
 			}
+
 			html {
 				font-size: 15px;
 			}
 
 			body {
-				/* width: 87.5%;
-				margin-left: auto;
-				margin-right: auto;
-				padding-left: 12.5%; */
 				font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
 				background-color: var(--color-background);
 				color: var(--color-text);
-				/* max-width: 1400px; */
 				counter-reset: sidenote-counter;
 			}
 
@@ -170,7 +258,7 @@
 			}
 			.subtext {
 				font-size: 1rem;
-				color: #888;
+				color: var(--color-text-secondary);
 				margin-top: 0.25em;
 				margin-bottom: 0.5em;
 			}
@@ -202,7 +290,7 @@
 				height: 1px;
 				width: 55%;
 				border: 0;
-				border-top: 1px solid #ccc;
+				border-top: 1px solid var(--color-rule);
 				margin: 1em 0;
 				padding: 0;
 			}
@@ -268,7 +356,99 @@
 		<script src="js/markdown.js"></script>
 		<script src="js/spreadsheet.js"></script>
 		<script>
-			var blockReaderClasses = {
+			const sampleMarkdown = `
+## Block Formats {#top}
+
+A regular paragraph.
+
+-# Sub text
+
+* Unordered
+* Lists
+    * Sub list
+
+1. Ordered
+2. Lists
+    6. Sub list
+
+A blockquote:
+
+> "The only thing we have to fear is fear itself—nameless, unreasoning,
+> unjustified terror which paralyzes needed efforts to convert retreat into
+> advance." - Franklin D. Roosevelt's First Inaugural Address
+
+Some definitions:
+
+word
+: a unit of meaning in a sentence
+sentence
+: a collection of words
+
+Code:
+
+\`\`\`javascript
+function foo() {
+    return 'Hello world';
+}
+\`\`\`
+
+    function bar() {
+        return 'Indented code';
+    }
+
+### Heading, hash style
+
+Heading, underline style
+---
+
+### Modified Heading {style=color:red;}
+
+| Unit Price | Qty | Subtotal |
+| ---: | ---: | ---: |
+| $1.23 | 2 | =A*B FILL |
+| $4.99 | 6 | |
+| Total | | =SUM(C:C) |
+
+---
+
+## Inline Formats
+
+Normal, **double asterisk,** __double underscore,__ *asterisks,* _underscores,_
+~~double tildes,~~ ~single tildes,~ ^carets,^ ==double equals==, \`\`double backticks\`\`,
+\`single backticks\`.
+
+Lorem ipsum dolor sit amet,[^1] consectetur adipiscing elit.[^abc] Sed sodales
+in odio eget porta. Proin et erat sit amet erat semper mollis vitae ut
+turpis.[^foo] Ut ipsum dui, maximus sit amet suscipit at, dictum id nulla.[^bar]
+Aenean efficitur rhoncus nulla non fermentum.
+
+[^1]: Donec ut felis volutpat, gravida ipsum scelerisque, accumsan est.
+[^abc]: Cras dictum rutrum quam.
+[^foo]: Donec maximus bibendum lorem.
+[^bar]: Praesent consectetur tristique leo. Morbi nec nisi sit amet quam
+ imperdiet vehicula eu feugiat tortor. 
+
+The HTML on the WWW is often full of JS and CSS.
+
+*[HTML]: Hypertext Markup Language
+*[WWW]: World Wide Web
+*[JS]: JavaScript
+*[CSS]: Cascading Style Sheets
+
+Click [here](#top) to return to the top. Referenced link to [Google][google].
+
+![alt text](https://picsum.photos/100/75) ![alt text](https://picsum.photos/101/75 "With a title")
+![][testimage]
+
+[testimage]: https://picsum.photos/102/75
+[google]: https://google.com  "I prefer Duck Duck Go"
+
+Some verbatim <span style="color:green;">HTML</span>. A script tag
+will be ignored. <scr` + `ipt></sc` + `ript>
+			`.trim();
+		</script>
+		<script>
+			const blockReaderClasses = {
 				'Heading (underline)': MDUnderlinedHeadingReader,
 				'Heading (hash)': MDHashHeadingReader,
 				'Subtext': MDSubtextReader,
@@ -283,7 +463,7 @@
 				'Paragraph': MDParagraphReader,
 				'Spreadsheets': MDSpreadsheetReader,
 			};
-			var inlineReaderClasses = {
+			const inlineReaderClasses = {
 				'Emphasis': MDEmphasisReader,
 				'Strong': MDStrongReader,
 				'Strikethrough': MDStrikethroughReader,
@@ -304,30 +484,36 @@
 			};
 			var activeReaders = [];
 			var parser = null;
+
+			function markdownEditorNode() { return document.getElementById('markdown-editor'); }
+			function previewNode() { return document.getElementById('preview-container'); }
+			function codeJSNode() { return document.getElementById('code-js'); }
+			function codePHPNode() { return document.getElementById('code-php'); }
+			function readersButtonNode() { return document.getElementById('readers-button'); }
+			function readersDialogNode() { return document.getElementById('readers-dialog'); }
+			function readerListNode() { return document.getElementById('reader-list'); }
+
 			function onDocumentLoad() {
+				if (markdownEditorNode().value === '') {
+					markdownEditorNode().value = sampleMarkdown;
+				}
 				activeReaders = [ ...Markdown.allReaders, new MDSpreadsheetReader() ];
 				parser = new Markdown(activeReaders);
-				document.getElementById('markdowninput').addEventListener('input', onMarkdownChange);
+				markdownEditorNode().addEventListener('input', handleMarkdownChange);
 				populateReaderCheckboxes();
-				document.getElementById('sendbutton').addEventListener('click', () => {
-					handleSendClicked();
+				readersButtonNode().addEventListener('click', handleReadersButtonClicked);
+				codeJSNode().addEventListener('change', handleMarkdownChange);
+				codePHPNode().addEventListener('change', handleMarkdownChange);
+				readersDialogNode().getElementsByClassName("dialog-title")[0].innerHTML = "Readers";
+				readersDialogNode().getElementsByClassName("dialog-titlebar")[0].getElementsByTagName("button")[0].addEventListener('click', () => {
+					readersDialogNode().close();
 				});
-				document.getElementById('code-js').addEventListener('change', onMarkdownChange);
-				document.getElementById('code-php').addEventListener('change', onMarkdownChange);
-				setTimeout(onMarkdownChange, 0);
-			}
-			function onMarkdownChange() {
-				if (document.getElementById('code-php').checked) {
-					debouncedSendPreviewRequest();
-				} else if (document.getElementById('code-js').checked) {
-					updatePreviewLocally();
-				}
+				setTimeout(handleMarkdownChange, 0);
 			}
 			function updatePreviewLocally() {
-				const textarea = document.getElementById('markdowninput');
-				let markdown = textarea.value;
+				let markdown = markdownEditorNode().value;
 				let html = parser.toHTML(markdown, 'foo-');
-				document.getElementById('preview').innerHTML = html;
+				previewNode().innerHTML = html;
 			}
 			var debounceTimer = null;
 			var needsUpdate = false;
@@ -348,7 +534,7 @@
 				}
 			}
 			function sendPreviewRequest() {
-				const markdown = document.getElementById('markdowninput').value;
+				const markdown = markdownEditorNode().value;
 				const readers = activeReaders.map((r) => r.constructor.name);
 				const request = new XMLHttpRequest();
 				var formData = encodeForm({
@@ -359,7 +545,7 @@
 				request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 				request.onreadystatechange = () => {
 					if (request.readyState == 4 && request.status == 200) {
-						document.getElementById('preview').innerHTML = request.responseText;
+						previewNode().innerHTML = request.responseText;
 					}
 				};
 				request.send(formData);
@@ -378,7 +564,7 @@
 				return pairs.join('&');
 			}
 			function populateReaderCheckboxes() {
-				const container = document.getElementById('readercontainer');
+				const container = document.getElementById('reader-list');
 				var header = document.createElement('div');
 				header.classList.add('reader-header');
 				header.append(document.createTextNode('Block Readers'));
@@ -410,6 +596,8 @@
 						break;
 					}
 				}
+				const label = document.createElement('label');
+				label.classList.add('reader-check');
 				const check = document.createElement('input');
 				check.type = 'checkbox';
 				check.checked = isSelected;
@@ -417,14 +605,25 @@
 					handleCheckChanged(readerClass, check);
 				});
 				check.id = `reader-${readerClass.name}`;
-				const label = document.createElement('label');
-				label.htmlFor = check.id;
+				label.append(check);
 				label.append(document.createTextNode(name));
-				const div = document.createElement('div');
-				div.classList.add('reader-check');
-				div.append(check);
-				div.append(label);
-				return div;
+				return label;
+			}
+
+			function handleMarkdownChange() {
+				if (codePHPNode().checked) {
+					debouncedSendPreviewRequest();
+				} else if (codeJSNode().checked) {
+					updatePreviewLocally();
+				}
+			}
+			function handleReadersButtonClicked() {
+				const dlg = readersDialogNode();
+				if (dlg.open) {
+					dlg.close();
+				} else {
+					dlg.showModal();
+				}
 			}
 			function handleCheckChanged(readerClass, check) {
 				if (check.checked) {
@@ -433,124 +632,56 @@
 					activeReaders = activeReaders.filter((reader) => reader.constructor.name !== readerClass.name);
 				}
 				parser = new Markdown(activeReaders);
-				onMarkdownChange();
-			}
-			function handleSendClicked() {
-				sendPreviewRequest();
+				handleMarkdownChange();
 			}
 			document.addEventListener('DOMContentLoaded', onDocumentLoad);
 		</script>
 	</head>
 
 	<body>
-		<div class="inputhalf half">
-			<div class="toolbar">
-				<details>
-					<summary>Readers</summary>
-
-					<div id="readercontainer"></div>
-				</details>
+		<div class="pane-container">
+			<div class="left-pane pane">
+				<div class="toolbar-pane">
+					<div class="toolbar-left">
+						<button id="readers-button">Readers</button>
+					</div>
+					<div class="toolbar-right">
+						<label>
+							<input type="radio" id="code-js" name="code" value="js" checked>
+							Javascript
+						</label>
+						<label>
+							<input type="radio" id="code-php" name="code" value="php">
+							PHP
+						</label>
+					</div>
+				</div>
+				<div class="editor-pane">
+					<textarea id="markdown-editor"></textarea>
+				</div>
 			</div>
-			<div class="codeswitch-cont">
-				<input type="radio" id="code-js" name="code" value="js" checked>
-				<label for="code-js">Javascript</label>
-				<input type="radio" id="code-php" name="code" value="php">
-				<label for="code-php">PHP</label>
+			<div class="right-pane pane">
+				<div class="preview-container" id="preview-container">
+					<h1>Preview Here</h1>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed turpis. Integer tincidunt eu nibh.</p>
+					<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies velit. Nam eget dui et libero pharetra dapibus.</p>
+					<p>Vestibulum in vulputate velit. Cras egestas, urna quis dignissim convallis, arcu felis sagittis diam, non fermentum massa justo ac neque. In ornare do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+					<p>Duis phasellus maecenas vestibulum mollis facilisis. Nulla sit amet erat. Suspendisse in justo eu odio suscipit rhoncus. Praesent id massa for ante varius ultrices. Cras sed leo at felis sagittis cursus. Integer turpis est, vulputate ut, elementum ac, condimentum eget, diam.</p>
+					<p>Aliquam nec enim. Nulla tempus sem et risus. Proin mi. Etiam sit amet orci eget eros faucibus tincidunt. Duis volutpat nunc vel velit. Suspendisse potenti. Integer sollicitudin dictum est. Donec ut dolor. Nam malesuada magna.</p>
+					<p>Sed non lectus. Vivamus consectetuer purus vitae massa. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies velit. Nam eget dui et libero pharetra dapibus</p>
+				</div>
 			</div>
-			<div id="sendbuttoncont"><button id="sendbutton">Send</button></div>
-			<textarea id="markdowninput">## Block Formats {#top}
-
-A regular paragraph.
-
--# Sub text
-
-* Unordered
-* Lists
-    * Sub list
-
-1. Ordered
-2. Lists
-    6. Sub list
-
-A blockquote:
-
-&gt; "The only thing we have to fear is fear itself—nameless, unreasoning,
-&gt; unjustified terror which paralyzes needed efforts to convert retreat into
-&gt; advance." - Franklin D. Roosevelt's First Inaugural Address
-
-Some definitions:
-
-word
-: a unit of meaning in a sentence
-sentence
-: a collection of words
-
-Code:
-
-```javascript
-function foo() {
-    return 'Hello world';
-}
-```
-
-    function bar() {
-        return 'Indented code';
-    }
-
-### Heading, hash style
-
-Heading, underline style
----
-
-### Modified Heading {style=color:red;}
-
-| Unit Price | Qty | Subtotal |
-| ---: | ---: | ---: |
-| $1.23 | 2 | =A*B FILL |
-| $4.99 | 6 | |
-| Total | | =SUM(C:C) |
-
----
-
-## Inline Formats
-
-Normal, **double asterisk,** __double underscore,__ *asterisks,* _underscores,_
-~~double tildes,~~ ~single tildes,~ ^carets,^ ==double equals==, ``double backticks``,
-`single backticks`.
-
-Lorem ipsum dolor sit amet,[^1] consectetur adipiscing elit.[^abc] Sed sodales
-in odio eget porta. Proin et erat sit amet erat semper mollis vitae ut
-turpis.[^foo] Ut ipsum dui, maximus sit amet suscipit at, dictum id nulla.[^bar]
-Aenean efficitur rhoncus nulla non fermentum.
-
-[^1]: Donec ut felis volutpat, gravida ipsum scelerisque, accumsan est.
-[^abc]: Cras dictum rutrum quam.
-[^foo]: Donec maximus bibendum lorem.
-[^bar]: Praesent consectetur tristique leo. Morbi nec nisi sit amet quam
- imperdiet vehicula eu feugiat tortor. 
-
-The HTML on the WWW is often full of JS and CSS.
-
-*[HTML]: Hypertext Markup Language
-*[WWW]: World Wide Web
-*[JS]: JavaScript
-*[CSS]: Cascading Style Sheets
-
-Click [here](#top) to return to the top. Referenced link to [Google][google].
-
-![alt text](https://picsum.photos/100/75) ![alt text](https://picsum.photos/101/75 "With a title")
-![][testimage]
-
-[testimage]: https://picsum.photos/102/75
-[google]: https://google.com  "I prefer Duck Duck Go"
-
-Some verbatim &lt;span style="color:green;"&gt;HTML&lt;/span&gt;. A script tag
-will be ignored. &lt;script&gt;&lt;/script&gt;</textarea>
 		</div>
-		<div class="previewhalf half">
-			<div id="preview">
-				<p>Preview here</p>
+		<dialog id="readers-dialog">
+			<div class="dialog-layout">
+				<div class="dialog-titlebar">
+					<div class="dialog-title"></div>
+					<div class="dialog-close"><button>✕</button></div>
+				</div>
+				<div class="dialog-content">
+					<div class="reader-list" id="reader-list"></div>
+				</div>
 			</div>
-		</div>
+		</dialog>
 	</body>
 </html>