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.
});
-
+
+
+
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;