Add url query support and history state support to online IDE #386

cuixiping · cuixiping · commit 4b46129017a3 · 2019-12-26T09:24:28.000+08:00
diff --git a/tools/examplesAlias.js b/tools/examplesAlias.js
@@ -0,0 +1,32 @@
+module.exports = {
+  "beer": "while",
+  "collatz": "角谷猜想",
+  "collatz2": "考拉兹猜想（角谷猜想）",
+  "divination": "春秋古筮法",
+  "eightqueens": "八皇后問題",
+  "euclidean": "歐幾里得法",
+  "factorial": "階乘",
+  "fibonacci": "斐波那契",
+  "fibonacci2": "斐氏列",
+  "fizzbuzz": "Fizz buzz",
+  "hanoi": "漢諾塔",
+  "helloworld": "問天地好在",
+  "helloworld+": "問天地好在+",
+  "import": "導入",
+  "mandelbrot": "曼德博集",
+  "mergesort": "歸併排序",
+  "misc": "雜項",
+  "modinv": "大衍求一術",
+  "multiplication_table": "乘算口訣",
+  "nested_fun": "函数",
+  "obj": "对象",
+  "pi_leibniz": "萊布尼茲圓周率估算",
+  "quicksort": "快速排序",
+  "quicksort_inplace": "快速排序2",
+  "quine": "自產生程式",
+  "quine2": "自產生程式2",
+  "selectionsort": "選擇排序",
+  "sieve": "埃氏篩",
+  "sqrt_newton": "牛頓求根法",
+  "turing": "圖靈機",
+};
diff --git a/tools/make_ide.js b/tools/make_ide.js
@@ -6,6 +6,7 @@ var fs = require("fs");
 var execSync = require("child_process").execSync;
 var parser = require("../src/parser");
 var utils = require("./utils");
+const examplesAlias = require("./examplesAlias");
 
 var files = fs.readdirSync("../examples/").filter(x => x.endsWith(".wy"));
 var prgms = {};
@@ -18,9 +19,6 @@ for (var i = 0; i < files.length; i++) {
 var lib = utils.loadlib();
 
 function main() {
-  var ed = newEditor(prgms["mandelbrot"]);
-  // var ln = newLineNo(ed);
-
   let highlighted = true;
   let currentHighlightTimeout;
   const highlightCode = () => {
@@ -30,17 +28,46 @@ function main() {
     console.timeEnd("highlight");
   };
 
+  var makeTitle = (example) => {
+    return (examplesAlias[example] || example) + " - wenyan-lang Online IDE";
+  };
+
   var sel = document.getElementById("pick-example");
   for (var k in prgms) {
     var opt = document.createElement("option");
     opt.value = k;
-    opt.innerHTML = k;
+    opt.text = examplesAlias[k] || k;
     sel.appendChild(opt);
   }
-  sel.value = "mandelbrot";
+  var match = location.search.match(/(?:^\?|&)example=([^&]+)/);
+  match = match && decodeURIComponent(match[1]);
+  var example = match || "mandelbrot";
+  var ed = newEditor(prgms[example]);
+  // var ln = newLineNo(ed);
+  sel.value = example;
+  document.title = makeTitle(example);
   sel.onchange = function() {
-    ed.innerText = prgms[sel.value];
+    var example = sel.value;
+    if (!prgms[example]) {
+      return;
+    }
+    var title = makeTitle(example);
+    document.title = title;
+    ed.innerText = prgms[example];
     run();
+    if (history.pushState) {
+      var url = "?example=" + encodeURIComponent(example);
+      history.pushState({ example: example }, title, url);
+    }
+  };
+  window.onpopstate = function (event) {
+    var example = event.state && event.state.example;
+    if (example && prgms[example]) {
+      sel.value = example;
+      document.title = makeTitle(example);
+      ed.innerText = prgms[example];
+      run();
+    }
   };
   var autohl = document.getElementById("auto-hl");
   autohl.onchange = function() {
@@ -126,6 +153,7 @@ function main() {
 var html = `<!--GENERATED FILE, DO NOT READ-->
 <head>
 <meta charset="UTF-8">
+<title>wenyan-lang Online IDE</title>
 <style>
 [contenteditable="true"]:focus {outline: none;}
 pre{tab-size: 4;}
@@ -141,6 +169,7 @@ pre{tab-size: 4;}
 <table><tr><td><select id="pick-example"></select><button id="run">Run</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="auto-hl"/><small>Auto Highlight</small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="hide-std"/><small>Hide Imported Code</small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<small>Romanization</small><select id="pick-roman"></select></td></tr><tr><td id="in" valign="top"><div class="tbar">EDITOR</div></td><td rowspan="2" valign="top"><div class="tbar">COMPILED JAVASCRIPT</div><pre id="js"></pre></td></tr><tr><td valign="top"><div class="tbar">OUTPUT</div><pre id="out"></pre></td></tr></table>
 <script>var STDLIB = ${JSON.stringify(lib)};</script>
 <script>var prgms = ${JSON.stringify(prgms)};</script>
+<script>var examplesAlias = ${JSON.stringify(examplesAlias)};</script>
 <script>${main.toString()};main();</script>
 </body>
 `;
