Add CodeMirror for editable code examples; recompile CoffeeScript into JavaScript on change (WIP)

documentation/sections/overview.md

@@ -1,6 +1,6 @@
 ## Overview
 
-_CoffeeScript on the left, compiled JavaScript output on the right._
+_CoffeeScript on the left, compiled JavaScript output on the right. The CoffeeScript is editable!_
 
 ```
 codeFor('overview', 'cubes', false)

documentation/v2/code.coffee

@@ -0,0 +1,20 @@
+fs           = require 'fs'
+CoffeeScript = require '../../lib/coffee-script'
+
+
+module.exports = ->
+  (file, executable = no, showLoad = yes) ->
+    cs = fs.readFileSync "documentation/examples/#{file}.coffee", 'utf-8'
+    js = CoffeeScript.compile cs, bare: yes
+    """
+      <aside class="container-fluid">
+        <div class="row">
+          <div class="col-md-6">
+            <textarea class="coffee-example">#{cs}</textarea>
+          </div>
+          <div class="col-md-6">
+            <textarea class="javascript-output">#{js}</textarea>
+          </div>
+        </div>
+      </aside>
+    """

documentation/v2/docs.coffee

@@ -12,3 +12,35 @@ $(window).on 'activate.bs.scrollspy', (event, target) -> # Why `window`? https:/
   $target = $(".nav-link[href='#{target.relatedTarget}']")
   # Update the browser address bar on scroll or navigation
   window.history.pushState {}, $target.text(), $target.prop('href')
+
+
+# Initialize CodeMirror for code examples; https://codemirror.net/doc/manual.html
+editors = []
+lastCompilationElapsedTime = 200
+$('textarea').each (index) ->
+  mode = if $(@).hasClass('javascript-output') then 'javascript' else 'coffeescript'
+
+  editors[index] = editor = CodeMirror.fromTextArea @,
+    mode: mode
+    theme: 'default' # TODO: Change
+    indentUnit: 2
+    tabSize: 2
+    lineWrapping: on
+    lineNumbers: off
+    inputStyle: 'contenteditable'
+    # readOnly: (if mode is 'coffeescript' then no else 'nocursor')
+    viewportMargin: Infinity
+
+  if mode is 'coffeescript'
+    pending = null
+    editor.on 'change', (instance, change) ->
+      clearTimeout pending
+      pending = setTimeout ->
+        lastCompilationStartTime = Date.now()
+        try
+          output = CoffeeScript.compile editor.getValue(), bare: yes
+          lastCompilationElapsedTime = Math.max(200, Date.now() - lastCompilationStartTime)
+        catch exception
+          output = "#{exception}"
+        editors[index + 1].setValue output
+      , lastCompilationElapsedTime

documentation/v2/docs.css

@@ -1,6 +1,7 @@
 /* Adapted from https://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css */
 
 body {
+  /* Required for Scrollspy */
   position: relative;
 }
 
@@ -8,8 +9,8 @@ body {
  * Sidebar
  */
 
-/* Hide for mobile, show later */
 .sidebar {
+  /* Hide for mobile, show later */
   display: none;
 }
 @media (min-width: 768px) {
@@ -28,16 +29,17 @@ body {
   }
 }
 
-/* Sidebar navigation */
 .nav-link.active,
 .nav-link.active, a:hover,
 .nav-link.active, a:focus {
   color: indianred;
 }
+
 .nav .nav {
   margin-left: 1em;
 }
 
+
 /*
  * Main content
  */
@@ -51,3 +53,18 @@ body {
     padding-left: 2em;
   }
 }
+
+
+/*
+ * Code examples
+ */
+
+textarea {
+  position: absolute;
+  left: -99999px; /* Hide off canvas, while still remaining visible */
+}
+
+.CodeMirror {
+  /* https://codemirror.net/demo/resize.html */
+  height: auto;
+}

documentation/v2/scripts.html

@@ -3,8 +3,9 @@
   window.Tether = {}; // Remove if we want to use Bootstrap tooltips
 </script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
-<script src="browser-compiler/coffee-script.js"></script>
+<script src="https://cdn.jsdelivr.net/g/codemirror@4.5.0(codemirror.min.js+mode/coffeescript/coffeescript.js+addon/lint/coffeescript-lint.js+mode/javascript/javascript.js)" crossorigin="anonymous"></script>
 
+<script src="browser-compiler/coffee-script.js"></script>
 <script type="text/coffeescript">
 <%= include('docs.coffee') %>
 </script>

documentation/v2/styles.html

@@ -1,4 +1,5 @@
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/codemirror/4.5.0/codemirror.css" crossorigin="anonymous">
 <style>
 <%= include('docs.css') %>
 </style>