Merge pull request #2100 from velesin/synchronized_editor

Synced editor scrolling PoC.
2014-04-01 15:19:55 +02:00 · 2014-04-01 15:19:55 +02:00 · b925827e5b
parent 524e469693 c0a11adbc5
commit b925827e5b
9 changed files with 199 additions and 49 deletions
--- a/.jshintignore
+++ b/.jshintignore
@ -1,4 +1,6 @@
 app/assets/javascripts/defer/html-sanitizer-bundle.js
+app/assets/javascripts/discourse/lib/Markdown.Editor.js
+jsapp/lib/Markdown.Editor.js
 lib/javascripts/locale/
 lib/javascripts/messageformat.js
 lib/javascripts/moment.js
--- a/app/assets/javascripts/discourse/lib/Markdown.Editor.js
+++ b/app/assets/javascripts/discourse/lib/Markdown.Editor.js
@ -330,6 +330,7 @@
    function PanelCollection(postfix) {
        this.buttonBar = doc.getElementById("wmd-button-bar" + postfix);
        this.preview = doc.getElementById("wmd-preview" + postfix);
+        this.previewScroller = doc.getElementById("wmd-preview-scroller" + postfix);
        this.input = doc.getElementById("wmd-input" + postfix);
    };

@ -861,6 +862,113 @@
        var maxDelay = 3000;
        var startType = "delayed"; // The other legal value is "manual"

