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

Reimplemented scrollsync animation

Browse Source
This commit is contained in:
benweet 2014-05-19 19:05:01 +01:00
parent 704d74b175
commit e6da7d51d0
1 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
public/res/extensions/scrollSync.js
View File

@ -91,7 +91,6 @@ define([
var isScrollPreview = false;
var isEditorMoving = false;
var isPreviewMoving = false;
var scrollingHelper = $('<div>');
function getDestScrollTop(srcScrollTop, srcSectionList, destSectionList) {
// Find the section corresponding to the offset
var sectionIndex;
@ -108,6 +107,34 @@ define([
return destSection.startOffset + destSection.height * posInSection;
}
var timeoutId;
var currentEndCb;
function animate(elt, startValue, endValue, stepCb, endCb) {
if(currentEndCb) {
clearTimeout(timeoutId);
currentEndCb();
}
currentEndCb = endCb;
var diff = endValue - startValue;
var startTime = Date.now();
function tick() {
var currentTime = Date.now();
var progress = (currentTime - startTime) / 200;
if(progress < 1) {
var scrollTop = startValue + diff * Math.cos((1 - progress) * Math.PI / 2 );
elt.scrollTop = scrollTop;
stepCb(scrollTop);
timeoutId = setTimeout(tick, 1);
}
else {
currentEndCb = undefined;
elt.scrollTop = endValue;
endCb();
}
}
tick();
}
var doScrollSync = _.throttle(function() {
if(!isPreviewVisible || mdSectionList.length === 0 || mdSectionList.length !== htmlSectionList.length) {
return;
@ -134,24 +161,12 @@ define([
lastPreviewScrollTop = previewScrollTop;
return;
}
scrollingHelper.stop('scrollSyncFx', true).css('value', 0).animate({
value: destScrollTop - previewScrollTop
}, {
easing: 'easeOutSine',
duration: 200,
queue: 'scrollSyncFx',
step: function(now) {
animate($previewElt[0], previewScrollTop, destScrollTop, function(currentScrollTop) {
isPreviewMoving = true;
lastPreviewScrollTop = previewScrollTop + now;
$previewElt.scrollTop(lastPreviewScrollTop);
},
done: function() {
setTimeout(function() {
lastPreviewScrollTop = currentScrollTop;
}, function() {
isPreviewMoving = false;
}, 10);
},
}).dequeue('scrollSyncFx');
});
}
else if(isScrollPreview === true) {
if(Math.abs(previewScrollTop - lastPreviewScrollTop) <= 9) {
@ -170,23 +185,12 @@ define([
lastEditorScrollTop = editorScrollTop;
return;
}
scrollingHelper.stop('scrollSyncFx', true).css('value', 0).animate({
value: destScrollTop - editorScrollTop
}, {
easing: 'easeOutSine',
duration: 200,
queue: 'scrollSyncFx',
step: function(now) {
animate($editorElt[0], editorScrollTop, destScrollTop, function(currentScrollTop) {
isEditorMoving = true;
lastEditorScrollTop = editorScrollTop + now;
$editorElt.scrollTop(lastEditorScrollTop);
},
done: function() {
setTimeout(function() {
lastEditorScrollTop = currentScrollTop;
}, function() {
isEditorMoving = false;
}, 10);
},
}).dequeue('scrollSyncFx');
});
}
}, 100);