');
- var canvasLhs = jQuery(`
`);
- canvasLhs.find('#lhs-margin').attr('id', `${this.id}-lhs-margin`);
- var editorLhs = jQuery(`
`);
- editorLhs.eq(0).attr('id', `${this.id}-editor-lhs`);
- editorLhs.find('#text-lhs').attr('id', `${this.id}-lhs`);
- var canvasMid = jQuery(`
`);
- canvasMid.find('#mergely-canvas').attr('id', `${this.id}-mergely-canvas`);
- canvasMid.find('#lhs-rhs-canvas').attr('id', `${this.id}-lhs-${this.id}-rhs-canvas`);
+ this.element.get(0).className += ' mergely-editor';
+ const canvasLhs = htmlToElement(getMarginTemplate({
+ id: this.id,
+ side: 'lhs'
+ }));
+ const canvasRhs = htmlToElement(getMarginTemplate({
+ id: this.id,
+ side: 'rhs'
+ }));
+ const editorLhs = htmlToElement(getEditorTemplate({
+ id: this.id,
+ side: 'lhs'
+ }));
+ const editorRhs = htmlToElement(getEditorTemplate({
+ id: this.id,
+ side: 'rhs'
+ }));
+ const canvasMid = htmlToElement(getCenterCanvasTemplate({
+ id: this.id
+ }));
- this.element.append(splash);
this.element.append(canvasLhs);
this.element.append(editorLhs);
this.element.append(canvasMid);
- var canvasRhs = jQuery(`
`);
- canvasRhs.find('#rhs-margin').attr('id', `${this.id}-rhs-margin`);
if (this.settings.rhs_margin == 'left') {
this.element.append(canvasRhs);
}
- var editorRhs = jQuery(`
`);
- editorRhs.eq(0).attr('id', `${this.id}-editor-rhs`);
- editorRhs.find('#text-rhs').attr('id', `${this.id}-rhs`);
this.element.append(editorRhs);
if (this.settings.rhs_margin != 'left') {
this.element.append(canvasRhs);
}
if (!this.settings.sidebar) {
- this.element.find('.mergely-margin').css({display: 'none'});
+ this.element.find('.mergely-margin').css({ display: 'none' });
}
- if (['lgpl-separate-notice', 'gpl-separate-notice', 'mpl-separate-notice', 'commercial'].indexOf(this.settings.license) < 0) {
- const _lic = {
+ if (NOTICES.indexOf(this.settings.license) < 0) {
+ const noticeTypes = {
'lgpl': 'GNU LGPL v3.0',
'gpl': 'GNU GPL v3.0',
'mpl': 'MPL 1.1'
};
- var lic = _lic[this.settings.license];
- if (!lic) {
- lic = _lic['lgpl'];
+ const notice = noticeTypes[this.settings.license];
+ if (!notice) {
+ notice = noticeTypes.lgpl;
}
-
- const parenth = this.element.parent().height();
- const parentw = this.element.parent().width();
- const icon = 'data:image/png;base64,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';
- this.element.find('#mergely-splash').css({
- position: 'absolute',
- zIndex: '100',
- backgroundColor: '#fff',
- border: '1px solid black',
- height: '70px',
- width: '300px',
- left: (parentw - 300) / 2,
- padding: '10px 10px 0 10px',
- fontFamily: 'arial',
- fontSize: '11px'
- }).append('
This software is a Combined Work using Mergely and is covered by the ' + lic + ' license. For the full license, see http://www.mergely.com/license.
');
+ const splash = htmlToElement(getSplash({
+ icon: MERGELY_ICON,
+ notice,
+ left: (this.element.parent().width() - 300) / 2
+ }));
+ // FIXME: use editor
jQuery('body').one('click', function () {
- jQuery('#mergely-splash').fadeOut(100, 'linear', function () {
- jQuery('#mergely-splash').remove();
- });
+ splash.style.cssText += 'visibility: hidden; opacity: 0; transition: visibility 0s 100ms, opacity 100ms linear;';
+ setTimeout(() => splash.remove(), 110);
});
+ this.element.append(splash);
}
// check initialization
- var rhstx;
- try {
- rhstx = this.element.find(`#${this.id}-rhs`).get(0);
- } catch (ex) {
+ const lhstx = document.querySelector(`#${this.id}-lhs`);
+ const rhstx = document.querySelector(`#${this.id}-rhs`);
+ if (!lhstx) {
+ console.error('lhs textarea not defined - Mergely not initialized properly');
}
if (!rhstx) {
console.error('rhs textarea not defined - Mergely not initialized properly');
- return;
- }
- var lhstx;
- try {
- lhstx = this.element.find(`#${this.id}-lhs`).get(0);
- } catch (ex) {
- }
- if (!lhstx) {
- console.error('lhs textarea not defined - Mergely not initialized properly');
- return;
}
- // get current diff border color
- var color = jQuery('
').appendTo('body').css('border-top-color');
- this.current_diff_color = color;
+ // get current diff border color from user-defined css
+ this.current_diff_color = jQuery('
')
+ .appendTo('body').css('border-top-color');
// codemirror
- var cmstyle = `#${this.id} .CodeMirror-gutter-text { padding: 5px 0 0 0; }
- '#${this.id} .CodeMirror-lines pre, #${this.id} .CodeMirror-gutter-text pre { line-height: 18px; }
- '.CodeMirror-linewidget { overflow: hidden; };`;
+ const cmstyles = [
+ '.CodeMirror { line-height: 18px; }'
+ ];
if (this.settings.autoresize) {
- cmstyle += `${this.id} .CodeMirror-scroll { height: 100%; overflow: auto; }`;
+ cmstyles.push('.CodeMirror-scroll { height: 100%; overflow: auto; }');
}
- // adjust the margin line height
- cmstyle += '\n.CodeMirror { line-height: 18px; }';
- jQuery(``).appendTo('head');
+ const cmstyle = cmstyles.map(a => `#${this.id} ${a}`).join('\n');
+ const css = htmlToElement(``);
+ document.head.appendChild(css);
// bind
- var self = this;
- self.trace('init', 'binding event listeners');
+ this.trace('init', 'binding event listeners');
this.editor = [];
- this.editor[this.id + '-lhs'] = CodeMirror.fromTextArea(lhstx, this.lhs_cmsettings);
- this.editor[this.id + '-rhs'] = CodeMirror.fromTextArea(rhstx, this.rhs_cmsettings);
- this.editor[this.id + '-lhs'].on('change', function(){ if (self.settings.autoupdate) self._changing(self.id + '-lhs', self.id + '-rhs'); });
- this.editor[this.id + '-lhs'].on('scroll', function(){ self._scrolling(self.id + '-lhs'); });
- this.editor[this.id + '-rhs'].on('change', function(){ if (self.settings.autoupdate) self._changing(self.id + '-lhs', self.id + '-rhs'); });
- this.editor[this.id + '-rhs'].on('scroll', function(){ self._scrolling(self.id + '-rhs'); });
+ this.editor[this.lhsId] = CodeMirror.fromTextArea(lhstx, this.lhs_cmsettings);
+ this.editor[this.rhsId] = CodeMirror.fromTextArea(rhstx, this.rhs_cmsettings);
+ this.editor[this.lhsId].on('change', () => {
+ if (!this.settings.autoupdate) {
+ return;
+ }
+ this._changing();
+ });
+ this.editor[this.lhsId].on('scroll', () => {
+ this._scrolling({ side: 'lhs', id: this.lhsId });
+ });
+ this.editor[this.rhsId].on('change', () => {
+ if (!this.settings.autoupdate) {
+ return;
+ }
+ this._changing();
+ });
+ this.editor[this.rhsId].on('scroll', () => {
+ this._scrolling({ side: 'rhs', id: this.rhsId });
+ });
+
// resize
if (this.settings.autoresize) {
- var sz_timeout1 = null;
- var sz = function(init) {
- if (self.settings.resize) self.settings.resize(init);
- self.resize();
- self.editor[self.id + '-lhs'].refresh();
- self.editor[self.id + '-rhs'].refresh();
+ let resizeTimeout = null;
+ const resize = (init) => {
+ if (this.settings.resize) this.settings.resize(init);
+ this.resize();
+ this.editor[this.lhsId].refresh();
+ this.editor[this.rhsId].refresh();
};
- jQuery(window).on('resize.mergely',
- function () {
- if (sz_timeout1) clearTimeout(sz_timeout1);
- sz_timeout1 = setTimeout(sz, self.settings.resize_timeout);
+ jQuery(window).on('resize.mergely', () => {
+ if (resizeTimeout) {
+ clearTimeout(resizeTimeout);
}
- );
- sz(true);
+ resizeTimeout = setTimeout(resize, this.settings.resize_timeout);
+ });
+ resize(true);
}
// scrollToDiff() from gutter
@@ -513,78 +533,85 @@ CodeMirrorDiffView.prototype.bind = function(el) {
if (ev.target && (jQuery(ev.target).closest('.merge-button').length > 0)) {
return;
}
-
+ const ed = this.editor[`${this.id}-${side}`];
// See if the user clicked the line number of a difference:
- var i, change;
- for (i = 0; i < this.changes.length; i++) {
- change = this.changes[i];
- if (line >= change[side+'-line-from'] && line <= change[side+'-line-to']) {
+ let found = false;
+ for (let i = 0; i < this.changes.length; ++i) {
+ const change = this.changes[i];
+ const lf = change[`${side}-line-from`];
+ const lt = change[`${side}-line-to`];
+ if (line >= lf && line <= lt) {
+ found = true;
+ // clicked on a line within the change
this._current_diff = i;
- // I really don't like this here - something about gutterClick does not
- // like mutating editor here. Need to trigger the scroll to diff from
- // a timeout.
- setTimeout(function() { this.scrollToDiff(); }.bind(this), 10);
break;
}
}
+ this.scrollTo(side, line);
+ if (found) {
+ // trigger refresh
+ this._changed();
+ }
}
- this.editor[this.id + '-lhs'].on('gutterClick', function(cm, n, gutterClass, ev) {
+ this.editor[this.lhsId].on('gutterClick', (cm, n, gutterClass, ev) => {
gutterClicked.call(this, 'lhs', n, ev);
- }.bind(this));
+ });
- this.editor[this.id + '-rhs'].on('gutterClick', function(cm, n, gutterClass, ev) {
+ this.editor[this.rhsId].on('gutterClick', (cm, n, gutterClass, ev) => {
gutterClicked.call(this, 'rhs', n, ev);
- }.bind(this));
+ });
// if `lhs` and `rhs` are passed in, this sets the values in each editor
// and kicks off the whole change pipeline.
- var setv;
if (this.settings.lhs) {
- self.trace('init', 'setting lhs value');
+ this.trace('init', 'setting lhs value');
this.settings.lhs(function setValue(value) {
this._initializing = true;
delete this._current_diff;
- this.editor[this.id + '-lhs'].getDoc().setValue(value);
+ this.editor[this.lhsId].getDoc().setValue(value);
}.bind(this));
}
if (this.settings.rhs) {
- self.trace('init', 'setting rhs value');
+ this.trace('init', 'setting rhs value');
this.settings.rhs(function setValue(value) {
this._initializing = true;
delete this._current_diff;
- this.editor[this.id + '-rhs'].getDoc().setValue(value);
+ this.editor[this.rhsId].getDoc().setValue(value);
}.bind(this));
}
this.element.one('updated', () => {
this._initializing = false;
- if (self.settings.loaded) {
- self.settings.loaded();
+ if (this.settings.loaded) {
+ this.settings.loaded();
}
});
this.trace('init', 'bound');
- this.editor[this.id + '-lhs'].focus();
+ this.editor[this.lhsId].focus();
};
CodeMirrorDiffView.prototype._scroll_to_change = function(change) {
- if (!change) return;
- var self = this;
- var led = self.editor[self.id+'-lhs'];
- var red = self.editor[self.id+'-rhs'];
+ if (!change) {
+ return;
+ }
+ const led = this.editor[this.lhsId];
+ const red = this.editor[this.rhsId];
// set cursors
- led.setCursor(Math.max(change["lhs-line-from"],0), 0); // use led.getCursor().ch ?
- red.setCursor(Math.max(change["rhs-line-from"],0), 0);
- if (change["lhs-line-to"] >= 0) {
- led.scrollIntoView({line: change["lhs-line-to"]});
+ const llf = Math.max(change['lhs-line-from'], 0);
+ const rlf = Math.max(change['rhs-line-from'], 0);
+ led.setCursor(llf, 0);
+ red.setCursor(rlf, 0);
+ if (change['lhs-line-to'] >= 0) {
+ led.scrollIntoView({ line: change['lhs-line-to'] });
}
led.focus();
};
-CodeMirrorDiffView.prototype._scrolling = function(editor_name) {
+CodeMirrorDiffView.prototype._scrolling = function({ side, id }) {
const { jQuery } = this;
- if (this._skipscroll[editor_name] === true) {
+ if (this._skipscroll[id] === true) {
// scrolling one side causes the other to event - ignore it
- this._skipscroll[editor_name] = false;
+ this._skipscroll[id] = false;
return;
}
if (!this.changes) {
@@ -592,37 +619,35 @@ CodeMirrorDiffView.prototype._scrolling = function(editor_name) {
// are calculated
return;
}
- var scroller = jQuery(this.editor[editor_name].getScrollerElement());
+ const scroller = jQuery(this.editor[id].getScrollerElement());
if (this.midway == undefined) {
this.midway = (scroller.height() / 2.0 + scroller.offset().top).toFixed(2);
}
// balance-line
- var midline = this.editor[editor_name].coordsChar({left:0, top:this.midway});
- var top_to = scroller.scrollTop();
- var left_to = scroller.scrollLeft();
+ const midline = this.editor[id].coordsChar({left:0, top:this.midway});
+ const top_to = scroller.scrollTop();
+ const left_to = scroller.scrollLeft();
- this.trace('scroll', 'side', editor_name);
+ this.trace('scroll', 'side', side);
this.trace('scroll', 'midway', this.midway);
this.trace('scroll', 'midline', midline);
this.trace('scroll', 'top_to', top_to);
this.trace('scroll', 'left_to', left_to);
- var editor_name1 = this.id + '-lhs';
- var editor_name2 = this.id + '-rhs';
-
- for (var name in this.editor) {
- if (!this.editor.hasOwnProperty(name)) continue;
- if (editor_name == name) continue; //same editor
- var this_side = editor_name.replace(this.id + '-', '');
- var other_side = name.replace(this.id + '-', '');
- var top_adjust = 0;
+ for (const name in this.editor) {
+ if (!this.editor.hasOwnProperty(name) || id === name) {
+ // this is the same editor, and we want to scroll the other
+ continue;
+ }
+ const this_side = id.replace(this.id + '-', '');
+ const other_side = name.replace(this.id + '-', '');
// find the last change that is less than or within the midway point
// do not move the rhs until the lhs end point is >= the rhs end point.
- var last_change = null;
- var force_scroll = false;
- for (var i = 0; i < this.changes.length; ++i) {
- var change = this.changes[i];
+ let top_adjust = 0;
+ let last_change = null;
+ let force_scroll = false;
+ for (const change of this.changes) {
if ((midline.line >= change[this_side+'-line-from'])) {
last_change = change;
if (midline.line >= last_change[this_side+'-line-to']) {
@@ -642,8 +667,8 @@ CodeMirrorDiffView.prototype._scrolling = function(editor_name) {
}
}
- var vp = this.editor[name].getViewport();
- var scroll = true;
+ const vp = this.editor[name].getViewport();
+ let scroll = true;
if (last_change) {
this.trace('scroll', 'last change before midline', last_change);
if (midline.line >= vp.from && midline <= vp.to) {
@@ -657,71 +682,66 @@ CodeMirrorDiffView.prototype._scrolling = function(editor_name) {
this._skipscroll[name] = true;//disable next event
this.editor[name].scrollTo(left_to, top_to - top_adjust);
}
- else this.trace('scroll', 'not scrolling other side');
+ else {
+ this.trace('scroll', 'not scrolling other side');
+ }
if (this.settings.autoupdate) {
Timer.start();
- this._calculate_offsets(editor_name1, editor_name2, this.changes);
+ this._calculate_offsets(this.changes);
this.trace('change', 'offsets time', Timer.stop());
- this._markup_changes(editor_name1, editor_name2, this.changes);
+ this._markup_changes(this.changes);
this.trace('change', 'markup time', Timer.stop());
- this._draw_diff(editor_name1, editor_name2, this.changes);
+ this._draw_diff(this.changes);
this.trace('change', 'draw time', Timer.stop());
}
this.trace('scroll', 'scrolled');
}
};
-CodeMirrorDiffView.prototype._changing = function(editor_name1, editor_name2) {
+CodeMirrorDiffView.prototype._changing = function() {
this.trace('change', 'changing-timeout', this.changed_timeout);
- var self = this;
if (this.changed_timeout != null) clearTimeout(this.changed_timeout);
- this.changed_timeout = setTimeout(function(){
+ this.changed_timeout = setTimeout(() => {
Timer.start();
- self._changed(editor_name1, editor_name2);
- self.trace('change', 'total time', Timer.stop());
+ this._changed();
+ this.trace('change', 'total time', Timer.stop());
}, this.settings.change_timeout);
};
-CodeMirrorDiffView.prototype._changed = function(editor_name1, editor_name2) {
+CodeMirrorDiffView.prototype._changed = function() {
this._clear();
- this._diff(editor_name1, editor_name2);
+ this._diff();
};
CodeMirrorDiffView.prototype._clear = function() {
- var self = this, name, editor, fns, timer, i, change, l;
-
- var clear_changes = function() {
+ const clearChanges = (id) => {
Timer.start();
- for (i = 0, l = editor.lineCount(); i < l; ++i) {
- editor.removeLineClass(i, 'background');
- }
- for (i = 0; i < fns.length; ++i) {
- //var edid = editor.getDoc().id;
- change = fns[i];
- //if (change.doc.id != edid) continue;
- if (change.lines.length) {
- self.trace('change', 'clear text', change.lines[0].text);
+ const editor = this.editor[id];
+ editor.operation(() => {
+ const lineCount = editor.lineCount();
+ // FIXME: there is no need to call `removeLineClass` for every line
+ for (let i = 0; i < lineCount; ++i) {
+ editor.removeLineClass(i, 'background');
+ editor.removeLineClass(i, 'gutter');
}
- change.clear();
- }
- editor.clearGutter('merge');
- self.trace('change', 'clear time', Timer.stop());
+ for (const fn of this.chfns[id]) {
+ if (fn.lines.length) {
+ this.trace('change', 'clear text', fn.lines[0].text);
+ }
+ fn.clear();
+ }
+ editor.clearGutter('merge');
+ this.trace('change', 'clear time', Timer.stop());
+ });
};
+ clearChanges(this.lhsId);
+ clearChanges(this.rhsId);
- for (name in this.editor) {
- if (!this.editor.hasOwnProperty(name)) continue;
- editor = this.editor[name];
- fns = self.chfns[name];
- // clear editor changes
- editor.operation(clear_changes);
- }
- self.chfns[name] = [];
-
- var ex = this._draw_info(this.id + '-lhs', this.id + '-rhs');
- var ctx_lhs = ex.clhs.get(0).getContext('2d');
- var ctx_rhs = ex.crhs.get(0).getContext('2d');
- var ctx = ex.dcanvas.getContext('2d');
+ const ex = this._draw_info();
+ const ctx_lhs = ex.clhs.get(0).getContext('2d');
+ const ctx_rhs = ex.crhs.get(0).getContext('2d');
+ const ctx = ex.dcanvas.getContext('2d');
ctx_lhs.beginPath();
ctx_lhs.fillStyle = this.settings.bgcolor;
@@ -740,13 +760,13 @@ CodeMirrorDiffView.prototype._clear = function() {
ctx.fillRect(0, 0, this.draw_mid_width, ex.visible_page_height);
};
-CodeMirrorDiffView.prototype._diff = function(editor_name1, editor_name2) {
- var lhs = this.editor[editor_name1].getValue();
- var rhs = this.editor[editor_name2].getValue();
+CodeMirrorDiffView.prototype._diff = function() {
+ const lhs = this.editor[this.lhsId].getValue();
+ const rhs = this.editor[this.rhsId].getValue();
Timer.start();
- var d = new diff(lhs, rhs, this.settings);
+ const comparison = new diff(lhs, rhs, this.settings);
this.trace('change', 'diff time', Timer.stop());
- this.changes = DiffParser(d.normal_form());
+ this.changes = DiffParser(comparison.normal_form());
this.trace('change', 'parse time', Timer.stop());
if (this._current_diff === undefined && this.changes.length) {
// go to first difference on start-up where values are provided in
@@ -757,47 +777,15 @@ CodeMirrorDiffView.prototype._diff = function(editor_name1, editor_name2) {
}
}
this.trace('change', 'scroll_to_change time', Timer.stop());
- this._calculate_offsets(editor_name1, editor_name2, this.changes);
+ this._calculate_offsets(this.changes);
this.trace('change', 'offsets time', Timer.stop());
- this._markup_changes(editor_name1, editor_name2, this.changes);
+ this._markup_changes(this.changes);
this.trace('change', 'markup time', Timer.stop());
- this._draw_diff(editor_name1, editor_name2, this.changes);
+ this._draw_diff(this.changes);
this.trace('change', 'draw time', Timer.stop());
this.element.trigger('updated');
};
-CodeMirrorDiffView.prototype._parse_diff = function (editor_name1, editor_name2, diff) {
- this.trace('diff', 'diff results:\n', diff);
- var changes = [];
- var change_id = 0;
- // parse diff
- var diff_lines = diff.split(/\n/);
- for (var i = 0; i < diff_lines.length; ++i) {
- if (diff_lines[i].length == 0) continue;
- var change = {};
- var test = this.change_exp.exec(diff_lines[i]);
- if (test == null) continue;
- // lines are zero-based
- var fr = test[1].split(',');
- change['lhs-line-from'] = fr[0] - 1;
- if (fr.length == 1) change['lhs-line-to'] = fr[0] - 1;
- else change['lhs-line-to'] = fr[1] - 1;
- var to = test[3].split(',');
- change['rhs-line-from'] = to[0] - 1;
- if (to.length == 1) change['rhs-line-to'] = to[0] - 1;
- else change['rhs-line-to'] = to[1] - 1;
- // TODO: optimize for changes that are adds/removes
- if (change['lhs-line-from'] < 0) change['lhs-line-from'] = 0;
- if (change['lhs-line-to'] < 0) change['lhs-line-to'] = 0;
- if (change['rhs-line-from'] < 0) change['rhs-line-from'] = 0;
- if (change['rhs-line-to'] < 0) change['rhs-line-to'] = 0;
- change['op'] = test[2];
- changes[change_id++] = change;
- this.trace('diff', 'change', change);
- }
- return changes;
-};
-
CodeMirrorDiffView.prototype._get_viewport_side = function(editor_name) {
return this.editor[editor_name].getViewport();
};
@@ -810,16 +798,17 @@ CodeMirrorDiffView.prototype._is_change_in_view = function(side, vp, change) {
CodeMirrorDiffView.prototype._set_top_offset = function (editor_name1) {
// save the current scroll position of the editor
- var saveY = this.editor[editor_name1].getScrollInfo().top;
+ const saveY = this.editor[editor_name1].getScrollInfo().top;
// temporarily scroll to top
this.editor[editor_name1].scrollTo(null, 0);
// this is the distance from the top of the screen to the top of the
// content of the first codemirror editor
- var topnode = this.element.find('.CodeMirror-measure').first();
- var top_offset = topnode.offset().top - 4;
- if(!top_offset) return false;
-
+ const topnode = this.element.find('.CodeMirror-measure').first();
+ const top_offset = topnode.offset().top - 4;
+ if (!top_offset) {
+ return false;
+ }
// restore editor's scroll position
this.editor[editor_name1].scrollTo(null, saveY);
@@ -827,41 +816,40 @@ CodeMirrorDiffView.prototype._set_top_offset = function (editor_name1) {
return true;
};
-CodeMirrorDiffView.prototype._calculate_offsets = function (editor_name1, editor_name2, changes) {
+CodeMirrorDiffView.prototype._calculate_offsets = function (changes) {
const { jQuery } = this;
+ const led = this.editor[this.lhsId];
+ const red = this.editor[this.rhsId];
+
if (this.em_height == null) {
- if(!this._set_top_offset(editor_name1)) return; //try again
- this.em_height = this.editor[editor_name1].defaultTextHeight();
+ if(!this._set_top_offset(this.lhsId)) return; //try again
+ this.em_height = led.defaultTextHeight();
if (!this.em_height) {
console.warn('Failed to calculate offsets, using 18 by default');
this.em_height = 18;
}
this.draw_lhs_min = 0.5;
- var c = jQuery('#' + editor_name1 + '-' + editor_name2 + '-canvas');
- if (!c.length) {
- console.error('failed to find canvas', '#' + editor_name1 + '-' + editor_name2 + '-canvas');
- }
- if (!c.width()) {
- console.error('canvas width is 0');
- return;
- }
- this.draw_mid_width = jQuery('#' + editor_name1 + '-' + editor_name2 + '-canvas').width();
+ this.draw_mid_width = jQuery('#' + this.lhsId + '-' + this.rhsId + '-canvas').width();
this.draw_rhs_max = this.draw_mid_width - 0.5; //24.5;
this.draw_lhs_width = 5;
this.draw_rhs_width = 5;
- this.trace('calc', 'change offsets calculated', {top_offset: this.draw_top_offset, lhs_min: this.draw_lhs_min, rhs_max: this.draw_rhs_max, lhs_width: this.draw_lhs_width, rhs_width: this.draw_rhs_width});
+ this.trace('calc', 'change offsets calculated', {
+ top_offset: this.draw_top_offset,
+ lhs_min: this.draw_lhs_min,
+ rhs_max: this.draw_rhs_max,
+ lhs_width: this.draw_lhs_width,
+ rhs_width: this.draw_rhs_width
+ });
}
- var lhschc = this.editor[editor_name1].charCoords({line: 0});
- var rhschc = this.editor[editor_name2].charCoords({line: 0});
- var lhsvp = this._get_viewport_side(editor_name1);
- var rhsvp = this._get_viewport_side(editor_name2);
-
- for (var i = 0; i < changes.length; ++i) {
- var change = changes[i];
+ const lhschc = led.charCoords({line: 0});
+ const rhschc = red.charCoords({line: 0});
+ const lhsvp = this._get_viewport_side(this.lhsId);
+ const rhsvp = this._get_viewport_side(this.rhsId);
+ for (const change of changes) {
if (this.settings.viewport &&
- !this._is_change_in_view(lhsvp, 'lhs', change) &&
- !this._is_change_in_view(lhsvp, 'rhs', change)) {
+ !this._is_change_in_view('lhs', lhsvp, change) &&
+ !this._is_change_in_view('rhs', rhsvp, change)) {
// if the change is outside the viewport, skip
delete change['lhs-y-start'];
delete change['lhs-y-end'];
@@ -869,124 +857,123 @@ CodeMirrorDiffView.prototype._calculate_offsets = function (editor_name1, editor
delete change['rhs-y-end'];
continue;
}
- var llf = change['lhs-line-from'] >= 0 ? change['lhs-line-from'] : 0;
- var llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
- var rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
- var rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
+ const llf = change['lhs-line-from'] >= 0 ? change['lhs-line-from'] : 0;
+ const llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
+ const rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
+ const rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
- var ls, le, rs, re, tls, tle, lhseh, lhssh, rhssh, rhseh;
- if (this.editor[editor_name1].getOption('lineWrapping') || this.editor[editor_name2].getOption('lineWrapping')) {
- // If using line-wrapping, we must get the height of the line
- tls = this.editor[editor_name1].cursorCoords({line: llf, ch: 0}, 'page');
- lhssh = this.editor[editor_name1].getLineHandle(llf);
- ls = { top: tls.top, bottom: tls.top + lhssh.height };
-
- tle = this.editor[editor_name1].cursorCoords({line: llt, ch: 0}, 'page');
- lhseh = this.editor[editor_name1].getLineHandle(llt);
- le = { top: tle.top, bottom: tle.top + lhseh.height };
-
- tls = this.editor[editor_name2].cursorCoords({line: rlf, ch: 0}, 'page');
- rhssh = this.editor[editor_name2].getLineHandle(rlf);
- rs = { top: tls.top, bottom: tls.top + rhssh.height };
-
- tle = this.editor[editor_name2].cursorCoords({line: rlt, ch: 0}, 'page');
- rhseh = this.editor[editor_name2].getLineHandle(rlt);
- re = { top: tle.top, bottom: tle.top + rhseh.height };
+ let lhsStart;
+ let lhsEnd;
+ let rhsStart;
+ let rhsEnd;
+ const lineWrapping = led.getOption('lineWrapping')
+ || red.getOption('lineWrapping');
+ if (lineWrapping) {
+ // If using line-wrapping, we must get the height of the line, but
+ // this is expensive to call.
+ lhsStart = led.cursorCoords({ line: llf, ch: 0 }, 'page');
+ lhsEnd = led.cursorCoords({ line: llt, ch: 0 }, 'page');
+ lhsEnd.bottom = lhsEnd.top + led.getLineHandle(llt).height;
+ rhsStart = red.cursorCoords({ line: rlf, ch: 0 }, 'page');
+ rhsEnd = red.cursorCoords({ line: rlt, ch: 0 }, 'page');
+ rhsEnd.bottom = rhsEnd.top + red.getLineHandle(rlt).height;
}
else {
// If not using line-wrapping, we can calculate the line position
- ls = {
+ lhsStart = {
top: lhschc.top + llf * this.em_height,
bottom: lhschc.bottom + llf * this.em_height + 2
};
- le = {
+ lhsEnd = {
top: lhschc.top + llt * this.em_height,
bottom: lhschc.bottom + llt * this.em_height + 2
};
- rs = {
+ rhsStart = {
top: rhschc.top + rlf * this.em_height,
bottom: rhschc.bottom + rlf * this.em_height + 2
};
- re = {
+ rhsEnd = {
top: rhschc.top + rlt * this.em_height,
bottom: rhschc.bottom + rlt * this.em_height + 2
};
}
- if (change['op'] == 'a') {
+ if (change.op == 'a') {
// adds (right), normally start from the end of the lhs,
// except for the case when the start of the rhs is 0
if (rlf > 0) {
- ls.top = ls.bottom;
- ls.bottom += this.em_height;
- le = ls;
+ lhsStart.top = lhsStart.bottom;
+ lhsStart.bottom += this.em_height;
+ lhsEnd = lhsStart;
}
}
- else if (change['op'] == 'd') {
+ else if (change.op == 'd') {
// deletes (left) normally finish from the end of the rhs,
// except for the case when the start of the lhs is 0
if (llf > 0) {
- rs.top = rs.bottom;
- rs.bottom += this.em_height;
- re = rs;
+ rhsStart.top = rhsStart.bottom;
+ rhsStart.bottom += this.em_height;
+ rhsEnd = rhsStart;
}
}
- change['lhs-y-start'] = this.draw_top_offset + ls.top;
- if (change['op'] == 'c' || change['op'] == 'd') {
- change['lhs-y-end'] = this.draw_top_offset + le.bottom;
+ change['lhs-y-start'] = this.draw_top_offset + lhsStart.top;
+ if (change.op == 'c' || change.op == 'd') {
+ change['lhs-y-end'] = this.draw_top_offset + lhsEnd.bottom;
}
else {
- change['lhs-y-end'] = this.draw_top_offset + le.top;
+ change['lhs-y-end'] = this.draw_top_offset + lhsEnd.top;
}
- change['rhs-y-start'] = this.draw_top_offset + rs.top;
- if (change['op'] == 'c' || change['op'] == 'a') {
- change['rhs-y-end'] = this.draw_top_offset + re.bottom;
+ change['rhs-y-start'] = this.draw_top_offset + rhsStart.top;
+ if (change.op == 'c' || change.op == 'a') {
+ change['rhs-y-end'] = this.draw_top_offset + rhsEnd.bottom;
}
else {
- change['rhs-y-end'] = this.draw_top_offset + re.top;
+ change['rhs-y-end'] = this.draw_top_offset + rhsEnd.top;
}
- this.trace('calc', 'change calculated', i, change);
+ this.trace('calc', 'change calculated', change);
}
return changes;
};
-CodeMirrorDiffView.prototype._markup_changes = function (editor_name1, editor_name2, changes) {
+CodeMirrorDiffView.prototype._markup_changes = function (changes) {
const { jQuery } = this;
this.element.find('.merge-button').remove(); //clear
var self = this;
- var led = this.editor[editor_name1];
- var red = this.editor[editor_name2];
- var current_diff = this._current_diff;
- var lhsvp = this._get_viewport_side(editor_name1);
- var rhsvp = this._get_viewport_side(editor_name2);
+ const led = this.editor[this.lhsId];
+ const red = this.editor[this.rhsId];
+ const current_diff = this._current_diff;
+ const lhsvp = this._get_viewport_side(this.lhsId);
+ const rhsvp = this._get_viewport_side(this.rhsId);
Timer.start();
- led.operation(function() {
- for (var i = 0; i < changes.length; ++i) {
- var change = changes[i];
+ led.operation(() => {
+ for (let i = 0; i < changes.length; ++i) {
+ const change = changes[i];
if (!this._is_change_in_view('lhs', lhsvp, change)) {
// if the change is outside the viewport, skip
continue;
}
- var llf = change['lhs-line-from'] >= 0 ? change['lhs-line-from'] : 0;
- var llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
- var rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
- var rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
+ const llf = change['lhs-line-from'] >= 0 ? change['lhs-line-from'] : 0;
+ const llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
+ const rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
- var clazz = ['mergely', 'lhs', change['op'], 'cid-' + i];
+ const clazz = ['mergely', 'lhs', change.op, 'cid-' + i];
led.addLineClass(llf, 'background', 'start');
led.addLineClass(llt, 'background', 'end');
if (change['lhs-line-from'] < 0) {
clazz.push('empty');
}
- if (current_diff == i) {
+ if (current_diff === i) {
if (llf != llt) {
led.addLineClass(llf, 'background', 'current');
}
led.addLineClass(llt, 'background', 'current');
+ for (let j = llf; j <= llt; ++j) {
+ led.addLineClass(j, 'gutter', 'mergely current');
+ }
}
if (llf == 0 && llt == 0 && rlf == 0) {
led.addLineClass(llf, 'background', clazz.join(' '));
@@ -994,7 +981,7 @@ CodeMirrorDiffView.prototype._markup_changes = function (editor_name1, editor_na
}
else {
// apply change for each line in-between the changed lines
- for (var j = llf; j <= llt; ++j) {
+ for (let j = llf; j <= llt; ++j) {
led.addLineClass(j, 'background', clazz.join(' '));
led.addLineClass(j, 'background', clazz.join(' '));
}
@@ -1002,44 +989,45 @@ CodeMirrorDiffView.prototype._markup_changes = function (editor_name1, editor_na
if (!red.getOption('readOnly')) {
// add widgets to lhs, if rhs is not read only
- var rhs_button = self.merge_rhs_button.clone();
+ const rhs_button = this.merge_rhs_button.cloneNode(true);
if (rhs_button.button) {
//jquery-ui support
rhs_button.button({icons: {primary: 'ui-icon-triangle-1-e'}, text: false});
}
- rhs_button.addClass('merge-button');
- rhs_button.attr('id', 'merge-rhs-' + i);
- led.setGutterMarker(llf, 'merge', rhs_button.get(0));
+ rhs_button.id = `merge-rhs-${i}`;
+ led.setGutterMarker(llf, 'merge', rhs_button);
}
}
- }.bind(this));
+ });
this.trace('change', 'markup lhs-editor time', Timer.stop());
- red.operation(function() {
- for (var i = 0; i < changes.length; ++i) {
- var change = changes[i];
+ red.operation(() => {
+ for (let i = 0; i < changes.length; ++i) {
+ const change = changes[i];
if (!this._is_change_in_view('rhs', rhsvp, change)) {
// if the change is outside the viewport, skip
continue;
}
- var llf = change['lhs-line-from'] >= 0 ? change['lhs-line-from'] : 0;
- var llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
- var rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
- var rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
+ const llf = change['lhs-line-from'] >= 0 ? change['lhs-line-from'] : 0;
+ const rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
+ const rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
- var clazz = ['mergely', 'rhs', change['op'], 'cid-' + i];
+ const clazz = ['mergely', 'rhs', change.op, 'cid-' + i];
red.addLineClass(rlf, 'background', 'start');
red.addLineClass(rlt, 'background', 'end');
if (change['rhs-line-from'] < 0) {
clazz.push('empty');
}
- if (current_diff == i) {
+ if (current_diff === i) {
if (rlf != rlt) {
red.addLineClass(rlf, 'background', 'current');
}
red.addLineClass(rlt, 'background', 'current');
+ for (let j = rlf; j <= rlt; ++j) {
+ red.addLineClass(j, 'gutter', 'mergely current');
+ }
}
if (rlf == 0 && rlt == 0 && llf == 0) {
red.addLineClass(rlf, 'background', clazz.join(' '));
@@ -1047,7 +1035,7 @@ CodeMirrorDiffView.prototype._markup_changes = function (editor_name1, editor_na
}
else {
// apply change for each line in-between the changed lines
- for (var j = rlf; j <= rlt; ++j) {
+ for (let j = rlf; j <= rlt; ++j) {
red.addLineClass(j, 'background', clazz.join(' '));
red.addLineClass(j, 'background', clazz.join(' '));
}
@@ -1055,74 +1043,92 @@ CodeMirrorDiffView.prototype._markup_changes = function (editor_name1, editor_na
if (!led.getOption('readOnly')) {
// add widgets to rhs, if lhs is not read only
- var lhs_button = self.merge_lhs_button.clone();
+ const lhs_button = this.merge_lhs_button.cloneNode(true);
if (lhs_button.button) {
//jquery-ui support
lhs_button.button({icons: {primary: 'ui-icon-triangle-1-w'}, text: false});
}
- lhs_button.addClass('merge-button');
- lhs_button.attr('id', 'merge-lhs-' + i);
- red.setGutterMarker(rlf, 'merge', lhs_button.get(0));
+ // lhs_button.addClass('merge-button');
+ // lhs_button.attr('id', 'merge-lhs-' + i);
+ lhs_button.id = `merge-lhs-${i}`;
+ red.setGutterMarker(rlf, 'merge', lhs_button);
}
}
- }.bind(this));
+ });
this.trace('change', 'markup rhs-editor time', Timer.stop());
// mark text deleted, LCS changes
- var marktext = [], i, j, k, p;
- for (i = 0; this.settings.lcs && i < changes.length; ++i) {
- var change = changes[i];
- var llf = change['lhs-line-from'] >= 0 ? change['lhs-line-from'] : 0;
- var llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
- var rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
- var rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
+ const marktext = [];
+ for (let i = 0; this.settings.lcs && i < changes.length; ++i) {
+ const change = changes[i];
+ const llf = change['lhs-line-from'] >= 0 ? change['lhs-line-from'] : 0;
+ const llt = change['lhs-line-to'] >= 0 ? change['lhs-line-to'] : 0;
+ const rlf = change['rhs-line-from'] >= 0 ? change['rhs-line-from'] : 0;
+ const rlt = change['rhs-line-to'] >= 0 ? change['rhs-line-to'] : 0;
- if (change['op'] == 'd') {
+ if (change.op == 'd') {
// apply delete to cross-out (left-hand side only)
- var from = llf;
- var to = llt;
+ const from = llf;
+ const to = llt;
if (this._is_change_in_view('lhs', lhsvp, change)) {
// the change is within the viewport
- var to_ln = led.lineInfo(to);
+ const to_ln = led.lineInfo(to);
if (to_ln) {
marktext.push([led, {line:from, ch:0}, {line:to, ch:to_ln.text.length}, {className: 'mergely ch d lhs'}]);
}
}
}
- else if (change['op'] == 'c') {
+ else if (change.op == 'c') {
// apply LCS changes to each line
- for (j = llf, k = rlf;
+ for (let j = llf, k = rlf;
((j >= 0) && (j <= llt)) || ((k >= 0) && (k <= rlt));
++j, ++k) {
- var lhs_line, rhs_line;
+ let lhs_line;
+ let rhs_line;
if (k > rlt) {
// lhs continues past rhs, mark lhs as deleted
lhs_line = led.getLine( j );
+ if (!lhs_line) {
+ continue;
+ }
marktext.push([led, {line:j, ch:0}, {line:j, ch:lhs_line.length}, {className: 'mergely ch d lhs'}]);
continue;
}
if (j > llt) {
// rhs continues past lhs, mark rhs as added
rhs_line = red.getLine( k );
+ if (!rhs_line) {
+ continue;
+ }
marktext.push([red, {line:k, ch:0}, {line:k, ch:rhs_line.length}, {className: 'mergely ch a rhs'}]);
continue;
}
lhs_line = led.getLine( j );
rhs_line = red.getLine( k );
- var lcs = new LCS(lhs_line, rhs_line, {
+ const lcs = new LCS(lhs_line, rhs_line, {
ignoreaccents: !!this.settings.ignoreaccents,
ignorews: !!this.settings.ignorews
});
lcs.diff(
function added (from, to) {
if (self._is_change_in_view('rhs', rhsvp, change)) {
- marktext.push([red, {line:k, ch:from}, {line:k, ch:to}, {className: 'mergely ch a rhs'}]);
+ marktext.push([
+ red,
+ { line: k, ch: from },
+ { line: k, ch: to },
+ { className: 'mergely ch a rhs' }
+ ]);
}
},
function removed (from, to) {
if (self._is_change_in_view('lhs', lhsvp, change)) {
- marktext.push([led, {line:j, ch:from}, {line:j, ch:to}, {className: 'mergely ch d lhs'}]);
+ marktext.push([
+ led,
+ { line: j, ch: from },
+ { line: j, ch: to },
+ { className: 'mergely ch d lhs' }
+ ]);
}
}
);
@@ -1132,112 +1138,82 @@ CodeMirrorDiffView.prototype._markup_changes = function (editor_name1, editor_na
this.trace('change', 'LCS marktext time', Timer.stop());
// mark changes outside closure
- led.operation(function() {
+ led.operation(() => {
// apply lhs markup
- for (var i = 0; i < marktext.length; ++i) {
- var m = marktext[i];
+ for (let i = 0; i < marktext.length; ++i) {
+ const m = marktext[i];
if (m[0].doc.id != led.getDoc().id) continue;
- self.chfns[self.id + '-lhs'].push(m[0].markText(m[1], m[2], m[3]));
+ this.chfns[`${this.id}-lhs`].push(m[0].markText(m[1], m[2], m[3]));
}
});
- red.operation(function() {
+ red.operation(() => {
// apply lhs markup
- for (var i = 0; i < marktext.length; ++i) {
- var m = marktext[i];
+ for (let i = 0; i < marktext.length; ++i) {
+ const m = marktext[i];
if (m[0].doc.id != red.getDoc().id) continue;
- self.chfns[self.id + '-rhs'].push(m[0].markText(m[1], m[2], m[3]));
+ this.chfns[`${this.id}-rhs`].push(m[0].markText(m[1], m[2], m[3]));
}
});
this.trace('change', 'LCS markup time', Timer.stop());
+ // FIXME: this can be better
// merge buttons
- var ed = {lhs:led, rhs:red};
- this.element.find('.merge-button').on('click', function(ev){
+ const ed = {lhs:led, rhs:red};
+ this.element.find('.merge-button').on('click', (ev) => {
// side of mouseenter
- var side = 'rhs';
- var oside = 'lhs';
- var parent = jQuery(this).parents('#' + self.id + '-editor-lhs');
+ let side = 'rhs';
+ let oside = 'lhs';
+ const parent = jQuery(ev.target).parents(`#${this.id}-editor-lhs`);
if (parent.length) {
side = 'lhs';
oside = 'rhs';
}
- var pos = ed[side].coordsChar({left:ev.pageX, top:ev.pageY});
+ const pos = ed[side].coordsChar({
+ left: ev.pageX,
+ top: ev.pageY
+ });
// get the change id
- var cid = null;
- var info = ed[side].lineInfo(pos.line);
+ let cid = null;
+ const info = ed[side].lineInfo(pos.line);
jQuery.each(info.bgClass.split(' '), function(i, clazz) {
if (clazz.indexOf('cid-') == 0) {
cid = parseInt(clazz.split('-')[1], 10);
return false;
}
});
- var change = self.changes[cid];
- self._merge_change(change, side, oside);
+ const change = this.changes[cid];
+ this._merge_change(change, side, oside);
return false;
});
-
- // gutter markup that highlights all gutter line numbers for the current change.
- // cm doesn't give us the ability to style the line numbers directly.
- var lhsLineNumbers = jQuery('#' + this.id + '-lhs ~ .CodeMirror .CodeMirror-code .CodeMirror-linenumber.CodeMirror-gutter-elt');
- var rhsLineNumbers = jQuery('#' + this.id + '-rhs ~ .CodeMirror .CodeMirror-code .CodeMirror-linenumber.CodeMirror-gutter-elt');
- var jf, jt, i, j;
- rhsLineNumbers.removeClass('mergely current');
- lhsLineNumbers.removeClass('mergely current');
- var lhsvpFrom = parseInt(lhsLineNumbers.eq(0).text(), 10) - 1;
- var lhsvpTo = parseInt(lhsLineNumbers.eq(lhsLineNumbers.length - 1).text(), 10);
- var rhsvpFrom = parseInt(rhsLineNumbers.eq(0).text(), 10) - 1;
- var rhsvpTo = parseInt(rhsLineNumbers.eq(rhsLineNumbers.length - 1).text(), 10);
-
- for (i = 0; i < changes.length; ++i) {
- change = changes[i];
-
- if (current_diff == i && change.op !== 'a') {
- jf = change['lhs-line-from']
- jt = change['lhs-line-to'] + 1;
- for (j = jf; j < jt; ++j) {
- if (j >= lhsvpFrom && j <= lhsvpTo) {
- lhsLineNumbers.eq(j - lhsvpFrom).addClass('mergely current');
- }
- }
- }
- if (current_diff == i && change.op !== 'd') {
- jf = change['rhs-line-from']
- jt = change['rhs-line-to'] + 1;
- for (j = jf; j < jt; ++j) {
- if (j >= rhsvpFrom && j <= rhsvpTo) {
- rhsLineNumbers.eq(j - rhsvpFrom).addClass('mergely current');
- }
- }
- }
- }
-
this.trace('change', 'markup buttons time', Timer.stop());
};
CodeMirrorDiffView.prototype._merge_change = function(change, side, oside) {
- if (!change) return;
+ if (!change) {
+ return;
+ }
const { CodeMirror } = this;
- var led = this.editor[this.id+'-lhs'];
- var red = this.editor[this.id+'-rhs'];
- var ed = { lhs:led, rhs:red };
- var from = change[side + '-line-from'];
- var to = change[side + '-line-to'];
- var ofrom = change[oside + '-line-from'];
- var oto = change[oside + '-line-to'];
- var doc = ed[side].getDoc();
- var odoc = ed[oside].getDoc();
- var fromlen = from >= 0 ? doc.getLine(from).length + 1 : 0;
- var tolen = to >= 0 ? doc.getLine(to).length + 1 : 0;
- var otolen = oto >= 0 ? odoc.getLine(oto).length + 1 : 0;
- var ofromlen = ofrom >= 0 ? odoc.getLine(ofrom).length + 1 : 0;
- var text;
+ const led = this.editor[this.lhsId];
+ const red = this.editor[this.rhsId];
+ const ed = { lhs: led, rhs: red };
+ const from = change[`${side}-line-from`];
+ const to = change[`${side}-line-to`];
+ const ofrom = change[`${oside}-line-from`];
+ const oto = change[`${oside}-line-to`];
+ const doc = ed[side].getDoc();
+ const odoc = ed[oside].getDoc();
+ const fromlen = from >= 0 ? doc.getLine(from).length + 1 : 0;
+ const tolen = to >= 0 ? doc.getLine(to).length + 1 : 0;
+ const otolen = oto >= 0 ? odoc.getLine(oto).length + 1 : 0;
+ const ofromlen = ofrom >= 0 ? odoc.getLine(ofrom).length + 1 : 0;
- if (change['op'] === 'c') {
+ let text;
+ if (change.op === 'c') {
text = doc.getRange(CodeMirror.Pos(from, 0), CodeMirror.Pos(to, tolen));
odoc.replaceRange(text, CodeMirror.Pos(ofrom, 0), CodeMirror.Pos(oto, otolen));
- } else if ((oside === 'lhs' && change['op'] === 'd') || (oside === 'rhs' && change['op'] === 'a')) {
+ } else if ((oside === 'lhs' && change.op === 'd') || (oside === 'rhs' && change.op === 'a')) {
if (from > 0) {
text = doc.getRange(CodeMirror.Pos(from, fromlen), CodeMirror.Pos(to, tolen));
ofrom += 1;
@@ -1245,7 +1221,7 @@ CodeMirrorDiffView.prototype._merge_change = function(change, side, oside) {
text = doc.getRange(CodeMirror.Pos(0, 0), CodeMirror.Pos(to + 1, 0));
}
odoc.replaceRange(text, CodeMirror.Pos(ofrom - 1, 0), CodeMirror.Pos(oto + 1, 0));
- } else if ((oside === 'rhs' && change['op'] === 'd') || (oside === 'lhs' && change['op'] === 'a')) {
+ } else if ((oside === 'rhs' && change.op === 'd') || (oside === 'lhs' && change.op === 'a')) {
if (from > 0) {
fromlen = doc.getLine(from - 1).length + 1;
text = doc.getRange(CodeMirror.Pos(from - 1, fromlen), CodeMirror.Pos(to, tolen));
@@ -1260,23 +1236,23 @@ CodeMirrorDiffView.prototype._merge_change = function(change, side, oside) {
this._scroll_to_change(change);
};
-CodeMirrorDiffView.prototype._draw_info = function(editor_name1, editor_name2) {
+CodeMirrorDiffView.prototype._draw_info = function() {
const { jQuery } = this;
- var visible_page_height = jQuery(this.editor[editor_name1].getScrollerElement()).height() + 17; // fudged
- var gutter_height = jQuery(this.editor[editor_name1].getScrollerElement()).children(':first-child').height();
- var dcanvas = document.getElementById(editor_name1 + '-' + editor_name2 + '-canvas');
- if (dcanvas == undefined) throw 'Failed to find: ' + editor_name1 + '-' + editor_name2 + '-canvas';
- var clhs = this.element.find('#' + this.id + '-lhs-margin');
- var crhs = this.element.find('#' + this.id + '-rhs-margin');
+ const visible_page_height = jQuery(this.editor[this.lhsId].getScrollerElement()).height() + 17; // fudged
+ const gutter_height = jQuery(this.editor[this.lhsId].getScrollerElement()).children(':first-child').height();
+ const dcanvas = document.getElementById(this.lhsId + '-' + this.rhsId + '-canvas');
+ if (dcanvas == undefined) throw 'Failed to find: ' + this.lhsId + '-' + this.rhsId + '-canvas';
+ const clhs = this.element.find('#' + this.id + '-lhs-margin');
+ const crhs = this.element.find('#' + this.id + '-rhs-margin');
return {
visible_page_height: visible_page_height,
gutter_height: gutter_height,
visible_page_ratio: (visible_page_height / gutter_height),
margin_ratio: (visible_page_height / gutter_height),
- lhs_scroller: jQuery(this.editor[editor_name1].getScrollerElement()),
- rhs_scroller: jQuery(this.editor[editor_name2].getScrollerElement()),
- lhs_lines: this.editor[editor_name1].lineCount(),
- rhs_lines: this.editor[editor_name2].lineCount(),
+ lhs_scroller: jQuery(this.editor[this.lhsId].getScrollerElement()),
+ rhs_scroller: jQuery(this.editor[this.rhsId].getScrollerElement()),
+ lhs_lines: this.editor[this.lhsId].lineCount(),
+ rhs_lines: this.editor[this.rhsId].lineCount(),
dcanvas: dcanvas,
clhs: clhs,
crhs: crhs,
@@ -1285,14 +1261,14 @@ CodeMirrorDiffView.prototype._draw_info = function(editor_name1, editor_name2) {
};
};
-CodeMirrorDiffView.prototype._draw_diff = function(editor_name1, editor_name2, changes) {
+CodeMirrorDiffView.prototype._draw_diff = function(changes) {
const { jQuery } = this;
- var ex = this._draw_info(editor_name1, editor_name2);
- var mcanvas_lhs = ex.clhs.get(0);
- var mcanvas_rhs = ex.crhs.get(0);
- var ctx = ex.dcanvas.getContext('2d');
- var ctx_lhs = mcanvas_lhs.getContext('2d');
- var ctx_rhs = mcanvas_rhs.getContext('2d');
+ const ex = this._draw_info();
+ const mcanvas_lhs = ex.clhs.get(0);
+ const mcanvas_rhs = ex.crhs.get(0);
+ const ctx = ex.dcanvas.getContext('2d');
+ const ctx_lhs = mcanvas_lhs.getContext('2d');
+ const ctx_rhs = mcanvas_rhs.getContext('2d');
this.trace('draw', 'visible_page_height', ex.visible_page_height);
this.trace('draw', 'gutter_height', ex.gutter_height);
@@ -1312,29 +1288,37 @@ CodeMirrorDiffView.prototype._draw_diff = function(editor_name1, editor_name2, c
ctx_lhs.strokeStyle = '#888';
ctx_lhs.fillRect(0, 0, 6.5, ex.visible_page_height);
ctx_lhs.strokeRect(0, 0, 6.5, ex.visible_page_height);
+ ctx_lhs.stroke();
ctx_rhs.beginPath();
ctx_rhs.fillStyle = this.settings.bgcolor;
ctx_rhs.strokeStyle = '#888';
ctx_rhs.fillRect(0, 0, 6.5, ex.visible_page_height);
ctx_rhs.strokeRect(0, 0, 6.5, ex.visible_page_height);
+ ctx_rhs.stroke();
- var lhsvp = this._get_viewport_side(editor_name1);
- var rhsvp = this._get_viewport_side(editor_name2);
+ const lhsvp = this._get_viewport_side(this.lhsId);
+ const rhsvp = this._get_viewport_side(this.rhsId);
- for (var i = 0; i < changes.length; ++i) {
- var change = changes[i];
- var fill = this.settings.fgcolor[change['op']];
+ for (let i = 0; i < changes.length; ++i) {
+ const change = changes[i];
+ if (!this._is_change_in_view('lhs', lhsvp, change) &&
+ !this._is_change_in_view('rhs', rhsvp, change)) {
+ // if the change is outside the viewport, skip
+ continue;
+ }
+
+ const fill = this.settings.fgcolor[change.op];
if (this._current_diff === i) {
fill = this.current_diff_color;
}
this.trace('draw', change);
// margin indicators
- var lhs_y_start = ((change['lhs-y-start'] + ex.lhs_scroller.scrollTop()) * ex.visible_page_ratio);
- var lhs_y_end = ((change['lhs-y-end'] + ex.lhs_scroller.scrollTop()) * ex.visible_page_ratio) + 1;
- var rhs_y_start = ((change['rhs-y-start'] + ex.rhs_scroller.scrollTop()) * ex.visible_page_ratio);
- var rhs_y_end = ((change['rhs-y-end'] + ex.rhs_scroller.scrollTop()) * ex.visible_page_ratio) + 1;
+ const lhs_y_start = ((change['lhs-y-start'] + ex.lhs_scroller.scrollTop()) * ex.visible_page_ratio);
+ const lhs_y_end = ((change['lhs-y-end'] + ex.lhs_scroller.scrollTop()) * ex.visible_page_ratio) + 1;
+ const rhs_y_start = ((change['rhs-y-start'] + ex.rhs_scroller.scrollTop()) * ex.visible_page_ratio);
+ const rhs_y_end = ((change['rhs-y-end'] + ex.rhs_scroller.scrollTop()) * ex.visible_page_ratio) + 1;
this.trace('draw', 'marker calculated', lhs_y_start, lhs_y_end, rhs_y_start, rhs_y_end);
ctx_lhs.beginPath();
@@ -1343,6 +1327,7 @@ CodeMirrorDiffView.prototype._draw_diff = function(editor_name1, editor_name2, c
ctx_lhs.lineWidth = 0.5;
ctx_lhs.fillRect(1.5, lhs_y_start, 4.5, Math.max(lhs_y_end - lhs_y_start, 5));
ctx_lhs.strokeRect(1.5, lhs_y_start, 4.5, Math.max(lhs_y_end - lhs_y_start, 5));
+ ctx_lhs.stroke();
ctx_rhs.beginPath();
ctx_rhs.fillStyle = fill;
@@ -1350,29 +1335,24 @@ CodeMirrorDiffView.prototype._draw_diff = function(editor_name1, editor_name2, c
ctx_rhs.lineWidth = 0.5;
ctx_rhs.fillRect(1.5, rhs_y_start, 4.5, Math.max(rhs_y_end - rhs_y_start, 5));
ctx_rhs.strokeRect(1.5, rhs_y_start, 4.5, Math.max(rhs_y_end - rhs_y_start, 5));
-
- if (!this._is_change_in_view('lhs', lhsvp, change) &&
- !this._is_change_in_view('rhs', rhsvp, change)) {
- // if the change is outside the viewport, skip
- continue;
- }
+ ctx_rhs.stroke();
lhs_y_start = change['lhs-y-start'];
lhs_y_end = change['lhs-y-end'];
rhs_y_start = change['rhs-y-start'];
rhs_y_end = change['rhs-y-end'];
- var radius = 3;
+ const radius = 3;
// draw left box
ctx.beginPath();
ctx.strokeStyle = fill;
- ctx.lineWidth = (this._current_diff==i) ? 1.5 : 1;
+ ctx.lineWidth = (this._current_diff === i) ? 1.5 : 1;
- var rectWidth = this.draw_lhs_width;
- var rectHeight = lhs_y_end - lhs_y_start - 1;
- var rectX = this.draw_lhs_min;
- var rectY = lhs_y_start;
+ const rectWidth = this.draw_lhs_width;
+ const rectHeight = lhs_y_end - lhs_y_start - 1;
+ const rectX = this.draw_lhs_min;
+ const rectY = lhs_y_start;
// top and top top-right corner
// draw left box
@@ -1421,10 +1401,10 @@ CodeMirrorDiffView.prototype._draw_diff = function(editor_name1, editor_name2, c
ctx.stroke();
// connect boxes
- var cx = this.draw_lhs_min + this.draw_lhs_width;
- var cy = lhs_y_start + (lhs_y_end + 1 - lhs_y_start) / 2.0;
- var dx = this.draw_rhs_max - this.draw_rhs_width;
- var dy = rhs_y_start + (rhs_y_end + 1 - rhs_y_start) / 2.0;
+ const cx = this.draw_lhs_min + this.draw_lhs_width;
+ const cy = lhs_y_start + (lhs_y_end + 1 - lhs_y_start) / 2.0;
+ const dx = this.draw_rhs_max - this.draw_rhs_width;
+ const dy = rhs_y_start + (rhs_y_end + 1 - rhs_y_start) / 2.0;
ctx.moveTo(cx, cy);
if (cy == dy) {
ctx.lineTo(dx, dy);
@@ -1443,10 +1423,10 @@ CodeMirrorDiffView.prototype._draw_diff = function(editor_name1, editor_name2, c
ctx_lhs.fillStyle = this.settings.vpcolor;
ctx_rhs.fillStyle = this.settings.vpcolor;
- var lto = ex.clhs.height() * ex.visible_page_ratio;
- var lfrom = (ex.lhs_scroller.scrollTop() / ex.gutter_height) * ex.clhs.height();
- var rto = ex.crhs.height() * ex.visible_page_ratio;
- var rfrom = (ex.rhs_scroller.scrollTop() / ex.gutter_height) * ex.crhs.height();
+ const lto = ex.clhs.height() * ex.visible_page_ratio;
+ const lfrom = (ex.lhs_scroller.scrollTop() / ex.gutter_height) * ex.clhs.height();
+ const rto = ex.crhs.height() * ex.visible_page_ratio;
+ const rfrom = (ex.rhs_scroller.scrollTop() / ex.gutter_height) * ex.crhs.height();
this.trace('draw', 'cls.height', ex.clhs.height());
this.trace('draw', 'lhs_scroller.scrollTop()', ex.lhs_scroller.scrollTop());
this.trace('draw', 'gutter_height', ex.gutter_height);
@@ -1458,13 +1438,13 @@ CodeMirrorDiffView.prototype._draw_diff = function(editor_name1, editor_name2, c
ctx_rhs.fillRect(1.5, rfrom, 4.5, rto);
ex.clhs.click(function (ev) {
- var y = ev.pageY - ex.lhs_xyoffset.top - (lto / 2);
- var sto = Math.max(0, (y / mcanvas_lhs.height) * ex.lhs_scroller.get(0).scrollHeight);
+ const y = ev.pageY - ex.lhs_xyoffset.top - (lto / 2);
+ const sto = Math.max(0, (y / mcanvas_lhs.height) * ex.lhs_scroller.get(0).scrollHeight);
ex.lhs_scroller.scrollTop(sto);
});
ex.crhs.click(function (ev) {
- var y = ev.pageY - ex.rhs_xyoffset.top - (rto / 2);
- var sto = Math.max(0, (y / mcanvas_rhs.height) * ex.rhs_scroller.get(0).scrollHeight);
+ const y = ev.pageY - ex.rhs_xyoffset.top - (rto / 2);
+ const sto = Math.max(0, (y / mcanvas_rhs.height) * ex.rhs_scroller.get(0).scrollHeight);
ex.rhs_scroller.scrollTop(sto);
});
};
@@ -1476,4 +1456,51 @@ CodeMirrorDiffView.prototype.trace = function(name) {
}
}
+/**
+ * @param {String} HTML representing a single element
+ * @return {Element}
+ */
+function htmlToElement(html) {
+ var template = document.createElement('template');
+ html = html.trim(); // Never return a text node of whitespace as the result
+ template.innerHTML = html;
+ return template.content.firstChild;
+}
+
+function getMarginTemplate({ id, side }) {
+ return `\
+
+
+
;`;
+}
+
+function getEditorTemplate({ id, side }) {
+ return `\
+
+
+
`;
+}
+
+function getCenterCanvasTemplate({ id }) {
+ return `\
+
+
+
`;
+}
+
+function getSplash({ icon, notice, left }) {
+ return `\
+
+
+ 
+ This software is a Combined Work using Mergely and is covered by the
+ ${notice} license. For the full license, see
+ http://www.mergely.com/license.
+
+
`;
+}
+
module.exports = CodeMirrorDiffView;
diff --git a/src/mergely.css b/src/mergely.css
index 23cf4ec..7159f1e 100644
--- a/src/mergely.css
+++ b/src/mergely.css
@@ -1,8 +1,8 @@
/* required */
-.mergely-column textarea { width: 80px; height: 200px; }
-.mergely-column { float: left; }
-.mergely-margin { float: left; }
-.mergely-canvas { float: left; width: 28px; }
+.mergely-editor .mergely-column textarea { width: 80px; height: 200px; }
+.mergely-editor .mergely-column { float: left; }
+.mergely-editor .mergely-margin { float: left; }
+.mergely-editor .mergely-canvas { float: left; width: 28px; }
/* resizeable */
.mergely-resizer { width: 100%; height: 100%; }
@@ -10,42 +10,45 @@
.mergely-full-screen-8 { position: absolute; top: 8px; bottom: 8px; left: 8px; right: 8px; overflow: hidden; }
/* style configuration */
-.mergely-column { border: 1px solid #ccc; }
-.mergely-active { border: 1px solid #a3d1ff; }
+.mergely-editor .mergely-column { border: 1px solid #ccc; }
+.mergely-editor .mergely-active { border: 1px solid #a3d1ff; }
-.mergely.a,.mergely.d,.mergely.c { color: #000; }
+.mergely-editor .mergely.a,
+.mergely-editor .mergely.d,
+.mergely-editor .mergely.c { color: #000; }
-.mergely.a.rhs.start { border-top: 1px solid #a3d1ff; }
-.mergely.a.lhs.start.end,
-.mergely.a.rhs.end { border-bottom: 1px solid #a3d1ff; }
-.mergely.a.rhs { background-color: #ddeeff; }
-.mergely.a.lhs.start.end.first { border-bottom-width: 0; border-top: 1px solid #a3d1ff; }
+.mergely-editor .mergely.a.rhs.start { border-top: 1px solid #a3d1ff; }
+.mergely-editor .mergely.a.lhs.start.end,
+.mergely-editor .mergely.a.rhs.end { border-bottom: 1px solid #a3d1ff; }
+.mergely-editor .mergely.a.rhs { background-color: #ddeeff; }
+.mergely-editor .mergely.a.lhs.start.end.first { border-bottom-width: 0; border-top: 1px solid #a3d1ff; }
-.mergely.d.lhs { background-color: #ffe9e9; }
-.mergely.d.lhs.end,
-.mergely.d.rhs.start.end { border-bottom: 1px solid #f8e8e8; }
-.mergely.d.rhs.start.end.first { border-bottom-width: 0; border-top: 1px solid #f8e8e8; }
-.mergely.d.lhs.start { border-top: 1px solid #f8e8e8; }
+.mergely-editor .mergely.d.lhs { background-color: #ffe9e9; }
+.mergely-editor .mergely.d.lhs.end,
+.mergely-editor .mergely.d.rhs.start.end { border-bottom: 1px solid #f8e8e8; }
+.mergely-editor .mergely.d.rhs.start.end.first { border-bottom-width: 0; border-top: 1px solid #f8e8e8; }
+.mergely-editor .mergely.d.lhs.start { border-top: 1px solid #f8e8e8; }
-.mergely.c.lhs,
-.mergely.c.rhs { background-color: #fafafa; }
-.mergely.c.lhs.start,
-.mergely.c.rhs.start { border-top: 1px solid #a3a3a3; }
-.mergely.c.lhs.end,
-.mergely.c.rhs.end { border-bottom: 1px solid #a3a3a3; }
+.mergely-editor .mergely.c.lhs,
+.mergely-editor .mergely.c.rhs { background-color: #fafafa; }
+.mergely-editor .mergely.c.lhs.start,
+.mergely-editor .mergely.c.rhs.start { border-top: 1px solid #a3a3a3; }
+.mergely-editor .mergely.c.lhs.end,
+.mergely-editor .mergely.c.rhs.end { border-bottom: 1px solid #a3a3a3; }
-.mergely.ch.a.rhs { background-color: #ddeeff; }
-.mergely.ch.d.lhs { background-color: #ffe9e9; text-decoration: line-through; color: red !important; }
+.mergely-editor .mergely.ch.a.rhs { background-color: #ddeeff; }
+.mergely-editor .mergely.ch.d.lhs { background-color: #ffe9e9; text-decoration: line-through; color: red !important; }
-.mergely.current.start { border-top: 1px solid #000 !important; }
-.mergely.current.end { border-bottom: 1px solid #000 !important; }
-.mergely.current.lhs.a.start.end,
-.mergely.current.rhs.d.start.end { border-top-width: 0 !important; }
+.mergely-editor .mergely.current.start { border-top: 1px solid #000 !important; }
+.mergely-editor .mergely.current.end { border-bottom: 1px solid #000 !important; }
+.mergely-editor .mergely.current.lhs.a.start.end,
+.mergely-editor .mergely.current.rhs.d.start.end { border-top-width: 0 !important; }
-.mergely.current.lhs.a.start.end.empty,
-.mergely.current.rhs.d.start.end.empty { border-top-width: 1px !important; border-bottom-width: 0px !important; }
+.mergely-editor .mergely.current.lhs.a.start.end.empty,
+.mergely-editor .mergely.current.rhs.d.start.end.empty { border-top-width: 1px !important; border-bottom-width: 0px !important; }
-.mergely.current.CodeMirror-linenumber { color: #F9F9F9; font-weight: bold; background-color: #777; }
-.CodeMirror-linenumber { cursor: pointer; }
-.CodeMirror-code { color: #717171; }
-span.CodeMirror-selectedtext { background: none !important; }
+.mergely-editor .CodeMirror-linenumber { cursor: pointer; }
+.mergely-editor .CodeMirror-code { color: #717171; }
+.mergely-editor .mergely.current.CodeMirror-gutter-background { background-color: #777; }
+.mergely-editor .mergely.current .CodeMirror-linenumber { color: #F9F9F9; color: #F9F9F9; font-weight: bold; }
+.mergely-editor span.CodeMirror-selectedtext { background: none !important; }
diff --git a/src/mergely.js b/src/mergely.js
index fd36ebf..9d57db8 100644
--- a/src/mergely.js
+++ b/src/mergely.js
@@ -6,7 +6,7 @@ const diff = require('./diff');
const LCS = require('./lcs');
const CodeMirrorDiffView = require('./diff-view');
-var Mgly = {};
+const Mgly = {};
Mgly.diff = diff;
@@ -15,8 +15,8 @@ Mgly.LCS = LCS;
Mgly.CodeMirrorDiffView = CodeMirrorDiffView;
Mgly.sizeOf = function(obj) {
- var size = 0, key;
- for (key in obj) {
+ let size = 0;
+ for (const key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;