mindoc/static/mergely/editor/editor.js

$(document).ready(function() {
	function getParameters() {
		var parameters = {};
		window.location.search.substr(1).split('&').forEach(function(pair) {
			if (pair === '') return;
			var parts = pair.split('=');
			if (parts.length === 2 && parts[1].search(/^(true|1)$/i) >= 0) {
				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 {
			get: function(name, defaultValue) {
				if (parameters.hasOwnProperty(name)) return parameters[name];
				return defaultValue;
			}
		};
	}
	var parameters = getParameters();
	if (parameters.get('test', false)) {
		var li = $('<li>Tests</li>');
		var ul = $('<ul>');
		for (var i = 1; i <= 8; ++i) {
			ul.append($('<li id="examples-test' + i + '">Test ' + i + '</li>'));
		}
		li.append(ul);
		$('#main-menu').append(li);
	}
	
	function handleFind(column) {
		if (!column.length) {
			return false;
		}
		var ed = $('#mergely');
		var find = column.find('.find');
		var input = find.find('input[type="text"]');
		var side = column.attr('id').indexOf('-lhs') > 0 ? 'lhs' : 'rhs';
		var origautoupdate = ed.mergely('options').autoupdate;
		find.slideDown('fast', function() {
			input.focus();
			// disable autoupdate, clear both sides of diff
			ed.mergely('options', {autoupdate: false});
			ed.mergely('unmarkup');
		});
		find.find('.find-prev').click(function() {
			ed.mergely('search', side, input.val(), 'prev');
		});
		find.find('.find-next').click(function() {
			ed.mergely('search', side, input.val(), 'next');
		});
		find.find('.find-close').click(function() {
			find.css('display', 'none')
			ed.mergely('options', {autoupdate: origautoupdate});
		});
		
		input.keydown(function(evt) {
			if (evt.which != 13 && evt.which != 27) return true;
			if (evt.which == 27) {
				find.css('display', 'none');
				ed.mergely('options', {autoupdate: origautoupdate});
			}
			ed.mergely('search', side, input.val());
			return false;
		});
	}

	$(document).keydown(function(event) {
		if (!( String.fromCharCode(event.which).toLowerCase() == 'f' && event.ctrlKey)) return true;
		event.preventDefault();
		var range = window.getSelection().getRangeAt(0);
		var column = $(range.commonAncestorContainer).parents('.mergely-column');
		handleFind(column);
		return false;
	});

	String.prototype.random = function(length) {
		var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
		var randomstring = ''
		for (var i=0; i<length; i++) {
			var rnum = Math.floor(Math.random() * chars.length);
			randomstring += chars.substring(rnum,rnum+1);
		}
		return randomstring;
	}

	// body is pre-hidden for better rendering
	$('body').css("visibility", "");

	var ed = $('#mergely');
	var menu = $('#main-menu');
	var toolbar = $('#toolbar');
	ed.mergely({
		width: 'auto',
		height: 'auto',
		cmsettings: {
			lineNumbers: true,
			readOnly: false
		}
	});

    ed.mergely("lhs", $("#historyContent").html());
    ed.mergely("rhs", $("#documentContent").html());
	// if (parameters.get('lhs', null)) {
	// 	var url = parameters.get('lhs');
	// 	crossdomainGET(ed, 'lhs', url);
	// }
	// if (parameters.get('rhs', null)) {
	// 	var url = parameters.get('rhs');
	// 	crossdomainGET(ed, 'rhs', url);
	// }

	// set query string options
	var urloptions = {};
	var optmap = {
		au: 'autoupdate',
		ws: 'ignorews',
		cs: 'ignorecase',
		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: 'ffe9e9'
	};
	applyParameterCss(false);

	//history.pushState({}, null, '');

	window.addEventListener('popstate', function(ev) {
		if (ev.state) {
			parameters = getParameters();
			applyParameterCss(false);
		}
	});
	
	// Load
	if (key.length === 8) {
		$.when(
			$.ajax({
				type: 'GET', async: true, dataType: 'text',
				data: { 'key':key, 'name': 'lhs' },
				url: '/ajax/handle_get.php',
				success: function (response) {
					ed.mergely('lhs', response);
				},
				error: function(xhr, ajaxOptions, thrownError){
				}
			}),
			$.ajax({
				type: 'GET', async: true, dataType: 'text',
				data: { 'key':key, 'name': 'rhs' },
				url: '/ajax/handle_get.php',
				success: function (response) {
					ed.mergely('rhs', response);
				},
				error: function(xhr, ajaxOptions, thrownError){
				}
			})
		).done(function() {
			var anchor = window.location.hash.substring(1);
			if (anchor) {
				// 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 && m.length == 3) {
					console.log(m);
					ed.mergely('scrollTo', m[1], parseInt(m[2],10));
				}
			}
		});
	}

	// find
	var find = $('.find');
	var flhs = find.clone().attr('id', 'mergely-editor-lhs-find');
	var frhs = find.clone().attr('id', 'mergely-editor-rhs-find');
	$('#mergely-editor-lhs').append(flhs);
	$('#mergely-editor-rhs').append(frhs);
	find.remove();
	
	var iconconf = {
		'options-autodiff': {
			get: function() { return 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) {
				var ws = !ed.mergely('options').ignorews;
				ed.mergely('options', {ignorews: ws});
				var params = updateQueryStringParam('ws', ws ? 1 : 0, 0);
				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) {
				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) {
				var vp = !ed.mergely('options').viewport;
				ed.mergely('options', {viewport: vp});
				var params = updateQueryStringParam('vp', vp ? 1 : 0, 0);
				updateHistory(params);
			}
		},
		'options-swapmargin': {
			get: function() { return (ed.mergely('options').rhs_margin == '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() { console.log('wrap', this); return ed.mergely('options').line_numbers },
			set: function(value) {
				var ln = !ed.mergely('options').line_numbers;
				ed.mergely('options', {line_numbers: ln});
				var params = updateQueryStringParam('ln', ln ? 1 : 0, 1);
				updateHistory(params);
			}
		},
		'options-wrap': {
			get: function() { console.log('wrap', this); return ed.mergely('options').wrap_lines },
			set: function(value) {
				var wl = !ed.mergely('options').wrap_lines;
				ed.mergely('options', {wrap_lines: wl});
				var params = updateQueryStringParam('wl', wl ? 1 : 0, 0);
				updateHistory(params);
			}
		},
		'edit-left-readonly': {
			get: function() { return ed.mergely('cm', 'lhs').getOption('readOnly'); },
			set: function(value) { ed.mergely('cm', 'lhs').setOption('readOnly', value); }
		},
		'edit-right-readonly': {
			get: function() { return ed.mergely('cm', 'rhs').getOption('readOnly'); },
			set: function(value) { ed.mergely('cm', 'rhs').setOption('readOnly', value); }
		}
	}

	var menu_opts = {
		hasIcon: function(id) {
			return iconconf.hasOwnProperty(id);
		},
		getIcon: function(id) {
			if (iconconf[id].get()) return 'icon-check';
		}
	};

	function handle_operation(id) {
		if (id == 'file-new') {
			window.location = '/editor';
		}
		else if (id === 'file-save') {
			var rhs = ed.mergely('get', 'rhs');

			if(window.top.hasOwnProperty("editor")){
                if(window.top.editor.hasOwnProperty("$txt")){
                    window.top.editor.$txt.html(rhs);
				}else{

                    window.top.editor.clear();
                    window.top.editor.insertValue(rhs);
				}

                window.top.layer.closeAll();
			}

		}else if (id == 'file-share') {
			handleShare(ed);
		}
		else if (id == 'file-import') {
			importFiles(ed);
		}
		else if (id == 'edit-left-undo') {
			ed.mergely('cm', 'lhs').getDoc().undo();
		}
		else if (id == 'edit-left-redo') {
			ed.mergely('cm', 'lhs').getDoc().redo();
		}
		else if (id == 'edit-right-undo') {
			ed.mergely('cm', 'rhs').getDoc().undo();
		}
		else if (id == 'edit-right-redo') {
			ed.mergely('cm', 'rhs').getDoc().redo();
		}
		else if (id == 'edit-left-find') {
			handleFind(ed.find('#mergely-editor-lhs'));
		}
		else if (id == 'edit-left-merge-right') {
			ed.mergely('mergeCurrentChange', 'rhs');
		}
		else if (id == 'edit-left-merge-right-file') {
			ed.mergely('merge', 'rhs');
		}
		else if ([
			'edit-left-readonly', 
			'edit-right-readonly',
			'options-autodiff',
			'options-sidebars',
			'options-swapmargin',
			'options-viewport',
			'options-ignorews',
			'options-ignorecase',
			'options-wrap',
			'options-linenumbers',
			].indexOf(id) >= 0) {
			iconconf[id].set(!iconconf[id].get());
			menu.wickedmenu('update', id);
		}
		else if (id == 'edit-left-clear') {
			ed.mergely('clear', 'lhs');
		}
		else if (id == 'edit-right-find') {
			handleFind(ed.find('#mergely-editor-rhs'));
		}
		else if (id == 'edit-right-merge-left') {
			ed.mergely('mergeCurrentChange', 'lhs');
		}
		else if (id == 'edit-right-merge-left-file') {
			ed.mergely('merge', 'lhs');
		}
		else if (id == 'edit-right-clear') {
			ed.mergely('clear', 'rhs');
		}
		else if (id == 'options-colors') {
			colorSettings(ed);
		}
		else if (id == 'view-swap') {
			ed.mergely('swap');
		}
		else if (id == 'view-refresh') {
			ed.mergely('update');
		}
		else if (id == 'view-change-next') {
			ed.mergely('scrollToDiff', 'next');
		}
		else if (id == 'view-change-prev') {
			ed.mergely('scrollToDiff', 'prev');
		}
		else if (id == 'view-clear') {
			ed.mergely('unmarkup');
		}
		else if (id.indexOf('examples-') == 0) {
			var test_config = {
				test1: {lhs: 'one\ntwo\nthree', rhs: 'two\nthree'},
				test2: {lhs: 'two\nthree', rhs: 'one\ntwo\nthree'},
				test3: {lhs: 'one\nthree', rhs: 'one\ntwo\nthree'},
				test4: {lhs: 'one\ntwo\nthree', rhs: 'one\nthree'},
				test5: {lhs: 'to bee, or not to be', rhs: 'to be, or not to bee'},
				test6: {lhs: 'to be, or not to be z', rhs: 'to be, to be'},
				test7: {lhs: 'remained, & to assume', rhs: 'and to assume'},
				test8: {lhs: 'to be, or not to be', rhs: 'to  be,  or  not  to  be'}
			};
			var test = id.split('examples-')[1];
			ed.mergely('lhs', test_config[test]['lhs']);
			ed.mergely('rhs', test_config[test]['rhs']);
		}
		return false;
	}

	menu.wickedmenu(menu_opts).bind('selected', function(ev, id) {
		return handle_operation(id);
	});
	
	toolbar.wickedtoolbar({}).bind('selected', function(ev, id) {
		if (!id) return false;
		return handle_operation(id.replace(/^tb-/, ''));
	});

	toolbar.find('li[title]').tipsy({opacity: 1});
	menu.find('li[title]').tipsy({opacity: 1, delayIn: 1000, gravity: 'w'});

	function handleShare(ed) {
		var fork = $(this).attr('id') == 'fork';
		if (key == '') key = ''.random(8);
		var count = 0;
		function post_save(side, text) {
			$.ajax({
				type: 'POST', async: true, dataType: 'text',
				url: '/ajax/handle_file.php',
				data: { 'key': key,  'name': side, 'content': text },
				success: function (nkey) {
					++count;
					if (count == 2) {
						var url = '/ajax/handle_save.php?key=' + key;
						if (fork) url += '&nkey=' + ''.random(8);
						$.ajax({
							type: 'GET', async: false, dataType: 'text',
							url: url,
							success: function (nkey) {
								// redirect
								if (nkey.length) window.location.href = '/' + $.trim(nkey) + '/';
							},
							error: function(xhr, ajaxOptions, thrownError){
							}
						});
					}
				},
				error: function(xhr, ajaxOptions, thrownError){
					alert(thrownError);
				}
			});
		}
		function save_files() {
			var lhs = ed.mergely('get', 'lhs');
			var rhs = ed.mergely('get', 'rhs');
			post_save('lhs', lhs);
			post_save('rhs', rhs);
		}
	
		$( '#dialog-confirm' ).dialog({
			resizable: false, width: 350, modal: true,
			buttons: {
				'Save for Sharing': function() {
					$( this ).dialog( 'close' );
					save_files();
				},
				Cancel: function() {
					$( this ).dialog( 'close' );
				}
			}
		});
	}
	
	function crossdomainGET(ed, side, url) {
		$.ajax({
			type: 'GET', dataType: 'text',
			data: {url: url},
			url: '/ajax/handle_crossdomain.php',
			contentType: 'text/plain',
			success: function (response) {
				ed.mergely(side, response);
			},
			error: function(xhr, ajaxOptions, thrownError){
				console.error('error', xhr, ajaxOptions, thrownError);
			}
		});
	}
	
	function importFiles(ed) {
		// -------------
		// file uploader - html5 file upload to browser
		function file_load(target, side) {
			var file = target.files[0];
			var reader = new FileReader();
			var $target = $(target);
			function trigger(name, event) { $target.trigger(name, event); }
			reader.onloadstart = function(evt) { trigger('start'); }
			reader.onprogress = function(evt) { trigger('progress', evt); }
			reader.onload = function(evt) { trigger('loaded', evt.target.result); }
			reader.onerror = function (evt) {
				alert(evt.target.error.name);
			}
			try {
				reader.readAsText(file, 'UTF-8');
			}
			catch (e) {
				console.error(e);
				alert(e);
			}
		}
		var file_data = {};
		$('#file-lhs, #file-rhs').change(function (evt) {
			var re = new RegExp('.*[\\\\/](.*)$');
			var match = re.exec($(this).val());
			var fname = match ? match[1] : 'unknown';
			
			var progressbar = $('#' + evt.target.id + '-progress');
			
			file_load(evt.target);
			$(evt.target).bind('start', function(ev){
				$(evt.target).css('display', 'none');
				progressbar.css('display', 'inline-block');
			});
			$(evt.target).bind('progress', function(ev, progress){
				var loaded = (progress.loaded / progress.total) * 100;
				progressbar.find('> .progress-label').text(loaded + '%');
				progressbar.progressbar('value', loaded);
			});
			$(evt.target).bind('loaded', function(ev, file){
				progressbar.progressbar('value', 100);
				progressbar.find('> .progress-label').text(fname);
				file_data[evt.target.id] = file;
			});
		});
		
		$('#file-lhs-progress').progressbar({value: 0});
		$('#file-rhs-progress').progressbar({value: 0});
		$('#dialog-upload .tabs').tabs();
		function callbackName(data) {
			console.log('callbackName', data);
		}
		$('#dialog-upload').dialog({
			dialogClass: 'no-title',
			resizable: false,
			width: '450px',
			modal: true,
			buttons: {
				Import: function() {
					$(this).dialog('close');
					
					var urls = { lhs: $('#url-lhs').val(), rhs: $('#url-rhs').val() };
					for (var side in urls) {
						var url = urls[side];
						if (!url) continue;
						crossdomainGET(ed, side, url);
					}
					
					if (file_data.hasOwnProperty('file-lhs')) {
						ed.mergely('lhs', file_data['file-lhs']);
					}
					if (file_data.hasOwnProperty('file-rhs')) {
						ed.mergely('rhs', file_data['file-rhs']);
					}
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			}
		});
	}
	function colorSettings(ed) {
		// get current settings
		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', getColor: function() { return sc.css('border-top-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', getColor: function() { return sa.css('border-top-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', getColor: function() { return sd.css('border-top-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');
		$('.colorwell').each(function(){ f.linkTo(this); }).focus(function(){
			var tthis = $(this);
			f.linkTo(this);
			var item = conf[tthis.attr('id')];
			f.setColor(item.getColor());
		});
	
		$('#dialog-colors').dialog({
			width: 490, modal: true,
			buttons: {
				Apply: function() {
					var cborder = $('#c-border').val();
					var aborder = $('#a-border').val();
					var dborder = $('#d-border').val();
					var abg = $('#a-bg').val();
					var dbg = $('#d-bg').val();
					var cbg = $('#c-bg').val();
					var textCss = makeColorCss(cborder, cbg, aborder, abg, dborder, dbg);
					applyColorCss(textCss, cborder, cbg, aborder, abg, dborder, dbg, true);
				},
				Reset: function() {
				},
				Close: function() {
					$(this).dialog('close');
				}
			}
		});
	}
	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) {
		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;
			}
		}
		if (!found) {
			parts.push(key + '=' + value);
		}
		return (parts.length) ? '?' + parts.join('&') : '';
	}
});