双向滚动绑定

materone · Dec 13, 2017 · 72ebc72 · 72ebc72
1 parent b597855
commit 72ebc72
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 24 deletions.
diff --git a/admin/css/style.css b/admin/css/style.css
@@ -1761,7 +1761,7 @@ a.operate-reply {
     display: block;
     margin: 2em 0;
     background: #FFF9E8;
-    color: #cf9900;
+    color: #ce9900;
     font-size: .85714em;
     text-align: center;
     content: "- more -"; }
@@ -1780,7 +1780,11 @@ a.operate-reply {
   #wmd-preview span.line {
     display: inline;
     height: 1px;
-    line-height: 1px; }
+    line-height: 1px;
+    position: absolute; }
+  /* line 172, ../scss/components/_editor.scss */
+  #wmd-preview .focus, #wmd-preview .focus * {
+    background-color: rgba(255, 230, 0, 0.5) !important; }
 
 /* 上传面板动画效果 */
 @keyframes fullscreen-upload {
@@ -1804,7 +1808,7 @@ a.operate-reply {
   100% {
     right: -1px; } }
 /* 编辑器全屏 */
-/* line 195, ../scss/components/_editor.scss */
+/* line 200, ../scss/components/_editor.scss */
 .fullscreen #wmd-button-bar, .fullscreen #text, .fullscreen #wmd-preview, .fullscreen .submit {
   position: absolute;
   top: 0;
@@ -1817,20 +1821,20 @@ a.operate-reply {
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   border-radius: 0; }
-/* line 205, ../scss/components/_editor.scss */
+/* line 210, ../scss/components/_editor.scss */
 .fullscreen #wmd-button-bar {
   left: 0;
   padding: 13px 20px;
   border-bottom: 1px solid #F3F3F0;
   z-index: 1000; }
-/* line 211, ../scss/components/_editor.scss */
+/* line 216, ../scss/components/_editor.scss */
 .fullscreen #text {
   top: 53px;
   left: 0;
   padding: 20px;
   border: none;
   outline: none; }
-/* line 218, ../scss/components/_editor.scss */
+/* line 223, ../scss/components/_editor.scss */
 .fullscreen #wmd-preview {
   top: 53px;
   right: 0;
@@ -1840,18 +1844,18 @@ a.operate-reply {
   border-left: 1px solid #F3F3F0;
   background: #F6F6F3;
   overflow: auto; }
-/* line 228, ../scss/components/_editor.scss */
+/* line 233, ../scss/components/_editor.scss */
 .fullscreen .submit {
   right: 0;
   margin: 0;
   padding: 10px 20px;
   border-bottom: 1px solid #F3F3F0; }
-/* line 234, ../scss/components/_editor.scss */
+/* line 239, ../scss/components/_editor.scss */
 .fullscreen #upload-panel {
   -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.225);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.225);
   border-style: solid; }
-/* line 241, ../scss/components/_editor.scss */
+/* line 246, ../scss/components/_editor.scss */
 .fullscreen #tab-files {
   position: absolute;
   top: 52px;
@@ -1862,7 +1866,7 @@ a.operate-reply {
   -moz-animation: fullscreen-upload 0.5s;
   -webkit-animation: fullscreen-upload 0.5s;
   -o-animation: fullscreen-upload 0.5s; }
-/* line 254, ../scss/components/_editor.scss */
+/* line 259, ../scss/components/_editor.scss */
 .fullscreen .wmd-edittab,
 .fullscreen .typecho-post-option,
 .fullscreen .title,
@@ -1871,22 +1875,22 @@ a.operate-reply {
 .fullscreen .typecho-head-nav,
 .fullscreen .message {
   display: none; }
-/* line 261, ../scss/components/_editor.scss */
+/* line 266, ../scss/components/_editor.scss */
 .fullscreen .wmd-hidetab {
   display: block; }
-/* line 262, ../scss/components/_editor.scss */
+/* line 267, ../scss/components/_editor.scss */
 .fullscreen .wmd-visualhide,
 .fullscreen #btn-fullscreen-upload {
   visibility: visible; }
 
-/* line 269, ../scss/components/_editor.scss */
+/* line 274, ../scss/components/_editor.scss */
 .preview .submit {
   width: 100%;
   background: #FFFFDD; }
-/* line 270, ../scss/components/_editor.scss */
+/* line 275, ../scss/components/_editor.scss */
 .preview #wmd-button-bar, .preview #wmd-preview, .preview #text, .preview #upload-panel, .preview #tab-files, .preview #btn-preview, .preview #btn-fullscreen-upload, .preview #auto-save-message {
   display: none; }
-/* line 271, ../scss/components/_editor.scss */
+/* line 276, ../scss/components/_editor.scss */
 .preview .preview-frame {
   width: 100%;
   border: 0;
@@ -1897,12 +1901,12 @@ a.operate-reply {
   position: absolute;
   top: 53px;
   left: 0; }
-/* line 274, ../scss/components/_editor.scss */
+/* line 279, ../scss/components/_editor.scss */
 .preview .preview-loading {
   background-image: url(../img/ajax-loader.gif);
   background-position: center;
   background-repeat: no-repeat; }
-/* line 275, ../scss/components/_editor.scss */
+/* line 280, ../scss/components/_editor.scss */
 .preview #btn-cancel-preview {
   display: inline-block; }
 

