trent/fcc-challenges
1
0
Fork 0
mirror of https://github.com/TrentSPalmer/fcc-challenges.git synced 2025-07-04 02:03:15 -07:00
Code Issues Projects Releases Wiki Activity

add markdown-previewer

Browse Source
This commit is contained in:
Trent Palmer
2020-04-05 04:46:13 -07:00
parent 5147ed98e8
commit 15c1baf09a
6 changed files with 282 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
markdown-previewer/markdownPreviewer.js Executable file
View File

@ -0,0 +1,48 @@
marked.setOptions({
breaks: true,
});
$(document).ready(function() {
/* if there is editorText in sessionStorage, load that into
* the editor, otherwise load the default text into the editor */
if (sessionStorage.hasOwnProperty('editorText')) {
$('#editor').val(sessionStorage.editorText);
} else {
$('#editor').val(defaultText);
};
// render the editor contents to the preview element
$('#preview').html(marked($('#editor').val()));
/* on every input event in the editor, store the editor
* contents in sessionStorage and also render the contents
* of the editor to the preview element */
$('#editor').on('input',function() {
sessionStorage.setItem('editorText',$(this).val());
$('#preview').html(marked($(this).val()));
});
// handle eraseButton
$('#eraseButton').click(function() {
$('#editor').val('');
sessionStorage.setItem('editorText',$('#editor').val());
$('#preview').html(marked($('#editor').val()));
});
// handle reloadButton
$('#reloadButton').click(function() {
$('#editor').val(defaultText);
sessionStorage.setItem('editorText',defaultText);
$('#preview').html(marked(defaultText));
});
$('#editor').on('scroll', scrollSync);
});
const scrollSync = () => {
const editorScrollable = document.getElementById('editor').scrollHeight - $('#editor').height();
const previewScrollable = document.getElementById('preview').scrollHeight - $('#preview').height();
const editorScrollRatio = $('#editor').scrollTop() === 0 ? 0 : $('#editor').scrollTop() / editorScrollable;
const previewScrollPosition = previewScrollable * editorScrollRatio;
$('#preview').scrollTop(previewScrollPosition);
};