caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweaked scroll link to perform simultaneous synchronization

Browse Source
This commit is contained in:
benweet 2013-12-02 22:10:19 +00:00
parent ad435f0730
commit 180e98219e
1 changed files with 44 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
public/res/extensions/scrollLink.js
View File

@ -87,7 +87,8 @@ define([
var isScrollPreview = false; var isScrollPreview = false;
var isEditorMoving = false; var isEditorMoving = false;
var isPreviewMoving = false; var isPreviewMoving = false;
var doScrollLink = _.debounce(function() { var scrollingHelper = $('<div>');
var doScrollLink = _.throttle(function() {
if(mdSectionList.length === 0 || mdSectionList.length !== htmlSectionList.length) { if(mdSectionList.length === 0 || mdSectionList.length !== htmlSectionList.length) {
// Delay // Delay
doScrollLink(); doScrollLink();
@ -112,7 +113,10 @@ define([
} }
var destScrollTop; var destScrollTop;
// Perform the animation if diff > 9px // Perform the animation if diff > 9px
if(isScrollEditor === true && Math.abs(editorScrollTop - lastEditorScrollTop) > 9) { if(isScrollEditor === true) {
if(Math.abs(editorScrollTop - lastEditorScrollTop) <= 9) {
return;
}
isScrollEditor = false; isScrollEditor = false;
// Animate the preview // Animate the preview
lastEditorScrollTop = editorScrollTop; lastEditorScrollTop = editorScrollTop;
@ -124,25 +128,28 @@ define([
if(Math.abs(destScrollTop - previewScrollTop) <= 9) { if(Math.abs(destScrollTop - previewScrollTop) <= 9) {
// Skip the animation if diff is <= 9 // Skip the animation if diff is <= 9
lastPreviewScrollTop = previewScrollTop; lastPreviewScrollTop = previewScrollTop;
return;
} }
else { $previewElt.stop(true).animate({
isPreviewMoving = true; scrollTop: destScrollTop
$previewElt.animate({ }, {
scrollTop: destScrollTop easing: 'easeOutSine',
}, { duration: 200,
easing: 'easeOutSine', step: function(now) {
complete: function() { isPreviewMoving = true;
lastPreviewScrollTop = destScrollTop; lastPreviewScrollTop = previewScrollTop + now;
}, },
always: function() { done: function() {
_.defer(function() { _.defer(function() {
isPreviewMoving = false; isPreviewMoving = false;
}); });
} },
}); });
}
} }
else if(isScrollPreview === true && Math.abs(previewScrollTop - lastPreviewScrollTop) > 9) { else if(isScrollPreview === true) {
if(Math.abs(previewScrollTop - lastPreviewScrollTop) <= 9) {
return;
}
isScrollPreview = false; isScrollPreview = false;
// Animate the editor // Animate the editor
lastPreviewScrollTop = previewScrollTop; lastPreviewScrollTop = previewScrollTop;
@ -156,28 +163,26 @@ define([
if(Math.abs(destScrollTop - editorScrollTop) <= 9) { if(Math.abs(destScrollTop - editorScrollTop) <= 9) {
// Skip the animation if diff is <= 9 // Skip the animation if diff is <= 9
lastEditorScrollTop = editorScrollTop; lastEditorScrollTop = editorScrollTop;
return;
} }
else { scrollingHelper.stop(true).css('value', 0).animate({
isEditorMoving = true; value: destScrollTop - editorScrollTop
$("<div>").animate({ }, {
value: destScrollTop - editorScrollTop easing: 'easeOutSine',
}, { duration: 200,
easing: 'easeOutSine', step: function(now) {
step: function(now) { isEditorMoving = true;
aceEditor.session.setScrollTop(editorScrollTop + now); lastEditorScrollTop = editorScrollTop + now;
}, aceEditor.session.setScrollTop(lastEditorScrollTop);
complete: function() { },
lastEditorScrollTop = destScrollTop; done: function() {
}, setTimeout(function() {
always: function() { isEditorMoving = false;
_.defer(function() { });
isEditorMoving = false; },
}); });
}
});
}
} }
}, 500); }, 100);
scrollLink.onLayoutResize = function() { scrollLink.onLayoutResize = function() {
isScrollEditor = true; isScrollEditor = true;