Browse Source

Optimized result tabs update & added comments

pull/14/head
Vitaly Puzrin 10 years ago
parent
commit
c42fc6bbfe
  1. 39
      demo/assets/index.js

39
demo/assets/index.js

@ -64,6 +64,13 @@
return '<table class="table table-striped">\n';
};
//
// Inject line numbers for sync scroll. Notes:
//
// - We track only headings and paragraphs on first level. That's enougth.
// - Footnotes content causes jumps. Level limit filter it automatically.
//
mdHtml.renderer.rules.paragraph_open = function (tokens, idx) {
var line;
if (tokens[idx].lines && tokens[idx].level === 0) {
@ -84,15 +91,25 @@
}
function updateResult() {
var source = $('.source').val();
var source = $('.source').val(),
dump;
$('.result-html').html(mdHtml.render(source));
// Update only active view to avoid slowdowns
// (debug & src view with highlighting are a bit slow)
if (defaults._view === 'src') {
$('.result-src-content').html(window.hljs.highlight('html', mdSrc.render(source)).value);
scrollMap = null;
var dump = JSON.stringify(mdSrc.parse(source, { references: {} }), null, 2);
} else if (defaults._view === 'debug') {
dump = JSON.stringify(mdSrc.parse(source, { references: {} }), null, 2);
$('.result-debug-content').html(window.hljs.highlight('json', dump).value);
} else { /*defaults._view === 'html'*/
$('.result-html').html(mdHtml.render(source));
}
// reset lines mapping cache on content update
scrollMap = null;
try {
if (source) {
// serialize state - source and options
@ -108,7 +125,10 @@
}
}
function recomputeScroll() {
// 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 buildScrollMap() {
var i, offset, nonEmptyList, pos, a, b, lineHeightMap, linesCount,
acc, sourceLikeDiv, textarea = $('.source');
@ -185,7 +205,7 @@
lineNo;
lineNo = Math.floor(textarea.scrollTop() / lineHeight);
if (!scrollMap) { recomputeScroll(); }
if (!scrollMap) { buildScrollMap(); }
$('.result-html').stop(true).animate({
scrollTop: scrollMap[lineNo]
}, 100, 'linear');
@ -280,7 +300,7 @@
permalink = document.getElementById('permalink');
// Setup listeners
$('.source').on('keyup paste cut mouseup', updateResult);
$('.source').on('keyup paste cut mouseup', _.debounce(updateResult, 300, { maxWait: 500 }));
$('.source').on('scroll', _.debounce(syncScroll, 50, { maxWait: 50 }));
$('.source-clear').on('click', function (event) {
@ -299,6 +319,11 @@
}
});
// Need to recalculate line positions on window resize
$(window).on('resize', function () {
scrollMap = null;
});
updateResult();
});
})();

Loading…
Cancel
Save