Stackedit/public/res/extensions/scrollSync.js

define([
	"jquery",
	"underscore",
	"classes/Extension",
	"text!html/scrollSyncSettingsBlock.html"
], function($, _, Extension, scrollSyncSettingsBlockHTML) {

	var scrollSync = new Extension("scrollSync", "Scroll Sync", true, true);
	scrollSync.settingsBlock = scrollSyncSettingsBlockHTML;

	var sectionList;
	scrollSync.onSectionsCreated = function(sectionListParam) {
		sectionList = sectionListParam;
	};

	var editorElt;
	var previewElt;
	var mdSectionList = [];
	var htmlSectionList = [];
	var lastEditorScrollTop;
	var lastPreviewScrollTop;
	var buildSections = _.debounce(function() {
		mdSectionList = [];
		var mdSectionOffset;
		var scrollHeight;
		_.each(editorElt.querySelectorAll(".wmd-input-section"), function(delimiterElt) {
			if(mdSectionOffset === undefined) {
				// Force start to 0 for the first section
				mdSectionOffset = 0;
				return;
			}
			delimiterElt = delimiterElt.firstChild;
			// Consider div scroll position
			var newSectionOffset = delimiterElt.offsetTop;
			mdSectionList.push({
				startOffset: mdSectionOffset,
				endOffset: newSectionOffset,
				height: newSectionOffset - mdSectionOffset
			});
			mdSectionOffset = newSectionOffset;
		});
		// Last section
		scrollHeight = editorElt.scrollHeight;
		mdSectionList.push({
			startOffset: mdSectionOffset,
			endOffset: scrollHeight,
			height: scrollHeight - mdSectionOffset
		});

		// Find corresponding sections in the preview
		htmlSectionList = [];
		var htmlSectionOffset;
		_.each(previewElt.querySelectorAll(".wmd-preview-section"), function(delimiterElt) {
			if(htmlSectionOffset === undefined) {
				// Force start to 0 for the first section
				htmlSectionOffset = 0;
				return;
			}
			// Consider div scroll position
			var newSectionOffset = delimiterElt.offsetTop;
			htmlSectionList.push({
				startOffset: htmlSectionOffset,
				endOffset: newSectionOffset,
				height: newSectionOffset - htmlSectionOffset
			});
			htmlSectionOffset = newSectionOffset;
		});
		// Last section
		scrollHeight = previewElt.scrollHeight;
		htmlSectionList.push({
			startOffset: htmlSectionOffset,
			endOffset: scrollHeight,
			height: scrollHeight - htmlSectionOffset
		});

		// apply Scroll Link (-10 to have a gap > 9px)
		lastEditorScrollTop = -10;
		lastPreviewScrollTop = -10;
		doScrollSync();
	}, 500);

	var isPreviewVisible = true;
	var isScrollEditor = false;
	var isScrollPreview = false;
	var isEditorMoving = false;
	var isPreviewMoving = false;

	function getDestScrollTop(srcScrollTop, srcSectionList, destSectionList) {
		// Find the section corresponding to the offset
		var sectionIndex;
		var srcSection = _.find(srcSectionList, function(section, index) {
			sectionIndex = index;
			return srcScrollTop < section.endOffset;
		});
		if(srcSection === undefined) {
			// Something very bad happened
			return;
		}
		var posInSection = (srcScrollTop - srcSection.startOffset) / (srcSection.height || 1);
		var destSection = destSectionList[sectionIndex];
		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;
				setTimeout(endCb, 100);
			}
		}

		tick();
	}

	var doScrollSync = _.throttle(function() {
		if(!isPreviewVisible || mdSectionList.length === 0 || mdSectionList.length !== htmlSectionList.length) {
			return;
		}
		var editorScrollTop = editorElt.scrollTop;
		editorScrollTop < 0 && (editorScrollTop = 0);
		var previewScrollTop = previewElt.scrollTop;
		var destScrollTop;
		// Perform the animation if diff > 9px
		if(isScrollEditor === true) {
			if(Math.abs(editorScrollTop - lastEditorScrollTop) <= 9) {
				return;
			}
			isScrollEditor = false;
			// Animate the preview
			lastEditorScrollTop = editorScrollTop;
			destScrollTop = getDestScrollTop(editorScrollTop, mdSectionList, htmlSectionList);
			destScrollTop = _.min([
				destScrollTop,
				previewElt.scrollHeight - previewElt.offsetHeight
			]);
			if(Math.abs(destScrollTop - previewScrollTop) <= 9) {
				// Skip the animation if diff is <= 9
				lastPreviewScrollTop = previewScrollTop;
				return;
			}
			animate(previewElt, previewScrollTop, destScrollTop, function(currentScrollTop) {
				isPreviewMoving = true;
				lastPreviewScrollTop = currentScrollTop;
			}, function() {
				isPreviewMoving = false;
			});
		}
		else if(isScrollPreview === true) {
			if(Math.abs(previewScrollTop - lastPreviewScrollTop) <= 9) {
				return;
			}
			isScrollPreview = false;
			// Animate the editor
			lastPreviewScrollTop = previewScrollTop;
			destScrollTop = getDestScrollTop(previewScrollTop, htmlSectionList, mdSectionList);
			destScrollTop = _.min([
				destScrollTop,
				editorElt.scrollHeight - editorElt.offsetHeight
			]);
			if(Math.abs(destScrollTop - editorScrollTop) <= 9) {
				// Skip the animation if diff is <= 9
				lastEditorScrollTop = editorScrollTop;
				return;
			}
			animate(editorElt, editorScrollTop, destScrollTop, function(currentScrollTop) {
				isEditorMoving = true;
				lastEditorScrollTop = currentScrollTop;
			}, function() {
				isEditorMoving = false;
			});
		}
	}, 100);

	scrollSync.onLayoutResize = function() {
		isScrollEditor = true;
		buildSections();
	};

	scrollSync.onFileClosed = function() {
		mdSectionList = [];
	};

	var scrollAdjust = false;
	scrollSync.onReady = function() {
		previewElt = document.querySelector(".preview-container");
		editorElt = document.querySelector("#wmd-input");

		$(previewElt).scroll(function() {
			if(isPreviewMoving === false && scrollAdjust === false) {
				isScrollPreview = true;
				isScrollEditor = false;
				doScrollSync();
			}
			scrollAdjust = false;
		});
		$(editorElt).scroll(function() {
			if(isEditorMoving === false) {
				isScrollEditor = true;
				isScrollPreview = false;
				doScrollSync();
			}
		});

		$(".preview-panel").on('hide.layout.toggle', function() {
			isPreviewVisible = false;
		}).on('shown.layout.toggle', function() {
			isPreviewVisible = true;
		});

		// Reimplement anchor scrolling to work without preview
		$('.extension-preview-buttons .table-of-contents').on('click', 'a', function(evt) {
			evt.preventDefault();
			var id = this.hash;
			var anchorElt = previewElt.querySelector(id);
			if(!anchorElt) {
				return;
			}
			var previewScrollTop = anchorElt.getBoundingClientRect().top - previewElt.getBoundingClientRect().top + previewElt.scrollTop;
			previewElt.scrollTop = previewScrollTop;
			var editorScrollTop = getDestScrollTop(previewScrollTop, htmlSectionList, mdSectionList);
			editorElt.scrollTop = editorScrollTop;
		});
	};

	var previewContentsElt;
	var previousHeight;
	scrollSync.onPagedownConfigure = function(editor) {
		previewContentsElt = document.getElementById("preview-contents");
		editor.getConverter().hooks.chain("postConversion", function(text) {
			// To avoid losing scrolling position before elements are fully loaded
			previousHeight = previewContentsElt.offsetHeight;
			previewContentsElt.style.height = previousHeight + 'px';
			return text;
		});
	};

	scrollSync.onPreviewFinished = function() {
		// Now set the correct height
		previewContentsElt.style.removeProperty('height');
		var newHeight = previewContentsElt.offsetHeight;
		isScrollEditor = true;
		if(newHeight < previousHeight) {
			// We expect a scroll adjustment
			scrollAdjust = true;
		}
		buildSections();
	};

	return scrollSync;
});