From d9fe7747ec05d1055cf92cc46dfe387f93e2eec3 Mon Sep 17 00:00:00 2001
From: Trent Palmer <trenttdually@gmail.com>
Date: Sun, 5 Apr 2020 09:07:29 -0700
Subject: [PATCH] modified:   markdown-previewer/markdownPreviewer.css
 modified:   markdown-previewer/markdownPreviewer.js

---
 markdown-previewer/markdownPreviewer.css | 49 ++++++++++++++--------
 markdown-previewer/markdownPreviewer.js  | 52 +++++++++++++-----------
 2 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/markdown-previewer/markdownPreviewer.css b/markdown-previewer/markdownPreviewer.css
index 9324345..c4fb4ea 100644
--- a/markdown-previewer/markdownPreviewer.css
+++ b/markdown-previewer/markdownPreviewer.css
@@ -74,7 +74,31 @@ img {
   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 {
     flex-direction: row;
     justify-content: flex-end;
@@ -87,22 +111,11 @@ img {
     resize: none;
     width: 100%;
     height: 100%;
-  }
-}
-
-@media  (orientation: portrait) {
-  #buttonHeader {
-    height: 3rem;
-  }
-  #editorAndPreview {
-    flex-direction: column;
-  }
-  #editor {
-    height: 43vh;
-    width: 100vw;
-  }
-  #preview {
-    overflow: scroll;
-    height: 50vh;
+    padding-bottom: 3%;
+  }
+  @media (max-device-height: 425px) {
+    #textEditor, #preview {
+      height: 90vh;
+    }
   }
 }
diff --git a/markdown-previewer/markdownPreviewer.js b/markdown-previewer/markdownPreviewer.js
index 360350b..eb52d6a 100755
--- a/markdown-previewer/markdownPreviewer.js
+++ b/markdown-previewer/markdownPreviewer.js
@@ -1,48 +1,54 @@
 marked.setOptions({
-  breaks: true,
+  breaks: true
 });
 
-$(document).ready(function() {
+$(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);
+  if (sessionStorage.hasOwnProperty("editorText")) {
+    $("#editor").val(sessionStorage.editorText);
   } else {
-    $('#editor').val(defaultText);
-  };
+    $("#editor").val(defaultText);
+  }
 
   // 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
    * 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()));
+  $("#editor").on("input", function () {
+    sessionStorage.setItem("editorText", $(this).val());
+    $("#preview").html(getMarkUp($(this).val()));
+    scrollSync();
   });
 
   // handle eraseButton
-  $('#eraseButton').click(function() {
-    $('#editor').val('');
-    sessionStorage.setItem('editorText',$('#editor').val());
-    $('#preview').html(marked($('#editor').val()));
+  $("#eraseButton").click(function () {
+    $("#editor").val("");
+    sessionStorage.setItem("editorText", $("#editor").val());
+    $("#preview").html(getMarkUp($("#editor").val()));
   });
 
   // handle reloadButton
-  $('#reloadButton').click(function() {
-    $('#editor').val(defaultText);
-    sessionStorage.setItem('editorText',defaultText);
-    $('#preview').html(marked(defaultText));
+  $("#reloadButton").click(function () {
+    $("#editor").val(defaultText);
+    sessionStorage.setItem("editorText", defaultText);
+    $("#preview").html(getMarkUp(defaultText));
   });
 
-  $('#editor').on('scroll', scrollSync);
+  $("#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 editorScrollable = document.getElementById("editor").scrollHeight - $("#editor").height();
+  const previewScrollable = document.getElementById("preview").scrollHeight - $("#preview").height();
+  let editorScrollRatio = $("#editor").scrollTop() === 0 ? 0 : $("#editor").scrollTop() / editorScrollable;
+  if (editorScrollRatio > 0.90) { editorScrollRatio = 1.5; }
   const previewScrollPosition = previewScrollable * editorScrollRatio;
-  $('#preview').scrollTop(previewScrollPosition);
+  $("#preview").scrollTop(previewScrollPosition);
 };
+
+const getMarkUp = (text) => {
+  return marked(text);
+}