trent/fcc-challenges
1
0
Fork 0
mirror of https://github.com/TrentSPalmer/fcc-challenges.git synced 2024-11-22 03:31:31 -08:00
Code Issues Projects Releases Wiki Activity

modified: markdown-previewer/markdownPreviewer.css

Browse Source 
modified:   markdown-previewer/markdownPreviewer.js
This commit is contained in:
Trent Palmer 2020-04-05 09:07:29 -07:00
parent 15c1baf09a
commit d9fe7747ec
2 changed files with 60 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
markdown-previewer/markdownPreviewer.css
View File

@ -74,7 +74,31 @@ img {
height: auto; height: auto;
} }
@media (orientation: landscape) { #textEditor {
background-color: #073642;
}
#buttonHeader {
height: 3rem;
}
@media (orientation: portrait), (max-device-width: 768px) {
#editorAndPreview {
flex-direction: column;
justify-content: flex-start;
}
#editor {
height: 30vh;
width: 100vw;
}
#preview {
overflow-y: scroll;
height: 40vh;
width: 100vw;
}
}
@media (min-device-width: 1024px), (orientation: landscape) and (max-device-height: 425px) {
#editorAndPreview { #editorAndPreview {
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
@ -87,22 +111,11 @@ img {
resize: none; resize: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
} padding-bottom: 3%;
} }
@media (max-device-height: 425px) {
@media (orientation: portrait) { #textEditor, #preview {
#buttonHeader { height: 90vh;
height: 3rem; }
}
#editorAndPreview {
flex-direction: column;
}
#editor {
height: 43vh;
width: 100vw;
}
#preview {
overflow: scroll;
height: 50vh;
} }
} }

52
markdown-previewer/markdownPreviewer.js
View File

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