update editor

mohayonao · Jun 12, 2014 · e1bd962 · e1bd962
1 parent 8f6534a
commit e1bd962
Show file tree

Hide file tree

Showing 3 changed files with 168 additions and 25 deletions.
diff --git a/demo/index.css b/demo/index.css
@@ -0,0 +1,89 @@
+@import url(http://fonts.googleapis.com/css?family=Lora:400,700);
+
+.CodeMirror {
+  font-family: Monaco, Consolas, "Lucida Console", monospace;
+  font-size: 14px;
+  height: 100%
+}
+.CodeMirror-focused .CodeMirror-selected {
+  background: #b5d5ff;
+}
+@-webkit-keyframes blink1 {
+ 25% { background-color: #ebf6f7; }
+100% { background-color: #b5d5ff; }
+}
+@-webkit-keyframes blink2 {
+ 50% { background-color: #ebf6f7; }
+100% { background-color: #ffffff; }
+}
+
+#menualt {
+  z-index: 65536;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  background: #7f8c8d;
+  opacity: 0.25;
+}
+
+#sidemenu {
+  z-index: 65535;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 375px;
+  height: 100%;
+  color: #2c3e50;
+  background: #ecf0f1;
+  border: solid 0 #95a5a6;
+  border-width: 0 0 0 1px;
+  box-sizing: border-box;
+  padding: 0px 15px;
+  font-family: Lora, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  white-space: nowrap;
+  display: none;
+}
+
+#sidemenu h1 {
+  font-size: 64px;
+  font-weight: 700;
+}
+
+#sidemenu h2 {
+  margin-top: 25px;
+  font-size: 22px;
+  font-weight: normal;
+}
+
+#sidemenu ul {
+  list-style: none;
+  margin: 10px;
+}
+
+#sidemenu li {
+  margin: 5px;
+}
+
+#sidemenu li i {
+  display: inline-block;
+  width: 80px;
+  font-style: normal;
+  font-weight: 700;
+}
+
+#sidemenu a {
+  color: #2c3e50;
+  text-decoration: underline;
+}
+
+.win {
+  display: none;
+}
+.mac {
+  display: none;
+}
diff --git a/demo/index.html b/demo/index.html
@@ -10,27 +10,33 @@
     </style>
     <link rel="stylesheet" href="../assets/codemirror.css"/>
     <link rel="stylesheet" href="./sc-mode.css"/>
-    <style>
-      .CodeMirror {
-        font-family: Monaco, Consolas, "Lucida Console", monospace;
-        font-size: 14px;
-        height: 100%
-      }
-      .CodeMirror-focused .CodeMirror-selected {
-         background: #b5d5ff;
-      }
-      @-webkit-keyframes blink1 {
-       25% { background-color: #f6bfbc; }
-      100% { background-color: #b5d5ff; }
-      }
-      @-webkit-keyframes blink2 {
-       25% { background-color: #f6bfbc; }
-      100% { background-color: #ffffff; }
-      }
-    </style>
+    <link rel="stylesheet" href="./index.css"/>
   </head>
   <body>
     <textarea id="editor"></textarea>
+    <div id="sidemenu">
+      <h1>SCScript</h1>
+      <div>JavaScript port of SuperCollider</div>
+      <h2>SHORTCUT</h2>
+      <ul class="win">
+        <li><i>Ctrl+Enter</i>: Evaluate Selection, Line or Region</li>
+        <li><i>Ctrl+B</i>: Boot Server</li>
+        <li><i>Ctrl+.</i>: Stop</li>
+      </ul>
+      <ul class="mac">
+        <li><i>Cmd+Enter</i>: Evaluate Selection, Line or Region</li>
+        <li><i>Cmd+B</i>: Boot Server</li>
+        <li><i>Cmd+.</i>: Stop</li>
+      </ul>
+      <h2>EXAMPLES</h2>
+      <h2>SEE ALSO</h2>
+      <ul>
+        <li><a href="https://github.com/mohayonao/SCScript" target="github">GitHub Repository</a></li>
+        <li><a href="http://doc.sccode.org" target="schelp">SuperCollider Help</a></h1>
+      </ul>
+    </div>
+    <div id="menualt"><div>
+    <script src="../assets/jquery.min.js"></script>
     <script src="../assets/codemirror.js"></script>
     <script src="../assets/matchbrackets.js"></script>
     <script src="../build/scscript.js"></script>

diff --git a/demo/index.js b/demo/index.js
@@ -1,5 +1,5 @@
 /* jshint browser: true, devel: true */
-/* global SCScript, CodeMirror */
+/* global SCScript, CodeMirror, $ */
 window.onload = function() {
   "use strict";
 
@@ -21,7 +21,7 @@ window.onload = function() {
     if (!code) {
       cursor = editor.getCursor();
       line   = cursor.line;
-      range  = getRange(editor, line);
+      range  = selectRegion(editor, line);
       if (range) {
         editor.setSelection({ line: range[0], ch: 0 }, { line: range[1], ch: Infinity });
         code = editor.getSelection();
@@ -37,7 +37,7 @@ window.onload = function() {
     return code;
   };
 
-  var getRange = function(editor, begin) {
+  var selectRegion = function(editor, begin) {
     var lookAt, end, last, line;
     var depth, code;
 
@@ -104,7 +104,7 @@ window.onload = function() {
     }
   };
 
-  var execute = function() {
+  var evaluate = function() {
     var code, result;
 
     code = SCScript.compile(getCode(editor));
@@ -118,6 +118,33 @@ window.onload = function() {
     console.log(result);
   };
 
+  var boot = function() {
+    console.log("boot");
+  };
+
+  var stop = function() {
+    console.log("stop");
+  };
+
+  var readFromGist = function(gistid, callback) {
+    var url = "https://api.github.com/gists/" + gistid;
+    $.ajax({ url: url, type: "GET", dataType: "jsonp" }).then(function(result) {
+      var files, code;
+      files = result.data.files;
+      if (files) {
+        code = Object.keys(files).filter(function(key) {
+          return files[key].language === "SuperCollider";
+        }).map(function(key) {
+          return files[key].content;
+        }).join("\n");
+      } else {
+        code = "";
+        console.warn("gist:" + gistid + " not found");
+      }
+      callback(code);
+    });
+  };
+
   editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
     mode: "SCScript",
     theme: "sc-mode",
@@ -128,18 +155,39 @@ window.onload = function() {
     showCursorWhenSelecting: true,
     matchBrackets: true,
     extraKeys: {
-      "Ctrl-Enter": execute,
-      "Cmd-Enter" : execute
+      "Ctrl-Enter": evaluate,
+      "Ctrl-B": boot,
+      "Ctrl-.": stop,
+      "Cmd-Enter" : evaluate,
+      "Cmd-B": boot,
+      "Cmd-.": stop,
     }
   });
 
   editor.on("keyup", function() {
     update(editor.getValue());
   });
 
+  if (/mac/i.test(window.navigator.platform)) {
+    $(".mac").show();
+  } else {
+    $(".win").show();
+  }
+
   if (window.location.hash) {
     prev = decodeURIComponent(window.location.hash.substr(1));
-    editor.setValue(prev);
+    if (/^gist:/.test(prev)) {
+      readFromGist(prev.substr(5), function(code) {
+        editor.setValue(code);
+        prev = code;
+      });
+    } else {
+      editor.setValue(prev);
+    }
   }
 
+  $("#menualt").on("click", function() {
+    $("#sidemenu").animate({ width: "toggle", opacity: "toggle" }, 500, "swing");
+  });
+
 };