2017-11-23 03:04:38 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<!-- Author: Özgür Kesim <oec-go@kesim.org> 2017 -->
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
{{ $name := .Cur.Name }}
|
|
|
|
|
<title>playdot - {{$name}} online</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/static/codemirror.css">
|
|
|
|
|
<script src="/static/codemirror.js"></script>
|
|
|
|
|
<script src="/static/{{$name}}.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin:0;
|
|
|
|
|
overflow:hidden;
|
2017-11-27 21:04:36 +01:00
|
|
|
font-family:Calibri,Verdana,Sans-Serif;
|
2017-11-23 03:04:38 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#top {
|
|
|
|
|
padding:10px;
|
|
|
|
|
margin:0px;
|
|
|
|
|
font-size:20px;
|
|
|
|
|
font-family:Sans-serif;
|
|
|
|
|
background: {{ .Cur.BgColor }};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#source {
|
|
|
|
|
height: 40vh;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow:auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#run {
|
|
|
|
|
margin: 10pt;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#doc {
|
|
|
|
|
margin: 20px;
|
|
|
|
|
font-size: 9pt;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#output {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 50vh;
|
|
|
|
|
overflow:auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.on {
|
|
|
|
|
background:white;
|
|
|
|
|
color:{{.Cur.BgColor}};
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
svg {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
// border: 2px solid lime;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#link {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
background-color: {{ .Cur.BgColor }};
|
|
|
|
|
border: none;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 7px 13px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin: 4px 2px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.error {
|
|
|
|
|
background-color: lightsalmon;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="top">Tools: {{ range .Tools }}
|
|
|
|
|
{{ if eq .Name $name }} <span class="on">{{$name}}</span> {{ else }} <a href="/{{.Name}}">{{.Name}}</a> {{ end }} |
|
|
|
|
|
{{ end }}
|
|
|
|
|
</div>
|
|
|
|
|
<!--
|
|
|
|
|
TODO:
|
|
|
|
|
- add download-button for output in other formats
|
|
|
|
|
-->
|
|
|
|
|
<textarea name="source" id="source">
|
|
|
|
|
{{ .Cur.Example }}
|
|
|
|
|
</textarea>
|
|
|
|
|
<div id="mid">
|
2017-11-27 18:40:31 +01:00
|
|
|
<button id="run" class="button" onclick="run()" title="or ctrl-enter in editor">run</button>
|
|
|
|
|
<button id="save" class="button" onclick="share()" title="or ctrl-s in editor">share</button><span id="link"></span>
|
2017-11-23 03:04:38 +01:00
|
|
|
<input id="file" type="file" name="file" class="button"/>
|
|
|
|
|
<input id="scale" type ="range" min ="0.5" max="3" step ="0.1" value ="1"/>
|
|
|
|
|
<span id="doc">
|
|
|
|
|
Documentation:
|
|
|
|
|
{{ range $link, $text := .Cur.Documentation }}
|
|
|
|
|
<a href="{{$link}}" target="_blank">{{$text}}</a> /
|
|
|
|
|
{{ end }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="output"></div>
|
|
|
|
|
<script>
|
|
|
|
|
var output = document.getElementById("output");
|
|
|
|
|
var source = document.getElementById("source");
|
|
|
|
|
var link = document.getElementById("link");
|
|
|
|
|
var filein = document.getElementById("file");
|
|
|
|
|
var scale = document.getElementById("scale");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var editor = CodeMirror.fromTextArea(source, {
|
|
|
|
|
lineNumbers: true,
|
|
|
|
|
smartIndent: true,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
window.onkeydown=function(e) {
|
|
|
|
|
if (e.ctrlKey && e.key == "Enter") {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
run();
|
2017-11-27 18:40:31 +01:00
|
|
|
} else if (e.ctrlKey && e.key == "s") {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
share();
|
2017-11-23 03:04:38 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
filein.onchange=function() {
|
|
|
|
|
var file = filein.files[0];
|
|
|
|
|
var reader = new FileReader();
|
|
|
|
|
reader.onload = function (e) {
|
|
|
|
|
editor.setValue(e.target.result);
|
|
|
|
|
};
|
|
|
|
|
reader.readAsText(file);
|
2017-11-27 18:40:31 +01:00
|
|
|
filein.value="";
|
2017-11-23 03:04:38 +01:00
|
|
|
window.location.hash="";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
scale.onchange=function() {
|
|
|
|
|
var svg=output.querySelector("svg");
|
|
|
|
|
var sc = scale.valueAsNumber;
|
|
|
|
|
if (svg) {
|
|
|
|
|
svg.height.baseVal.value = svg.viewBox.baseVal.height*sc;
|
|
|
|
|
svg.width.baseVal.value = svg.viewBox.baseVal.width*sc;
|
|
|
|
|
console.log("scale:", sc, "svg:", svg.height.baseVal.value, svg.width.baseVal.value);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.onhashchange = hashloc;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function run() {
|
|
|
|
|
var data = editor.getValue().trim();
|
|
|
|
|
if (!data) return;
|
2019-06-14 11:21:20 +02:00
|
|
|
link.innerHTML = "";
|
2017-11-23 03:04:38 +01:00
|
|
|
var req = new XMLHttpRequest();
|
|
|
|
|
req.open("POST", "/{{$name}}/c", false);
|
|
|
|
|
req.onreadystatechange = function() {
|
|
|
|
|
switch (req.status) {
|
|
|
|
|
case 200:
|
2018-11-25 13:55:47 +01:00
|
|
|
if (req.getResponseHeader("Content-Type") === "img/png") {
|
|
|
|
|
output.innerHTML = '<img src="data:image/png;base64,' + req.responseText + '"/>';
|
|
|
|
|
} else {
|
|
|
|
|
output.innerHTML = req.responseText;
|
|
|
|
|
}
|
2017-11-23 03:04:38 +01:00
|
|
|
break;
|
|
|
|
|
case 400:
|
|
|
|
|
output.innerHTML = '<pre class="error">'+req.responseText+'</pre>';
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
req.send(data);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function share() {
|
|
|
|
|
var data = editor.getValue();
|
|
|
|
|
var req = new XMLHttpRequest();
|
|
|
|
|
req.open("POST", "/{{$name}}/s", false);
|
|
|
|
|
req.onreadystatechange = function() {
|
|
|
|
|
switch (req.status) {
|
|
|
|
|
case 200:
|
2019-06-14 11:21:20 +02:00
|
|
|
link.innerHTML = "<i>saved as</i> <a href=\"/{{$name}}/#"+req.responseText+"!\">#"+req.responseText+"!</a>" +
|
|
|
|
|
" or <a href=\"/{{$name}}/d/"+req.responseText+"\">download</a>";
|
2017-11-23 03:04:38 +01:00
|
|
|
document.title= "{{$name}}#"+req.responseText;
|
|
|
|
|
document.location.hash=req.responseText+"!";
|
|
|
|
|
break;
|
|
|
|
|
case 400:
|
|
|
|
|
output.innerHTML = '<pre class="error">'+req.responseText+'</pre>';
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
req.send(data);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function load(id) {
|
|
|
|
|
link.innerHtml = "";
|
|
|
|
|
var req = new XMLHttpRequest();
|
|
|
|
|
req.open("GET", "/{{$name}}/l/"+id, false);
|
|
|
|
|
req.onreadystatechange = function() {
|
|
|
|
|
switch (req.status) {
|
|
|
|
|
case 200:
|
|
|
|
|
editor.setValue(req.responseText);
|
|
|
|
|
break;
|
|
|
|
|
case 400:
|
|
|
|
|
editor.setValue("");
|
|
|
|
|
output.innerHTML = '<pre class="error">'+req.responseText+'</pre>';
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
req.send();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function hashloc() {
|
|
|
|
|
var hash = window.location.hash;
|
|
|
|
|
if (hash) {
|
|
|
|
|
var parts = (hash.split('#')[1]).split('!');
|
|
|
|
|
var id = parts[0];
|
|
|
|
|
if (id) {
|
|
|
|
|
load(id);
|
|
|
|
|
document.title="{{$name}}#"+id;
|
|
|
|
|
if (parts.length > 1) run();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
hashloc();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
