Merge pull request #1357 from aprotim/demo_options

Add the ability to specify options on the demo page as JSON

Author: styfle

docs/demo/demo.css

@@ -45,7 +45,11 @@ header h1 {
 	box-sizing: border-box;
 }
 
-.pane, #input {
+#options {
+	resize: both;
+}
+
+.pane, .inputPane {
 	margin-top: 5px;
 	padding: 0.6em;
 	border: 1px solid #ccc;

docs/demo/demo.js

@@ -7,16 +7,19 @@ if (!window.fetch) {
   window.fetch = unfetch;
 }
 
-var $inputElem = document.querySelector('#input');
+var $markdownElem = document.querySelector('#markdown');
+var $optionsElem = document.querySelector('#options');
 var $outputTypeElem = document.querySelector('#outputType');
+var $inputTypeElem = document.querySelector('#inputType');
 var $previewIframe = document.querySelector('#preview iframe');
 var $permalinkElem = document.querySelector('#permalink');
 var $clearElem = document.querySelector('#clear');
 var $htmlElem = document.querySelector('#html');
 var $lexerElem = document.querySelector('#lexer');
 var $panes = document.querySelectorAll('.pane');
+var $inputPanes = document.querySelectorAll('.inputPane');
 var inputDirty = true;
-var $activeElem = null;
+var $activeOutputElem = null;
 var changeTimeout = null;
 var search = searchToObject();
 
@@ -28,13 +31,13 @@ $previewIframe.addEventListener('load', function () {
 });
 
 if ('text' in search) {
-  $inputElem.value = search.text;
+  $markdownElem.value = search.text;
 } else {
   fetch('./initial.md')
     .then(function (res) { return res.text(); })
     .then(function (text) {
-      if ($inputElem.value === '') {
-        $inputElem.value = text;
+      if ($markdownElem.value === '') {
+        $markdownElem.value = text;
         inputDirty = true;
         clearTimeout(changeTimeout);
         checkForChanges();
@@ -43,6 +46,19 @@ if ('text' in search) {
     });
 }
 
+if ('options' in search) {
+  $optionsElem.value = search.options;
+} else {
+  $optionsElem.value = JSON.stringify(
+    marked.getDefaults(),
+    function (key, value) {
+      if (value && typeof value === 'object' && Object.getPrototypeOf(value) !== Object.prototype) {
+        return undefined;
+      }
+      return value;
+    }, ' ');
+}
+
 if (search.outputType) {
   $outputTypeElem.value = search.outputType;
 }
@@ -53,30 +69,50 @@ fetch('./quickref.md')
     document.querySelector('#quickref').value = text;
   });
 
-function handleChange() {
-  for (var i = 0; i < $panes.length; i++) {
-    $panes[i].style.display = 'none';
-  }
-  $activeElem = document.querySelector('#' + $outputTypeElem.value);
-  $activeElem.style.display = '';
+function handleInputChange() {
+  handleChange($inputPanes, $inputTypeElem.value);
+}
 
+function handleOutputChange() {
+  $activeOutputElem = handleChange($panes, $outputTypeElem.value);
   updateLink();
+}
+
+function handleChange(panes, visiblePane) {
+  var active = null;
+  for (var i = 0; i < panes.length; i++) {
+    if (panes[i].id === visiblePane) {
+      panes[i].style.display = '';
+      active = panes[i];
+    } else {
+      panes[i].style.display = 'none';
+    }
+  }
+  return active;
 };
 
-$outputTypeElem.addEventListener('change', handleChange, false);
-handleChange();
+$outputTypeElem.addEventListener('change', handleOutputChange, false);
+handleOutputChange();
+$inputTypeElem.addEventListener('change', handleInputChange, false);
+handleInputChange();
 
 function handleInput() {
   inputDirty = true;
 };
 
-$inputElem.addEventListener('change', handleInput, false);
-$inputElem.addEventListener('keyup', handleInput, false);
-$inputElem.addEventListener('keypress', handleInput, false);
-$inputElem.addEventListener('keydown', handleInput, false);
+$markdownElem.addEventListener('change', handleInput, false);
+$markdownElem.addEventListener('keyup', handleInput, false);
+$markdownElem.addEventListener('keypress', handleInput, false);
+$markdownElem.addEventListener('keydown', handleInput, false);
+
+$optionsElem.addEventListener('change', handleInput, false);
+$optionsElem.addEventListener('keyup', handleInput, false);
+$optionsElem.addEventListener('keypress', handleInput, false);
+$optionsElem.addEventListener('keydown', handleInput, false);
 
 $clearElem.addEventListener('click', function () {
-  $inputElem.value = '';
+  $markdownElem.value = '';
+  $optionsElem.value = '';
   handleInput();
 }, false);
 
@@ -110,7 +146,7 @@ function jsonString(input) {
 };
 
 function getScrollSize() {
-  var e = $activeElem;
+  var e = $activeOutputElem;
 
   return e.scrollHeight - e.clientHeight;
 };
@@ -121,10 +157,10 @@ function getScrollPercent() {
     return 1;
   }
 
-  return $activeElem.scrollTop / size;
+  return $activeOutputElem.scrollTop / size;
 };
 function setScrollPercent(percent) {
-  $activeElem.scrollTop = percent * getScrollSize();
+  $activeOutputElem.scrollTop = percent * getScrollSize();
 };
 
 function updateLink() {
@@ -133,11 +169,13 @@ function updateLink() {
     outputType = 'outputType=' + $outputTypeElem.value + '&';
   }
 
-  $permalinkElem.href = '?' + outputType + 'text=' + encodeURIComponent($inputElem.value);
+  $permalinkElem.href = '?' + outputType + 'text=' + encodeURIComponent($markdownElem.value)
+      + '&options=' + encodeURIComponent($optionsElem.value);
   history.replaceState('', document.title, $permalinkElem.href);
 }
 
 var delayTime = 1;
+var options = {};
 function checkForChanges() {
   if (inputDirty) {
     inputDirty = false;
@@ -148,7 +186,14 @@ function checkForChanges() {
 
     var scrollPercent = getScrollPercent();
 
-    var lexed = marked.lexer($inputElem.value);
+    try {
+      var optionsString = $optionsElem.value || '{}';
+      var newOptions = JSON.parse(optionsString);
+      options = newOptions;
+    } catch (err) {
+    }
+
+    var lexed = marked.lexer($markdownElem.value, options);
 
     var lexedList = [];
 
@@ -160,7 +205,7 @@ function checkForChanges() {
       lexedList.push('{' + lexedLine.join(', ') + '}');
     }
 
-    var parsed = marked.parser(lexed);
+    var parsed = marked.parser(lexed, options);
 
     if (iframeLoaded) {
       $previewIframe.contentDocument.body.innerHTML = (parsed);

docs/demo/index.html

@@ -24,8 +24,13 @@ <h1>Marked Demo</h1>
           <span>Input</span> ·
           <a id="permalink">Permalink</a> ·
           <button id="clear">Clear</button>
+          <select id="inputType">
+            <option value="markdown">Markdown</option>
+            <option value="options">Options</option>
+          </select>
         </div>
-        <textarea id="input"></textarea>
+        <textarea id="markdown" class="inputPane"></textarea>
+        <textarea id="options" class="inputPane" placeholder="Options (as JSON)"></textarea>
       </div>
 
       <div class="container">