Skip to content

Commit

Permalink
add versions dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@UziTech
UziTech committed Feb 8, 2019
1 parent 0623282 commit 3fe5572
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 37 deletions.
106 changes: 76 additions & 30 deletions docs/demo/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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')
Expand All @@ -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;
Expand All @@ -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++) {
Expand All @@ -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;
Expand All @@ -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() {
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -238,7 +284,7 @@ function checkForChanges() {
delayTime = 1000;
}
}
changeTimeout = window.setTimeout(checkForChanges, delayTime);
window.setTimeout(checkForChanges, delayTime);
};
checkForChanges();
setScrollPercent(0);
12 changes: 5 additions & 7 deletions docs/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,15 @@ <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 @@ -63,7 +61,7 @@ <h2>You'll need to enable Javascript to use this tool.</h2>
<textarea id="quickref" class="pane" readonly="readonly"></textarea>
</div>
</div>
<script id="markedCdn" 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 3fe5572

Please sign in to comment.