WIP minimal view=FILE support, use it for help.md

proof of concept for #101.  Needs fallback for file://.
Not sure UX is good.  Needs indication the editor is read-only (gray bg?).  Need link to Edit on Github.

help.md

@@ -0,0 +1,75 @@
+Supported Markdown syntaxes:
+# Headings start with # sign.
+## 2nd-level heading
+### 3rd-level heading etc...
+
+----
+
+Use asterisks for *emphasis* and ***strong* emphasis**.  _Underlines_ also work.
+
+Surround literal text with (e.g. computer code) with `backticks`.
+For a literal block:
+```
+surround with triple backticks
+```
+or:
+    indent by 4 spaces.
+
+# Lists
+↓ You must leave an empty line before a list:
+
+ 1. First ordered list item
+    Additional lines (like this one) in a list should be indented **4 space** more.
+   (Tip: add spaces until the color changes.  See how this line is black?  That tells you it's not indented enough.)
+
+ 2. Another item
+
+      * Unordered sub-list.  You can use `* `, `+ ` or `- ` bullets (note the space!).
+        another line within the sublist item.
+        ↑ indented 8 spaces.
+        (Tip: press **Tab / Shift+Tab** to indent / dedent current line or selection.)
+
+ 3. And another item.
+
+     1. Ordered sub-list.
+
+# Quotes
+Like in email, preceded by `>` character.
+> ...
+> I shall be telling this with a sigh
+> Somewhere ages and ages hence:
+> > Two roads diverged in a wood, and I—
+> > I took the one less traveled by,
+> > And that has made all the difference.
+
+# Links
+Simplest format: [Linked text](https://example.com).
+You can also write more compactly [linked text][ex] and define where that leads separately:
+
+[ex]: https://example.com
+
+BUG: links are not clickable. [https://github.com/cben/mathdown/issues/9]
+The only way to follow a link is to copy-paste it into the address bar...
+
+# Math
+Use $\LaTeX$ syntaxes: surround with dollars or backslash-parens for \(inline\) math and
+double dollars or backslash-brackets for
+$$display$$
+math.
+BUG: the whole formula must be written on one line
+
+To **edit a formula** move the cursor into it using arrow keys.  It will re-render as soon as you move outside.
+Try it now: $\sum a_i + \frac{1}{b_i}$ <- put cursor here and move left.
+
+# Export to various formats
+> The nice thing about standards is that you have so many to choose from.  -- Andrew Tanenbaum
+
+Mathdown doesn't yet help you with this, but the syntax you're writing is standard Markdown.
+
+1. Select all (Ctrl+A), copy-paste into a local file.  Save with .md extension.
+
+2. The best conversion tool is [Pandoc](http://pandoc.org/).  You'll want to run something like:
+
+      pandoc -s --mathjax -f markdown_github-blank_before_header+tex_math_dollar+tex_math_single_backslash MY_FILE.md -o MY_FILE.html
+
+   The output format is inferred from the `-o` extension, can be overriden with e.g. `-t beamer`.

index.html

@@ -67,7 +67,7 @@
       |
       <a href="https://github.com/cben/mathdown/issues">bugs</a>
       <span style="float: right">
-        <a href="?doc=help" target="_blank">Help</a>
+        <a href="?view=help.md" target="_blank">Help</a>
         |
         <button class="call_to_action" id="new">New document</button>
       </span>

mathdown.js

@@ -8,7 +8,7 @@
 // Prevent errors on IE (but do strive to log somehow if IE Dev Tools are open).
 function log() {
   try {
-    if(console.log.apply) {
+    if (console.log.apply) {
       console.log.apply(console, arguments);
     } else {
       /* IE's console.log doesn't have .apply, .call, or bind. */
@@ -22,7 +22,7 @@ log("MJ:", MathJax.Message.Log());
 var origFilterText = MathJax.Message.filterText;
 MathJax.Message.filterText = function(text, n, msgType) {
   // Exclude non-informative "Processing/Typesetting math: 0% / 100%".
-  if(msgType !== "ProcessMath" && msgType !== "TypesetMath") {
+  if (msgType !== "ProcessMath" && msgType !== "TypesetMath") {
     log("MJ:", text, "[" + msgType + "]");
   }
   return origFilterText(text, n, msgType);
@@ -34,7 +34,7 @@ var statusElement = document.getElementById("status");
 function setStatus(className, text) {
   statusElement.innerHTML = "";
   statusElement.className = className;
-  if(text) {
+  if (text) {
     statusElement.appendChild(document.createTextNode(text));
   }
 }
@@ -122,16 +122,19 @@ CodeMirror.defineMode("gfm_header_line_classes", function(cmConfig, modeCfg) {
 CodeMirror.keyMap["default"]["Tab"] = "indentMore";
 CodeMirror.keyMap["default"]["Shift-Tab"] = "indentLess";
 
-function createEditor(docDirection) {
-  return CodeMirror.fromTextArea(document.getElementById("code"),
-                                 {foldGutter: true,
-                                  gutters: ["CodeMirror-foldgutter"],
-                                  indentUnit: 4,
-                                  lineNumbers: false,
-                                  lineWrapping: true,
-                                  mode: "gfm_header_line_classes",
-                                  showLeadingSpace: true,
-                                  direction: docDirection});
+function createEditor(docDirection, optionOverides) {
+  var options = {foldGutter: true,
+		 gutters: ["CodeMirror-foldgutter"],
+		 indentUnit: 4,
+		 lineNumbers: false,
+		 lineWrapping: true,
+		 mode: "gfm_header_line_classes",
+		 showLeadingSpace: true,
+		 direction: docDirection};
+  for (var key in optionOverides) {
+    options[key] = optionOverides[key];
+  }
+  return CodeMirror.fromTextArea(document.getElementById("code"), options);
 }
 
 function setupEditor(editor) {
@@ -225,7 +228,7 @@ function setupFirepad(editor, firepad) {
   //  firepadRef.child("
   firepad.on("synced", function(isSynced) {
     log("synced", isSynced);
-    if(!isSynced) {
+    if (!isSynced) {
       setStatus("info", "Unsaved!");
     } else {
       setStatus("", "saved");
@@ -249,24 +252,50 @@ function locationQueryParams() {
 
 var queryParams = locationQueryParams();
 var doc = queryParams["doc"];
+var view = queryParams["view"];
 // EXPERIMENTAL KLUDGE param: for now we support dir=rtl to make RTL docs (somewhat) practical
 // (but don't expose it in the GUI).
 // In the future it might be ignored - once we autodetect each line's base direction (#23).
 // Also, document direction is semantic, it makes more sense to store it in firebase?
 var docDirection = (queryParams["dir"] === "rtl" ? "rtl" : "ltr");
 
-if(doc === undefined) {
-    // TODO: this should be a server-side redirect (when we have a server).
-    window.location.search = "?doc=about";
-} else {
+if (doc !== undefined) {
   var rootRef = new Firebase("https://mathdown.firebaseIO.com/");
   var firepadsRef = rootRef.child("firepads");
   var firepadRef = firepadsRef.child(doc);
   log("firebase ref:", firepadRef.toString());
 
-  var editor = createEditor(docDirection);
+  var editor = createEditor(docDirection, {});
   setupEditor(editor);
 
   var firepad = Firepad.fromCodeMirror(firepadRef, editor);
   setupFirepad(editor, firepad);
+} else if (view !== undefined) {
+  var editor = createEditor(docDirection, {readOnly: true});
+  setupEditor(editor);
+
+  var req = new XMLHttpRequest();
+  req.onreadystatechange = function() {
+    log("view=... loading:", req.readyState, req.status);
+    if (req.readyState === 4) {
+      if (req.status === 200) {
+	editor.setValue(req.responseText);
+	setStatus("", "done");
+      } else {
+	editor.setValue("# *ERROR*: " + req.status + " " + req.statusText);
+	setStatus("warning", "Loading error.");
+      }
+
+      // With file://, it's anybody's guess if this works.
+      // Chrome refuses (and req.send() throws NetworkError.
+      // Firefox works, but doesn't know the content-type, so tries to parse response as x/html ("help.md: syntax error").  However if target doesn't exist, throws "NS_ERROR_DOM_BAD_URI: Access to restricted URI denied".
+    }
+  }
+  req.open('GET', view, true);  // TODO: constrain `view` against traversal?
+//  try {
+    req.send(null);
+//  } catch(err){}
+} else {
+  // TODO: this should be a server-side redirect (when we have a server).
+  window.location.search = "?doc=about";
 }