Added basic markdown scroll syncing

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index 62557f9767c984ec3a5647d259f459629ed21635..f5cf7569b2d2b521e7d75f80d1a3984ace0a8eac 100644 (file)
--- a/resources/assets/js/directives.js
+++ b/resources/assets/js/directives.js
@@ -265,17 +265,48 @@ module.exports = function (ngApp, events) {
             link: function (scope, element, attrs) {
 
                 // Elements
-                var input = element.find('textarea[markdown-input]');
-                var insertImage = element.find('button[data-action="insertImage"]');
+                const input = element.find('textarea[markdown-input]');
+                const display = element.find('.markdown-display').first();
+                const insertImage = element.find('button[data-action="insertImage"]');
 
-                var currentCaretPos = 0;
+                let currentCaretPos = 0;
 
-                input.blur((event) => {
+                input.blur(event => {
                     currentCaretPos = input[0].selectionStart;
                 });
 
+                // Scroll sync
+                let inputScrollHeight,
+                    inputHeight,
+                    displayScrollHeight,
+                    displayHeight;
+
+                function setScrollHeights() {
+                    inputScrollHeight = input[0].scrollHeight;
+                    inputHeight = input.height();
+                    displayScrollHeight = display[0].scrollHeight;
+                    displayHeight = display.height();
+                }
+
+                setTimeout(() => {
+                    setScrollHeights();
+                }, 200);
+                window.addEventListener('resize', setScrollHeights);
+                let scrollDebounceTime = 800;
+                let lastScroll = 0;
+                input.on('scroll', event => {
+                    let now = Date.now();
+                    if (now - lastScroll > scrollDebounceTime) {
+                        setScrollHeights()
+                    }
+                    let scrollPercent = (input.scrollTop() / (inputScrollHeight-inputHeight));
+                    let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent;
+                    display.scrollTop(displayScrollY);
+                    lastScroll = now;
+                });
+
                 // Insert image shortcut
-                input.keydown((event) => {
+                input.keydown(event => {
                     if (event.which === 73 && event.ctrlKey && event.shiftKey) {
                         event.preventDefault();
                         var caretPos = input[0].selectionStart;
@@ -289,8 +320,8 @@ module.exports = function (ngApp, events) {
                 });
 
                 // Insert image from image manager
-                insertImage.click((event) => {
-                    window.ImageManager.showExternal((image) => {
+                insertImage.click(event => {
+                    window.ImageManager.showExternal(image => {
                         var caretPos = currentCaretPos;
                         var currentContent = input.val();
                         var mdImageText = "![" + image.name + "](" + image.url + ")";

diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index aa05a90146d6adb57e6543b5c7e667395693fe96..4196e946fc8b8398e5c7074715270895740995b9 100644 (file)
--- a/resources/views/pages/form.blade.php
+++ b/resources/views/pages/form.blade.php
@@ -61,7 +61,7 @@
                             <button class="text-button" type="button" data-action="insertImage"><i class="zmdi zmdi-image"></i>Insert Image</button>
                         </div>
                     </div>
-                    <textarea markdown-input md-change="editorChange" md-model="editContent"  name="markdown" rows="5"
+                    <textarea markdown-input md-change="editorChange" id="markdown-editor-input" md-model="editContent"  name="markdown" rows="5"
                               @if($errors->has('markdown')) class="neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea>
                 </div>