diff --git a/admin/editor-js.php b/admin/editor-js.php
@@ -92,7 +92,19 @@
     });
 
     editor.hooks.chain('onPreviewRefresh', function () {
-        reloadScroll();
+        var images = $('img', preview), count = images.length;
+
+        if (count == 0) {
+            reloadScroll();
+        } else {
+            images.load(function () {
+                count --;
+
+                if (count == 0) {
+                    reloadScroll();
+                }
+            });
+        }
     });
 
     <?php Typecho_Plugin::factory('admin/editor-js.php')->markdownEditor($content); ?>

diff --git a/admin/js/typecho.js b/admin/js/typecho.js
@@ -18,10 +18,13 @@ function scrollableEditor(el, preview) {
     var styles =  el.css(),
         lastWidth = el.width(),
         lastFocus = null,
+        lastColor = null,
         merge = [],
         rows = [],
         previewRows = [],
-        css = {display: 'block', 'position': 'absolute', 'left': '-99999px', 'top': '-99999px'}, test = $('<div></div>').appendTo(document.body);
+        css = {display: 'block', 'position': 'absolute', 'left': '-99999px', 'top': '-99999px'},
+        test = $('<div></div>').appendTo(document.body),
+        lock = 0;
 
     for (k in styles) {
         if (k.match(/^(direction|font-family|font-size|font-style|font-weight|letter-spacing|line-height|text-align|vertical-align|white-space|word-wrap|word-break|word-spacing)$/i)) {
@@ -86,6 +89,36 @@ function scrollableEditor(el, preview) {
         }
     }
 
+    function scrollPreview() {
+        var height = el.height(),
+            offset = (el.innerHeight() - height) / 2,
+            previewScrollTop = preview.scrollTop(),
+            found = false,
+            current;
+
+        if (previewRows.length <= 0) {
+            return;
+        }
+
+        for (var i = 0; i < previewRows.length; i ++) {
+            var item = previewRows[i];
+
+            if (previewScrollTop < item[2]) {
+                found = true;
+                break;
+            }
+        }
+
+        current = found ? previewRows[i > 0 ? i - 1 : 0] : previewRows[previewRows.length - 1];
+
+        var start = current[0] > 0 ? rows[current[0] - 1] : 0,
+            end = rows[current[1]],
+            nextPos = found ? previewRows[i > 0 ? i : 1][2] : preview.get(0).scrollHeight,
+            percent = (previewScrollTop - current[2]) / (nextPos - current[2]);
+
+        el.scrollTop(start + (end - start) * percent + offset);
+    }
+
     function reloadPreview() {
         var last = 0;
         previewRows = [];
@@ -114,7 +147,7 @@ function scrollableEditor(el, preview) {
     function getFoucsElement(focus) {
         var e = $(focus), p = e.parent();
 
-        if (e.length > 0 && e.prop('tagName').match(/^(hr)$/i)) {
+        if (e.length > 0 && e.prop('tagName').match(/^(hr|tr)$/i)) {
             return e;
         } else if (p.length > 0 && p.prop('tagName').toLowerCase() == 'div') {
             return e.next();
@@ -142,8 +175,8 @@ function scrollableEditor(el, preview) {
             var item = previewRows[i];
 
             if (line >= item[0] && line <= item[1]) {
-                getFoucsElement(lastFocus).css('background', 'transparent');
-                getFoucsElement(item[3]).css('background-color', 'rgba(255,230,0,0.5)');
+                getFoucsElement(lastFocus).removeClass('focus');
+                getFoucsElement(item[3]).addClass('focus');
                 lastFocus = item[3];
                 break;
             }
@@ -161,11 +194,28 @@ function scrollableEditor(el, preview) {
     // 检测输入
     el.on('touch keypress click', reloadInput);
     el.on('blur', function () {
-        $(lastFocus).parent().css('background', 'transparent');
+        getFoucsElement(lastFocus).removeClass('focus');
     });
 
     el.on('resize', reload);
-    el.on('scroll', scroll);
+
+    el.on('scroll', function () {
+        if (lock != 1) {
+            lock = 2;
+            scroll();
+        } else {
+            lock = 0;
+        }
+    });
+
+    preview.on('scroll', function () {
+        if (lock != 2) {
+            lock = 1;
+            scrollPreview();
+        } else {
+            lock = 0;
+        }
+    });
 
     return reload;
 }

diff --git a/admin/scss/components/_editor.scss b/admin/scss/components/_editor.scss
@@ -166,6 +166,11 @@
     display: inline;
     height: 1px;
     line-height: 1px;
+    position: absolute;
+  }
+
+  .focus, .focus * {
+    background-color: rgba(255,230,0,0.5) !important;
   }
 }