Merge pull request markedjs#1196 from UziTech/demo-link-outputtype

Demo link outputtype
zhenalexfan · Apr 4, 2018 · c780159 · c780159
2 parents cdee687 + 8037a3a
commit c780159
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 10 deletions.
diff --git a/docs/demo/demo.js b/docs/demo/demo.js
@@ -18,10 +18,10 @@ var $panes = document.querySelectorAll('.pane');
 var inputDirty = true;
 var $activeElem = null;
 var changeTimeout = null;
+var search = searchToObject();
 
-var match = location.search.match(/[?&]text=([^&]*)$/);
-if (match) {
-  $inputElem.value = decodeURIComponent(match[1]);
+if ('text' in search) {
+  $inputElem.value = search.text;
 } else {
   fetch('./initial.md')
     .then(function (res) { return res.text(); })
@@ -36,6 +36,10 @@ if (match) {
     });
 }
 
+if (search.outputType) {
+  $outputTypeElem.value = search.outputType;
+}
+
 fetch('./quickref.md')
   .then(function (res) { return res.text(); })
   .then(function (text) {
@@ -48,6 +52,8 @@ function handleChange() {
   }
   $activeElem = document.querySelector('#' + $outputTypeElem.value);
   $activeElem.style.display = 'block';
+
+  updateLink();
 };
 
 $outputTypeElem.addEventListener('change', handleChange, false);
@@ -67,6 +73,24 @@ $clearElem.addEventListener('click', function () {
   handleInput();
 }, false);
 
+function searchToObject() {
+  // modified from https://stackoverflow.com/a/7090123/806777
+  var pairs = location.search.slice(1).split('&');
+  var obj = {};
+
+  for (var i = 0; i < pairs.length; i++) {
+    if (pairs[i] === '') {
+      continue;
+    }
+
+    var pair = pairs[i].split('=');
+
+    obj[decodeURIComponent(pair.shift())] = decodeURIComponent(pair.join('='));
+  }
+
+  return obj;
+}
+
 function jsonString(input) {
   var output = (input + '')
     .replace(/\n/g, '\\n')
@@ -96,13 +120,22 @@ function setScrollPercent(percent) {
   $activeElem.scrollTop = percent * getScrollSize();
 };
 
+function updateLink() {
+  var outputType = '';
+  if ($outputTypeElem.value !== 'preview') {
+    outputType = 'outputType=' + $outputTypeElem.value + '&';
+  }
+
+  $permalinkElem.href = '?' + outputType + 'text=' + encodeURIComponent($inputElem.value);
+  history.replaceState('', document.title, $permalinkElem.href);
+}
+
 var delayTime = 1;
 function checkForChanges() {
   if (inputDirty) {
     inputDirty = false;
 
-    $permalinkElem.href = '?text=' + encodeURIComponent($inputElem.value);
-    history.replaceState('', document.title, $permalinkElem.href);
+    updateLink();
 
     var startTime = new Date();
 

diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -31,11 +31,11 @@ <h1>Marked Demo</h1>
       <div class="container">
         <div class="label">
           <select id="outputType">
-          <option value="preview">Preview</option>
-          <option value="html">HTML Source</option>
-          <option value="lexer">Lexer Data</option>
-          <option value="quickref">Quick Reference</option>
-        </select>
+            <option value="preview">Preview</option>
+            <option value="html">HTML Source</option>
+            <option value="lexer">Lexer Data</option>
+            <option value="quickref">Quick Reference</option>
+          </select>
         </div>
 
         <div id="preview" class="pane">