diff --git a/docs/demo/demo.js b/docs/demo/demo.js index f9a2c2f32f..3762cb3819 100644 --- a/docs/demo/demo.js +++ b/docs/demo/demo.js @@ -8,7 +8,7 @@ if (!window.fetch) { } var $markdownElem = document.querySelector('#markdown'); -var $markedVerElem= document.querySelector('#markedVersion'); +var $markedVerElem = document.querySelector('#markedVersion'); var $markedVer = document.querySelector('#markedCdn'); var $optionsElem = document.querySelector('#options'); var $outputTypeElem = document.querySelector('#outputType'); @@ -22,17 +22,20 @@ var $panes = document.querySelectorAll('.pane'); var $inputPanes = document.querySelectorAll('.inputPane'); var inputDirty = true; var $activeOutputElem = null; -var changeTimeout = null; var search = searchToObject(); +var markedVersions = { + master: 'https://cdn.jsdelivr.net/gh/markedjs/marked/lib/marked.js' +}; +var markedVersionCache = {}; + var iframeLoaded = false; $previewIframe.addEventListener('load', function () { iframeLoaded = true; inputDirty = true; - checkForChanges(); }); -if ('text' in search) { +if ('text' in search && search.text) { $markdownElem.value = search.text; } else { fetch('./initial.md') @@ -41,25 +44,47 @@ if ('text' in search) { if ($markdownElem.value === '') { $markdownElem.value = text; inputDirty = true; - clearTimeout(changeTimeout); - checkForChanges(); setScrollPercent(0); } }); } -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; +fetch('https://data.jsdelivr.com/v1/package/npm/marked') + .then(function (res) { + return res.json(); + }) + .then(function (json) { + for (var i = 0; i < json.versions.length; i++) { + var ver = json.versions[i]; + markedVersions[ver] = 'https://cdn.jsdelivr.net/npm/marked@' + ver + '/lib/marked.js'; + var opt = document.createElement('option'); + opt.textContent = ver; + opt.value = ver; + $markedVerElem.appendChild(opt); + } + }) + .then(function () { + if ('version' in search && search.version) { + $markedVerElem.value = search.version; + } else { + $markedVerElem.value = 'master'; + } + + updateVersion().then(function () { + if ('options' in search && search.options) { + $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; + }, ' '); } - return value; - }, ' '); -} + }); + }); if (search.outputType) { $outputTypeElem.value = search.outputType; @@ -80,11 +105,6 @@ function handleOutputChange() { updateLink(); } -function handleVersionChange() { - handleChange($markedVer, $markedVerElem.value); - updateVersion(); -} - function handleChange(panes, visiblePane) { var active = null; for (var i = 0; i < panes.length; i++) { @@ -102,8 +122,7 @@ $outputTypeElem.addEventListener('change', handleOutputChange, false); handleOutputChange(); $inputTypeElem.addEventListener('change', handleInputChange, false); handleInputChange(); -$markedVerElem.addEventListener('change', handleVersionChange, false); -handleVersionChange(); +$markedVerElem.addEventListener('change', updateVersion, false); function handleInput() { inputDirty = true; @@ -121,8 +140,17 @@ $optionsElem.addEventListener('keydown', handleInput, false); $clearElem.addEventListener('click', function () { $markdownElem.value = ''; - $optionsElem.value = ''; - handleInput(); + $markedVerElem.value = 'master'; + updateVersion().then(function () { + $optionsElem.value = JSON.stringify( + marked.getDefaults(), + function (key, value) { + if (value && typeof value === 'object' && Object.getPrototypeOf(value) !== Object.prototype) { + return undefined; + } + return value; + }, ' '); + }); }, false); function searchToObject() { @@ -179,18 +207,36 @@ function updateLink() { } $permalinkElem.href = '?' + outputType + 'text=' + encodeURIComponent($markdownElem.value) - + '&options=' + encodeURIComponent($optionsElem.value); + + '&options=' + encodeURIComponent($optionsElem.value) + + '&version=' + encodeURIComponent($markedVerElem.value); history.replaceState('', document.title, $permalinkElem.href); } function updateVersion() { - $markedVer.setAttribute('src', $markedVerElem.value); + var promise; + if ($markedVerElem.value in markedVersionCache) { + promise = Promise.resolve(markedVersionCache[$markedVerElem.value]); + } else { + promise = fetch(markedVersions[$markedVerElem.value]) + .then(function (res) { return res.text(); }) + .then(function (text) { + markedVersionCache[$markedVerElem.value] = text; + return text; + }); + } + return promise.then(function (text) { + var script = document.createElement('script'); + script.textContent = text; + + $markedVer.parentNode.replaceChild(script, $markedVer); + $markedVer = script; + }).then(handleInput); } var delayTime = 1; var options = {}; function checkForChanges() { - if (inputDirty) { + if (inputDirty && typeof marked !== 'undefined') { inputDirty = false; updateLink(); @@ -238,7 +284,7 @@ function checkForChanges() { delayTime = 1000; } } - changeTimeout = window.setTimeout(checkForChanges, delayTime); + window.setTimeout(checkForChanges, delayTime); }; checkForChanges(); setScrollPercent(0); diff --git a/docs/demo/index.html b/docs/demo/index.html index c639b62bcc..ea99133473 100644 --- a/docs/demo/index.html +++ b/docs/demo/index.html @@ -23,17 +23,15 @@

Marked Demo

Input · · + Version: + · -
@@ -63,7 +61,7 @@

You'll need to enable Javascript to use this tool.

- +