Skip to content

Commit

Permalink
Merge pull request #1357 from aprotim/demo_options
Browse files Browse the repository at this point in the history
Add the ability to specify options on the demo page as JSON
  • Loading branch information
styfle authored Oct 19, 2018
2 parents b6d5a67 + e9f57d9 commit da9d155
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 26 deletions.
6 changes: 5 additions & 1 deletion docs/demo/demo.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
93 changes: 69 additions & 24 deletions docs/demo/demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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();
Expand All @@ -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;
}
Expand All @@ -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);

Expand Down Expand Up @@ -110,7 +146,7 @@ function jsonString(input) {
};

function getScrollSize() {
var e = $activeElem;
var e = $activeOutputElem;

return e.scrollHeight - e.clientHeight;
};
Expand All @@ -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() {
Expand All @@ -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;
Expand All @@ -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 = [];

Expand All @@ -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);
Expand Down
7 changes: 6 additions & 1 deletion docs/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down

0 comments on commit da9d155

Please sign in to comment.