mirror of
https://github.com/wickedest/Mergely.git
synced 2026-03-20 09:38:39 +08:00
Complete rewrite of the editor. Added search previous. Minor bug fixes include: issues with merging; scroll indicator out of alignment with actual source; inner-markup; resize.
This commit is contained in:
Jamie Peabody
734
editor/editor.js
734
editor/editor.js
@@ -1,189 +1,310 @@
|
||||
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);
|
||||
$(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[1] == 'true') parameters[parts[0]] = true;
|
||||
else if (parts[1] == 'false') 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;
|
||||
}
|
||||
};
|
||||
}
|
||||
return randomstring;
|
||||
}
|
||||
function getParameters() {
|
||||
var parameters = {};
|
||||
window.location.search.substr(1).split('&').forEach(function(pair) {
|
||||
if (pair === '') return;
|
||||
var parts = pair.split('=');
|
||||
if (parts[1] == 'true') parameters[parts[0]] = true;
|
||||
else if (parts[1] == 'false') parameters[parts[0]] = false;
|
||||
else parameters[parts[0]] = parts[1] && decodeURIComponent(parts[1].replace(/\+/g, ' '));
|
||||
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) {
|
||||
//19 for Mac Command+S
|
||||
console.log('pressed', event.which, event.ctrlKey);
|
||||
//if (!( String.fromCharCode(event.which).toLowerCase() == 'f' && event.ctrlKey) && !(event.which == 70)) return true;
|
||||
if (!( String.fromCharCode(event.which).toLowerCase() == 'f' && event.ctrlKey)) return true;
|
||||
//alert("Ctrl-f pressed");
|
||||
event.preventDefault();
|
||||
|
||||
var range = window.getSelection().getRangeAt(0);
|
||||
console.log('range', range);
|
||||
|
||||
var column = $(range.commonAncestorContainer).parents('.mergely-column');
|
||||
handleFind(column);
|
||||
|
||||
return false;
|
||||
});
|
||||
return {
|
||||
get: function(name, defaultValue) {
|
||||
if (parameters.hasOwnProperty(name)) return parameters[name];
|
||||
return defaultValue;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
var ed = $('#mergely');
|
||||
var menu = $('#main-menu');
|
||||
var toolbar = $('#toolbar');
|
||||
ed.mergely({
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
cmsettings: {
|
||||
lineNumbers: true,
|
||||
readOnly: isSample
|
||||
}
|
||||
});
|
||||
|
||||
// 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.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) { ed.mergely('options', {autoupdate: !ed.mergely('options').autoupdate}); }
|
||||
},
|
||||
'options-ignorews': {
|
||||
get: function() { return ed.mergely('options').ignorews },
|
||||
set: function(value) { ed.mergely('options', {ignorews: !ed.mergely('options').ignorews}); }
|
||||
},
|
||||
'options-sidebars': {
|
||||
get: function() { console.log('sidebar', this); return ed.mergely('options').sidebar },
|
||||
set: function(value) { ed.mergely('options', {sidebar: !ed.mergely('options').sidebar}); }
|
||||
},
|
||||
'options-viewport': {
|
||||
get: function() { console.log('viewport', this); return ed.mergely('options').viewport },
|
||||
set: function(value) { ed.mergely('options', {viewport: !ed.mergely('options').viewport}); }
|
||||
},
|
||||
'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' }); }
|
||||
},
|
||||
'options-linenumbers': {
|
||||
get: function() { return ed.mergely('cm', 'lhs').getOption('lineNumbers'); },
|
||||
set: function(value) {
|
||||
ed.mergely('cm', 'lhs').setOption('lineNumbers', value);
|
||||
ed.mergely('cm', 'rhs').setOption('lineNumbers', value);
|
||||
}
|
||||
},
|
||||
'options-wrap': {
|
||||
get: function() { return ed.mergely('cm', 'lhs').getOption('lineWrapping'); },
|
||||
set: function(value) {
|
||||
ed.mergely('cm', 'lhs').setOption('lineWrapping', value);
|
||||
ed.mergely('cm', 'rhs').setOption('lineWrapping', value);
|
||||
}
|
||||
},
|
||||
'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';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.button-search').button({icons:{primary:'ui-icon-search'}, text:false});
|
||||
$('.button-merger').button({icons:{primary:'ui-icon-arrowreturnthick-1-e'}, text:false});
|
||||
$('.button-mergel').button({icons:{primary:'ui-icon-arrowreturnthick-1-w'}, text:false});
|
||||
$('.button-swap').button({icons:{primary:'ui-icon-transferthick-e-w'}, text:false});
|
||||
$('.button-clear').button({icons:{primary:'ui-icon-circle-close'}, text:false});
|
||||
$('.button-download').button({icons:{primary:'ui-icon-disk'}, text:false});
|
||||
$('.button-upload').button({icons:{primary:'ui-icon-folder-open'}, text:false});
|
||||
$('.button-share').button({icons:{primary:'ui-icon-triangle-1-s'}, text:true});
|
||||
$('button').button();
|
||||
$('.button-download-diff').button({icons:{primary:'ui-icon-script'}, text:false});
|
||||
$('#new').on('click', function() {
|
||||
window.location = '/';
|
||||
});
|
||||
$('#share').on({
|
||||
mouseenter: function () { $('#share-menu').fadeIn(500); },
|
||||
mouseleave: function () {
|
||||
if (hover_timeout) clearTimeout(hover_timeout);
|
||||
hover_timeout = setTimeout(function(){$('#share-menu').hide();}, 100);
|
||||
function handle_operation(id) {
|
||||
if (id == 'file-new') {
|
||||
window.location = '/editor';
|
||||
}
|
||||
});
|
||||
$('#share-menu').on({
|
||||
mouseenter: function () { if (hover_timeout) clearTimeout(hover_timeout); },
|
||||
mouseleave: function () {
|
||||
if (hover_timeout) clearTimeout(hover_timeout);
|
||||
hover_timeout = setTimeout(function(){$('#share-menu').hide();}, 100);
|
||||
else if (id == 'file-save') {
|
||||
var text = ed.mergely('diff');
|
||||
if (key == '') key = ''.random(8);
|
||||
$.post('/ajax/handle_download.php', { 'key': key, 'content': text }, function(response) {
|
||||
window.location = response;
|
||||
});
|
||||
}
|
||||
});
|
||||
var hover_timeout = null;
|
||||
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('merge', 'rhs');
|
||||
}
|
||||
else if ([
|
||||
'edit-left-readonly',
|
||||
'edit-right-readonly',
|
||||
'options-autodiff',
|
||||
'options-sidebars',
|
||||
'options-swapmargin',
|
||||
'options-viewport',
|
||||
'options-ignorews',
|
||||
'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('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-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;
|
||||
}
|
||||
|
||||
$('#lhs-upload, #rhs-upload').button({icons:{primary:'ui-icon-folder-open'}, text:false}).upload({
|
||||
upload: function(target, evt) {
|
||||
var files = evt.target.files;
|
||||
var side = target.attr('id').split('-')[0];
|
||||
var sides = [side];
|
||||
if (files.length > 1) {
|
||||
if (side == 'lhs') sides.push('rhs');
|
||||
else sides.push('lhs');
|
||||
}
|
||||
// html5 file upload to browser
|
||||
function load_file(side, file) {
|
||||
var reader = new FileReader();
|
||||
reader.onprogress = function (evt) { }
|
||||
reader.onload = function (evt) {
|
||||
$('#compare').mergely(side, evt.target.result);
|
||||
document.body.style.cursor = 'default';
|
||||
}
|
||||
reader.onerror = function (evt) {
|
||||
alert( evt.target.error.name );
|
||||
}
|
||||
try {
|
||||
reader.readAsText(file, "UTF-8");
|
||||
}
|
||||
catch (e) {
|
||||
alert(e);
|
||||
document.body.style.cursor = 'default';
|
||||
}
|
||||
}
|
||||
if (files.length >= 1) load_file(sides[0], files[0]);
|
||||
if (files.length >= 2) load_file(sides[1], files[1]);
|
||||
}
|
||||
menu.wickedmenu(menu_opts).bind('selected', function(ev, id) {
|
||||
return handle_operation(id);
|
||||
});
|
||||
|
||||
var parameters = getParameters();
|
||||
|
||||
$('#compare').mergely({
|
||||
ignorews: parameters.get('ws', false),
|
||||
lcs: parameters.get('lcs', true),
|
||||
sidebar: parameters.get('sb', true),
|
||||
viewport: parameters.get('vp', false),
|
||||
loaded: function() {
|
||||
$('.toolbar').fadeIn('fast');
|
||||
$('button').css({'visibility':'visible'});
|
||||
},
|
||||
resized: function() {
|
||||
var lhsx = $('.mergely-margin:first-child').width();
|
||||
var rhsx = lhsx + $('#compare-editor-rhs .CodeMirror').width() + 25 - $('#lhs-toolbar').width();
|
||||
$('#lhs-toolbar, #title-lhs').css({'position':'relative', 'left':lhsx});
|
||||
$('#rhs-toolbar, #title-rhs').css({'position':'relative', 'left':rhsx});
|
||||
$('#title-rhs').css({'left':rhsx});
|
||||
},
|
||||
height: 'auto',
|
||||
width: 'auto',
|
||||
cmsettings: {
|
||||
mode: 'text/plain',
|
||||
lineWrapping: parameters.get('wrap') || false,
|
||||
readOnly: (key == '4qsmsDyb') || parameters.get('ro')
|
||||
}
|
||||
toolbar.wickedtoolbar({}).bind('selected', function(ev, id) {
|
||||
if (!id) return false;
|
||||
return handle_operation(id.replace(/^tb-/, ''));
|
||||
});
|
||||
|
||||
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) {
|
||||
$('#compare').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) {
|
||||
$('#compare').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.length == 3) {
|
||||
console.log(m);
|
||||
$('#compare').mergely('scrollTo', m[1], parseInt(m[2],10));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
if (newbie) {
|
||||
$('#compare').mergely('lhs', 'the quick brown fox jumped over\nthe hairy cat\n');
|
||||
$('#compare').mergely('rhs', 'the quick brown fox jumped over\nthe lazy dog\n');
|
||||
}
|
||||
}
|
||||
$('#lhs-search, #rhs-search').click(function(){
|
||||
var side = $(this).attr('id').split('-')[0];
|
||||
var text = $('#' + side + '-search-text').val();
|
||||
$('#compare').mergely('search', side, text);
|
||||
return false;
|
||||
});
|
||||
$('#lhs-search-text, #rhs-search-text').keydown(function (ev) {
|
||||
var id = $(this).attr('id').split('-')[0];
|
||||
if (ev.which === $.ui.keyCode.ENTER) { $('#' + id + '-search').click(); return false; }
|
||||
return true;
|
||||
});
|
||||
$('#lhs-clear, #rhs-clear').click(function(){
|
||||
var side = $(this).attr('id').split('-')[0];
|
||||
$('#compare').mergely('clear', side);
|
||||
return false;
|
||||
});
|
||||
$('#lhs-swap, #rhs-swap').click(function(){
|
||||
$('#compare').mergely('swap');
|
||||
return false;
|
||||
});
|
||||
$('#lhs-merge, #rhs-merge').click(function(){
|
||||
var side = $(this).attr('id').split('-')[0];
|
||||
// clicking rhs-merge means 'merge left'
|
||||
if (side == 'rhs') side = 'lhs';
|
||||
else side = 'rhs';
|
||||
$('#compare').mergely('merge', side);
|
||||
return false;
|
||||
});
|
||||
$('#save, #fork').click(function(){
|
||||
|
||||
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;
|
||||
@@ -214,102 +335,148 @@ $(document).ready(function () {
|
||||
}
|
||||
});
|
||||
}
|
||||
function call_save() {
|
||||
var lhs = $('#compare').mergely('get', 'lhs');
|
||||
var rhs = $('#compare').mergely('get', 'rhs');
|
||||
function save_files() {
|
||||
var lhs = ed.mergely('get', 'lhs');
|
||||
var rhs = ed.mergely('get', 'rhs');
|
||||
post_save('lhs', lhs);
|
||||
post_save('rhs', rhs);
|
||||
}
|
||||
|
||||
if ($(this).attr('id') == 'save') {
|
||||
$( '#dialog-confirm' ).dialog({
|
||||
resizable: false, height:210, modal: true,
|
||||
buttons: {
|
||||
"Save for Sharing": function() {
|
||||
$( this ).dialog( "close" );
|
||||
call_save();
|
||||
},
|
||||
Cancel: function() {
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
|
||||
$( '#dialog-confirm' ).dialog({
|
||||
resizable: false, width: 350, modal: true,
|
||||
buttons: {
|
||||
'Save for Sharing': function() {
|
||||
$( this ).dialog( 'close' );
|
||||
save_files();
|
||||
},
|
||||
Cancel: function() {
|
||||
$( this ).dialog( 'close' );
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
call_save();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#lhs-download, #rhs-download').click(function(){
|
||||
var side = $(this).attr('id').split('-')[0];
|
||||
var content = $('#compare').mergely('get', side);
|
||||
|
||||
var MIME_TYPE = 'text/plain';
|
||||
console.log('downloading...');
|
||||
var windowURL = window.webkitURL || window.URL;
|
||||
var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
|
||||
var bb = new BlobBuilder();
|
||||
bb.append(content);
|
||||
var a = document.createElement('a');
|
||||
a.download = side + '.txt';
|
||||
a.target = '_blank';
|
||||
a.href = windowURL.createObjectURL(bb.getBlob(MIME_TYPE));
|
||||
a.textContent = 'Download ready';
|
||||
a.dataset.downloadurl = [MIME_TYPE, a.download, a.href].join(':');
|
||||
a.draggable = true;
|
||||
a = $(a);
|
||||
window.open(a.attr('href'), '_blank');
|
||||
windowURL.revokeObjectURL()
|
||||
return false;
|
||||
});
|
||||
$('#lhs-download-diff, #rhs-download-diff').click(function(){
|
||||
var text = $('#compare').mergely('diff');
|
||||
if (key == '') key = ''.random(8);
|
||||
$.post('/ajax/handle_download.php', { 'key': key, 'content': text }, function(response) {
|
||||
window.location = response;
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
var dlg = $('#dialog-settings').css('visibility','visible').hide();
|
||||
var f = $.farbtastic('#picker');
|
||||
var sd = $('<span style="display:none" class="mergely ch d lhs">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-bg': {id: '#c-bg', defaultColor: '#fafafa', 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) }},
|
||||
'd-border': {id: '#d-border', defaultColor: '#ff7f7f', getColor: function() { return sd.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) }},
|
||||
'd-bg': {id: '#d-bg', defaultColor: '#edc0c0', getColor: function() { return sd.css('background-color'); }, setColor: function(color) { $('#'+this.id).val(color) }},
|
||||
};
|
||||
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;
|
||||
(function(url, side) {
|
||||
$.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);
|
||||
}
|
||||
});
|
||||
})(url, side);
|
||||
}
|
||||
|
||||
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">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-bg': {id: '#c-bg', defaultColor: '#fafafa', 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-bg': {id: '#a-bg', defaultColor: '#ddeeff', 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-bg': {id: '#d-bg', defaultColor: '#edc0c0', 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());
|
||||
});
|
||||
|
||||
var ignorews = $('#compare').mergely('options').ignorews;
|
||||
var lineWrapping = $('#compare').mergely('cm', 'lhs').getOption('lineWrapping') || $('#compare').mergely('cm', 'rhs').getOption('lineWrapping');
|
||||
var readOnly = $('#compare').mergely('cm', 'lhs').getOption('readOnly') || $('#compare').mergely('cm', 'rhs').getOption('readOnly');
|
||||
var lcs = $('#compare').mergely('options').lcs;
|
||||
var sidebar = $('#compare').mergely('options').sidebar;
|
||||
var viewport = $('#compare').mergely('options').viewport;
|
||||
var ignoreunchanged = $('#compare').mergely('options').ignoreunchanged;
|
||||
|
||||
$.each(conf, function(key, item){ $(item.id).val(item.getColor()); });
|
||||
$('#ignore-ws').prop('checked', ignorews);
|
||||
$('#wraplines').prop('checked', lineWrapping);
|
||||
$('#readonly').prop('checked', readOnly);
|
||||
$('#lcs').prop('checked', lcs);
|
||||
$('#sidebar').prop('checked', sidebar);
|
||||
$('#viewport').prop('checked', viewport);
|
||||
/*
|
||||
$('#ignoreunchanged').prop('checked', ignoreunchanged);
|
||||
*/
|
||||
|
||||
$('#settings').click(function(){
|
||||
dlg.dialog({
|
||||
$('#dialog-colors').dialog({
|
||||
width: 490, modal: true,
|
||||
buttons: {
|
||||
Apply: function() {
|
||||
@@ -319,15 +486,6 @@ $(document).ready(function () {
|
||||
var abg = $('#a-bg').val();
|
||||
var dbg = $('#d-bg').val();
|
||||
var cbg = $('#c-bg').val();
|
||||
var ignorews = $('#ignore-ws').prop('checked');
|
||||
var wraplines = $('#wraplines').prop('checked');
|
||||
var readonly = $('#readonly').prop('checked');
|
||||
var lcs = $('#lcs').prop('checked');
|
||||
var sidebar = $('#sidebar').prop('checked');
|
||||
var viewport = $('#viewport').prop('checked');
|
||||
/*
|
||||
var ignoreunchanged = $('#ignoreunchanged').prop('checked');
|
||||
*/
|
||||
var text =
|
||||
'.mergely.a.rhs.start { border-top: 1px solid ' + aborder + '; }\n\
|
||||
.mergely.a.lhs.start.end,\n\
|
||||
@@ -347,40 +505,16 @@ $(document).ready(function () {
|
||||
.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');
|
||||
|
||||
$('#compare').mergely('options', {
|
||||
ignorews: ignorews,
|
||||
lcs: lcs,
|
||||
sidebar: sidebar,
|
||||
viewport: viewport,
|
||||
ignoreunchanged: ignoreunchanged,
|
||||
ed.mergely('options', {
|
||||
fgcolor:{a:aborder,c:cborder,d:dborder}
|
||||
});
|
||||
$('#compare').mergely('cm', 'lhs').setOption('lineWrapping', wraplines);
|
||||
$('#compare').mergely('cm', 'rhs').setOption('lineWrapping', wraplines);
|
||||
$('#compare').mergely('cm', 'lhs').setOption('readOnly', readonly);
|
||||
$('#compare').mergely('cm', 'rhs').setOption('readOnly', readonly);
|
||||
|
||||
$('#compare').mergely('update');
|
||||
},
|
||||
Reset: function() {
|
||||
$.each(conf, function(key){
|
||||
var id = '#'+key;
|
||||
f.linkTo($(id).get(0));
|
||||
f.setColor(conf[key].defaultColor);
|
||||
});
|
||||
},
|
||||
Close: function() {
|
||||
$(this).dialog('close');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
$('.colorwell').each(function(){ f.linkTo(this); }).focus(function(){
|
||||
var tthis = $(this);
|
||||
f.linkTo(this);
|
||||
var item = conf[tthis.attr('id')];
|
||||
f.setColor(item.getColor());
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user