Played with ajax.html.

It's probably no longer simple enough as an example. On the other hand it has a nice drag and drop feature. I couldn't make the "ignorews" checkbos work.

I had to update codemirror.css to have the texteditor height match the container. I tested using Opera browser and there seems to be no autosizing.

examples/ajax.html

@@ -13,40 +13,116 @@ This example demonstrates how to set left and right editors using ajax.
 
 	<!-- Requires jQuery -->
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
-	
+
 	<!-- Requires CodeMirror -->
 	<script type="text/javascript" src="../lib/codemirror.js"></script>
 	<link type="text/css" rel="stylesheet" href="../lib/codemirror.css" />
-	
+
 	<!-- Requires Mergely -->
 	<script type="text/javascript" src="../lib/mergely.js"></script>
 	<link type="text/css" rel="stylesheet" href="../lib/mergely.css" />
-	
+
+	<style type='text/css'>
+		.drop_zone {
+			border: 2px dashed #BBBBBB;
+			border-radius: 5px 5px 5px 5px;
+			color: #BBBBBB;
+			padding: 10px 25px;
+			text-align: center;
+			align: center;
+			width: 80%;
+		}
+	</style>
 	<script type="text/javascript">
 
-        $(document).ready(function () {
+		$(document).ready(function () {
 			$('#compare').mergely({
 				cmsettings: { readOnly: false },
 			});
+			var lhs_url = 'lhs.txt';
+			var rhs_url = 'rhs.txt'
 			$.ajax({
 				type: 'GET', async: true, dataType: 'text',
-				url: 'lhs.txt',
+				url: lhs_url,
 				success: function (response) {
+					$('#path-lhs').text(lhs_url);
 					$('#compare').mergely('lhs', response);
 				}
 			});
 			$.ajax({
 				type: 'GET', async: true, dataType: 'text',
-				url: 'rhs.txt',
+				url: rhs_url,
 				success: function (response) {
+					$('#path-rhs').text(rhs_url);
 					$('#compare').mergely('rhs', response);
 				}
 			});
+
+			function checkFileList(files) {
+				if (typeof window.FileReader !== 'function')
+					error_msg("The file API isn't supported on this browser yet.");
+
+				if (files.length>0) readFile(files[0], "lhs");
+				if (files.length>1) readFile(files[1], "rhs");
+			}
+
+			function readFile(file, side) {
+				var reader = new FileReader();
+				reader.onload = function file_onload() {
+					// document.getElementById('td1').innerHTML = ..
+					$('#path-'+side).text(file.name);
+					$('#compare').mergely(side, reader.result);
+				}
+				reader.readAsBinaryString(file);
+
+			}
+			function handleDragOver(evt) {
+				evt.stopPropagation();
+				evt.preventDefault();
+				evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
+			}
+			function handleFileSelect(evt) {
+				document.getElementById('drop_zone').visibility = "collapse";
+				evt.stopPropagation();
+				evt.preventDefault();
+				var files = evt.dataTransfer.files; // FileList object.
+				checkFileList(files);
+			}
+			var dropZone = document.getElementById('drop_zone');
+			document.body.addEventListener('dragover', handleDragOver, false);
+			document.body.addEventListener('drop', handleFileSelect, false);
+
+			function download_content(a, side) {
+				//a.innerHTML = "preparing content..";
+				var txt = $('#compare').mergely('get', side);
+				var datauri = "data:plain/text;charset=UTF-8," + encodeURIComponent(txt);
+				a.setAttribute('download', side+".txt");
+				a.setAttribute('href', datauri);
+				//a.innerHTML = "content ready.";
+			}
+			document.getElementById('save-lhs').addEventListener('mouseover', function() { download_content(this, "lhs"); }, false);
+			document.getElementById('save-rhs').addEventListener('mouseover', function() { download_content(this, "lhs"); }, false);
+			//document.getElementById('save-lhs').addEventListener('click', function() { download_content(this, "lhs"); }, false);
+			//document.getElementById('save-rhs').addEventListener('click', function() { download_content(this, "lhs"); }, false);
+
+			document.getElementById('ignorews').addEventListener('change', function() {
+				$('#compare').mergely('options', { ignorews: this.checked });
+			}, false);
+
 		});
 	</script>
 </head>
 <body>
+	<table  style="width: 100%;"><tr>
+		<td style="width: 50%;"><div id="drop_zone" class="drop_zone">Drop files here</div></td>
+		<td style="width: 50%;"><input type="checkbox" id="ignorews">ignore witespaces</td>
+	</tr></table>
+	<br/>
 
+	<table  style="width: 100%;"><tr>
+		<td style="width: 50%;"><tt id="path-lhs"></tt> &nbsp; <a id="save-lhs" class="save-link" href="#">save</a></td>
+		<td style="width: 50%;"><tt id="path-rhs"></tt> &nbsp; <a id="save-rhs" class="save-link" href="#">save</a></td>
+	</tr></table>
 	<div id="mergely-resizer">
 		<div id="compare">
 		</div>

lib/codemirror.css

@@ -3,7 +3,7 @@
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
-  height: 300px;
+  height: 400px;
 }
 .CodeMirror-scroll {
   /* Set scrolling behaviour here */

lib/mergely.js

@@ -725,7 +725,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 
 				self.settings.current_diff++;
 				self.settings.current_diff = Math.min(self.settings.current_diff, changes.length-1);
-				scroll_to_change(changes[self.settings.current_diff]);
+				self._scroll_to_change(changes[self.settings.current_diff]);
 
 				self._changed(self.id + '-lhs', self.id + '-rhs');
 				break;
@@ -737,7 +737,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 
 				self.settings.current_diff--;
 				self.settings.current_diff = Math.max(self.settings.current_diff, 0);
-				scroll_to_change(changes[self.settings.current_diff]);
+				self._scroll_to_change(changes[self.settings.current_diff]);
 
 				self._changed(self.id + '-lhs', self.id + '-rhs');
 				break;
@@ -773,11 +773,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			return changes;
 		}
 
-		function scroll_to_change(change) {
+	},
+
+	_scroll_to_change : function(change) {
+			var self = this;
 			var led = self.editor[self.id+'-lhs'];
 			var red = self.editor[self.id+'-rhs'];
 
-			var yref = led.getScrollerElement().offsetHeight * 1/2; // center between 0 and 1/2
+			var yref = led.getScrollerElement().offsetHeight * 1/2; // center between >0 and 1/2
 
 			// using directly CodeMirror breaks canvas alignment
 			// var ly = led.charCoords({line: Math.max(change["lhs-line-from"],0), ch: 0}, "local").top;
@@ -790,7 +793,6 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			red.scrollTo(null, Math.max(change["rhs-y-start"]-yref, 0));
 
 			// right pane should simply follows
-		}
 	},
 
 	_scrolling: function(editor_name) {
@@ -949,6 +951,12 @@ 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
+			this.current_diff = 0;
+			this._scroll_to_change(this.changes[0]);
+		}
+		this.trace('change', 'scroll_to_change time', timer.stop());
 		this._calculate_offsets(editor_name1, editor_name2, this.changes);
 		this.trace('change', 'offsets time', timer.stop());
 		this._markup_changes(editor_name1, editor_name2, this.changes);