Fixed scrollsync perf issue
This commit is contained in:
parent
33cdc60610
commit
c0b1c9107d
@ -8,17 +8,13 @@ define([
|
||||
var scrollSync = new Extension("scrollSync", "Scroll Sync", true, true);
|
||||
scrollSync.settingsBlock = scrollSyncSettingsBlockHTML;
|
||||
|
||||
$.easing.easeOutSine = function( p ) {
|
||||
return Math.cos((1 - p) * Math.PI / 2 );
|
||||
};
|
||||
|
||||
var sectionList;
|
||||
scrollSync.onSectionsCreated = function(sectionListParam) {
|
||||
sectionList = sectionListParam;
|
||||
};
|
||||
|
||||
var $editorElt;
|
||||
var $previewElt;
|
||||
var editorElt;
|
||||
var previewElt;
|
||||
var mdSectionList = [];
|
||||
var htmlSectionList = [];
|
||||
var lastEditorScrollTop;
|
||||
@ -27,16 +23,15 @@ define([
|
||||
mdSectionList = [];
|
||||
var mdSectionOffset;
|
||||
var scrollHeight;
|
||||
var editorScrollTop = $editorElt.scrollTop();
|
||||
$editorElt.find(".wmd-input-section").each(function() {
|
||||
_.each(editorElt.querySelectorAll(".wmd-input-section"), function(delimiterElt) {
|
||||
if(mdSectionOffset === undefined) {
|
||||
// Force start to 0 for the first section
|
||||
mdSectionOffset = 0;
|
||||
return;
|
||||
}
|
||||
var $delimiterElt = $(this.firstChild);
|
||||
delimiterElt = delimiterElt.firstChild;
|
||||
// Consider div scroll position
|
||||
var newSectionOffset = $delimiterElt.position().top + editorScrollTop;
|
||||
var newSectionOffset = delimiterElt.offsetTop;
|
||||
mdSectionList.push({
|
||||
startOffset: mdSectionOffset,
|
||||
endOffset: newSectionOffset,
|
||||
@ -45,7 +40,7 @@ define([
|
||||
mdSectionOffset = newSectionOffset;
|
||||
});
|
||||
// Last section
|
||||
scrollHeight = $editorElt.prop('scrollHeight');
|
||||
scrollHeight = editorElt.scrollHeight;
|
||||
mdSectionList.push({
|
||||
startOffset: mdSectionOffset,
|
||||
endOffset: scrollHeight,
|
||||
@ -55,16 +50,14 @@ define([
|
||||
// Find corresponding sections in the preview
|
||||
htmlSectionList = [];
|
||||
var htmlSectionOffset;
|
||||
var previewScrollTop = $previewElt.scrollTop();
|
||||
$previewElt.find(".wmd-preview-section").each(function() {
|
||||
_.each(previewElt.querySelectorAll(".wmd-preview-section"), function(delimiterElt) {
|
||||
if(htmlSectionOffset === undefined) {
|
||||
// Force start to 0 for the first section
|
||||
htmlSectionOffset = 0;
|
||||
return;
|
||||
}
|
||||
var $delimiterElt = $(this);
|
||||
// Consider div scroll position
|
||||
var newSectionOffset = $delimiterElt.position().top + previewScrollTop;
|
||||
var newSectionOffset = delimiterElt.offsetTop;
|
||||
htmlSectionList.push({
|
||||
startOffset: htmlSectionOffset,
|
||||
endOffset: newSectionOffset,
|
||||
@ -73,7 +66,7 @@ define([
|
||||
htmlSectionOffset = newSectionOffset;
|
||||
});
|
||||
// Last section
|
||||
scrollHeight = $previewElt.prop('scrollHeight');
|
||||
scrollHeight = previewElt.scrollHeight;
|
||||
htmlSectionList.push({
|
||||
startOffset: htmlSectionOffset,
|
||||
endOffset: scrollHeight,
|
||||
@ -91,6 +84,7 @@ define([
|
||||
var isScrollPreview = false;
|
||||
var isEditorMoving = false;
|
||||
var isPreviewMoving = false;
|
||||
|
||||
function getDestScrollTop(srcScrollTop, srcSectionList, destSectionList) {
|
||||
// Find the section corresponding to the offset
|
||||
var sectionIndex;
|
||||
@ -109,6 +103,7 @@ define([
|
||||
|
||||
var timeoutId;
|
||||
var currentEndCb;
|
||||
|
||||
function animate(elt, startValue, endValue, stepCb, endCb) {
|
||||
if(currentEndCb) {
|
||||
clearTimeout(timeoutId);
|
||||
@ -117,11 +112,12 @@ define([
|
||||
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 );
|
||||
var scrollTop = startValue + diff * Math.cos((1 - progress) * Math.PI / 2);
|
||||
elt.scrollTop = scrollTop;
|
||||
stepCb(scrollTop);
|
||||
timeoutId = setTimeout(tick, 1);
|
||||
@ -132,6 +128,7 @@ define([
|
||||
endCb();
|
||||
}
|
||||
}
|
||||
|
||||
tick();
|
||||
}
|
||||
|
||||
@ -139,9 +136,9 @@ define([
|
||||
if(!isPreviewVisible || mdSectionList.length === 0 || mdSectionList.length !== htmlSectionList.length) {
|
||||
return;
|
||||
}
|
||||
var editorScrollTop = $editorElt.scrollTop();
|
||||
var editorScrollTop = editorElt.scrollTop;
|
||||
editorScrollTop < 0 && (editorScrollTop = 0);
|
||||
var previewScrollTop = $previewElt.scrollTop();
|
||||
var previewScrollTop = previewElt.scrollTop;
|
||||
var destScrollTop;
|
||||
// Perform the animation if diff > 9px
|
||||
if(isScrollEditor === true) {
|
||||
@ -154,14 +151,14 @@ define([
|
||||
destScrollTop = getDestScrollTop(editorScrollTop, mdSectionList, htmlSectionList);
|
||||
destScrollTop = _.min([
|
||||
destScrollTop,
|
||||
$previewElt.prop('scrollHeight') - $previewElt.outerHeight()
|
||||
previewElt.scrollHeight - previewElt.offsetHeight
|
||||
]);
|
||||
if(Math.abs(destScrollTop - previewScrollTop) <= 9) {
|
||||
// Skip the animation if diff is <= 9
|
||||
lastPreviewScrollTop = previewScrollTop;
|
||||
return;
|
||||
}
|
||||
animate($previewElt[0], previewScrollTop, destScrollTop, function(currentScrollTop) {
|
||||
animate(previewElt, previewScrollTop, destScrollTop, function(currentScrollTop) {
|
||||
isPreviewMoving = true;
|
||||
lastPreviewScrollTop = currentScrollTop;
|
||||
}, function() {
|
||||
@ -178,14 +175,14 @@ define([
|
||||
destScrollTop = getDestScrollTop(previewScrollTop, htmlSectionList, mdSectionList);
|
||||
destScrollTop = _.min([
|
||||
destScrollTop,
|
||||
$editorElt.prop('scrollHeight') - $editorElt.outerHeight()
|
||||
editorElt.scrollHeight - editorElt.offsetHeight
|
||||
]);
|
||||
if(Math.abs(destScrollTop - editorScrollTop) <= 9) {
|
||||
// Skip the animation if diff is <= 9
|
||||
lastEditorScrollTop = editorScrollTop;
|
||||
return;
|
||||
}
|
||||
animate($editorElt[0], editorScrollTop, destScrollTop, function(currentScrollTop) {
|
||||
animate(editorElt, editorScrollTop, destScrollTop, function(currentScrollTop) {
|
||||
isEditorMoving = true;
|
||||
lastEditorScrollTop = currentScrollTop;
|
||||
}, function() {
|
||||
@ -205,10 +202,10 @@ define([
|
||||
|
||||
var scrollAdjust = false;
|
||||
scrollSync.onReady = function() {
|
||||
$previewElt = $(".preview-container");
|
||||
$editorElt = $("#wmd-input");
|
||||
previewElt = document.querySelector(".preview-container");
|
||||
editorElt = document.querySelector("#wmd-input");
|
||||
|
||||
$previewElt.scroll(function() {
|
||||
$(previewElt).scroll(function() {
|
||||
if(isPreviewMoving === false && scrollAdjust === false) {
|
||||
isScrollPreview = true;
|
||||
isScrollEditor = false;
|
||||
@ -216,7 +213,7 @@ define([
|
||||
}
|
||||
scrollAdjust = false;
|
||||
});
|
||||
$editorElt.scroll(function() {
|
||||
$(editorElt).scroll(function() {
|
||||
if(isEditorMoving === false) {
|
||||
isScrollEditor = true;
|
||||
isScrollPreview = false;
|
||||
@ -234,32 +231,33 @@ define([
|
||||
$('.extension-preview-buttons .table-of-contents').on('click', 'a', function(evt) {
|
||||
evt.preventDefault();
|
||||
var id = this.hash;
|
||||
var $anchorElt = $previewElt.find(id);
|
||||
if(!$anchorElt.length) {
|
||||
var anchorElt = previewElt.querySelector(id);
|
||||
if(!anchorElt) {
|
||||
return;
|
||||
}
|
||||
var previewScrollTop = $anchorElt.offset().top - $previewElt.offset().top + $previewElt.scrollTop();
|
||||
$previewElt.scrollTop(previewScrollTop);
|
||||
var previewScrollTop = anchorElt.getBoundingClientRect().top - previewElt.getBoundingClientRect().top + previewElt.scrollTop;
|
||||
previewElt.scrollTop = previewScrollTop;
|
||||
var editorScrollTop = getDestScrollTop(previewScrollTop, htmlSectionList, mdSectionList);
|
||||
$editorElt.scrollTop(editorScrollTop);
|
||||
editorElt.scrollTop = editorScrollTop;
|
||||
});
|
||||
};
|
||||
|
||||
var $previewContentsElt;
|
||||
var previewContentsElt;
|
||||
var previousHeight;
|
||||
scrollSync.onPagedownConfigure = function(editor) {
|
||||
$previewContentsElt = $("#preview-contents");
|
||||
previewContentsElt = document.getElementById("preview-contents");
|
||||
editor.getConverter().hooks.chain("postConversion", function(text) {
|
||||
// To avoid losing scrolling position before elements are fully loaded
|
||||
$previewContentsElt.height($previewContentsElt.height());
|
||||
previousHeight = previewContentsElt.offsetHeight;
|
||||
previewContentsElt.style.height = previousHeight + 'px';
|
||||
return text;
|
||||
});
|
||||
};
|
||||
|
||||
scrollSync.onPreviewFinished = function() {
|
||||
// Now set the correct height
|
||||
var previousHeight = $previewContentsElt.height();
|
||||
$previewContentsElt.height("auto");
|
||||
var newHeight = $previewContentsElt.height();
|
||||
previewContentsElt.style.removeProperty('height');
|
||||
var newHeight = previewContentsElt.offsetHeight;
|
||||
isScrollEditor = true;
|
||||
if(newHeight < previousHeight) {
|
||||
// We expect a scroll adjustment
|
||||
|
Loading…
Reference in New Issue
Block a user