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";
 }