Skip to content

Commit

Permalink
Merge pull request #1415 from remyhunt/enhancement-1406-demo-version
Browse files Browse the repository at this point in the history
Add select option in demo mode to choose Marked version
  • Loading branch information
UziTech authored Feb 17, 2019
2 parents d9d6758 + 02d90aa commit bf0399b
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 22 deletions.
101 changes: 80 additions & 21 deletions docs/demo/demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ if (!window.fetch) {
}

var $markdownElem = document.querySelector('#markdown');
var $markedVerElem = document.querySelector('#markedVersion');
var $markedVer = document.querySelector('#markedCdn');
var $optionsElem = document.querySelector('#options');
var $outputTypeElem = document.querySelector('#outputType');
var $inputTypeElem = document.querySelector('#inputType');
Expand All @@ -20,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')
Expand All @@ -39,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;
Expand Down Expand Up @@ -95,6 +122,7 @@ $outputTypeElem.addEventListener('change', handleOutputChange, false);
handleOutputChange();
$inputTypeElem.addEventListener('change', handleInputChange, false);
handleInputChange();
$markedVerElem.addEventListener('change', updateVersion, false);

function handleInput() {
inputDirty = true;
Expand All @@ -112,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() {
Expand Down Expand Up @@ -170,14 +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() {
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();
Expand Down Expand Up @@ -225,7 +284,7 @@ function checkForChanges() {
delayTime = 1000;
}
}
changeTimeout = window.setTimeout(checkForChanges, delayTime);
window.setTimeout(checkForChanges, delayTime);
};
checkForChanges();
setScrollPercent(0);
12 changes: 11 additions & 1 deletion docs/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,21 @@ <h1>Marked Demo</h1>
<div class="label">
<span>Input</span> ·
<a id="permalink">Permalink</a> ·
<span>Version: </span>
<select id="markedVersion">
<option value="master">master</option>
</select> ·
<button id="clear">Clear</button>
<select id="inputType">
<option value="markdown">Markdown</option>
<option value="options">Options</option>
</select>
<select id="markedVersion">
<option value="https://cdn.jsdelivr.net/npm/marked@master/marked.min.js">Marked@master</option>
<option value="https://cdn.jsdelivr.net/npm/marked@0.6.0/marked.min.js">Marked@0.6.0</option>
<option value="https://cdn.jsdelivr.net/npm/marked@0.5.2/marked.min.js">Marked@0.5.2</option>
<option value="https://cdn.jsdelivr.net/npm/marked@0.5.1/marked.min.js">Marked@0.5.1</option>
</select>
</div>
<textarea id="markdown" class="inputPane"></textarea>
<textarea id="options" class="inputPane" placeholder="Options (as JSON)"></textarea>
Expand Down Expand Up @@ -57,7 +67,7 @@ <h2>You'll need to enable Javascript to use this tool.</h2>
<textarea id="quickref" class="pane" readonly="readonly"></textarea>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.js"></script>
<script id="markedCdn"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/unfetch/dist/unfetch.umd.js"></script>
<script src="./demo.js"></script>
Expand Down

0 comments on commit bf0399b

Please sign in to comment.