vim.md

commit b788a99d171b74dbbb5673b7b5a0ccd34071fe9b
parent 28f720cde4052aee3809e176ddb27dc9f9076437
Author:  <josemarinemail@gmail.com>
Date:   Fri, 13 Jul 2018 17:39:54 -0400

right scroll bar moves with left in order to simulate a scroll spy

Diffstat:
M
index.html
 | 
4
++--
M
javascript/main.js
 | 
21
+++++++++------------
M
styles/main.css
 | 
4
++--

3 files changed, 13 insertions(+), 16 deletions(-)
diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
                 <div class="navbar-item">
                     <div class="field is-grouped">
                         <p class="control js-copy">
-                        <a class="bd-tw-button button is-black" href="#">
+                        <a class="bd-tw-button button is-black">
                             <span class="icon">
                                 <i class="fas fa-copy"></i>
                             </span>
@@ -36,7 +36,7 @@
                         </a>
                         </p>
                         <p class="control js-export">
-                        <a class="button is-success" href="#">
+                        <a class="button is-success">
                             <span class="icon">
                                 <i class="fas fa-share-square"></i>
                             </span>
diff --git a/javascript/main.js b/javascript/main.js
@@ -8,13 +8,12 @@
         value: window.localStorage.getItem('markdown'),
         mode:  "javascript",
         lineWrapping: true,
-        //lineNumbers: true,
         keyMap: 'vim',
         theme: 'the-matrix'
     });
 
     if (editor) {
-        CodeMirror.Vim.map('kj', '<Esc>', 'insert') // to use kj as <Esc> also 
+        CodeMirror.Vim.map('kj', '<Esc>', 'insert') // to use kj as <Esc> also
 
         hljs.initHighlightingOnLoad();
 
@@ -23,7 +22,7 @@
             document.querySelector('.js-content').innerHTML = marked(window.localStorage.getItem('markdown'));
         }
         else {
-            document.querySelector('.js-content').innerHTML = editor.getValue(); 
+            document.querySelector('.js-content').innerHTML = editor.getValue();
         }
         document.querySelector('.js-input').addEventListener('keyup', event => {
             const transformed = marked(editor.getValue());
@@ -31,29 +30,31 @@
             for (let i = 0; i < document.getElementsByTagName('code').length; i++) {
                 hljs.highlightBlock(document.getElementsByTagName('code')[i]);
             }
+            window.localStorage.setItem('markdown', editor.getValue());
+        });
+
+        document.querySelector('.CodeMirror-vscrollbar').addEventListener('scroll', event => {
             setTimeout(() => {
-                if (editor.getCursor().line === editor.lineCount() -1) {
+                if ( document.querySelector('.js-content').parentElement.parentElement.scrollHeight - editor.getScrollInfo().top <= 700 ) {
                     document.querySelector('.js-content').parentElement.parentElement.scrollTop = 1000000;
                 }
                 else {
-                    document.querySelector('.js-content').parentElement.parentElement.scrollTop = editor.getCursor().line * 20;
+                    document.querySelector('.js-content').parentElement.parentElement.scrollTop = editor.getScrollInfo().top;
                 }
             }, 250)
-            window.localStorage.setItem('markdown', editor.getValue());
         });
     }
 
     document.querySelector('.js-copy').addEventListener('click', event => {
         const textarea = document.createElement('textarea');
         textarea.innerHTML = window.localStorage.getItem('markdown');
-        const successful = document.execCommand('copy'); 
         const textToCopy = document.querySelector('textarea');
         document.querySelector('.js-input').appendChild(textarea);
         textarea.focus();
         textarea.select();
 
         try {
-            const successful = document.execCommand('copy'); 
+            document.execCommand('copy');
         }
         catch (err) {
             alert('Copy not supported');
@@ -63,8 +64,4 @@
         }
     });
 
-    document.querySelector('.js-export').addEventListener('click', event => {
-        window.open('about:blank', '_blank');
-    });
-
 })();
diff --git a/styles/main.css b/styles/main.css
@@ -133,8 +133,8 @@ html, body {
 
 }
 
-#book .flex-centered {
-    align-self: center;
+#book td > code {
+    background-color: #000000;
 }
 
 #book .CodeMirror {