双向滚动绑定

2017-12-14 02:27:51 +08:00
parent b59785563f
commit 72ebc723b7
4 changed files with 95 additions and 24 deletions
--- 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; }

--- a/admin/editor-js.php
+++ b/admin/editor-js.php
@@ -92,7 +92,19 @@ $(document).ready(function () {
    });

    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); ?>
--- 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;
 }
--- 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;
  }
 }