Lots of fighting with CSS to get side-by-side editors and previews. Didn't really win. Turned turtle into a live TurtleScript editor.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3188 ed5197a5-7fde-0310-b194-c3ffbd925b24

core/client.js

@@ -52,7 +52,14 @@ function split(container, children) {
 				var shrink = children[i].shrink || "1";
 				var basis = children[i].basis || "auto";
 				node.setAttribute("style", "flex: " + grow + " " + shrink + " " + basis);
-				node.setAttribute("class", "terminal");
+
+				var classes = ["terminal"];
+				if (children[i].type == "vertical") {
+					classes.push("vbox");
+				} else if (children[i].type == "horizontal") {
+					classes.push("hbox");
+				}
+				node.setAttribute("class", classes.join(" "));
 				container.appendChild(node);
 			} else if (children[i].type) {
 				node = document.createElement("div");
@@ -177,7 +184,7 @@ function printStructured(container, data) {
 		} else if (data.iframe) {
 			node = document.createElement("iframe");
 			node.setAttribute("srcdoc", data.iframe);
-			node.setAttribute("sandbox", "allow-forms allow-scripts");
+			node.setAttribute("sandbox", "allow-forms allow-scripts allow-top-navigation");
 			node.setAttribute("width", data.width || 320);
 			node.setAttribute("height", data.height || 240);
 			if (data.name) {

packages/cory/mmoturtle/mmoturtle.js

@@ -5,8 +5,13 @@
 if (imports.terminal) {
 	terminal.setEcho(false);
 	terminal.split([
-		{name: "graphics", basis: "520px", shrink: "0", grow: "0"},
+		{
-		{name: "text"},
+			type: "horizontal",
+			children: [
+				{name: "graphics", basis: "700px", shrink: "0", grow: "0"},
+				{name: "text"},
+			],
+		},
 	]);
 
 	// Request a callback every time the user hits enter at the terminal prompt.
@@ -31,7 +36,13 @@ if (imports.terminal) {
 	});
 
 	core.register("onWindowMessage", function(data) {
-		terminal.print(data.message);
+		if (data.message.ready) {
+			core.getService("turtle").then(function(service) {
+				return service.postMessage("sync");
+			});
+		} else {
+			terminal.print(data.message);
+		}
 	});
 
 	terminal.select("graphics");
@@ -39,7 +50,7 @@ if (imports.terminal) {
 
 	// Add an iframe to the terminal.  This is how we sandbox code running on the client.
 	var contents = `
-	<script src="http://codeheartjs.com/turtle/turtle.min.js">-*- javascript -*-</script>
+	<script src="https://codeheart.williams.edu/turtle/turtle.min.js">-*- javascript -*-</script>
 	<script>
 	setScale(2);
 	setWidth(3);
@@ -65,30 +76,32 @@ if (imports.terminal) {
 		} else if (command == "clear") {
 			clear(WHITE);
 			_ch_startTimer(30);
-		} else if (["fd", "bk", "rt", "lt", "pu", "pd"].indexOf(command) != -1) {
+		} else if (["fd", "bk", "rt", "lt", "pu", "pd", "setColor", "setWidth"].indexOf(command) != -1) {
-			window[command].apply(window, parts.map(parseInt));
+			window[command].apply(window, parts.map(parseFloat));
 			event.source.postMessage(event.data, event.origin);
 			_ch_startTimer(30);
 		} else {
 			event.source.postMessage("Unrecognized command: " + command, event.origin);
 		}
+		if (_turtle.nextCommandIndex >= _turtle.commandBuffer.length) {
+			_turtle.nextCommandIndex = 0;
+		}
+	}
+
+	function onLoad() {
+		parent.postMessage({ready: true}, "*");
 	}
 
 	// Register for messages in the iframe
 	window.addEventListener('message', onMessage, false);
+
+	window.addEventListener('load', onLoad, false);
 	</script>
 	`
 	terminal.print({iframe: contents, width: 640, height: 480, name: "turtle"});
 
 	terminal.select("text");
 	terminal.print("Supported commands: ", ["fd <distance>", "bk <distance>", "rt <angle>", "lt <angle>", "pu", "pd", "home", "reset", "clear"].join(", "));
-
-	// Get the party started by asking for the history of commands (the turtle party).
-	setTimeout(function() {
-		core.getService("turtle").then(function(service) {
-			return service.postMessage("sync");
-		});
-	}, 1000);
 } else {
 	var gHistory = null;
 

packages/cory/turtle/turtle.js

@@ -1,41 +1,180 @@
 "use strict";
 
-// Start at bottom left facing up.
+terminal.setEcho(false);
-// Height = 20.  Width = 10.
+terminal.setTitle("Live TurtleScript");
-// 10 between.
 
-var letters = {
+core.register("onInput", function(input) {
-	A: 'fd(20); rt(90); fd(10); rt(90); fd(10); rt(90); fd(10); pu(); bk(10); lt(90); pd(); fd(10); pu(); lt(90); fd(10); lt(90); pd();',
+	if (input == "new page") {
-	D: 'fd(20); rt(90); fd(10); rt(70); fd(11); rt(40); fd(11); rt(70); fd(10); pu(); bk(20); rt(90); pd();',
+		editPage("new", "");
-	E: 'pu(); fd(20); rt(90); fd(10); lt(180); pd(); fd(10); lt(90); fd(10); lt(90); fd(8); pu(); rt(180); fd(8); lt(90); pd(); fd(10); lt(90); fd(10); pu(); fd(10); lt(90); pd()',
+	} else if (input == "submit") {
-	H: 'fd(20); pu(); bk(10); pd(); rt(90); fd(10); lt(90); pu(); fd(10); rt(180); pd(); fd(20); pu(); lt(90); fd(10); lt(90); pd();',
+		submitNewPost().then(renderBlog);
-	L: 'pu(); fd(20); rt(180); pd(); fd(20); lt(90); fd(10); pu(); fd(10); lt(90); pd();',
+	} else if (input == "home") {
-	O: 'fd(20); rt(90); fd(10); rt(90); fd(20); rt(90); fd(10); pu(); bk(20); rt(90); pd();',
+		renderIndex();
-	R: 'fd(20); rt(90); fd(10); rt(90); fd(10); rt(90); fd(10); pu(); bk(8); lt(90); pd(); fd(10); pu(); lt(90); fd(12); lt(90); pd();',
+	} else if (input.substring(0, 5) == "open:") {
-	W: 'pu(); fd(20); rt(180); pd(); fd(20); lt(90); fd(5); lt(90); fd(12); rt(180); pu(); fd(12); pd(); lt(90); fd(5); lt(90); fd(20); pu(); bk(20); rt(90); fd(10); lt(90); pd();',
+		var title = input.substring(5);
-	' ': 'pu(); rt(90); fd(20); lt(90); pd();',
+		database.get(title).then(function(contents) {
-};
+			editPage(title, contents);
-
+		});
-function render(text) {
+	} else if (input.substring(0, 7) == "delete:") {
-	terminal.clear();
+		terminal.clear();
-	terminal.print(text, " using ", {href: "http://codeheartjs.com/turtle/"}, ".");
+		var title = input.substring(7);
-	var contents = '<script src="http://codeheartjs.com/turtle/turtle.min.js">-*- javascript -*-</script><script>\n';
+		terminal.print("Are you sure you want to delete page '", title, "'?");
-	contents += 'setScale(2); setWidth(5);\n';
+		terminal.print({command: "confirmDelete:" + title, value: "delete it"});
-	for (var i = 0; i < text.length; i++) {
+		terminal.print({command: "home", value: "cancel"});
-		var c = text.charAt(i).toUpperCase();
+	} else if (input.substring(0, 14) == "confirmDelete:") {
-		if (letters[c]) {
+		var title = input.substring(14);
-			contents += letters[c] + '\n';
+		database.remove(title).then(renderIndex);
-		} else {
-			contents += letters[' '] + '\n';
-		}
 	}
-	contents += "ht();\n";
+});
-	contents += "window.addEventListener('message', function(event) { console.debug(event.data); }, false);\n";
+
-	contents += "</script>\n";
+function renderIndex() {
-	terminal.print({iframe: contents, width: 640, height: 480});
+	terminal.split([{name: "terminal"}]);
-	terminal.print("Type text and the letters ", {style: "color: #ff0", value: Object.keys(letters).join("")}, " in it will be drawn.");
+	terminal.clear();
+	terminal.print("Live TurtleScript");
+	if (core.user.credentials.permissions.authenticated) {
+		terminal.print({command: "new page"});
+	}
+
+	database.getAll().then(function(entries) {
+		for (var i = 0; i < entries.length; i++) {
+			if (core.user.credentials.permissions.authenticated) {
+				terminal.print(
+					"* ",
+					{style: "font-weight: bold", value: {command: "open:" + entries[i], value: entries[i]}},
+					" (",
+					{command: "delete:" + entries[i], value: "x"},
+					")");
+			} else {
+				terminal.print(
+					"* ",
+					{style: "font-weight: bold", value: {command: "open:" + entries[i], value: entries[i]}});
+			}
+		}
+	});
 }
 
-render("Hello, world!");
+var gPage = null;
 
-core.register("onInput", render);
+core.register("hashChange", function(event) {
+	var title = event.hash.substring(1);
+	database.get(title).then(function(contents) {
+		editPage(title, contents);
+	});
+});
+
+core.register("onWindowMessage", function(event) {
+	if (event.message.ready) {
+		terminal.postMessageToIframe("iframe", {title: gPage.title, contents: gPage.contents});
+	} else if (event.message.index) {
+		renderIndex();
+	} else {
+		database.set(event.message.title, event.message.contents).then(function() {
+			renderIndex();
+		});
+	}
+});
+
+function editPage(title, contents) {
+	gPage = {title: title, contents: contents};
+	terminal.split([{name: "terminal", type: "vertical"}]);
+	terminal.clear();
+	terminal.print({iframe: `<html>
+		<head>
+			<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.2/codemirror.min.js"></script>
+			<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.2/codemirror.min.css"></link>
+			<style>
+				html {
+					height: 100%;
+					margin: 0;
+					padding: 0;
+				}
+				body {
+					display: flex;
+					flex-direction: column;
+					height: 100%;
+					margin: 0;
+					padding: 0;
+				}
+				#menu {
+					flex: 0 0 auto;
+				}
+				#container {
+					flex: 1 1 auto;
+					display: flex;
+					flex-direction: row;
+					width: 100%;
+					background-color: white;
+				}
+				.CodeMirror {
+					width: 100%;
+					height: 100%;
+				}
+				.CodeMirror-scroll {
+				}
+				#edit { background-color: white }
+				#preview { background-color: white }
+				#edit, #preview {
+					display: flex;
+					overflow: auto;
+					flex: 0 0 50%;
+				}
+			</style>
+			<script><!--
+				var gEditor;
+				function index() {
+					parent.postMessage({index: true}, "*");
+				}
+				function submit() {
+					parent.postMessage({
+						title: document.getElementById("title").value,
+						contents: gEditor.getValue(),
+					}, "*");
+				}
+				function textChanged() {
+					var preview = document.getElementById("preview");
+					while (preview.firstChild) {
+						preview.removeChild(preview.firstChild);
+					}
+					var iframe = document.createElement("iframe");
+					iframe.setAttribute('srcdoc', '<script src="https://codeheart.williams.edu/turtle/turtle.min.js?">-*- javascript -*-</script><script>' + gEditor.getValue() + '</script>');
+					iframe.setAttribute('style', 'width: 100vw; height: 100vh; border: 0');
+					preview.appendChild(iframe);
+				}
+			--></script>
+			<script>
+				window.addEventListener("message", function(message) {
+					document.getElementById("title").value = message.data.title;
+					gEditor.setValue(message.data.contents);
+					textChanged();
+				}, false);
+
+				window.addEventListener("load", function() {
+					gEditor = CodeMirror.fromTextArea(document.getElementById("contents"), {
+						lineNumbers: true
+					});
+					gEditor.on("change", textChanged);
+					document.getElementById("preview").addEventListener("error", function(error) {
+						console.debug("onerror: " + error);
+					});
+				});
+				parent.postMessage({ready: true}, "*");
+			</script>
+		</head>
+		<body>
+			<div id="menu">
+				<input type="button" value="Back" onclick="index()">
+` + (core.user.credentials.permissions.authenticated ? `
+				<input type="button" value="Save" onclick="submit()">
+` : "") +
+	`			<a target="_top" href="http://codeheartjs.com/turtle/">TurtleScript</a>
+				<input type="text" id="title" oninput="textChanged()">
+			</div>
+			<div id="container">
+				<div id="edit"><textarea id="contents" oninput="textChanged()"></textarea></div>
+				<div id="preview"></div>
+			</div>
+		</body>
+	</html>`, name: "iframe", style: "flex: 1 1 auto; border: 0; width: 100%"});
+}
+
+renderIndex();

packages/cory/wiki/wiki.js

@@ -1,6 +1,7 @@
 "use strict";
 
 terminal.setEcho(false);
+terminal.setTitle("Live Markdeep Editor");
 
 core.register("onInput", function(input) {
 	if (input == "new page") {
@@ -27,8 +28,9 @@ core.register("onInput", function(input) {
 });
 
 function renderIndex() {
+	terminal.split([{name: "terminal"}]);
 	terminal.clear();
-	terminal.print("Editor Test");
+	terminal.print("Live Markdeep Editor");
 	if (core.user.credentials.permissions.authenticated) {
 		terminal.print({command: "new page"});
 	}
@@ -53,6 +55,13 @@ function renderIndex() {
 
 var gPage = null;
 
+core.register("hashChange", function(event) {
+	var title = event.hash.substring(1);
+	database.get(title).then(function(contents) {
+		editPage(title, contents);
+	});
+});
+
 core.register("onWindowMessage", function(event) {
 	if (event.message.ready) {
 		terminal.postMessageToIframe("iframe", {title: gPage.title, contents: gPage.contents});
@@ -67,37 +76,47 @@ core.register("onWindowMessage", function(event) {
 
 function editPage(title, contents) {
 	gPage = {title: title, contents: contents};
+	terminal.split([{name: "terminal", type: "vertical"}]);
 	terminal.clear();
 	terminal.print({iframe: `<html>
 		<head>
 			<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.2/codemirror.min.js"></script>
 			<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.2/codemirror.min.css"></link>
 			<style>
-				html, body {
+				html {
-					position: relative;
+					height: 100%;
 					margin: 0;
 					padding: 0;
-					overflow: hidden;
+				}
+				body {
+					display: flex;
+					flex-direction: column;
 					height: 100%;
+					margin: 0;
+					padding: 0;
+				}
+				#menu {
+					flex: 0 0 auto;
 				}
 				#container {
+					flex: 1 1 auto;
 					display: flex;
 					flex-direction: row;
+					width: 100%;
+					background-color: white;
+				}
+				.CodeMirror {
+					width: 100%;
 					height: 100%;
 				}
-				textarea {
+				.CodeMirror-scroll {
+				}
+				#edit { background-color: white }
+				#preview { background-color: white }
+				#edit, #preview {
+					display: flex;
 					overflow: auto;
-					resize: none;
+					flex: 0 0 50%;
-					flex: 1 0 50%;
-				}
-				.CodeMirror, .CodeMirror-scroll {
-					flex: 1 0 50%;
-					height: 100%;
-				}
-				#preview {
-					overflow: auto;
-					flex: 1 0 50%;
-					height: 100%;
 				}
 			</style>
 			<script>
@@ -138,15 +157,20 @@ function editPage(title, contents) {
 			</script>
 		</head>
 		<body>
-			<input type="button" value="Back" onclick="index()">
+			<div id="menu">
-			<input type="button" value="Save" onclick="submit()">
+				<input type="button" value="Back" onclick="index()">
-			<input type="text" id="title" style="width: 100%" oninput="textChanged()">
+` + (core.user.credentials.permissions.authenticated ? `
+				<input type="button" value="Save" onclick="submit()">
+` : "") +
+	`			<a target="_top" href="https://casual-effects.com/markdeep/">Markdeep</a>
+				<input type="text" id="title" oninput="textChanged()">
+			</div>
 			<div id="container">
-				<textarea id="contents" oninput="textChanged()"></textarea>
+				<div id="edit"><textarea id="contents" oninput="textChanged()"></textarea></div>
-				<div style="background-color: #ccc" id="preview"></div>
+				<div id="preview"></div>
 			</div>
 		</body>
-	</html>`, name: "iframe", style: "width: 100%; border: 0; height: 600px"});
+	</html>`, name: "iframe", style: "flex: 1 1 auto; border: 0; width: 100%"});
 }
 
 renderIndex();