Update for 3.4.5

issue-69: invalidates changes before editor content is replaced

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "Mergely",
-  "version": "3.4.2",
+  "version": "3.4.3",
   "homepage": "https://github.com/wickedest/Mergely",
   "description": "Merge and diff documents online",
   "main": [
@@ -29,7 +29,7 @@
     "url": "git://github.com/wickedest/Mergely"
   },
   "dependencies": {
-    "mergely": "https://github.com/wickedest/Mergely.git#3.4.2",
+    "mergely": "https://github.com/wickedest/Mergely.git#3.4.3",
     "jquery": "<=2.1.3",
     "codemirror": "<=5.11.0"
   }

doc/index.html

@@ -60,7 +60,7 @@
 				<p>
 					Then, create a div for the editor:
 				</p>
-				<pre class="code">&lt;div id="compare"&gt;&lt;div&gt;</pre>
+				<pre class="code">&lt;div id="compare"&gt;&lt;/div&gt;</pre>
 				<p>
 					Then, initialize the 'compare' div with the mergely jquery plugin, setting
 					options as required:

editor/editor.js

@@ -114,6 +114,7 @@ $(document).ready(function() {
 	var optmap = {
 		au: 'autoupdate',
 		ws: 'ignorews',
+		cs: 'ignorecase',
 		sb: 'sidebar',
 		vp: 'viewport',
 		wl: 'wrap_lines',
@@ -223,6 +224,15 @@ $(document).ready(function() {
 				updateHistory(params);
 			}
 		},
+		'options-ignorecase': {
+			get: function() { return ed.mergely('options').ignorecase },
+			set: function(value) {
+				var cs = !ed.mergely('options').ignorecase;
+				ed.mergely('options', {ignorecase: cs});
+				var params = updateQueryStringParam('cs', cs ? 1 : 0, 0);
+				updateHistory(params);
+			}
+		},
 		'options-sidebars': {
 			get: function() { console.log('sidebar', this); return ed.mergely('options').sidebar },
 			set: function(value) {
@@ -237,7 +247,7 @@ $(document).ready(function() {
 			set: function(value) {
 				var vp = !ed.mergely('options').viewport;
 				ed.mergely('options', {viewport: vp});
-				var params = updateQueryStringParam('vp', vp ? 1 : 0, 1);
+				var params = updateQueryStringParam('vp', vp ? 1 : 0, 0);
 				updateHistory(params);
 			}
 		},
@@ -348,6 +358,7 @@ $(document).ready(function() {
 			'options-swapmargin',
 			'options-viewport',
 			'options-ignorews',
+			'options-ignorecase',
 			'options-wrap',
 			'options-linenumbers',
 			].indexOf(id) >= 0) {
@@ -664,24 +675,29 @@ $(document).ready(function() {
 	}
 	// Explicitly save/update a url parameter using HTML5's replaceState().
 	function updateQueryStringParam(key, value, defaultValue, urlQueryString) {
-		var newParam = key + '=' + value,
-			params = '?' + newParam;
-
-		// If the "search" string exists, then build params from it
-		if (!urlQueryString) {
-			urlQueryString = document.location.search;
+		urlQueryString = urlQueryString || document.location.search;
+		var parts = urlQueryString.replace(/^\?/, '').split(/&/), found = false;
+		for (var i in parts) {
+			if (parts[i].startsWith(key + '=')) {
+				found = true;
+				if (value === defaultValue) {
+					// value is default value, remove option
+					parts.splice(i, 1);
+				}
+				else {
+					// make new value
+					parts[i] = key + '=' + value;
+				}
+				break;
+			}
+			else if (parts[i].length === 0) {
+				parts.splice(i, 1);
+				break;
+			}
 		}
-		keyRegex = new RegExp('([\?&])' + key + '[^&]*');
-		if (value === defaultValue) {
-			params = urlQueryString.replace(keyRegex, '');
+		if (!found) {
+			parts.push(key + '=' + value);
 		}
-		else if (urlQueryString.match(keyRegex) !== null) {
-			// update if only if value exists
-			params = urlQueryString.replace(keyRegex, '$1' + newParam);
-		}
-		else { // Otherwise, add it to end of query string
-			params = urlQueryString + '&' + newParam;
-		}
-		return params;
+		return (parts.length) ? '?' + parts.join('&') : '';
 	}
 });

editor/editor.php

@@ -81,7 +81,7 @@ if (isset($_GET['debug'])) {
 }(document, 'script', 'facebook-jssdk'));</script>
 
 
-    <div id="banner"></div>
+    <a href="/"><div id="banner"></div></a>
     
     <!-- menu -->
     <ul id="main-menu">
@@ -140,6 +140,7 @@ if (isset($_GET['debug'])) {
             <ul>
                 <li id="options-wrap">Wrap lines</li>
                 <li id="options-ignorews">Ignore white space</li>
+                <li id="options-ignorecase">Ignore case</li>
                 <li class="separator"></li>
                 <li id="options-viewport" title="Improves performance for large files">Enable viewport</li>
                 <li id="options-sidebars" title="Improves performance for large files">Enable side bars</li>

lib/mergely.css

@@ -18,12 +18,12 @@
 .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: 0; border-top: 1px solid #a3d1ff; }
+.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: 0; border-top: 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.c.lhs,
@@ -39,7 +39,11 @@
 .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: 0 !important; }
+.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.current.CodeMirror-linenumber { color: #F9F9F9; font-weight: bold; background-color: #777; }
 .CodeMirror-linenumber { cursor: pointer; }
 .CodeMirror-code { color: #717171; }

lib/mergely.js

@@ -1,4 +1,4 @@
-"use strict"; 
+"use strict";
 
 (function( window, document, jQuery, CodeMirror ){
 
@@ -9,7 +9,7 @@ Mgly.Timer = function(){
 	self.start = function() { self.t0 = new Date().getTime(); };
 	self.stop = function() {
 		var t1 = new Date().getTime();
-		var d = t1 - self.t0; 
+		var d = t1 - self.t0;
 		self.t0 = t1;
 		return d;
 	};
@@ -126,6 +126,9 @@ jQuery.extend(Mgly.CodeifyText.prototype, {
 			if (this.options.ignorews) {
 				line = line.replace(/\s+/g, '');
 			}
+			if (this.options.ignorecase) {
+				line = line.toLowerCase();
+			}
 			var aCode = this._diff_codes[line];
 			if (aCode != undefined) {
 				ctx.codes[i] = aCode;
@@ -177,11 +180,11 @@ jQuery.extend(Mgly.diff.prototype, {
 			var change = 'c';
 			if (item.lhs_deleted_count == 0 && item.rhs_inserted_count > 0) change = 'a';
 			else if (item.lhs_deleted_count > 0 && item.rhs_inserted_count == 0) change = 'd';
-			
+
 			if (item.lhs_deleted_count == 1) lhs_str = item.lhs_start + 1;
 			else if (item.lhs_deleted_count == 0) lhs_str = item.lhs_start;
 			else lhs_str = (item.lhs_start + 1) + ',' + (item.lhs_start + item.lhs_deleted_count);
-			
+
 			if (item.rhs_inserted_count == 1) rhs_str = item.rhs_start + 1;
 			else if (item.rhs_inserted_count == 0) rhs_str = item.rhs_start;
 			else rhs_str = (item.rhs_start + 1) + ',' + (item.rhs_start + item.rhs_inserted_count);
@@ -373,7 +376,7 @@ jQuery.extend(Mgly.mergely.prototype, {
 Mgly.CodeMirrorDiffView = function(el, options) {
 	CodeMirror.defineExtension('centerOnCursor', function() {
 		var coords = this.cursorCoords(null, 'local');
-		this.scrollTo(null, 
+		this.scrollTo(null,
 			(coords.y + coords.yBot) / 2 - (this.getScrollerElement().clientHeight / 2));
 	});
 	this.init(el, options);
@@ -391,6 +394,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			sidebar: true,
 			viewport: false,
 			ignorews: false,
+			ignorecase: false,
 			fadein: 'fast',
 			editor_width: '650px',
 			editor_height: '400px',
@@ -449,15 +453,15 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		};
 		this.lhs_cmsettings = {};
 		this.rhs_cmsettings = {};
-		
+
 		// save this element for faster queries
 		this.element = jQuery(el);
-		
+
 		// save options if there are any
 		if (options && options.cmsettings) jQuery.extend(this.lhs_cmsettings, cmsettings, options.cmsettings, options.lhs_cmsettings);
 		if (options && options.cmsettings) jQuery.extend(this.rhs_cmsettings, cmsettings, options.cmsettings, options.rhs_cmsettings);
 		//if (options) jQuery.extend(this.settings, options);
-		
+
 		// bind if the element is destroyed
 		this.element.bind('destroyed', jQuery.proxy(this.teardown, this));
 
@@ -480,9 +484,11 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.unbind();
 	},
 	lhs: function(text) {
+		this.changes = []; // invalidate existing changes
 		this.editor[this.id + '-lhs'].setValue(text);
 	},
 	rhs: function(text) {
+		this.changes = []; // invalidate existing changes
 		this.editor[this.id + '-rhs'].setValue(text);
 	},
 	update: function() {
@@ -494,10 +500,18 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 	scrollToDiff: function(direction) {
 		if (!this.changes.length) return;
 		if (direction == 'next') {
-			this._current_diff = Math.min(++this._current_diff, this.changes.length - 1);
+			if (this._current_diff == this.changes.length -1) {
+				this._current_diff = 0;
+			} else {
+				this._current_diff = Math.min(++this._current_diff, this.changes.length - 1);
+			}
 		}
 		else if (direction == 'prev') {
-			this._current_diff = Math.max(--this._current_diff, 0);
+			if (this._current_diff == 0) {
+				this._current_diff = this.changes.length - 1;
+			} else {
+				this._current_diff = Math.max(--this._current_diff, 0);
+			}
 		}
 		this._scroll_to_change(this.changes[this._current_diff]);
 		this._changed(this.id + '-lhs', this.id + '-rhs');
@@ -614,7 +628,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			this.prev_query[side] = query;
 		}
 		var cursor = this.cursor[this.id];
-		
+
 		if (cursor[direction]()) {
 			editor.setSelection(cursor.from(), cursor.to());
 		}
@@ -659,7 +673,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		}
 		this.merge_rhs_button = jQuery(merge_rhs_button);
 		this.merge_lhs_button = jQuery(merge_lhs_button);
-		
+
 		// create the textarea and canvas elements
 		var height = this.settings.editor_height;
 		var width = this.settings.editor_width;
@@ -679,7 +693,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		}
 
 		// get current diff border color
-		var color = $('<div style="display:none" class="mergely current start" />').appendTo('body').css('border-top-color');
+		var color = jQuery('<div style="display:none" class="mergely current start" />').appendTo('body').css('border-top-color');
 		this.current_diff_color = color;
 
 		// codemirror
@@ -784,7 +798,9 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		// 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);
-		led.scrollIntoView({line: change["lhs-line-to"]});
+		if (change["lhs-line-to"] >= 0) {
+			led.scrollIntoView({line: change["lhs-line-to"]});
+		}
 	},
 
 	_scrolling: function(editor_name) {
@@ -801,23 +817,23 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var midline = this.editor[editor_name].coordsChar({left:0, top:this.midway});
 		var top_to = scroller.scrollTop();
 		var left_to = scroller.scrollLeft();
-		
+
 		this.trace('scroll', 'side', editor_name);
 		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;
-			
+
 			// 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;
@@ -835,14 +851,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 							force_scroll = true;
 						}
 						else {
-							top_adjust += 
-								(change[this_side+'-y-end'] - change[this_side+'-y-start']) - 
+							top_adjust +=
+								(change[this_side+'-y-end'] - change[this_side+'-y-start']) -
 								(change[other_side+'-y-end'] - change[other_side+'-y-start']);
 						}
 					}
 				}
 			}
-			
+
 			var vp = this.editor[name].getViewport();
 			var scroll = true;
 			if (last_change) {
@@ -859,7 +875,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				this.editor[name].scrollTo(left_to, top_to - top_adjust);
 			}
 			else this.trace('scroll', 'not scrolling other side');
-			
+
 			if (this.settings.autoupdate) {
 				var timer = new Mgly.Timer();
 				this._calculate_offsets(editor_name1, editor_name2, this.changes);
@@ -915,12 +931,12 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			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');
-		
+
 		ctx_lhs.beginPath();
 		ctx_lhs.fillStyle = this.settings.bgcolor;
 		ctx_lhs.strokeStyle = '#888';
@@ -932,7 +948,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		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.beginPath();
 		ctx.fillStyle = '#fff';
 		ctx.fillRect(0, 0, this.draw_mid_width, ex.visible_page_height);
@@ -1010,16 +1026,16 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var 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 
+
+		// 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;
-		
+
 		// restore editor's scroll position
 		this.editor[editor_name1].scrollTo(null, saveY);
-		
+
 		this.draw_top_offset = 0.5 - top_offset;
 		return true;
 	},
@@ -1049,10 +1065,10 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var lhschc = this.editor[editor_name1].charCoords({line: 0});
 		var rhschc = this.editor[editor_name2].charCoords({line: 0});
 		var vp = this._get_viewport(editor_name1, editor_name2);
-		
+
 		for (var i = 0; i < changes.length; ++i) {
 			var change = changes[i];
-			
+
 			if (!this.settings.sidebar && !this._is_change_in_view(vp, change)) {
 				// if the change is outside the viewport, skip
 				delete change['lhs-y-start'];
@@ -1065,7 +1081,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			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;
-			
+
 			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
@@ -1076,7 +1092,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				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 };
@@ -1087,24 +1103,24 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 			else {
 				// If not using line-wrapping, we can calculate the line position
-				ls = { 
-					top: lhschc.top + llf * this.em_height, 
+				ls = {
+					top: lhschc.top + llf * this.em_height,
 					bottom: lhschc.bottom + llf * this.em_height + 2
 				};
 				le = {
-					top: lhschc.top + llt * this.em_height, 
+					top: lhschc.top + llt * this.em_height,
 					bottom: lhschc.bottom + llt * this.em_height + 2
 				};
 				rs = {
-					top: rhschc.top + rlf * this.em_height, 
+					top: rhschc.top + rlf * this.em_height,
 					bottom: rhschc.bottom + rlf * this.em_height + 2
 				};
 				re = {
-					top: rhschc.top + rlt * this.em_height, 
+					top: rhschc.top + rlt * this.em_height,
 					bottom: rhschc.bottom + rlt * this.em_height + 2
 				};
 			}
-			
+
 			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
@@ -1143,7 +1159,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 	},
 	_markup_changes: function (editor_name1, editor_name2, changes) {
 		this.element.find('.merge-button').remove(); //clear
-		
+
 		var self = this;
 		var led = this.editor[editor_name1];
 		var red = this.editor[editor_name2];
@@ -1157,11 +1173,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				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;
-				
+
 				var 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 (llf != llt) {
 						led.addLineClass(llf, 'background', 'current');
@@ -1179,7 +1198,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 						led.addLineClass(j, 'background', clazz.join(' '));
 					}
 				}
-				
+
 				if (!red.getOption('readOnly')) {
 					// add widgets to lhs, if rhs is not read only
 					var rhs_button = self.merge_rhs_button.clone();
@@ -1195,7 +1214,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		});
 
 		var vp = this._get_viewport(editor_name1, editor_name2);
-		
+
 		this.trace('change', 'markup lhs-editor time', timer.stop());
 		red.operation(function() {
 			for (var i = 0; i < changes.length; ++i) {
@@ -1204,15 +1223,18 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				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;
-				
+
 				if (!self._is_change_in_view(vp, change)) {
 					// if the change is outside the viewport, skip
 					continue;
 				}
-				
+
 				var 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 (rlf != rlt) {
@@ -1246,7 +1268,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 		});
 		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) {
@@ -1255,7 +1277,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			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;
-			
+
 			if (!this._is_change_in_view(vp, change)) {
 				// if the change is outside the viewport, skip
 				continue;
@@ -1271,7 +1293,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 			else if (change['op'] == 'c') {
 				// apply LCS changes to each line
-				for (j = llf, k = rlf, p = 0; 
+				for (j = llf, k = rlf, p = 0;
 					 ((j >= 0) && (j <= llt)) || ((k >= 0) && (k <= rlt));
 					 ++j, ++k) {
 					var lhs_line, rhs_line;
@@ -1302,7 +1324,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			}
 		}
 		this.trace('change', 'LCS marktext time', timer.stop());
-		
+
 		// mark changes outside closure
 		led.operation(function() {
 			// apply lhs markup
@@ -1322,7 +1344,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		});
 
 		this.trace('change', 'LCS markup time', timer.stop());
-		
+
 		// merge buttons
 		var ed = {lhs:led, rhs:red};
 		this.element.find('.merge-button').on('click', function(ev){
@@ -1351,8 +1373,8 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		});
 
 		// gutter markup
-		var lhsLineNumbers = $('#mergely-lhs ~ .CodeMirror').find('.CodeMirror-linenumber');
-		var rhsLineNumbers = $('#mergely-rhs ~ .CodeMirror').find('.CodeMirror-linenumber');
+		var lhsLineNumbers = jQuery('#mergely-lhs ~ .CodeMirror').find('.CodeMirror-linenumber');
+		var rhsLineNumbers = jQuery('#mergely-rhs ~ .CodeMirror').find('.CodeMirror-linenumber');
 		rhsLineNumbers.removeClass('mergely current');
 		lhsLineNumbers.removeClass('mergely current');
 		for (var i = 0; i < changes.length; ++i) {
@@ -1362,7 +1384,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				for (j = jf; j < jt; j++) {
 					var n = (j + 1).toString();
 					rhsLineNumbers
-						.filter(function(i, node) { return $(node).text() === n; })
+						.filter(function(i, node) { return jQuery(node).text() === n; })
 					.addClass('mergely current');
 				}
 			}
@@ -1371,8 +1393,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				jf = change['lhs-line-from'], jt = change['lhs-line-to'] + 1;
 				for (j = jf; j < jt; j++) {
 					var n = (j + 1).toString();
-					lhsLineNumbers
-						.filter(function(i, node) { return $(node).text() === n; })
+					lhsLineNumbers.filter(function(i, node) { return jQuery(node).text() === n; })
 					.addClass('mergely current');
 				}
 			}
@@ -1390,7 +1411,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var text = ed[side].getRange(
 			CodeMirror.Pos(change[side + '-line-from'], 0),
 			CodeMirror.Pos(change[side + '-line-to'] + 1, 0));
-		
+
 		if (change['op'] == 'c') {
 			ed[oside].replaceRange(text,
 				CodeMirror.Pos(change[oside + '-line-from'], 0),
@@ -1468,14 +1489,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.trace('draw', 'visible_page_ratio', ex.visible_page_ratio);
 		this.trace('draw', 'lhs-scroller-top', ex.lhs_scroller.scrollTop());
 		this.trace('draw', 'rhs-scroller-top', ex.rhs_scroller.scrollTop());
-		
+
 		jQuery.each(this.element.find('canvas'), function () {
 			jQuery(this).get(0).height = ex.visible_page_height;
 		});
-		
+
 		ex.clhs.unbind('click');
 		ex.crhs.unbind('click');
-		
+
 		ctx_lhs.beginPath();
 		ctx_lhs.fillStyle = this.settings.bgcolor;
 		ctx_lhs.strokeStyle = '#888';
@@ -1517,29 +1538,29 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			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(vp, change)) {
 				continue;
 			}
-			
+
 			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;
-			
+
 			// draw left box
 			ctx.beginPath();
 			ctx.strokeStyle = fill;
 			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;
 			// top and top top-right corner
-			
+
 			// draw left box
 			ctx.moveTo(rectX, rectY);
 			if (navigator.appName == 'Microsoft Internet Explorer') {
@@ -1560,7 +1581,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				ctx.lineTo(rectX, rectY + rectHeight);
 			}
 			ctx.stroke();
-			
+
 			rectWidth = this.draw_rhs_width;
 			rectHeight = rhs_y_end - rhs_y_start - 1;
 			rectX = this.draw_rhs_max;
@@ -1584,7 +1605,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				ctx.lineTo(rectX, rectY + rectHeight);
 			}
 			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;
@@ -1607,7 +1628,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		// visible window feedback
 		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;
@@ -1618,10 +1639,10 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		this.trace('draw', 'visible_page_ratio', ex.visible_page_ratio);
 		this.trace('draw', 'lhs from', lfrom, 'lhs to', lto);
 		this.trace('draw', 'rhs from', rfrom, 'rhs to', rto);
-		
+
 		ctx_lhs.fillRect(1.5, lfrom, 4.5, lto);
 		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);
@@ -1629,7 +1650,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		});
 		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);			
+			var sto = Math.max(0, (y / mcanvas_rhs.height) * ex.rhs_scroller.get(0).scrollHeight);
 			ex.rhs_scroller.scrollTop(sto);
 		});
 	},
@@ -1637,14 +1658,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		if(this.settings._debug.indexOf(name) >= 0) {
 			arguments[0] = name + ':';
 			console.log([].slice.apply(arguments));
-		} 
+		}
 	}
 });
 
 jQuery.pluginMaker = function(plugin) {
 	// add the plugin function as a jQuery plugin
 	jQuery.fn[plugin.prototype.name] = function(options) {
-		// get the arguments 
+		// get the arguments
 		var args = jQuery.makeArray(arguments),
 		after = args.slice(1);
 		var rc;