+        var paneContentHeight = function(pane) {
+          var $pane = $(pane);
+          var paneVerticalPadding = parseInt($pane.css("padding-top")) + parseInt($pane.css("padding-bottom"));
+
+          return pane.scrollHeight - paneVerticalPadding;
+        };
+
+        var prevScrollPosition = $(panels.input).scrollTop();
+        var caretMarkerPosition = 0;
+        var markerPositions = {
+          scroller: [0, paneContentHeight(panels.previewScroller)],
+          preview: [0, paneContentHeight(panels.preview)]
+        };
+
+        var getCaretPosition = function() {
+          return Discourse.Utilities.caretPosition(panels.input);
+        };
+
+        var cacheCaretMarkerPosition = function() {
+          caretMarkerPosition = $(panels.previewScroller).find(".caret").position().top;
+        };
+
+        var cachePaneMarkerPositions = function(cacheName, pane) {
+          var $pane = $(pane);
+          var paneScrollPosition = $pane.scrollTop();
+          var panePaddingTop = parseInt($pane.css("padding-top"));
+
+          markerPositions[cacheName] = [0];
+          $(pane).find(".marker").each(function () {
+            var markerPosition = $(this).position().top + paneScrollPosition - panePaddingTop;
+            markerPositions[cacheName].push(markerPosition);
+          });
+          markerPositions[cacheName].push(paneContentHeight(pane));
+        };
+
+        var cacheMarkerPositions = function() {
+          cachePaneMarkerPositions("scroller", panels.previewScroller);
+          cachePaneMarkerPositions("preview", panels.preview);
+        };
+
+        var getMarkerPositions = function(syncPosition) {
+          var startMarkerIndex = 0;
+          var endMarkerIndex = markerPositions.scroller.length - 1;
+
+          for (var index = startMarkerIndex + 1; index < endMarkerIndex; index += 1) {
+            if (markerPositions.scroller[index] > syncPosition) {
+              endMarkerIndex = index;
+              break;
+            }
+            startMarkerIndex = index;
+          }
+
+          return {
+            scrollerStart: markerPositions.scroller[startMarkerIndex],
+            scrollerEnd: markerPositions.scroller[endMarkerIndex],
+            previewStart: markerPositions.preview[startMarkerIndex],
+            previewEnd: markerPositions.preview[endMarkerIndex]
+          };
+        };
+
+        var detectScrollDown = function(currentPosition, previousPosition) {
+          return (currentPosition - previousPosition >= 0);
+        };
+
+        var getRatio = function(positions) {
+          return (positions.previewEnd - positions.previewStart) / (positions.scrollerEnd - positions.scrollerStart);
+        };
+
+        var syncScroll = function(isEdit) {
+          var scrollPosition = $(panels.input).scrollTop();
+          var isScrollDown = (scrollPosition - prevScrollPosition >= 0);
+          prevScrollPosition = scrollPosition;
+
+          var inputBaseline;
+          var previewBaseline;
+          var threshold;
+
+          if (isEdit) {
+            inputBaseline = caretMarkerPosition;
+            previewBaseline = ($(panels.preview).height() * (caretMarkerPosition - scrollPosition) / $(panels.input).height());
+            threshold = 20;
+          } else if (isScrollDown) {
+            inputBaseline = scrollPosition + $(panels.input).height();
+            previewBaseline = $(panels.preview).height();
+            threshold = 0;
+          } else {
+            inputBaseline = scrollPosition;
+            previewBaseline = 0;
+            threshold = 0;
+          }
+
+          var positions = getMarkerPositions(inputBaseline);
+          var ratio = getRatio(positions);
+
+          var newPreviewScrollPosition = positions.previewStart - previewBaseline + (inputBaseline - positions.scrollerStart) * ratio;
+
+          if (threshold == 0 || Math.abs(newPreviewScrollPosition - $(panels.preview).scrollTop()) >= threshold) {
+            $(panels.preview).scrollTop(newPreviewScrollPosition);
+          }
+        };
+
+        var setupScrollSync = function() {
+          $(panels.input).scroll(function() {
+            Ember.run.throttle(null, syncScroll, 16);
+          });
+        };
+
        // Adds event listeners to elements
        var setupEvents = function (inputElem, listener) {
          
@ -909,14 +1017,33 @@

            var prevTime = new Date().getTime();

-            text = converter.makeHtml(text);
+            var caretPosition = getCaretPosition();
+            text = text.slice(0, caretPosition) + '~~caret~~' + text.slice(caretPosition);
+            text = text.replace(/(\n|\r|\r\n)(\n|\r|\r\n)+/g, "$&~~marker~~$1$1");
+
+            previewText = converter.makeHtml(text.replace('~~caret~~', ''))
+              .replace(/<p>~~marker~~<\/p>/g, '<span class="marker"></span>')
+              .replace(/~~marker~~/g, '<span class="marker"></span>');
+
+            previewScrollerText = text
+              .replace(/&/g, '&amp;')
+              .replace(/</g, '&lt;')
+              .replace(/>/g, '&gt;')
+              .replace(/(\n|\r|\r\n)/g, '<br>')
+              .replace('~~caret~~', '<span class="caret"></span>')
+              .replace(/~~marker~~<br><br>/g, '<span class="marker"></span>');

            // Calculate the processing time of the HTML creation.
            // It's used as the delay time in the event listener.
            var currTime = new Date().getTime();
            elapsedTime = currTime - prevTime;

-            pushPreviewHtml(text);
+            Ember.run(function() {
+              pushPreviewHtml(previewText, previewScrollerText);
+              cacheMarkerPositions();
+              cacheCaretMarkerPosition();
+              syncScroll(true);
+            });
        };

        // makePreviewHtml = window.probes.measure(makePreviewHtml, {
@ -990,12 +1117,6 @@
            return panel.scrollTop / (panel.scrollHeight - panel.clientHeight);
        };

