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
This commit is contained in:
Cory McWilliams 2016-04-04 20:26:01 +00:00
parent cbf54eaa17
commit 3b5f123136
4 changed files with 254 additions and 71 deletions

View File

@ -52,7 +52,14 @@ function split(container, children) {
var shrink = children[i].shrink || "1"; var shrink = children[i].shrink || "1";
var basis = children[i].basis || "auto"; var basis = children[i].basis || "auto";
node.setAttribute("style", "flex: " + grow + " " + shrink + " " + basis); 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); container.appendChild(node);
} else if (children[i].type) { } else if (children[i].type) {
node = document.createElement("div"); node = document.createElement("div");
@ -177,7 +184,7 @@ function printStructured(container, data) {
} else if (data.iframe) { } else if (data.iframe) {
node = document.createElement("iframe"); node = document.createElement("iframe");
node.setAttribute("srcdoc", data.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("width", data.width || 320);
node.setAttribute("height", data.height || 240); node.setAttribute("height", data.height || 240);
if (data.name) { if (data.name) {

View File

@ -5,8 +5,13 @@
if (imports.terminal) { if (imports.terminal) {
terminal.setEcho(false); terminal.setEcho(false);
terminal.split([ terminal.split([
{name: "graphics", basis: "520px", shrink: "0", grow: "0"}, {
type: "horizontal",
children: [
{name: "graphics", basis: "700px", shrink: "0", grow: "0"},
{name: "text"}, {name: "text"},
],
},
]); ]);
// Request a callback every time the user hits enter at the terminal prompt. // 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) { core.register("onWindowMessage", function(data) {
if (data.message.ready) {
core.getService("turtle").then(function(service) {
return service.postMessage("sync");
});
} else {
terminal.print(data.message); terminal.print(data.message);
}
}); });
terminal.select("graphics"); 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. // Add an iframe to the terminal. This is how we sandbox code running on the client.
var contents = ` 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> <script>
setScale(2); setScale(2);
setWidth(3); setWidth(3);
@ -65,30 +76,32 @@ if (imports.terminal) {
} else if (command == "clear") { } else if (command == "clear") {
clear(WHITE); clear(WHITE);
_ch_startTimer(30); _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); event.source.postMessage(event.data, event.origin);
_ch_startTimer(30); _ch_startTimer(30);
} else { } else {
event.source.postMessage("Unrecognized command: " + command, event.origin); 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 // Register for messages in the iframe
window.addEventListener('message', onMessage, false); window.addEventListener('message', onMessage, false);
window.addEventListener('load', onLoad, false);
</script> </script>
` `
terminal.print({iframe: contents, width: 640, height: 480, name: "turtle"}); terminal.print({iframe: contents, width: 640, height: 480, name: "turtle"});
terminal.select("text"); terminal.select("text");
terminal.print("Supported commands: ", ["fd <distance>", "bk <distance>", "rt <angle>", "lt <angle>", "pu", "pd", "home", "reset", "clear"].join(", ")); 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 { } else {
var gHistory = null; var gHistory = null;

View File

@ -1,41 +1,180 @@
"use strict"; "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);
}
});
function renderIndex() {
terminal.split([{name: "terminal"}]);
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 { } else {
contents += letters[' '] + '\n'; terminal.print(
"* ",
{style: "font-weight: bold", value: {command: "open:" + entries[i], value: entries[i]}});
} }
} }
contents += "ht();\n"; });
contents += "window.addEventListener('message', function(event) { console.debug(event.data); }, false);\n";
contents += "</script>\n";
terminal.print({iframe: contents, width: 640, height: 480});
terminal.print("Type text and the letters ", {style: "color: #ff0", value: Object.keys(letters).join("")}, " in it will be drawn.");
} }
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();

View File

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