patch(#142): added examples README.md

Co-authored-by: Jamie Peabody <jpeabody@axway.com>

CHANGES.md

@@ -1,5 +1,14 @@
 # Changes
 
+## 4.2.4
+* patch: fixes [#142](https://github.com/wickedest/Mergely/issues/142).  Added README.md to examples.
+
+## 4.2.3
+* patch: fixes [#147](https://github.com/wickedest/Mergely/issues/147).  Fixes the css style for the currently selected change.
+
+## 4.2.2:
+* patch: fixes issue where initial change was not being set causing next/prev and merge actions to not work as expected.
+
 ## 4.2.1:
 * chore: updated dependencies, cleared security issues
 

examples/README.md

@@ -0,0 +1,32 @@
+# Mergely examples
+
+To run these examples, you need to run:
+
+```bash
+$ npm start
+```
+
+This runs Mergely in a hot dev-server for development.  
+
+## Main example
+http://localhost:8080
+
+Shows basic functionality.
+
+## Ajax example
+
+http://localhost:8080/examples/ajax.html
+
+Who still says "ajax" these days?  Anyway, this example demonstrates how to load your left-hand and right-hand sources from external URL, and also how to skin your own editor, and provide drop-file functionality.
+
+## Simple example
+
+This example demonstrates how to load your left-hand and right-hand sources from static text.
+
+http://localhost:8080/examples/simple.html
+
+## Size example
+
+This example demonstrates how to size your editors, and also how to have multiple editors on the same page.
+
+http://localhost:8080/examples/size.html

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mergely",
-  "version": "4.2.1",
+  "version": "4.2.4",
   "description": "A javascript UI for diff/merge",
   "directories": {
     "doc": "doc",

src/mergely.js

@@ -505,7 +505,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 	scrollToDiff: function(direction) {
 		if (!this.changes.length) return;
 		if (direction == 'next') {
-			if (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);
@@ -893,6 +893,11 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			this._skipscroll[editor_name] = false;
 			return;
 		}
+		if (!this.changes) {
+			// pasting a wide line can trigger scroll before changes
+			// are calculated
+			return;
+		}
 		var scroller = jQuery(this.editor[editor_name].getScrollerElement());
 		if (this.midway == undefined) {
 			this.midway = (scroller.height() / 2.0 + scroller.offset().top).toFixed(2);
@@ -1045,11 +1050,13 @@ 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 && this._initializing) {
+		if (this._current_diff === undefined && this.changes.length) {
 			// go to first difference on start-up where values are provided in
 			// settings.
 			this._current_diff = 0;
-			this._scroll_to_change(this.changes[0]);
+			if (this._initializing) {
+				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);
@@ -1466,8 +1473,8 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 
 		// 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('#mergely-lhs ~ .CodeMirror .CodeMirror-code .CodeMirror-linenumber.CodeMirror-gutter-elt');
-		var rhsLineNumbers = jQuery('#mergely-rhs ~ .CodeMirror .CodeMirror-code .CodeMirror-linenumber.CodeMirror-gutter-elt');
+		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');