-        var setPanelScrollTops = function () {
-            if (panels.preview) {
-                panels.preview.scrollTop = (panels.preview.scrollHeight - panels.preview.clientHeight) * getScaleFactor(panels.preview);
-            }
-        };
-
        this.refresh = function (requiresRefresh) {
            if (requiresRefresh) {
                oldInputText = "";
@ -1015,49 +1136,52 @@
        // IE doesn't let you use innerHTML if the element is contained somewhere in a table
        // (which is the case for inline editing) -- in that case, detach the element, set the
        // value, and reattach. Yes, that *is* ridiculous.
-        var ieSafePreviewSet = function (text) {
-            var preview = panels.preview;
-            var parent = preview.parentNode;
-            var sibling = preview.nextSibling;
-            parent.removeChild(preview);
-            preview.innerHTML = text;
+        var ieSafePreviewSet = function (previewText, previewScrollerText) {
+            var ieSafeSet = function(panel, text) {
+              var parent = panel.parentNode;
+              var sibling = panel.nextSibling;
+              parent.removeChild(panel);
+              panel.innerHTML = text;
              if (!sibling)
-                parent.appendChild(preview);
+                parent.appendChild(panel);
              else
-                parent.insertBefore(preview, sibling);
+                parent.insertBefore(panel, sibling);
+            };
+
+            ieSafeSet(panels.preview, previewText);
+            ieSafeSet(panels.previewScroller, previewScrollerText);
        }

-        var nonSuckyBrowserPreviewSet = function (text) {
-            panels.preview.innerHTML = text;
+        var nonSuckyBrowserPreviewSet = function (previewText, previewScrollerText) {
+            panels.preview.innerHTML = previewText;
+            panels.previewScroller.innerHTML = previewScrollerText;
        }

        var previewSetter;

-        var previewSet = function (text) {
+        var previewSet = function (previewText, previewScrollerText) {

            if (previewSetter)
-                return previewSetter(text);
+                return previewSetter(previewText, previewScrollerText);

            try {
-                nonSuckyBrowserPreviewSet(text);
+                nonSuckyBrowserPreviewSet(previewText, previewScrollerText);
                previewSetter = nonSuckyBrowserPreviewSet;
            } catch (e) {
                previewSetter = ieSafePreviewSet;
-                previewSetter(text);
+                previewSetter(previewText, previewScrollerText);
            }
        };

-        var pushPreviewHtml = function (text) {
+        var pushPreviewHtml = function (previewText, previewScrollerText) {

            var emptyTop = position.getTop(panels.input) - getDocScrollTop();

            if (panels.preview) {
-                previewSet(text);
+                previewSet(previewText, previewScrollerText);
                previewRefreshCallback();
            }

-            setPanelScrollTops();
-
            if (isFirstTimeFilled) {
                isFirstTimeFilled = false;
                return;
@ -1080,11 +1204,10 @@
            // TODO: make option to disable. We don't need this in discourse
            // setupEvents(panels.input, applyTimeout);

+            setupScrollSync();
+
            makePreviewHtml();

-            if (panels.preview) {
-                panels.preview.scrollTop = 0;
-            }
        };

        init();
--- a/app/assets/javascripts/discourse/models/composer.js
+++ b/app/assets/javascripts/discourse/models/composer.js
@ -411,7 +411,7 @@ Discourse.Composer = Discourse.Model.extend({
      raw: this.get('reply'),
      editReason: opts.editReason,
      imageSizes: opts.imageSizes,
-      cooked: $('#wmd-preview').html()
+      cooked: this.getCookedHtml()
    });
    this.set('composeState', CLOSED);

@ -448,7 +448,7 @@ Discourse.Composer = Discourse.Model.extend({
      topic_id: this.get('topic.id'),
      reply_to_post_number: post ? post.get('post_number') : null,
      imageSizes: opts.imageSizes,
-      cooked: $('#wmd-preview').html(),
+      cooked: this.getCookedHtml(),
      reply_count: 0,
      display_username: currentUser.get('name'),
      username: currentUser.get('username'),
@ -534,6 +534,10 @@ Discourse.Composer = Discourse.Model.extend({
    });
  },

+  getCookedHtml: function() {
+    return $('#wmd-preview').html().replace(/<span class="marker"><\/span>/g, '');
+  },
+
  saveDraft: function() {
    // Do not save when drafts are disabled
    if (this.get('disableDrafts')) return;
--- a/app/assets/javascripts/discourse/templates/composer.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/composer.js.handlebars
@ -56,6 +56,7 @@
        <div class='wmd-controls'>
          <div class='textarea-wrapper'>
            <div class='wmd-button-bar' id='wmd-button-bar'></div>
+            <div id='wmd-preview-scroller'></div>
            {{view Discourse.NotifyingTextArea parentBinding="view" tabindex="3" valueBinding="model.reply" id="wmd-input" placeholderKey="composer.reply_placeholder"}}
            {{popupInputTip validation=view.replyValidation shownAt=view.showReplyTip}}
          </div>
--- a/app/assets/javascripts/discourse/views/composer/composer_view.js
+++ b/app/assets/javascripts/discourse/views/composer/composer_view.js
@ -52,14 +52,6 @@ Discourse.ComposerView = Discourse.View.extend(Ember.Evented, {
  refreshPreview: Discourse.debounce(function() {
    if (this.editor) {
      this.editor.refreshPreview();
-      // if the caret is on the last line ensure preview scrolled to bottom
-      var caretPosition = Discourse.Utilities.caretPosition(this.wmdInput[0]);
-      if (!this.wmdInput.val().substring(caretPosition).match(/\n/)) {
-        var $wmdPreview = $('#wmd-preview');
-        if ($wmdPreview.is(':visible')) {
-          $wmdPreview.scrollTop($wmdPreview[0].scrollHeight);
-        }
-      }
    }
  }, 30),

--- a/app/assets/javascripts/vendor.js
+++ b/app/assets/javascripts/vendor.js
@ -10,7 +10,6 @@
 //= require_tree ./discourse/ember
 //= require LAB.js
 //= require Markdown.Converter.js
-//= require Markdown.Editor.js
 //= require better_markdown.js
 //= require bootbox.js
 //= require bootstrap-alert.js
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@ -474,7 +474,7 @@ div.ac-wrap {
      margin-top: 0 !important;
    }

-    #wmd-input, #wmd-preview {
+    #wmd-input, #wmd-preview-scroller, #wmd-preview {
      @include box-sizing(border-box);
      width: 100%;
      height: 100%;
@ -488,8 +488,11 @@ div.ac-wrap {
      h1, h2, h3, h4, h5, h6 {
        margin: 30px 0 10px;
      }
+      p {
+        margin-top: 19px;
      }
-    #wmd-input {
+    }
+    #wmd-input, #wmd-preview-scroller {
      position: absolute;
      left: 0;
      top: 0;
@ -502,6 +505,18 @@ div.ac-wrap {
      @include border-radius-all(0);
      transition: none;
    }
+    #wmd-preview-scroller {
+      font-size: 13px;
+      line-height: 18px;
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-weight: normal;
+      overflow: scroll;
+      visibility: hidden;
+      .marker, .caret {
+        display: inline-block;
+        vertical-align: top;
+      }
+    }
    .textarea-wrapper, .preview-wrapper {
      position: relative;
      @include box-sizing(border-box);
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@ -344,7 +344,6 @@ div.ac-wrap {
    font-size: 16px;
  }
 }
-#reply-control .wmd-controls #wmd-input {font-size: 16px;}

 #reply-control.edit-title.private-message {
  .wmd-controls {
@ -387,7 +386,7 @@ div.ac-wrap {
      margin-top: 0 !important;
    }

-    #wmd-input, #wmd-preview {
+    #wmd-input, #wmd-preview-scroller, #wmd-preview {
      @include box-sizing(border-box);
      width: 100%;
      height: 100%;
@ -401,8 +400,11 @@ div.ac-wrap {
      h1, h2, h3, h4, h5, h6 {
        margin: 30px 0 10px;
      }
+      p {
+        margin-top: 19px;
      }
-    #wmd-input {
+    }
+    #wmd-input, #wmd-preview-scroller {
      position: absolute;
      left: 0;
      top: 0;
@ -413,6 +415,17 @@ div.ac-wrap {
      border-top: 36px solid transparent;
      @include border-radius-all(0);
      transition: none;
+      font-size: 16px;
+    }
+    #wmd-preview-scroller {
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-weight: normal;
+      overflow: scroll;
+      visibility: hidden;
+      .marker, .caret {
+        display: inline-block;
+        vertical-align: top;
+      }
    }
    .textarea-wrapper, .preview-wrapper {
      position: relative;
--- a/test/javascripts/jshint_all.js.erb
+++ b/test/javascripts/jshint_all.js.erb
@ -120,4 +120,5 @@ qHint.sendRequest = function (url, callback) {
           "/app/assets/javascripts/",
           [/external\//,
            /defer\//,
-            /locales\//]) %>
+            /locales\//,
+            /Markdown\.Editor\.js/]) %>