").insertAfter('.CodeMirror-cursors');
+ }
+ if ($('#' + id).length <= 0) {
+ var cursor = $('
');
+ //console.debug(pos);
+ cursor.attr('data-line', pos.line);
+ cursor.attr('data-ch', pos.ch);
+ var coord = editor.charCoords(pos, 'windows');
+ cursor[0].style.left = coord.left + 'px';
+ cursor[0].style.top = coord.top + 'px';
+ cursor[0].style.height = '18px';
+ cursor[0].style.borderLeft = '2px solid ' + color;
+ $('.other-cursors').append(cursor);
+ cursor.hide().fadeIn();
+ } else {
+ var cursor = $('#' + id);
+ cursor.attr('data-line', pos.line);
+ cursor.attr('data-ch', pos.ch);
+ var coord = editor.charCoords(pos, 'windows');
+ cursor.stop(true).css('opacity', 1).animate({"left":coord.left, "top":coord.top}, cursorAnimatePeriod);
+ //cursor[0].style.left = coord.left + 'px';
+ //cursor[0].style.top = coord.top + 'px';
+ cursor[0].style.height = '18px';
+ cursor[0].style.borderLeft = '2px solid ' + color;
+ }
+}
+
+//editor actions
+editor.on('beforeChange', function (cm, change) {
+ if (debug)
+ console.debug(change);
+});
+editor.on('change', function (i, op) {
+ if (debug)
+ console.debug(op);
+ if (op.origin != 'setValue' && op.origin != 'ignoreHistory') {
+ socket.emit('change', LZString.compressToBase64(JSON.stringify(op)));
+ }
+ isDirty = true;
+ clearTimeout(doneTypingTimer);
+ doneTypingTimer = setTimeout(doneTyping, doneTypingDelay);
+});
+editor.on('focus', function (cm) {
+ socket.emit('cursor focus', editor.getCursor());
+});
+var cursorActivityTimer = null;
+editor.on('cursorActivity', function (cm) {
+ clearTimeout(cursorActivityTimer);
+ cursorActivityTimer = setTimeout(cursorActivity, cursorActivityDelay);
+});
+function cursorActivity() {
+ socket.emit('cursor activity', editor.getCursor());
+}
+editor.on('blur', function (cm) {
+ socket.emit('cursor blur');
+});
+
+function saveInfo() {
+ var left = $(document.body).scrollLeft();
+ var top = $(document.body).scrollTop();
+ switch (currentMode) {
+ case modeType.edit:
+ lastInfo.edit.scroll.left = left;
+ lastInfo.edit.scroll.top = top;
+ break;
+ case modeType.view:
+ lastInfo.view.scroll.left = left;
+ lastInfo.view.scroll.top = top;
+ break;
+ case modeType.both:
+ lastInfo.edit.scroll = editor.getScrollInfo();
+ lastInfo.view.scroll.left = ui.area.view.scrollLeft();
+ lastInfo.view.scroll.top = ui.area.view.scrollTop();
+ break;
+ }
+ lastInfo.edit.cursor = editor.getCursor();
+ lastInfo.needRestore = true;
+}
+
+function restoreInfo() {
+ if (lastInfo.needRestore) {
+ var line = lastInfo.edit.cursor.line;
+ var ch = lastInfo.edit.cursor.ch;
+ editor.setCursor(line, ch);
+
+ switch (currentMode) {
+ case modeType.edit:
+ $(document.body).scrollLeft(lastInfo.edit.scroll.left);
+ $(document.body).scrollTop(lastInfo.edit.scroll.top);
+ break;
+ case modeType.view:
+ $(document.body).scrollLeft(lastInfo.view.scroll.left);
+ $(document.body).scrollTop(lastInfo.view.scroll.top);
+ break;
+ case modeType.both:
+ var left = lastInfo.edit.scroll.left;
+ var top = lastInfo.edit.scroll.top;
+ editor.scrollIntoView();
+ editor.scrollTo(left, top);
+ ui.area.view.scrollLeft(lastInfo.view.scroll.left);
+ ui.area.view.scrollTop(lastInfo.view.scroll.top);
+ break;
+ }
+
+ lastInfo.needRestore = false;
+ }
+}
+
+//view actions
+var doneTypingTimer = null;
+var finishChangeTimer = null;
+var input = editor.getInputField();
+//user is "finished typing," do something
+function doneTyping() {
+ updateView();
+ var value = editor.getValue();
+ socket.emit('refresh', LZString.compressToBase64(value));
+}
+
+function finishChange() {
+ updateView();
+}
+
+var lastResult = null;
+
+function updateView() {
+ if (currentMode == modeType.edit || !isDirty) return;
+ var value = editor.getValue();
+ var result = postProcess(md.render(value)).children().toArray();
+ //ui.area.markdown.html(result);
+ //finishView(ui.area.markdown);
+ partialUpdate(result, lastResult, ui.area.markdown.children().toArray());
+ lastResult = $(result).clone(true);
+ finishView(ui.area.view);
+ writeHistory(ui.area.markdown);
+ isDirty = false;
+ // reset lines mapping cache on content update
+ scrollMap = null;
+ emitUserStatus();
+}
+
+function partialUpdate(src, tar, des) {
+ if (!src || src.length == 0 || !tar || tar.length == 0 || !des || des.length == 0) {
+ ui.area.markdown.html(src);
+ return;
+ }
+ if (src.length == tar.length) { //same length
+ for (var i = 0; i < src.length; i++) {
+ copyAttribute(src[i], des[i], 'data-startline');
+ copyAttribute(src[i], des[i], 'data-endline');
+ var rawSrc = cloneAndRemoveDataAttr(src[i]);
+ var rawTar = cloneAndRemoveDataAttr(tar[i]);
+ if (rawSrc.outerHTML != rawTar.outerHTML) {
+ //console.log(rawSrc);
+ //console.log(rawTar);
+ $(des[i]).replaceWith(src[i]);
+ }
+ }
+ } else { //diff length
+ var start = 0;
+ var end = 0;
+ //find diff start position
+ for (var i = 0; i < tar.length; i++) {
+ copyAttribute(src[i], des[i], 'data-startline');
+ copyAttribute(src[i], des[i], 'data-endline');
+ var rawSrc = cloneAndRemoveDataAttr(src[i]);
+ var rawTar = cloneAndRemoveDataAttr(tar[i]);
+ if (!rawSrc || !rawTar || rawSrc.outerHTML != rawTar.outerHTML) {
+ start = i;
+ break;
+ }
+ }
+ //find diff end position
+ var srcEnd = 0;
+ var tarEnd = 0;
+ for (var i = 0; i < src.length; i++) {
+ copyAttribute(src[i], des[i], 'data-startline');
+ copyAttribute(src[i], des[i], 'data-endline');
+ var rawSrc = cloneAndRemoveDataAttr(src[i]);
+ var rawTar = cloneAndRemoveDataAttr(tar[i]);
+ if (!rawSrc || !rawTar || rawSrc.outerHTML != rawTar.outerHTML) {
+ start = i;
+ break;
+ }
+ }
+ //tar end
+ for (var i = 1; i <= tar.length; i++) {
+ var srcLength = src.length;
+ var tarLength = tar.length;
+ copyAttribute(src[srcLength - i], des[srcLength - i], 'data-startline');
+ copyAttribute(src[srcLength - i], des[srcLength - i], 'data-endline');
+ var rawSrc = cloneAndRemoveDataAttr(src[srcLength - i]);
+ var rawTar = cloneAndRemoveDataAttr(tar[tarLength - i]);
+ if (!rawSrc || !rawTar || rawSrc.outerHTML != rawTar.outerHTML) {
+ tarEnd = tar.length - i;
+ break;
+ }
+ }
+ //src end
+ for (var i = 1; i <= src.length; i++) {
+ var srcLength = src.length;
+ var tarLength = tar.length;
+ copyAttribute(src[srcLength - i], des[srcLength - i], 'data-startline');
+ copyAttribute(src[srcLength - i], des[srcLength - i], 'data-endline');
+ var rawSrc = cloneAndRemoveDataAttr(src[srcLength - i]);
+ var rawTar = cloneAndRemoveDataAttr(tar[tarLength - i]);
+ if (!rawSrc || !rawTar || rawSrc.outerHTML != rawTar.outerHTML) {
+ srcEnd = src.length - i;
+ break;
+ }
+ }
+ //check if tar end overlap tar start
+ var overlap = 0;
+ for (var i = start; i >= 0; i--) {
+ var rawTarStart = cloneAndRemoveDataAttr(tar[i-1]);
+ var rawTarEnd = cloneAndRemoveDataAttr(tar[tarEnd+1+start-i]);
+ if(rawTarStart && rawTarEnd && rawTarStart.outerHTML == rawTarEnd.outerHTML)
+ overlap++;
+ else
+ break;
+ }
+ if(debug)
+ console.log('overlap:' + overlap);
+ //show diff content
+ if(debug) {
+ console.log('start:' + start);
+ console.log('tarEnd:' + tarEnd);
+ console.log('srcEnd:' + srcEnd);
+ console.log('des[start]:' + des[start]);
+ }
+ tarEnd += overlap;
+ srcEnd += overlap;
+ //add new element
+ var newElements = "";
+ for (var j = start; j <= srcEnd; j++) {
+ if(debug)
+ srcChanged += src[j].outerHTML;
+ newElements += src[j].outerHTML;
+ }
+ if(newElements && des[start]) {
+ $(newElements).insertBefore(des[start]);
+ } else {
+ $(newElements).insertAfter(des[des.length-1]);
+ }
+ if(debug)
+ console.log(srcChanged);
+ //remove old element
+ if(debug)
+ var tarChanged = "";
+ for (var j = start; j <= tarEnd; j++) {
+ if(debug)
+ tarChanged += tar[j].outerHTML;
+ if(des[j])
+ des[j].remove();
+ }
+ if(debug) {
+ console.log(tarChanged);
+ var srcChanged = "";
+ }
+ }
+}
+
+function cloneAndRemoveDataAttr(el) {
+ if(!el) return;
+ var rawEl = $(el).clone(true)[0];
+ rawEl.removeAttribute('data-startline');
+ rawEl.removeAttribute('data-endline');
+ return rawEl;
+}
+
+function copyAttribute(src, des, attr) {
+ if (src && src.getAttribute(attr) && des)
+ des.setAttribute(attr, src.getAttribute(attr));
+}
+
+//
+// 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.
+//
+md.renderer.rules.paragraph_open = function (tokens, idx) {
+ var line;
+ if (tokens[idx].lines && tokens[idx].level === 0) {
+ var startline = tokens[idx].lines[0] + 1;
+ var endline = tokens[idx].lines[1];
+ return '
';
+ }
+ return '';
+};
+
+md.renderer.rules.heading_open = function (tokens, idx) {
+ var line;
+ if (tokens[idx].lines && tokens[idx].level === 0) {
+ var startline = tokens[idx].lines[0] + 1;
+ var endline = tokens[idx].lines[1];
+ return '';
+ }
+ return '';
+};
+
+editor.on('scroll', _.debounce(syncScrollToView, syncScrollDelay));
+//ui.area.view.on('scroll', _.debounce(syncScrollToEdit, 50));
+var scrollMap;
+// 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 = ui.area.codemirror,
+ _scrollMap;
+
+ sourceLikeDiv = $('').css({
+ position: 'absolute',
+ visibility: 'hidden',
+ height: 'auto',
+ width: editor.getScrollInfo().clientWidth,
+ 'font-size': textarea.css('font-size'),
+ 'font-family': textarea.css('font-family'),
+ 'line-height': textarea.css('line-height'),
+ 'white-space': textarea.css('white-space')
+ }).appendTo('body');
+
+ offset = ui.area.view.scrollTop() - ui.area.view.offset().top;
+ _scrollMap = [];
+ nonEmptyList = [];
+ lineHeightMap = [];
+
+ acc = 0;
+ editor.getValue().split('\n').forEach(function (str) {
+ var h, lh;
+
+ lineHeightMap.push(acc);
+
+ if (str.length === 0) {
+ acc++;
+ return;
+ }
+
+ sourceLikeDiv.text(str);
+ h = parseFloat(sourceLikeDiv.css('height'));
+ lh = parseFloat(sourceLikeDiv.css('line-height'));
+ acc += Math.round(h / lh);
+ });
+ sourceLikeDiv.remove();
+ lineHeightMap.push(acc);
+ linesCount = acc;
+
+ for (i = 0; i < linesCount; i++) {
+ _scrollMap.push(-1);
+ }
+
+ nonEmptyList.push(0);
+ _scrollMap[0] = 0;
+
+ ui.area.markdown.find('.part').each(function (n, el) {
+ var $el = $(el),
+ t = $el.data('startline');
+ if (t === '') {
+ return;
+ }
+ t = lineHeightMap[t];
+ if (t !== 0) {
+ nonEmptyList.push(t);
+ }
+ _scrollMap[t] = Math.round($el.offset().top + offset);
+ });
+
+ nonEmptyList.push(linesCount);
+ _scrollMap[linesCount] = ui.area.view[0].scrollHeight;
+
+ 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));
+ }
+
+ return _scrollMap;
+}
+
+function syncScrollToView() {
+ var lineNo, posTo;
+ var scrollInfo = editor.getScrollInfo();
+ if (!scrollMap) {
+ scrollMap = buildScrollMap();
+ }
+ lineNo = Math.floor(scrollInfo.top / editor.defaultTextHeight());
+ posTo = scrollMap[lineNo];
+ ui.area.view.stop(true).animate({scrollTop: posTo}, scrollAnimatePeriod);
+}
+
+function syncScrollToEdit() {
+ var lineNo, posTo;
+ if (!scrollMap) {
+ scrollMap = buildScrollMap();
+ }
+ var top = ui.area.view.scrollTop();
+ lineNo = closestIndex(top, scrollMap);
+ posTo = lineNo * editor.defaultTextHeight();
+ editor.scrollTo(0, posTo);
+}
+
+function closestIndex(num, arr) {
+ var curr = arr[0];
+ var index = 0;
+ var diff = Math.abs(num - curr);
+ for (var val = 0; val < arr.length; val++) {
+ var newdiff = Math.abs(num - arr[val]);
+ if (newdiff < diff) {
+ diff = newdiff;
+ curr = arr[val];
+ index = val;
+ }
+ }
+ return index;
+}
\ No newline at end of file
--
cgit v1.2.3