depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix syncscroll.js and index.js have circular dependency cause Reference Errors

Browse source
This commit is contained in:
Wu Cheng-Han 2016-09-18 16:51:19 +08:00
parent b7200d7910
commit 38b1477736
2 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/js/index.js
View file

@ -924,6 +924,8 @@ $(window).on('error', function () {
//setNeedRefresh(); //setNeedRefresh();
}); });
setupSyncAreas(ui.area.codemirrorScroll, ui.area.view, ui.area.markdown);
function autoSyncscroll() { function autoSyncscroll() {
if (editorHasFocus()) { if (editorHasFocus()) {
syncScrollToView(); syncScrollToView();

38
public/js/syncscroll.js
View file

@ -116,8 +116,17 @@ var buildMapThrottle = 100;
var viewScrolling = false; var viewScrolling = false;
var editScrolling = false; var editScrolling = false;
ui.area.codemirrorScroll.on('scroll', _.throttle(syncScrollToView, editScrollThrottle)); var editArea = null;
ui.area.view.on('scroll', _.throttle(syncScrollToEdit, viewScrollThrottle)); var viewArea = null;
var markdownArea = null;
function setupSyncAreas(edit, view, markdown) {
editArea = edit;
viewArea = view;
markdownArea = markdown;
editArea.on('scroll', _.throttle(syncScrollToView, editScrollThrottle));
viewArea.on('scroll', _.throttle(syncScrollToEdit, viewScrollThrottle));
}
var scrollMap, lineHeightMap, viewTop, viewBottom; var scrollMap, lineHeightMap, viewTop, viewBottom;
@ -136,15 +145,16 @@ var buildMap = _.throttle(buildMapInner, buildMapThrottle);
// That's a bit dirty to process each line everytime, but ok for demo. // That's a bit dirty to process each line everytime, but ok for demo.
// Optimizations are required only for big texts. // Optimizations are required only for big texts.
function buildMapInner(callback) { function buildMapInner(callback) {
if (!viewArea || !markdownArea) return;
var i, offset, nonEmptyList, pos, a, b, _lineHeightMap, linesCount, var i, offset, nonEmptyList, pos, a, b, _lineHeightMap, linesCount,
acc, _scrollMap; acc, _scrollMap;
offset = ui.area.view.scrollTop() - ui.area.view.offset().top; offset = viewArea.scrollTop() - viewArea.offset().top;
_scrollMap = []; _scrollMap = [];
nonEmptyList = []; nonEmptyList = [];
_lineHeightMap = []; _lineHeightMap = [];
viewTop = 0; viewTop = 0;
viewBottom = ui.area.view[0].scrollHeight - ui.area.view.height(); viewBottom = viewArea[0].scrollHeight - viewArea.height();
acc = 0; acc = 0;
var lines = editor.getValue().split('\n'); var lines = editor.getValue().split('\n');
@ -173,7 +183,7 @@ function buildMapInner(callback) {
// make the first line go top // make the first line go top
_scrollMap[0] = viewTop; _scrollMap[0] = viewTop;
var parts = ui.area.markdown.find('.part').toArray(); var parts = markdownArea.find('.part').toArray();
for (i = 0; i < parts.length; i++) { for (i = 0; i < parts.length; i++) {
var $el = $(parts[i]), var $el = $(parts[i]),
t = $el.attr('data-startline') - 1; t = $el.attr('data-startline') - 1;
@ -188,7 +198,7 @@ function buildMapInner(callback) {
} }
nonEmptyList.push(linesCount); nonEmptyList.push(linesCount);
_scrollMap[linesCount] = ui.area.view[0].scrollHeight; _scrollMap[linesCount] = viewArea[0].scrollHeight;
pos = 0; pos = 0;
for (i = 1; i < linesCount; i++) { for (i = 1; i < linesCount; i++) {
@ -214,7 +224,7 @@ function buildMapInner(callback) {
var viewScrollingTimer = null; var viewScrollingTimer = null;
function syncScrollToEdit(event, preventAnimate) { function syncScrollToEdit(event, preventAnimate) {
if (currentMode != modeType.both || !syncscroll) return; if (currentMode != modeType.both || !syncscroll || !editArea) return;
if (preventSyncScrollToEdit) { if (preventSyncScrollToEdit) {
if (typeof preventSyncScrollToEdit === 'number') { if (typeof preventSyncScrollToEdit === 'number') {
preventSyncScrollToEdit--; preventSyncScrollToEdit--;
@ -231,7 +241,7 @@ function syncScrollToEdit(event, preventAnimate) {
} }
if (editScrolling) return; if (editScrolling) return;
var scrollTop = ui.area.view[0].scrollTop; var scrollTop = viewArea[0].scrollTop;
var lineIndex = 0; var lineIndex = 0;
for (var i = 0, l = scrollMap.length; i < l; i++) { for (var i = 0, l = scrollMap.length; i < l; i++) {
if (scrollMap[i] > scrollTop) { if (scrollMap[i] > scrollTop) {
@ -273,12 +283,12 @@ function syncScrollToEdit(event, preventAnimate) {
} }
if (preventAnimate) { if (preventAnimate) {
ui.area.codemirrorScroll.scrollTop(posTo); editArea.scrollTop(posTo);
} else { } else {
var posDiff = Math.abs(scrollInfo.top - posTo); var posDiff = Math.abs(scrollInfo.top - posTo);
var duration = posDiff / 50; var duration = posDiff / 50;
duration = duration >= 100 ? duration : 100; duration = duration >= 100 ? duration : 100;
ui.area.codemirrorScroll.stop(true, true).animate({ editArea.stop(true, true).animate({
scrollTop: posTo scrollTop: posTo
}, duration, "linear"); }, duration, "linear");
} }
@ -296,7 +306,7 @@ function viewScrollingTimeoutInner() {
var editScrollingTimer = null; var editScrollingTimer = null;
function syncScrollToView(event, preventAnimate) { function syncScrollToView(event, preventAnimate) {
if (currentMode != modeType.both || !syncscroll) return; if (currentMode != modeType.both || !syncscroll || !viewArea) return;
if (preventSyncScrollToView) { if (preventSyncScrollToView) {
if (typeof preventSyncScrollToView === 'number') { if (typeof preventSyncScrollToView === 'number') {
preventSyncScrollToView--; preventSyncScrollToView--;
@ -333,12 +343,12 @@ function syncScrollToView(event, preventAnimate) {
} }
if (preventAnimate) { if (preventAnimate) {
ui.area.view.scrollTop(posTo); viewArea.scrollTop(posTo);
} else { } else {
var posDiff = Math.abs(ui.area.view.scrollTop() - posTo); var posDiff = Math.abs(viewArea.scrollTop() - posTo);
var duration = posDiff / 50; var duration = posDiff / 50;
duration = duration >= 100 ? duration : 100; duration = duration >= 100 ? duration : 100;
ui.area.view.stop(true, true).animate({ viewArea.stop(true, true).animate({
scrollTop: posTo scrollTop: posTo
}, duration, "linear"); }, duration, "linear");
} }