Updated to 3.3.10

bower.json

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

doc/index.html

@@ -110,6 +110,8 @@ $(document).ready(function () {
 					<dd>Ignore white-space. Defaults to <span class="code">false</span>.</dd>
 					<dt id="lcs">lcs</dt>
 					<dd>Enables/disables LCS computation for paragraphs (word-by-word changes).  Disabling can give a performance gain for large documents. Defaults to <span class="code">true</span>.</dd>
+					<dt id="line_numbers">line_numbers</dt>
+					<dd>Enables/disables line numbers.  Enabling line numbers will toggle the visibility of the line number margins. Defaults to <span class="code">true</span>.</dd>
 					<dt id="resize_timeout">resize_timeout</dt>
 					<dd>The timeout, after a resize, before Mergely auto-resizes.  Only used when autoresize enabled.  Defaults to <span class="code">500</span>.</dd>
 					<dt id="rhs_margin">rhs_margin</dt>
@@ -120,6 +122,8 @@ $(document).ready(function () {
 					<dd>The margin/viewport indicator color.  Defaults to <span class="code">'rgba(0, 0, 200, 0.5)'<span></dd>
 					<dt id="viewport">viewport</dt>
 					<dd>Enables/disables the viewport.  Enabling the viewport can give a performance gain for large documents. Defaults to <span class="code">false</span>.</dd>
+					<dt id="wrap_lines">wrap_lines</dt>
+					<dd>Enables/disables line wrapping.  Enabling wrapping will wrap text to fit the editors. Defaults to <span class="code">false</span>.</dd>
 				</dl>
 				
 				<h2>Callbacks</h2>

editor/editor.js

@@ -4,8 +4,12 @@ $(document).ready(function() {
 		window.location.search.substr(1).split('&').forEach(function(pair) {
 			if (pair === '') return;
 			var parts = pair.split('=');
-			if (parts[1] == 'true') parameters[parts[0]] = true;
+			if (parts.length === 2 && parts[1].search(/^(true|1)$/i) >= 0) {
-			else if (parts[1] == 'false') parameters[parts[0]] = false;
+				parameters[parts[0]] = true;
+			}
+			else if (parts.length === 2 && parts[1].search(/^(false|0)$/i) >= 0) {
+				parameters[parts[0]] = false;
+			}
 			else parameters[parts[0]] = parts[1] && decodeURIComponent(parts[1].replace(/\+/g, ' '));
 		});
 		return {
@@ -82,6 +86,9 @@ $(document).ready(function() {
 		return randomstring;
 	}
 
+	// body is pre-hidden for better rendering
+	$('body').css("visibility", "");
+
 	var ed = $('#mergely');
 	var menu = $('#main-menu');
 	var toolbar = $('#toolbar');
@@ -102,6 +109,56 @@ $(document).ready(function() {
 		crossdomainGET(ed, 'rhs', url);
 	}
 
+	// set query string options
+	var urloptions = {};
+	var optmap = {
+		au: 'autoupdate',
+		ws: 'ignorews',
+		sb: 'sidebar',
+		vp: 'viewport',
+		wl: 'wrap_lines',
+		ln: 'line_numbers'
+	};
+	var doopt = false;
+	for (var name in optmap) {
+		if (!optmap.hasOwnProperty(name)) continue;
+		if (parameters.get(name, null) !== null) {
+			urloptions[optmap[name]] = parameters.get(name);
+			doopt = true;
+		}
+	}
+	if (parameters.get('rm', null) !== null) {
+		// special-case url property
+		urloptions.rhs_margin = parameters.get('rm') ? 'left' : 'right';
+	}
+	if (doopt) {
+		// apply query-string options
+		ed.mergely('options', urloptions);
+	}
+
+	// set query string colors
+	// cb: change border
+	// cg: change background
+	// ab: added border
+	// ag: added background
+	// db: deleted border
+	// dg: deleted background
+	var color_defaults = {
+		cb: 'cccccc', cg: 'fafafa',
+		ab: 'a3d1ff', ag: 'ddeeff',
+		db: 'ff7f7f', dg: 'edc0c0'
+	};
+	applyParameterCss(false);
+
+	//history.pushState({}, null, '');
+
+	window.addEventListener('popstate', function(ev) {
+		if (ev.state) {
+			parameters = getParameters();
+			applyParameterCss(false);
+		}
+	});
+	
 	// Load
 	if (key.length == 8) {
 		$.when(
@@ -131,7 +188,7 @@ $(document).ready(function() {
 				// if an anchor has been provided, then parse the anchor in the
 				// form of: 'lhs' or 'rhs', followed by a line, e.g: lhs100.
 				var m = anchor.match(/([lr]hs)([0-9]+)/);
-				if (m.length == 3) {
+				if (m && m.length == 3) {
 					console.log(m);
 					ed.mergely('scrollTo', m[1], parseInt(m[2],10));
 				}
@@ -150,36 +207,65 @@ $(document).ready(function() {
 	var iconconf = {
 		'options-autodiff': {
 			get: function() { return ed.mergely('options').autoupdate },
-			set: function(value) { ed.mergely('options', {autoupdate: !ed.mergely('options').autoupdate}); }
+			set: function(value) {
+				var au = !ed.mergely('options').autoupdate;
+				ed.mergely('options', {autoupdate: au});
+				var params = updateQueryStringParam('au', au ? 1 : 0, 1);
+				updateHistory(params);
+			}
 		},
 		'options-ignorews': {
 			get: function() { return ed.mergely('options').ignorews },
-			set: function(value) { ed.mergely('options', {ignorews: !ed.mergely('options').ignorews}); }
+			set: function(value) {
+				var ws = !ed.mergely('options').ignorews;
+				ed.mergely('options', {ignorews: ws});
+				var params = updateQueryStringParam('ws', ws ? 1 : 0, 0);
+				updateHistory(params);
+			}
 		},
 		'options-sidebars': {
 			get: function() { console.log('sidebar', this); return ed.mergely('options').sidebar },
-			set: function(value) { ed.mergely('options', {sidebar: !ed.mergely('options').sidebar}); }
+			set: function(value) {
+				var sb = !ed.mergely('options').sidebar;
+				ed.mergely('options', {sidebar: sb});
+				var params = updateQueryStringParam('sb', sb ? 1 : 0, 1);
+				updateHistory(params);
+			}
 		},
 		'options-viewport': {
 			get: function() { console.log('viewport', this); return ed.mergely('options').viewport },
-			set: function(value) { ed.mergely('options', {viewport: !ed.mergely('options').viewport}); }
+			set: function(value) {
+				var vp = !ed.mergely('options').viewport;
+				ed.mergely('options', {viewport: vp});
+				var params = updateQueryStringParam('vp', vp ? 1 : 0, 1);
+				updateHistory(params);
+			}
 		},
 		'options-swapmargin': {
 			get: function() { return (ed.mergely('options').rhs_margin == 'left'); },
-			set: function(value) { ed.mergely('options', {rhs_margin: ed.mergely('options').rhs_margin == 'left' ? 'right' : 'left' }); }
+			set: function(value) {
+				var rm = ed.mergely('options').rhs_margin == 'left' ? 'right' : 'left';
+				ed.mergely('options', {rhs_margin: rm });
+				var params = updateQueryStringParam('rm', rm == 'left' ? 1 : 0, 0);
+				updateHistory(params);
+			}
 		},
 		'options-linenumbers': {
-			get: function() { return ed.mergely('cm', 'lhs').getOption('lineNumbers'); },
+			get: function() { console.log('wrap', this); return ed.mergely('options').line_numbers },
 			set: function(value) {
-				ed.mergely('cm', 'lhs').setOption('lineNumbers', value);
+				var ln = !ed.mergely('options').line_numbers;
-				ed.mergely('cm', 'rhs').setOption('lineNumbers', value);
+				ed.mergely('options', {line_numbers: ln});
+				var params = updateQueryStringParam('ln', ln ? 1 : 0, 1);
+				updateHistory(params);
 			}
 		},
 		'options-wrap': {
-			get: function() { return ed.mergely('cm', 'lhs').getOption('lineWrapping'); },
+			get: function() { console.log('wrap', this); return ed.mergely('options').wrap_lines },
 			set: function(value) {
-				ed.mergely('cm', 'lhs').setOption('lineWrapping', value);
+				var wl = !ed.mergely('options').wrap_lines;
-				ed.mergely('cm', 'rhs').setOption('lineWrapping', value);
+				ed.mergely('options', {wrap_lines: wl});
+				var params = updateQueryStringParam('wl', wl ? 1 : 0, 0);
+				updateHistory(params);
 			}
 		},
 		'edit-left-readonly': {
@@ -482,19 +568,19 @@ $(document).ready(function() {
 	}
 	function colorSettings(ed) {
 		// get current settings
-		var sd = $('<span style="display:none" class="mergely ch d lhs">C</span>');
+		var sd = $('<span style="display:none" class="mergely ch d lhs start end">C</span>');
 		var sa = $('<span style="display:none" class="mergely bg a rhs start end">C</span>');
 		var sc = $('<span style="display:none" class="mergely c rhs start end">C</span>');
 		$('body').append(sd);
 		$('body').append(sa);
 		$('body').append(sc);
 		var conf = {
-			'c-border': {id: '#c-border', defaultColor: '#cccccc', getColor: function() { return sc.css('border-top-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
+			'c-border': {id: '#c-border', getColor: function() { return sc.css('border-top-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
-			'c-bg': 	{id: '#c-bg', 	  defaultColor: '#fafafa', getColor: function() { return sc.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
+			'c-bg': 	{id: '#c-bg', 	  getColor: function() { return sc.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
-			'a-border': {id: '#a-border', defaultColor: '#a3d1ff', getColor: function() { return sa.css('border-top-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
+			'a-border': {id: '#a-border', getColor: function() { return sa.css('border-top-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
-			'a-bg': 	{id: '#a-bg', 	  defaultColor: '#ddeeff', getColor: function() { return sa.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
+			'a-bg': 	{id: '#a-bg', 	  getColor: function() { return sa.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
-			'd-border': {id: '#d-border', defaultColor: '#ff7f7f', getColor: function() { return sd.css('border-top-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
+			'd-border': {id: '#d-border', getColor: function() { return sd.css('border-top-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
-			'd-bg': 	{id: '#d-bg', 	  defaultColor: '#edc0c0', getColor: function() { return sd.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }}
+			'd-bg': 	{id: '#d-bg', 	  getColor: function() { return sd.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }}
 		};
 		$.each(conf, function(key, item){$(item.id).val(item.getColor()); });
 		var f = $.farbtastic('#picker');
@@ -515,28 +601,8 @@ $(document).ready(function() {
 					var abg = $('#a-bg').val();
 					var dbg = $('#d-bg').val();
 					var cbg = $('#c-bg').val();
-					var text =
+					var textCss = makeColorCss(cborder, cbg, aborder, abg, dborder, dbg);
-						'.mergely.a.rhs.start { border-top: 1px solid ' + aborder + '; }\n\
+					applyColorCss(textCss, cborder, cbg, aborder, abg, dborder, dbg, true);
-						.mergely.a.lhs.start.end,\n\
-						.mergely.a.rhs.end { border-bottom: 1px solid ' + aborder + '; }\n\
-						.mergely.a.rhs { background-color: ' + abg + '; }\n\
-						.mergely.d.lhs { background-color: ' + dbg + '; }\n\
-						.mergely.d.lhs.end,\n\
-						.mergely.d.rhs.start.end { border-bottom: 1px solid ' + dborder + '; }\n\
-						.mergely.d.rhs.start.end.first { border-bottom: 0; border-top: 1px solid ' + dborder + '; }\n\
-						.mergely.d.lhs.start { border-top: 1px solid ' + dborder + '; }\n\
-						.mergely.c.lhs,\n\
-						.mergely.c.rhs { background-color: ' + cbg + '; }\n\
-						.mergely.c.lhs.start,\n\
-						.mergely.c.rhs.start { border-top: 1px solid ' + cborder + '; }\n\
-						.mergely.c.lhs.end,\n\
-						.mergely.c.rhs.end { border-bottom: 1px solid ' + cborder + '; }\n\
-						.mergely.ch.a.rhs { background-color: ' + abg + '; }\n\
-						.mergely.ch.d.lhs { background-color: ' + dbg + '; text-decoration: line-through; color: #888; }';
-					$('<style type="text/css">' + text + '</style>').appendTo('head');
-					ed.mergely('options', {
-						fgcolor:{a:aborder,c:cborder,d:dborder}
-					});
 				},
 				Reset: function() {
 				},
@@ -546,4 +612,76 @@ $(document).ready(function() {
 			}
 		});
 	}
+	function makeColorCss(changeBorder, changeBackground, addedBorder, addedBackground, deletedBorder, deletedBackground) {
+		var text =
+			'.mergely.a.rhs.start{border-top-color:' + addedBorder + ';}\n\
+			.mergely.a.lhs.start.end,\n\
+			.mergely.a.rhs.end{border-bottom-color:' + addedBorder + ';}\n\
+			.mergely.a.rhs{background-color:' + addedBackground + ';}\n\
+			.mergely.d.lhs{background-color:' + deletedBackground + ';}\n\
+			.mergely.d.lhs.end,\n\
+			.mergely.d.rhs.start.end{border-bottom-color:' + deletedBorder + ';}\n\
+			.mergely.d.rhs.start.end.first{border-top-color:' + deletedBorder + ';}\n\
+			.mergely.d.lhs.start{border-top-color:' + deletedBorder + ';}\n\
+			.mergely.c.lhs,\n\
+			.mergely.c.rhs{background-color:' + changeBackground + ';}\n\
+			.mergely.c.lhs.start,\n\
+			.mergely.c.rhs.start{border-top-color:' + changeBorder + ';}\n\
+			.mergely.c.lhs.end,\n\
+			.mergely.c.rhs.end{border-bottom-color:' + changeBorder + ';}\n\
+			.mergely.ch.a.rhs{background-color:' + addedBackground + ';}\n\
+			.mergely.ch.d.lhs{background-color:' + deletedBackground + ';color: #888;}';
+		return text;
+	}
+	function applyParameterCss(saveState) {
+		var cb = '#' + parameters.get('cb',color_defaults.cb),
+			cg = '#' + parameters.get('cg',color_defaults.cg),
+			ab = '#' + parameters.get('ab',color_defaults.ab),
+			ag = '#' + parameters.get('ag',color_defaults.ag),
+			db = '#' + parameters.get('db',color_defaults.db),
+			dg = '#' + parameters.get('dg',color_defaults.dg);
+		applyColorCss(makeColorCss(cb, cg, ab, ag, db, dg), cb, cg, ab, ag, db, dg, saveState);
+	}
+	function applyColorCss(cssText, changeBorder, changeBackground, addedBorder, addedBackground, deletedBorder, deletedBackground, saveState) {
+		$('<style type="text/css">' + cssText + '</style>').appendTo('head');
+		ed.mergely('options', {
+			fgcolor:{a:addedBorder,c:changeBorder,d:deletedBorder}
+		});
+		var params = updateQueryStringParam('cb', changeBorder.replace(/#/g, ''), color_defaults.cb);
+		params = updateQueryStringParam('cg', changeBackground.replace(/#/g, ''), color_defaults.cg, params);
+		params = updateQueryStringParam('ab', addedBorder.replace(/#/g, ''), color_defaults.ab, params);
+		params = updateQueryStringParam('ag', addedBackground.replace(/#/g, ''), color_defaults.ag, params);
+		params = updateQueryStringParam('db', deletedBorder.replace(/#/g, ''), color_defaults.db, params);
+		params = updateQueryStringParam('dg', deletedBackground.replace(/#/g, ''), color_defaults.dg, params);
+
+		if (saveState) {
+			updateHistory(params);
+		}
+	}
+	function updateHistory(params) {
+		var baseUrl = [location.protocol, '//', location.host, location.pathname].join('');
+		window.history.pushState({}, null, baseUrl + params);
+	}
+	// 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;
+		}
+		keyRegex = new RegExp('([\?&])' + key + '[^&]*');
+		if (value === defaultValue) {
+			params = urlQueryString.replace(keyRegex, '');
+		}
+		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;
+	}
 });

editor/editor.php

@@ -4,6 +4,9 @@ $debug = False;
 if (isset($_GET['key'])) {
 	$key = $_GET['key'];
 }
+if (isset($_GET['debug'])) {
+    $debug = filter_var($_GET['debug'], FILTER_VALIDATE_BOOLEAN);
+}
 ?>
 <!DOCTYPE html>
 <html lang="en">
@@ -13,11 +16,12 @@ if (isset($_GET['key'])) {
 	<meta name="description" content="Merge and Diff your documents with diff online and share" />
 	<meta name="keywords" content="diff,merge,compare,jsdiff,comparison,difference,file,text,unix,patch,algorithm,saas,longest common subsequence,diff online" />
 	<meta name="author" content="Jamie Peabody" />
-	<link rel="shortcut icon" href="http://www.mergely.com/favicon.ico" />
+	<link rel="shortcut icon" href="/favicon.ico" />
 	<link rel="canonical" href="http://www.mergely.com" />
     <link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css' />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
+
 	<link type="text/css" rel="stylesheet" href="/style/mergely-theme/jquery-ui-1.10.1.custom.css" />
     <link type='text/css' rel='stylesheet' href='/Mergely/editor/lib/wicked-ui.css' />
 	<script type="text/javascript" src="/Mergely/editor/lib/wicked-ui.js"></script>
@@ -49,7 +53,7 @@ if (isset($_GET['key'])) {
 
 	<script type="text/javascript">
         var key = '<?php echo $key; ?>';
-        var isSample = key == '4qsmsDyb';
+        var isSample = key == 'usaindep';
     </script>
     
     <!-- analytics -->
@@ -67,7 +71,7 @@ if (isset($_GET['key'])) {
     <!-- google +1 -->
 	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
 </head>
-<body>
+<body style="visibility:hidden">
 <div id="fb-root"></div><script>(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
@@ -156,9 +160,12 @@ if (isset($_GET['key'])) {
                 <li><a class="link" href="/download" target="site">Download</a></li>
                 <li><a class="link" href="/doc" target="site">Mergely development guide</a></li>
                 <li class="separator"></li>
-                <li><a class="link" href="/4qsmsDyb/" target="_blank">United States Declaration of Independence Draft</a></li>
+                <li><a class="link" href="/united-states-declaration-of-independence?wl=1" target="_blank">United States Declaration of Independence Draft</a></li>
             </ul>
         </li>
+<?php
+    if (!$debug) {
+?>
         <li accesskey="s">
             Social
             <ul>
@@ -185,6 +192,9 @@ if (isset($_GET['key'])) {
                 </li>
             </ul>
         </li>
+<?php
+    }
+?>
     </ul>
 
     <!-- toolbar -->

editor/lib/wicked-ui.css

@@ -59,9 +59,9 @@ THE SOFTWARE.
 /* top menu */
 .wicked-menu > li > a > *, .wicked-menu > li { display: inline-block; }
 .wicked-menu li > ul > li > * { padding: 5px; display: inline-block; } /* padding other menu-item */
-.wicked-menu > li > a.menu-item > * { padding: 6px 7px; }
+.wicked-menu > li > a.menu-item > * { padding: 7px 7px; }
 .wicked-menu > li { position: relative; border: 1px solid transparent; }
-
+.wicked-menu > li.hover > a.menu-item > * { padding: 7px 7px 3px 7px; }
 .wicked-menu > li.hover > a.menu-item  {
 	/* lose the top-level focus indicator on hover */
 	outline: none;
@@ -73,7 +73,7 @@ THE SOFTWARE.
 /* menu items */
 .wicked-menu li.hover > ul,
 .wicked-menu ul li:hover > ul { display: block; position: absolute; }
-
+.wicked-menu ul li:hover > ul { margin-top: 5px; }
 /* drop menu */
 .wicked-menu ul { z-index: 7; min-width: 210px; top: 2.1em; left: -1px; }
 

lib/mergely.js

@@ -385,6 +385,8 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 			autoupdate: true,
 			autoresize: true,
 			rhs_margin: 'right',
+			wrap_lines: false,
+			line_numbers: true,
 			lcs: true,
 			sidebar: true,
 			viewport: false,
@@ -441,8 +443,8 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 		var cmsettings = {
 			mode: 'text/plain',
 			readOnly: false,
-			lineWrapping: false,
+			lineWrapping: this.settings.wrap_lines,
-			lineNumbers: true,
+			lineNumbers: this.settings.line_numbers,
 			gutters: ['merge', 'CodeMirror-linenumbers']
 		};
 		this.lhs_cmsettings = {};
@@ -543,6 +545,23 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
 				jQuery(this.element).find('.mergely-margin').css({display: 'none'});
 			}
 		}
+		var le, re;
+		if (this.settings.hasOwnProperty('wrap_lines')) {
+			if (this.editor) {
+				le = this.editor[this.id + '-lhs'];
+				re = this.editor[this.id + '-rhs'];
+				le.setOption('lineWrapping', this.settings.wrap_lines);
+				re.setOption('lineWrapping', this.settings.wrap_lines);
+			}
+		}
+		if (this.settings.hasOwnProperty('line_numbers')) {
+			if (this.editor) {
+				le = this.editor[this.id + '-lhs'];
+				re = this.editor[this.id + '-rhs'];
+				le.setOption('lineNumbers', this.settings.line_numbers);
+				re.setOption('lineNumbers', this.settings.line_numbers);
+			}
+		}
 	},
 	options: function(opts) {
 		if (opts) {