codimd/public/js/syncscroll.js

379 lines
12 KiB
JavaScript
Raw Normal View History

// Inject line numbers for sync scroll.
var extra = require('./extra');
var md = extra.md;
function addPart(tokens, idx) {
if (tokens[idx].map && tokens[idx].level === 0) {
var startline = tokens[idx].map[0] + 1;
var endline = tokens[idx].map[1];
tokens[idx].attrJoin('class', 'part');
tokens[idx].attrJoin('data-startline', startline);
tokens[idx].attrJoin('data-endline', endline);
2015-05-15 04:58:13 +00:00
}
}
2015-05-15 04:58:13 +00:00
md.renderer.rules.blockquote_open = function (tokens, idx, options, env, self) {
tokens[idx].attrJoin('class', 'raw');
addPart(tokens, idx);
return self.renderToken.apply(self, arguments);
2015-05-15 04:58:13 +00:00
};
md.renderer.rules.table_open = function (tokens, idx, options, env, self) {
addPart(tokens, idx);
return self.renderToken.apply(self, arguments);
2015-05-15 04:58:13 +00:00
};
md.renderer.rules.bullet_list_open = function (tokens, idx, options, env, self) {
addPart(tokens, idx);
return self.renderToken.apply(self, arguments);
};
md.renderer.rules.list_item_open = function (tokens, idx, options, env, self) {
tokens[idx].attrJoin('class', 'raw');
if (tokens[idx].map) {
var startline = tokens[idx].map[0] + 1;
var endline = tokens[idx].map[1];
tokens[idx].attrJoin('data-startline', startline);
tokens[idx].attrJoin('data-endline', endline);
}
return self.renderToken.apply(self, arguments);
2015-05-15 04:58:13 +00:00
};
md.renderer.rules.ordered_list_open = function (tokens, idx, options, env, self) {
addPart(tokens, idx);
return self.renderToken.apply(self, arguments);
2015-05-15 04:58:13 +00:00
};
md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
addPart(tokens, idx);
return self.renderToken.apply(self, arguments);
2015-05-15 04:58:13 +00:00
};
md.renderer.rules.paragraph_open = function (tokens, idx, options, env, self) {
addPart(tokens, idx);
return self.renderToken.apply(self, arguments);
};
md.renderer.rules.heading_open = function (tokens, idx, options, env, self) {
tokens[idx].attrJoin('class', 'raw');
addPart(tokens, idx);
return self.renderToken.apply(self, arguments);
2015-05-15 04:58:13 +00:00
};
md.renderer.rules.fence = function (tokens, idx, options, env, self) {
var token = tokens[idx],
info = token.info ? md.utils.unescapeAll(token.info).trim() : '',
langName = '',
highlighted;
if (info) {
langName = info.split(/\s+/g)[0];
if (/\!$/.test(info)) token.attrJoin('class', 'wrap');
token.attrJoin('class', options.langPrefix + langName.replace(/\=$|\=\d+$|\=\+$|\!$|\=\!/, ''));
token.attrJoin('class', 'hljs');
token.attrJoin('class', 'raw');
2015-05-15 04:58:13 +00:00
}
if (options.highlight) {
highlighted = options.highlight(token.content, langName) || md.utils.escapeHtml(token.content);
2015-05-15 04:58:13 +00:00
} else {
highlighted = md.utils.escapeHtml(token.content);
2015-05-15 04:58:13 +00:00
}
if (highlighted.indexOf('<pre') === 0) {
return highlighted + '\n';
2015-05-15 04:58:13 +00:00
}
if (tokens[idx].map && tokens[idx].level === 0) {
var startline = tokens[idx].map[0] + 1;
var endline = tokens[idx].map[1];
return '<pre class="part" data-startline="' + startline + '" data-endline="' + endline + '"><code' + self.renderAttrs(token) + '>'
+ highlighted
+ '</code></pre>\n';
2015-05-15 04:58:13 +00:00
}
return '<pre><code' + self.renderAttrs(token) + '>'
+ highlighted
+ '</code></pre>\n';
};
md.renderer.rules.code_block = function (tokens, idx, options, env, self) {
if (tokens[idx].map && tokens[idx].level === 0) {
var startline = tokens[idx].map[0] + 1;
var endline = tokens[idx].map[1];
return '<pre class="part" data-startline="' + startline + '" data-endline="' + endline + '"><code>' + md.utils.escapeHtml(tokens[idx].content) + '</code></pre>\n';
2015-05-15 04:58:13 +00:00
}
return '<pre><code>' + md.utils.escapeHtml(tokens[idx].content) + '</code></pre>\n';
2015-05-15 04:58:13 +00:00
};
function renderContainer(tokens, idx, options, env, self) {
tokens[idx].attrJoin('role', 'alert');
tokens[idx].attrJoin('class', 'alert');
tokens[idx].attrJoin('class', 'alert-' + tokens[idx].info.trim());
addPart(tokens, idx);
return self.renderToken.apply(self, arguments);
}
var markdownitContainer = require('markdown-it-container');
md.use(markdownitContainer, 'success', { render: renderContainer });
md.use(markdownitContainer, 'info', { render: renderContainer });
md.use(markdownitContainer, 'warning', { render: renderContainer });
md.use(markdownitContainer, 'danger', { render: renderContainer });
2015-05-15 04:58:13 +00:00
2016-10-13 06:03:02 +00:00
// FIXME: expose syncscroll to window
window.syncscroll = true;
window.preventSyncScrollToEdit = false;
window.preventSyncScrollToView = false;
var editScrollThrottle = 5;
var viewScrollThrottle = 5;
2015-06-01 10:04:25 +00:00
var buildMapThrottle = 100;
2015-05-15 04:58:13 +00:00
var viewScrolling = false;
var editScrolling = false;
var editArea = null;
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;
2015-05-15 04:58:13 +00:00
window.viewAjaxCallback = clearMap;
2015-05-15 04:58:13 +00:00
function clearMap() {
scrollMap = null;
lineHeightMap = null;
viewTop = null;
viewBottom = null;
2015-05-15 04:58:13 +00:00
}
2015-06-01 10:04:25 +00:00
var buildMap = _.throttle(buildMapInner, buildMapThrottle);
2015-05-15 04:58:13 +00:00
// Build offsets for each line (lines can be wrapped)
// That's a bit dirty to process each line everytime, but ok for demo.
// Optimizations are required only for big texts.
function buildMapInner(callback) {
if (!viewArea || !markdownArea) return;
2015-05-15 04:58:13 +00:00
var i, offset, nonEmptyList, pos, a, b, _lineHeightMap, linesCount,
acc, _scrollMap;
2015-05-15 04:58:13 +00:00
offset = viewArea.scrollTop() - viewArea.offset().top;
2015-05-15 04:58:13 +00:00
_scrollMap = [];
nonEmptyList = [];
_lineHeightMap = [];
viewTop = 0;
viewBottom = viewArea[0].scrollHeight - viewArea.height();
2015-05-15 04:58:13 +00:00
acc = 0;
2015-06-01 10:04:25 +00:00
var lines = editor.getValue().split('\n');
var lineHeight = editor.defaultTextHeight();
2015-06-01 10:04:25 +00:00
for (i = 0; i < lines.length; i++) {
var str = lines[i];
2015-05-15 04:58:13 +00:00
_lineHeightMap.push(acc);
if (str.length === 0) {
acc++;
2015-06-01 10:04:25 +00:00
continue;
2015-05-15 04:58:13 +00:00
}
var h = editor.heightAtLine(i + 1) - editor.heightAtLine(i);
acc += Math.round(h / lineHeight);
2015-06-01 10:04:25 +00:00
}
2015-05-15 04:58:13 +00:00
_lineHeightMap.push(acc);
linesCount = acc;
for (i = 0; i < linesCount; i++) {
_scrollMap.push(-1);
}
nonEmptyList.push(0);
// make the first line go top
_scrollMap[0] = viewTop;
2015-05-15 04:58:13 +00:00
var parts = markdownArea.find('.part').toArray();
2015-06-01 10:04:25 +00:00
for (i = 0; i < parts.length; i++) {
var $el = $(parts[i]),
t = $el.attr('data-startline') - 1;
2015-05-15 04:58:13 +00:00
if (t === '') {
return;
}
t = _lineHeightMap[t];
if (t !== 0 && t !== nonEmptyList[nonEmptyList.length - 1]) {
2015-05-15 04:58:13 +00:00
nonEmptyList.push(t);
}
_scrollMap[t] = Math.round($el.offset().top + offset - 10);
2015-06-01 10:04:25 +00:00
}
2015-05-15 04:58:13 +00:00
nonEmptyList.push(linesCount);
_scrollMap[linesCount] = viewArea[0].scrollHeight;
2015-05-15 04:58:13 +00:00
pos = 0;
for (i = 1; i < linesCount; i++) {
if (_scrollMap[i] !== -1) {
pos++;
continue;
}
a = nonEmptyList[pos];
b = nonEmptyList[pos + 1];
_scrollMap[i] = Math.round((_scrollMap[b] * (i - a) + _scrollMap[a] * (b - i)) / (b - a));
}
_scrollMap[0] = 0;
scrollMap = _scrollMap;
lineHeightMap = _lineHeightMap;
2015-06-01 10:04:25 +00:00
if (loaded && callback) callback();
2015-05-15 04:58:13 +00:00
}
// sync view scroll progress to edit
var viewScrollingTimer = null;
function syncScrollToEdit(event, preventAnimate) {
if (currentMode != modeType.both || !syncscroll || !editArea) return;
if (preventSyncScrollToEdit) {
if (typeof preventSyncScrollToEdit === 'number') {
preventSyncScrollToEdit--;
} else {
preventSyncScrollToEdit = false;
2015-05-15 04:58:13 +00:00
}
return;
}
if (!scrollMap || !lineHeightMap) {
buildMap(function () {
syncScrollToEdit(event, preventAnimate);
});
return;
}
if (editScrolling) return;
var scrollTop = viewArea[0].scrollTop;
var lineIndex = 0;
for (var i = 0, l = scrollMap.length; i < l; i++) {
if (scrollMap[i] > scrollTop) {
break;
} else {
lineIndex = i;
2015-05-15 04:58:13 +00:00
}
}
var lineNo = 0;
var lineDiff = 0;
for (var i = 0, l = lineHeightMap.length; i < l; i++) {
if (lineHeightMap[i] > lineIndex) {
break;
} else {
lineNo = lineHeightMap[i];
lineDiff = lineHeightMap[i + 1] - lineNo;
}
}
var posTo = 0;
var topDiffPercent = 0;
var posToNextDiff = 0;
var scrollInfo = editor.getScrollInfo();
var textHeight = editor.defaultTextHeight();
var preLastLineHeight = scrollInfo.height - scrollInfo.clientHeight - textHeight;
var preLastLineNo = Math.round(preLastLineHeight / textHeight);
var preLastLinePos = scrollMap[preLastLineNo];
if (scrollInfo.height > scrollInfo.clientHeight && scrollTop >= preLastLinePos) {
posTo = preLastLineHeight;
topDiffPercent = (scrollTop - preLastLinePos) / (viewBottom - preLastLinePos);
posToNextDiff = textHeight * topDiffPercent;
posTo += Math.ceil(posToNextDiff);
} else {
posTo = lineNo * textHeight;
topDiffPercent = (scrollTop - scrollMap[lineNo]) / (scrollMap[lineNo + lineDiff] - scrollMap[lineNo]);
posToNextDiff = textHeight * lineDiff * topDiffPercent;
posTo += Math.ceil(posToNextDiff);
}
if (preventAnimate) {
editArea.scrollTop(posTo);
} else {
var posDiff = Math.abs(scrollInfo.top - posTo);
var duration = posDiff / 50;
duration = duration >= 100 ? duration : 100;
editArea.stop(true, true).animate({
scrollTop: posTo
}, duration, "linear");
}
viewScrolling = true;
clearTimeout(viewScrollingTimer);
viewScrollingTimer = setTimeout(viewScrollingTimeoutInner, duration * 1.5);
}
function viewScrollingTimeoutInner() {
viewScrolling = false;
2015-05-15 04:58:13 +00:00
}
// sync edit scroll progress to view
var editScrollingTimer = null;
function syncScrollToView(event, preventAnimate) {
if (currentMode != modeType.both || !syncscroll || !viewArea) return;
if (preventSyncScrollToView) {
if (typeof preventSyncScrollToView === 'number') {
preventSyncScrollToView--;
} else {
preventSyncScrollToView = false;
}
return;
}
2015-05-15 04:58:13 +00:00
if (!scrollMap || !lineHeightMap) {
buildMap(function () {
syncScrollToView(event, preventAnimate);
});
2015-06-01 10:04:25 +00:00
return;
2015-05-15 04:58:13 +00:00
}
if (viewScrolling) return;
var lineNo, posTo;
var topDiffPercent, posToNextDiff;
var scrollInfo = editor.getScrollInfo();
var textHeight = editor.defaultTextHeight();
lineNo = Math.floor(scrollInfo.top / textHeight);
// if reach the last line, will start lerp to the bottom
var diffToBottom = (scrollInfo.top + scrollInfo.clientHeight) - (scrollInfo.height - textHeight);
if (scrollInfo.height > scrollInfo.clientHeight && diffToBottom > 0) {
topDiffPercent = diffToBottom / textHeight;
posTo = scrollMap[lineNo + 1];
posToNextDiff = (viewBottom - posTo) * topDiffPercent;
posTo += Math.floor(posToNextDiff);
2015-05-15 04:58:13 +00:00
} else {
topDiffPercent = (scrollInfo.top % textHeight) / textHeight;
posTo = scrollMap[lineNo];
posToNextDiff = (scrollMap[lineNo + 1] - posTo) * topDiffPercent;
posTo += Math.floor(posToNextDiff);
2015-05-15 04:58:13 +00:00
}
if (preventAnimate) {
viewArea.scrollTop(posTo);
} else {
var posDiff = Math.abs(viewArea.scrollTop() - posTo);
var duration = posDiff / 50;
duration = duration >= 100 ? duration : 100;
viewArea.stop(true, true).animate({
scrollTop: posTo
}, duration, "linear");
}
editScrolling = true;
clearTimeout(editScrollingTimer);
editScrollingTimer = setTimeout(editScrollingTimeoutInner, duration * 1.5);
}
function editScrollingTimeoutInner() {
editScrolling = false;
}
module.exports = {
setupSyncAreas: setupSyncAreas,
clearMap: clearMap,
2016-10-09 00:15:37 +00:00
syncScrollToEdit: syncScrollToEdit,
syncScrollToView: syncScrollToView
};