From 572eb08aaadc08271914e8dcd0ffd732898fde8c Mon Sep 17 00:00:00 2001 From: Kljh Date: Sun, 17 Aug 2014 08:11:13 +0100 Subject: [PATCH] Morning clean up. Removed useless function get_changes. Moved current_diff out of this.settings (and along this.changes) Handle the case where comparing identical files (e.g. changes.length==0). ajax.html uses https for jquery so that it can be hosted on a https server. ajax.html uses full available screen width, auto height is trickier (note that call to _auto_height is commented out in mergely.js). --- examples/ajax.html | 9 ++++-- lib/codemirror.css | 2 +- lib/mergely.js | 68 ++++++++++++++++------------------------------ 3 files changed, 30 insertions(+), 49 deletions(-) diff --git a/examples/ajax.html b/examples/ajax.html index 16926f1..24e4489 100644 --- a/examples/ajax.html +++ b/examples/ajax.html @@ -12,7 +12,7 @@ This example demonstrates how to set left and right editors using ajax. - + @@ -37,6 +37,8 @@ This example demonstrates how to set left and right editors using ajax. $(document).ready(function () { $('#compare').mergely({ + width: 'auto', + height: 'auto', // containing div must be given a height cmsettings: { readOnly: false }, }); var lhs_url = 'lhs.txt'; @@ -112,7 +114,7 @@ This example demonstrates how to set left and right editors using ajax. }); - + @@ -123,7 +125,8 @@ This example demonstrates how to set left and right editors using ajax.
Drop files here
 ignore witespaces   save   save
-
+ +
diff --git a/lib/codemirror.css b/lib/codemirror.css index a831faa..8de0b19 100644 --- a/lib/codemirror.css +++ b/lib/codemirror.css @@ -3,7 +3,7 @@ .CodeMirror { /* Set height, width, borders, and global font properties here */ font-family: monospace; - height: 400px; + height: 300px; } .CodeMirror-scroll { /* Set scrolling behaviour here */ diff --git a/lib/mergely.js b/lib/mergely.js index dc6161a..af35d56 100644 --- a/lib/mergely.js +++ b/lib/mergely.js @@ -390,7 +390,6 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, { editor_height: '400px', resize_timeout: 500, change_timeout: 150, - current_diff: 0, // currently active difference, in 0 .. changes.length range. fgcolor: {a:'#4ba3fa',c:'#a3a3a3',d:'#ff7f7f', // color for differences (soft color) ca:'#4b73ff',cc:'#737373',cd:'#ff4f4f'}, // color for currently active difference (bright color) bgcolor: '#eee', @@ -399,7 +398,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, { rhs: function(setValue) { }, loaded: function() { }, //_auto_height: function(h) { return h - 20; }, - _auto_width: function(w) { return w; }, + _auto_width: function(w) { return w - 30; }, resize: function(init) { var scrollbar = init ? 16 : 0; var w = jQuery(el).parent().width() + scrollbar; @@ -720,42 +719,34 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, { case "Down": case "ArrowDown": case down_arrow: - // !! recalculating the changes !! - var changes = get_changes(); - - self.settings.current_diff++; - self.settings.current_diff = Math.min(self.settings.current_diff, changes.length-1); - self._scroll_to_change(changes[self.settings.current_diff]); + if (!self.changes.length) return; + self.current_diff++; + self.current_diff = Math.min(self.current_diff, self.changes.length-1); + self._scroll_to_change(self.changes[self.current_diff]); self._changed(self.id + '-lhs', self.id + '-rhs'); break; case "Up": case "ArrowUp": case up_arrow: - // !! recalculating the changes !! - var changes = get_changes(); - - self.settings.current_diff--; - self.settings.current_diff = Math.max(self.settings.current_diff, 0); - self._scroll_to_change(changes[self.settings.current_diff]); + if (!self.changes.length) return; + self.current_diff--; + self.current_diff = Math.max(self.current_diff, 0); + self._scroll_to_change(self.changes[self.current_diff]); self._changed(self.id + '-lhs', self.id + '-rhs'); break; case "Left": case "ArrowLeft": case left_arrow: - // !! recalculating the changes !! - var changes = get_changes(); - - self._merge_change(changes[self.settings.current_diff], "rhs", "lhs"); + if (!self.changes.length) return; + self._merge_change(self.changes[self.current_diff], "rhs", "lhs"); break; case "Right": case "ArrowRight": case right_arrow: - // !! recalculating the changes !! - var changes = get_changes(); - - self._merge_change(changes[self.settings.current_diff], "lhs", "rhs"); + if (!self.changes.length) return; + self._merge_change(self.changes[self.current_diff], "lhs", "rhs"); break; default: return; @@ -764,18 +755,10 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, { // Consume the event for suppressing "double action". event.preventDefault(); }); - - function get_changes() { - var lhs = self.editor[self.id+'-lhs'].getValue(); - var rhs = self.editor[self.id+'-rhs'].getValue(); - var d = new Mgly.diff(lhs, rhs, self.settings); - var changes = Mgly.DiffParser(d.normal_form()); - return changes; - } - }, _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']; @@ -951,8 +934,8 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, { this.trace('change', 'diff time', timer.stop()); this.changes = Mgly.DiffParser(d.normal_form()); this.trace('change', 'parse time', timer.stop()); - if (this.current_diff===undefined && this.changes.length!==0) { - // go to first differnece on start-up + if (this.current_diff===undefined) { + // go to first difference on start-up this.current_diff = 0; this._scroll_to_change(this.changes[0]); } @@ -1342,20 +1325,15 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, { } }); var change = self.changes[cid]; - - // kljh: not used - //var line = {lhs: ed['lhs'].lineInfo(llt), rhs: ed['rhs'].lineInfo(rlt)}; - self._merge_change(change, side, oside); return false; }); this.trace('change', 'markup buttons time', timer.stop()); }, _merge_change : function(change, side, oside) { - var editor_name1 = this.id + '-lhs'; - var editor_name2 = this.id + '-rhs'; - var led = this.editor[editor_name1]; - var red = this.editor[editor_name2]; + if (!change) return; + var led = this.editor[this.id+'-lhs']; + var red = this.editor[this.id+'-rhs']; var ed = {lhs:led, rhs:red}; @@ -1468,14 +1446,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, { this.trace('draw', 'marker calculated', lhs_y_start, lhs_y_end, rhs_y_start, rhs_y_end); ctx_lhs.beginPath(); - ctx_lhs.fillStyle = this.settings.fgcolor[(this.settings.current_diff==i?'c':'')+change['op']]; + ctx_lhs.fillStyle = this.settings.fgcolor[(this.current_diff==i?'c':'')+change['op']]; ctx_lhs.strokeStyle = '#000'; 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_rhs.beginPath(); - ctx_rhs.fillStyle = this.settings.fgcolor[(this.settings.current_diff==i?'c':'')+change['op']]; + ctx_rhs.fillStyle = this.settings.fgcolor[(this.current_diff==i?'c':'')+change['op']]; ctx_rhs.strokeStyle = '#000'; ctx_rhs.lineWidth = 0.5; ctx_rhs.fillRect(1.5, rhs_y_start, 4.5, Math.max(rhs_y_end - rhs_y_start, 5)); @@ -1494,8 +1472,8 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, { // draw left box ctx.beginPath(); - ctx.strokeStyle = this.settings.fgcolor[(this.settings.current_diff==i?'c':'')+change['op']]; - ctx.lineWidth = (this.settings.current_diff==i) ? 1.5 : 1; + ctx.strokeStyle = this.settings.fgcolor[(this.current_diff==i?'c':'')+change['op']]; + ctx.lineWidth = (this.current_diff==i) ? 1.5 : 1; var rectWidth = this.draw_lhs_width; var rectHeight = lhs_y_end - lhs_y_start - 1;