Add 'Sync scroll settings' option.

gruehle · May 30, 2014 · d3c5db0 · d3c5db0
1 parent 0f48639
commit d3c5db0
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,9 @@ resized vertically.
 The preview is updated as you edit the document. You can hover over links to see the href in a tooltip,
 or click them to open in your default browser.
 
-Hover over the preview area to show the settings "gear" icon. Click this icon to change the settings:
+Hover over the preview area to show the settings "gear" icon. Click this icon to change the settings.
+
+### Settings
 
 #### Format
 By default, the document is rendered as standard Markdown. Change the dropdown to "GitHub-Flavored (GFM)" 
@@ -29,6 +31,12 @@ There are three themes available:
 * Dark - Light text on a dark background.
 * Classic - Black text with a serif font on a light background
 
+#### Sync scroll position
+When checked, scrolling in the editor scrolls the preview to roughly the same location. 
+The scroll position of the preview is based on the scroll position of the source document, so the 
+position may be out of sync if you have really long lines in your source file. Scroll synchronization
+works best when the preview and code view are the same height.
+
 ### Credits
 This extension uses the following open source components:
 

diff --git a/main.js b/main.js
@@ -37,7 +37,8 @@ define(function (require, exports, module) {
         PopUpManager        = brackets.getModule("widgets/PopUpManager"),
         PreferencesManager  = brackets.getModule("preferences/PreferencesManager"),
         Resizer             = brackets.getModule("utils/Resizer"),
-        StringUtils         = brackets.getModule("utils/StringUtils");
+        StringUtils         = brackets.getModule("utils/StringUtils"),
+        _                   = brackets.getModule("thirdparty/lodash");
 
     // Templates
     var panelHTML       = require("text!templates/panel.html"),
@@ -55,6 +56,7 @@ define(function (require, exports, module) {
 
     // Other vars
     var currentDoc,
+        currentEditor,
         panel,
         visible = false,
         realVisibility = false;
@@ -63,6 +65,7 @@ define(function (require, exports, module) {
     var _prefs = PreferencesManager.getExtensionPrefs("markdown-preview");
     _prefs.definePreference("useGFM", "boolean", false);
     _prefs.definePreference("theme", "string", "clean");
+    _prefs.definePreference("syncScroll", "boolean", true);
 
     // Convert any old-style prefs
     PreferencesManager.convertPreferences(module, {
@@ -134,19 +137,18 @@ define(function (require, exports, module) {
         }
     }
 
-    var _timer;
+    function _editorScroll() {
+        if (_prefs.get("syncScroll")) {
+            var scrollInfo = currentEditor._codeMirror.getScrollInfo();
+            var scrollPercentage = scrollInfo.top / (scrollInfo.height - scrollInfo.clientHeight);
+            var scrollTop = ($iframe[0].contentDocument.height - $iframe[0].height) * scrollPercentage;
+
+            $iframe[0].contentDocument.body.scrollTop = Math.round(scrollTop);
+        }
+    }
 
     function _documentChange(e) {
-        // "debounce" the page updates to avoid thrashing/flickering
-        // Note: this should use Async.whenIdle() once brackets/pull/5528
-        // is merged.
-        if (_timer) {
-            window.clearTimeout(_timer);
-        }
-        _timer = window.setTimeout(function () {
-            _timer = null;
-            _loadDoc(e.target, true);
-        }, 300);
+        _loadDoc(e.target, true);
     }
 
     function _resizeIframe() {
@@ -164,9 +166,6 @@ define(function (require, exports, module) {
             gfm: useGFM
         });
 
-        // Save preferences
-        // TODO
-
         // Re-render
         _loadDoc(currentDoc, true);
     }
@@ -211,6 +210,16 @@ define(function (require, exports, module) {
                 _updateSettings();
             });
 
+        var $syncScroll = $settings.find("#markdown-preview-sync-scroll");
+
+        $syncScroll.change(function (e) {
+            _prefs.set("syncScroll", e.target.checked);
+        });
+
+        if (_prefs.get("syncScroll")) {
+            $syncScroll.attr("checked", true);
+        }
+
         PopUpManager.addPopUp($settings, _hideSettings, true);
         $(window.document).on("mousedown", _documentClicked);
     }
@@ -261,9 +270,16 @@ define(function (require, exports, module) {
             currentDoc = null;
         }
 
+        if (currentEditor) {
+            $(currentEditor).off("scroll", _editorScroll);
+            currentEditor = null;
+        }
+
         if (doc && /md|markdown|txt/.test(ext)) {
             currentDoc = doc;
             $(currentDoc).on("change", _documentChange);
+            currentEditor = EditorManager.getCurrentFullEditor();
+            $(currentEditor).on("scroll", _editorScroll);
             $icon.css({display: "block"});
             _setPanelVisibility(visible);
             _loadDoc(doc);
@@ -278,6 +294,13 @@ define(function (require, exports, module) {
         _setPanelVisibility(visible);
     }
 
+    // Debounce event callback to avoid excess overhead
+    // Update preview 300 ms ofter document change
+    // Sync scroll 1ms after document scroll (just enough to ensure
+    // the document scroll isn't blocked).
+    _documentChange = _.debounce(_documentChange, 300);
+    _editorScroll = _.debounce(_editorScroll, 1);
+
     // Insert CSS for this extension
     ExtensionUtils.loadStyleSheet(module, "styles/MarkdownPreview.css");
 

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
     "title": "Markdown Preview",
     "description": "Live preview of markdown documents",
     "homepage": "https://github.com/gruehle/MarkdownPreview",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "author": "Glenn Ruehle <[email protected]> (http://github.com/gruehle)",
     "license": "MIT",
     "engines": {

diff --git a/styles/MarkdownPreview.css b/styles/MarkdownPreview.css
@@ -74,3 +74,11 @@
     padding-right: 10px;
     vertical-align: middle;
 }
+
+#markdown-settings-panel label {
+    display: inline-block;
+}
+
+#markdown-settings-panel input {
+    margin-right: 10px;
+}
diff --git a/templates/settings.html b/templates/settings.html
@@ -14,4 +14,8 @@
             <option value="serif">Classic</option>
         </select>
     </div>
+    <div>
+        <span class="md-settings-label"></span>
+        <label><input type="checkbox" id="markdown-preview-sync-scroll">Sync scroll position</label>
+    </div>
 </div>