|
|
|
|
@ -1,19 +1,26 @@
|
|
|
|
|
define([
|
|
|
|
|
'jquery',
|
|
|
|
|
'/common/common-interface.js',
|
|
|
|
|
'/common/common-util.js',
|
|
|
|
|
'/common/hyperscript.js',
|
|
|
|
|
'/customize/messages.js',
|
|
|
|
|
'/bower_components/nthen/index.js',
|
|
|
|
|
//'/bower_components/chainpad-json-validator/json-ot.js',
|
|
|
|
|
|
|
|
|
|
'/bower_components/chainpad/chainpad.dist.js',
|
|
|
|
|
], function ($, UI, nThen, ChainPad /* JsonOT */) {
|
|
|
|
|
], function ($, UI, Util, h, Messages, nThen, ChainPad /* JsonOT */) {
|
|
|
|
|
//var ChainPad = window.ChainPad;
|
|
|
|
|
var History = {};
|
|
|
|
|
|
|
|
|
|
History.create = function (common, config) {
|
|
|
|
|
if (!config.$toolbar) { return void console.error("config.$toolbar is undefined");}
|
|
|
|
|
if (History.loading) { return void console.error("History is already being loaded..."); }
|
|
|
|
|
if (History.state) { return void console.error("Already loaded"); }
|
|
|
|
|
History.loading = true;
|
|
|
|
|
History.state = true;
|
|
|
|
|
var $toolbar = config.$toolbar;
|
|
|
|
|
var $hist = $toolbar.find('.cp-toolbar-history');
|
|
|
|
|
$hist.addClass('cp-history-init');
|
|
|
|
|
|
|
|
|
|
if (!config.applyVal || !config.setHistory || !config.onLocal || !config.onRemote) {
|
|
|
|
|
throw new Error("Missing config element: applyVal, onLocal, onRemote, setHistory");
|
|
|
|
|
@ -54,6 +61,140 @@ define([
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var realtime;
|
|
|
|
|
var states = [];
|
|
|
|
|
var patchWidth = 0;
|
|
|
|
|
var c = 0;//states.length - 1;
|
|
|
|
|
|
|
|
|
|
var getIndex = function (i) {
|
|
|
|
|
return states.length - 1 + i;
|
|
|
|
|
};
|
|
|
|
|
var getRank = function (idx) {
|
|
|
|
|
return idx - states.length + 1;
|
|
|
|
|
};
|
|
|
|
|
// Get the author or group of author linked to a state
|
|
|
|
|
var getAuthor = function (idx, semantic) {
|
|
|
|
|
if (semantic === 1 || !config.extractMetadata) {
|
|
|
|
|
return states[idx].author;
|
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
var val = JSON.parse(states[idx].getContent().doc);
|
|
|
|
|
var md = config.extractMetadata(val);
|
|
|
|
|
var users = Object.keys(md.users).sort();
|
|
|
|
|
return users.join();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
return states[idx].author;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var bar = h('span.cp-history-timeline-bar');
|
|
|
|
|
var onResize = function () {
|
|
|
|
|
var $bar = $(bar);
|
|
|
|
|
if (!$bar.width() || !$bar.length) { return; }
|
|
|
|
|
var widthPx = patchWidth * $bar.width() / 100;
|
|
|
|
|
$hist.removeClass('cp-smallpatch');
|
|
|
|
|
$bar.find('.cp-history-snapshot').css('margin-left', "");
|
|
|
|
|
var $pos = $hist.find('.cp-history-timeline-pos');
|
|
|
|
|
$pos.css('margin-left', "");
|
|
|
|
|
if (widthPx < 18) {
|
|
|
|
|
$hist.addClass('cp-smallpatch');
|
|
|
|
|
$bar.find('.cp-history-snapshot').css('margin-left', (widthPx/2-2)+"px");
|
|
|
|
|
$pos.css('margin-left', (widthPx/2-2)+"px");
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Refresh the timeline UI with the block states
|
|
|
|
|
var refreshBar = function (snapshotsOnly) {
|
|
|
|
|
var $pos = $hist.find('.cp-history-timeline-pos');
|
|
|
|
|
var $bar = $(bar);
|
|
|
|
|
var users = {
|
|
|
|
|
list: [],
|
|
|
|
|
author: '',
|
|
|
|
|
el: undefined,
|
|
|
|
|
i: 0
|
|
|
|
|
};
|
|
|
|
|
var user = {
|
|
|
|
|
list: [],
|
|
|
|
|
author: '',
|
|
|
|
|
el: undefined,
|
|
|
|
|
i: 0
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var snapshotsData = {};
|
|
|
|
|
var snapshots = [];
|
|
|
|
|
if (config.getLastMetadata) {
|
|
|
|
|
try {
|
|
|
|
|
var md = config.getLastMetadata();
|
|
|
|
|
if (md.snapshots) {
|
|
|
|
|
snapshotsData = md.snapshots;
|
|
|
|
|
snapshots = Object.keys(md.snapshots);
|
|
|
|
|
}
|
|
|
|
|
} catch (e) { console.error(e); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var max = states.length - 1;
|
|
|
|
|
var snapshotsEl = [];
|
|
|
|
|
patchWidth = 100 / max;
|
|
|
|
|
|
|
|
|
|
// Check if we need a new block on the index i for the "obj" type (user or users)
|
|
|
|
|
var check = function (obj, author, i) {
|
|
|
|
|
if (snapshotsOnly) { return; }
|
|
|
|
|
if (obj.author !== author) {
|
|
|
|
|
obj.author = author;
|
|
|
|
|
if (obj.el) {
|
|
|
|
|
$(obj.el).css('width', (100*(i - obj.i)/max)+'%');
|
|
|
|
|
}
|
|
|
|
|
obj.el = h('span.cp-history-bar-el');
|
|
|
|
|
obj.list.push(obj.el);
|
|
|
|
|
obj.i = i;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var hash;
|
|
|
|
|
for (var i = 1; i < states.length; i++) {
|
|
|
|
|
hash = states[i].serverHash;
|
|
|
|
|
if (snapshots.indexOf(hash) !== -1) {
|
|
|
|
|
snapshotsEl.push(h('div.cp-history-snapshot', {
|
|
|
|
|
style: 'width:'+patchWidth+'%;left:'+(patchWidth * (i-1))+'%;',
|
|
|
|
|
title: snapshotsData[hash].title
|
|
|
|
|
}, h('i.fa.fa-camera')));
|
|
|
|
|
}
|
|
|
|
|
if (config.drive) {
|
|
|
|
|
// Display only one bar, split by patch
|
|
|
|
|
check(user, i, i);
|
|
|
|
|
} else {
|
|
|
|
|
// Display two bars, split by author(s)
|
|
|
|
|
check(user, getAuthor(i, 1), i);
|
|
|
|
|
check(users, getAuthor(i, 2), i);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (snapshotsOnly) {
|
|
|
|
|
// We only want to redraw the snapshots
|
|
|
|
|
$bar.find('.cp-history-snapshots').html('').append([
|
|
|
|
|
$pos,
|
|
|
|
|
snapshotsEl
|
|
|
|
|
]);
|
|
|
|
|
} else {
|
|
|
|
|
$(user.el).css('width', (100*(max + 1 - user.i)/max)+'%');
|
|
|
|
|
if (!config.drive) {
|
|
|
|
|
$(users.el).css('width', (100*(max + 1 - users.i)/max)+'%');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$bar.html('').append([
|
|
|
|
|
h('span.cp-history-timeline-users', users.list),
|
|
|
|
|
h('span.cp-history-timeline-user', user.list),
|
|
|
|
|
h('div.cp-history-snapshots', [
|
|
|
|
|
$pos[0],
|
|
|
|
|
snapshotsEl
|
|
|
|
|
]),
|
|
|
|
|
]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onResize();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var allMessages = [];
|
|
|
|
|
var lastKnownHash;
|
|
|
|
|
var isComplete = false;
|
|
|
|
|
@ -71,11 +212,18 @@ define([
|
|
|
|
|
lastKnownHash = data.lastKnownHash;
|
|
|
|
|
isComplete = data.isFull;
|
|
|
|
|
var messages = (data.messages || []).map(function (obj) {
|
|
|
|
|
if (!config.debug) {
|
|
|
|
|
return obj.msg;
|
|
|
|
|
}
|
|
|
|
|
return obj;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// We're supposed to receive 2 checkpoints. If the result is only ONE message
|
|
|
|
|
// and this message is a checkpoint, it means it's the last message of the history
|
|
|
|
|
// (and this is a trimmed history)
|
|
|
|
|
if (messages.length === 1) {
|
|
|
|
|
var parsed = JSON.parse(messages[0].msg);
|
|
|
|
|
if (parsed[0] === 4) {
|
|
|
|
|
isComplete = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (config.debug) { console.log(data.messages); }
|
|
|
|
|
Array.prototype.unshift.apply(allMessages, messages); // Destructive concat
|
|
|
|
|
fillChainPad(realtime, allMessages);
|
|
|
|
|
@ -95,23 +243,38 @@ define([
|
|
|
|
|
console.error(e);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
var onClose = function () { config.setHistory(false, true); };
|
|
|
|
|
var onClose = function () {
|
|
|
|
|
config.setHistory(false, true);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var onRevert = function () {
|
|
|
|
|
config.setHistory(false, false);
|
|
|
|
|
// Before we can restore the current version, we need to update metadataMgr
|
|
|
|
|
// so that it will uses the snapshots from the realtime version!
|
|
|
|
|
// Restoring the snapshots to their old version would go against the
|
|
|
|
|
// goal of having snapshots
|
|
|
|
|
if (config.getLastMetadata) {
|
|
|
|
|
var metadataMgr = common.getMetadataMgr();
|
|
|
|
|
var lastMd = config.getLastMetadata();
|
|
|
|
|
var _snapshots = lastMd.snapshots;
|
|
|
|
|
var _users = lastMd.users;
|
|
|
|
|
var md = Util.clone(metadataMgr.getMetadata());
|
|
|
|
|
md.snapshots = _snapshots;
|
|
|
|
|
md.users = _users;
|
|
|
|
|
metadataMgr.updateMetadata(md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// And now we can properly restore the content
|
|
|
|
|
var closed = config.setHistory(false, false);
|
|
|
|
|
if (!closed) {
|
|
|
|
|
return void UI.alert(Messages.history_cantRestore);
|
|
|
|
|
}
|
|
|
|
|
config.onLocal();
|
|
|
|
|
config.onRemote();
|
|
|
|
|
return true;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
config.setHistory(true);
|
|
|
|
|
|
|
|
|
|
var Messages = common.Messages;
|
|
|
|
|
|
|
|
|
|
var realtime;
|
|
|
|
|
|
|
|
|
|
var states = [];
|
|
|
|
|
var c = 0;//states.length - 1;
|
|
|
|
|
|
|
|
|
|
var $hist = $toolbar.find('.cp-toolbar-history');
|
|
|
|
|
var $bottom = $toolbar.find('.cp-toolbar-bottom');
|
|
|
|
|
var $cke = $toolbar.find('.cke_toolbox_main');
|
|
|
|
|
|
|
|
|
|
@ -121,46 +284,46 @@ define([
|
|
|
|
|
|
|
|
|
|
UI.spinner($hist).get().show();
|
|
|
|
|
|
|
|
|
|
var onUpdate;
|
|
|
|
|
|
|
|
|
|
var update = function (newRt) {
|
|
|
|
|
realtime = newRt;
|
|
|
|
|
if (!realtime) { return []; }
|
|
|
|
|
states = getStates(realtime);
|
|
|
|
|
if (typeof onUpdate === "function") { onUpdate(); }
|
|
|
|
|
refreshBar();
|
|
|
|
|
return states;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var $loadMore, $version, get;
|
|
|
|
|
var $loadMore, $time, get;
|
|
|
|
|
|
|
|
|
|
// Get the content of the selected version, and change the version number
|
|
|
|
|
var loading = false;
|
|
|
|
|
var loadMore = function (cb) {
|
|
|
|
|
if (loading) { return; }
|
|
|
|
|
loading = true;
|
|
|
|
|
$loadMore.removeClass('fa fa-ellipsis-h')
|
|
|
|
|
.append($('<span>', {'class': 'fa fa-refresh fa-spin fa-3x fa-fw'}));
|
|
|
|
|
$loadMore.find('.fa-ellipsis-h').hide();
|
|
|
|
|
$loadMore.find('.fa-refresh').show();
|
|
|
|
|
|
|
|
|
|
loadMoreHistory(config, common, function (err, newRt, isFull) {
|
|
|
|
|
if (err === 'EFULL') {
|
|
|
|
|
$loadMore.off('click').hide();
|
|
|
|
|
get(c);
|
|
|
|
|
$version.show();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
loading = false;
|
|
|
|
|
if (err) { return void console.error(err); }
|
|
|
|
|
update(newRt);
|
|
|
|
|
$loadMore.addClass('fa fa-ellipsis-h').html('');
|
|
|
|
|
$loadMore.find('.fa-ellipsis-h').show();
|
|
|
|
|
$loadMore.find('.fa-refresh').hide();
|
|
|
|
|
get(c);
|
|
|
|
|
if (isFull) {
|
|
|
|
|
$loadMore.off('click').hide();
|
|
|
|
|
$version.show();
|
|
|
|
|
}
|
|
|
|
|
if (cb) { cb(); }
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
get = function (i) {
|
|
|
|
|
|
|
|
|
|
// semantic === 1 : group by user
|
|
|
|
|
// semantic === 2 : group by "group of users"
|
|
|
|
|
get = function (i, blockOnly, semantic) {
|
|
|
|
|
i = parseInt(i);
|
|
|
|
|
if (isNaN(i)) { return; }
|
|
|
|
|
if (i > 0) { i = 0; }
|
|
|
|
|
@ -168,29 +331,45 @@ define([
|
|
|
|
|
if (i <= -(states.length - 11)) {
|
|
|
|
|
loadMore();
|
|
|
|
|
}
|
|
|
|
|
var idx = states.length - 1 + i;
|
|
|
|
|
|
|
|
|
|
var idx = getIndex(i);
|
|
|
|
|
if (semantic && i !== c) {
|
|
|
|
|
// If semantic is true, jump to the next patch from a different netflux ID
|
|
|
|
|
var author = getAuthor(idx, semantic);
|
|
|
|
|
var forward = i > c;
|
|
|
|
|
for (var j = idx; (j > 0 && j < states.length ); (forward ? j++ : j--)) {
|
|
|
|
|
if (author !== getAuthor(j, semantic)) {
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
idx = j;
|
|
|
|
|
i = getRank(idx);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (blockOnly) { return states[idx]; }
|
|
|
|
|
|
|
|
|
|
var val = states[idx].getContent().doc;
|
|
|
|
|
c = i;
|
|
|
|
|
if (typeof onUpdate === "function") { onUpdate(); }
|
|
|
|
|
$hist.find('.cp-toolbar-history-next, .cp-toolbar-history-previous, ' +
|
|
|
|
|
'.cp-toolbar-history-fast-next, .cp-toolbar-history-fast-previous')
|
|
|
|
|
.css('visibility', '');
|
|
|
|
|
$hist.find('.cp-toolbar-history-next, .cp-toolbar-history-previous')
|
|
|
|
|
.prop('disabled', '');
|
|
|
|
|
if (c === -(states.length-1)) {
|
|
|
|
|
$hist.find('.cp-toolbar-history-previous').css('visibility', 'hidden');
|
|
|
|
|
$hist.find('.cp-toolbar-history-fast-previous').css('visibility', 'hidden');
|
|
|
|
|
$hist.find('.cp-toolbar-history-previous').prop('disabled', 'disabled');
|
|
|
|
|
}
|
|
|
|
|
if (c === 0) {
|
|
|
|
|
$hist.find('.cp-toolbar-history-next').css('visibility', 'hidden');
|
|
|
|
|
$hist.find('.cp-toolbar-history-fast-next').css('visibility', 'hidden');
|
|
|
|
|
$hist.find('.cp-toolbar-history-next').prop('disabled', 'disabled');
|
|
|
|
|
}
|
|
|
|
|
var $pos = $hist.find('.cp-toolbar-history-pos');
|
|
|
|
|
var p = 100 * (1 - (-c / (states.length-2)));
|
|
|
|
|
$pos.css('margin-left', p+'%');
|
|
|
|
|
var $pos = $hist.find('.cp-history-timeline-pos');
|
|
|
|
|
var p = 100 * (1 - (-(c - 1) / (states.length-1)));
|
|
|
|
|
$pos.css('left', p+'%');
|
|
|
|
|
$pos.css('width', patchWidth+'%');
|
|
|
|
|
|
|
|
|
|
// Display the version when the full history is loaded
|
|
|
|
|
// Note: the first version is always empty and probably can't be displayed, so
|
|
|
|
|
// we can consider we have only states.length - 1 versions
|
|
|
|
|
$version.text(idx + ' / ' + (states.length-1));
|
|
|
|
|
var time = states[idx].time;
|
|
|
|
|
if (time) {
|
|
|
|
|
$time.text(new Date(time).toLocaleString());
|
|
|
|
|
} else { $time.text(''); }
|
|
|
|
|
|
|
|
|
|
if (config.debug) {
|
|
|
|
|
console.log(states[idx]);
|
|
|
|
|
@ -203,77 +382,186 @@ define([
|
|
|
|
|
return val || '';
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
var getNext = function (step) {
|
|
|
|
|
return typeof step === "number" ? get(c + step) : get(c + 1);
|
|
|
|
|
};
|
|
|
|
|
var getPrevious = function (step) {
|
|
|
|
|
return typeof step === "number" ? get(c - step) : get(c - 1);
|
|
|
|
|
};
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
var makeSnapshot = function (title) {
|
|
|
|
|
var idx = getIndex(c);
|
|
|
|
|
if (!config.getLastMetadata || !config.setLastMetadata) { return; }
|
|
|
|
|
try {
|
|
|
|
|
var block = states[idx];
|
|
|
|
|
var hash = block.serverHash;
|
|
|
|
|
var md = config.getLastMetadata();
|
|
|
|
|
md.snapshots = md.snapshots || {};
|
|
|
|
|
if (md.snapshots[hash]) { return; }
|
|
|
|
|
md.snapshots[hash] = {
|
|
|
|
|
title: title,
|
|
|
|
|
time: block.time ? (+new Date(block.time)) : +new Date()
|
|
|
|
|
};
|
|
|
|
|
var sent = config.setLastMetadata(md);
|
|
|
|
|
if (!sent) { return void UI.alert(Messages.snapshots_cantMake); }
|
|
|
|
|
refreshBar();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Create the history toolbar
|
|
|
|
|
var display = function () {
|
|
|
|
|
$hist.html('');
|
|
|
|
|
$hist.removeClass('cp-history-init');
|
|
|
|
|
|
|
|
|
|
var fastPrev = h('button.cp-toolbar-history-previous', { title: Messages.history_fastPrev }, [
|
|
|
|
|
h('i.fa.fa-step-backward'),
|
|
|
|
|
h('i.fa.fa-users')
|
|
|
|
|
]);
|
|
|
|
|
var userPrev = h('button.cp-toolbar-history-previous', { title: Messages.history_userPrev }, [
|
|
|
|
|
h('i.fa.fa-step-backward'),
|
|
|
|
|
h('i.fa.fa-user')
|
|
|
|
|
]);
|
|
|
|
|
var prev = h('button.cp-toolbar-history-previous', { title: Messages.history_prev }, [
|
|
|
|
|
h('i.fa.fa-step-backward')
|
|
|
|
|
]);
|
|
|
|
|
var fastNext = h('button.cp-toolbar-history-next', { title: Messages.history_fastNext }, [
|
|
|
|
|
h('i.fa.fa-users'),
|
|
|
|
|
h('i.fa.fa-step-forward'),
|
|
|
|
|
]);
|
|
|
|
|
var userNext = h('button.cp-toolbar-history-next', { title: Messages.history_userNext }, [
|
|
|
|
|
h('i.fa.fa-user'),
|
|
|
|
|
h('i.fa.fa-step-forward'),
|
|
|
|
|
]);
|
|
|
|
|
var next = h('button.cp-toolbar-history-next', { title: Messages.history_next }, [
|
|
|
|
|
h('i.fa.fa-step-forward')
|
|
|
|
|
]);
|
|
|
|
|
if (config.drive) {
|
|
|
|
|
fastNext = h('button.cp-toolbar-history-next', { title: Messages.history_next }, [
|
|
|
|
|
h('i.fa.fa-fast-forward'),
|
|
|
|
|
]);
|
|
|
|
|
fastPrev = h('button.cp-toolbar-history-previous', {title: Messages.history_prev}, [
|
|
|
|
|
h('i.fa.fa-fast-backward'),
|
|
|
|
|
]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var $rev = $('<button>', {
|
|
|
|
|
'class':'cp-toolbar-history-revert buttonSuccess fa fa-check-circle-o',
|
|
|
|
|
title: Messages.history_restoreTitle
|
|
|
|
|
}).appendTo($hist);//.text(Messages.history_restore);
|
|
|
|
|
if (History.readOnly) { $rev.css('visibility', 'hidden'); }
|
|
|
|
|
$('<span>', {'class': 'cp-history-filler'}).appendTo($hist);
|
|
|
|
|
var $fastPrev = $('<button>', {
|
|
|
|
|
'class': 'cp-toolbar-history-fast-previous fa fa-fast-backward buttonPrimary',
|
|
|
|
|
title: Messages.history_prev
|
|
|
|
|
}).appendTo($hist);
|
|
|
|
|
var $prev =$('<button>', {
|
|
|
|
|
'class': 'cp-toolbar-history-previous fa fa-step-backward buttonPrimary',
|
|
|
|
|
title: Messages.history_prev
|
|
|
|
|
}).appendTo($hist);
|
|
|
|
|
var $nav = $('<div>', {'class': 'cp-toolbar-history-goto'}).appendTo($hist);
|
|
|
|
|
var $next = $('<button>', {
|
|
|
|
|
'class': 'cp-toolbar-history-next fa fa-step-forward buttonPrimary',
|
|
|
|
|
title: Messages.history_next
|
|
|
|
|
}).appendTo($hist);
|
|
|
|
|
var $fastNext = $('<button>', {
|
|
|
|
|
'class': 'cp-toolbar-history-fast-next fa fa-fast-forward buttonPrimary',
|
|
|
|
|
title: Messages.history_next
|
|
|
|
|
}).appendTo($hist);
|
|
|
|
|
$('<span>', {'class': 'cp-history-filler'}).appendTo($hist);
|
|
|
|
|
var $close = $('<button>', {
|
|
|
|
|
'class':'cp-toolbar-history-close fa fa-window-close',
|
|
|
|
|
title: Messages.history_closeTitle
|
|
|
|
|
}).appendTo($hist);
|
|
|
|
|
|
|
|
|
|
var $bar = $('<div>', {'class': 'cp-toolbar-history-bar'}).appendTo($nav);
|
|
|
|
|
var $container = $('<div>', {'class':'cp-toolbar-history-pos-container'}).appendTo($bar);
|
|
|
|
|
$('<div>', {'class': 'cp-toolbar-history-pos'}).appendTo($container);
|
|
|
|
|
|
|
|
|
|
$version = $('<span>', {
|
|
|
|
|
'class': 'cp-toolbar-history-version'
|
|
|
|
|
}).prependTo($bar).hide();
|
|
|
|
|
$loadMore = $('<button>', {
|
|
|
|
|
'class':'cp-toolbar-history-loadmore fa fa-ellipsis-h',
|
|
|
|
|
title: Messages.history_loadMore
|
|
|
|
|
}).click(function () {
|
|
|
|
|
loadMore(function () {
|
|
|
|
|
get(c);
|
|
|
|
|
});
|
|
|
|
|
}).prependTo($container);
|
|
|
|
|
var $fastPrev = $(fastPrev);
|
|
|
|
|
var $userPrev = $(userPrev);
|
|
|
|
|
var $prev = $(prev);
|
|
|
|
|
var $fastNext = $(fastNext);
|
|
|
|
|
var $userNext = $(userNext);
|
|
|
|
|
var $next = $(next);
|
|
|
|
|
|
|
|
|
|
var _loadMore = h('button.cp-toolbar-history-loadmore', { title: Messages.history_loadMore }, [
|
|
|
|
|
h('i.fa.fa-ellipsis-h'),
|
|
|
|
|
h('i.fa.fa-refresh.fa-spin.fa-3x.fa-fw', { style: 'display: none;' })
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
var pos = h('span.cp-history-timeline-pos.fa.fa-caret-down');
|
|
|
|
|
var time = h('div.cp-history-timeline-time');
|
|
|
|
|
$time = $(time);
|
|
|
|
|
var timeline = h('div.cp-toolbar-history-timeline', [
|
|
|
|
|
h('div.cp-history-timeline-line', [
|
|
|
|
|
h('span.cp-history-timeline-legend', [
|
|
|
|
|
h('i.fa.fa-users'),
|
|
|
|
|
h('i.fa.fa-user')
|
|
|
|
|
]),
|
|
|
|
|
h('span.cp-history-timeline-loadmore', _loadMore),
|
|
|
|
|
h('span.cp-history-timeline-container', [
|
|
|
|
|
bar
|
|
|
|
|
])
|
|
|
|
|
]),
|
|
|
|
|
h('div.cp-history-timeline-actions', [
|
|
|
|
|
h('span.cp-history-timeline-prev', [
|
|
|
|
|
fastPrev,
|
|
|
|
|
config.drive ? undefined : userPrev,
|
|
|
|
|
prev,
|
|
|
|
|
]),
|
|
|
|
|
time,
|
|
|
|
|
h('span.cp-history-timeline-next', [
|
|
|
|
|
next,
|
|
|
|
|
config.drive ? undefined : userNext,
|
|
|
|
|
fastNext
|
|
|
|
|
])
|
|
|
|
|
])
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
var snapshot = h('button', {
|
|
|
|
|
title: Messages.snapshots_new,
|
|
|
|
|
}, [
|
|
|
|
|
h('i.fa.fa-camera')
|
|
|
|
|
]);
|
|
|
|
|
var share = h('button', { title: Messages.history_shareTitle }, [
|
|
|
|
|
h('i.fa.fa-shhare-alt'),
|
|
|
|
|
h('span', Messages.shareButton)
|
|
|
|
|
]);
|
|
|
|
|
var restoreTitle = config.drive ? Messages.history_restoreDriveTitle
|
|
|
|
|
: Messages.history_restoreTitle;
|
|
|
|
|
var restore = h('button', {
|
|
|
|
|
title: restoreTitle,
|
|
|
|
|
}, [
|
|
|
|
|
h('i.fa.fa-check'),
|
|
|
|
|
h('span', Messages.history_restore)
|
|
|
|
|
]);
|
|
|
|
|
var close = h('button', { title: Messages.history_closeTitle }, [
|
|
|
|
|
h('i.fa.fa-times'),
|
|
|
|
|
h('span', Messages.history_close)
|
|
|
|
|
]);
|
|
|
|
|
var actions = h('div.cp-toolbar-history-actions', [
|
|
|
|
|
h('span.cp-history-actions-first', [
|
|
|
|
|
snapshot,
|
|
|
|
|
share
|
|
|
|
|
]),
|
|
|
|
|
h('span.cp-history-actions-last', [
|
|
|
|
|
restore,
|
|
|
|
|
close
|
|
|
|
|
])
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
if (History.readOnly) {
|
|
|
|
|
snapshot.disabled = true;
|
|
|
|
|
restore.disabled = true;
|
|
|
|
|
}
|
|
|
|
|
if (config.drive) {
|
|
|
|
|
$hist.addClass('cp-history-drive');
|
|
|
|
|
$(snapshot).hide();
|
|
|
|
|
$(share).hide();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$hist.append([timeline, actions]);
|
|
|
|
|
onResize();
|
|
|
|
|
$(window).on('resize', onResize);
|
|
|
|
|
|
|
|
|
|
// Load a version when clicking on the bar
|
|
|
|
|
$container.click(function (e) {
|
|
|
|
|
var $bar = $(bar);
|
|
|
|
|
$bar.find('.cp-history-snapshots').append(pos);
|
|
|
|
|
$bar.click(function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
if (!$(e.target).is('.cp-toolbar-history-pos-container')) { return; }
|
|
|
|
|
var p = e.offsetX / $container.width();
|
|
|
|
|
var v = -Math.round((states.length - 1) * (1 - p));
|
|
|
|
|
var $t = $(e.target);
|
|
|
|
|
if ($t.closest('.cp-history-snapshot').length) {
|
|
|
|
|
$t = $t.closest('.cp-history-snapshot');
|
|
|
|
|
}
|
|
|
|
|
var isEl = $t.is('.cp-history-snapshot');
|
|
|
|
|
if (!$t.is('.cp-history-snapshots') && !isEl) { return; }
|
|
|
|
|
var x = e.offsetX;
|
|
|
|
|
if (isEl) {
|
|
|
|
|
x += $t.position().left;
|
|
|
|
|
}
|
|
|
|
|
var p = x / $bar.width();
|
|
|
|
|
var v = 1-Math.ceil((states.length - 1) * (1 - p));
|
|
|
|
|
render(get(v));
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
onUpdate = function () {
|
|
|
|
|
// Called when a new version is loaded
|
|
|
|
|
};
|
|
|
|
|
$loadMore = $(_loadMore).click(function () {
|
|
|
|
|
loadMore(function () {
|
|
|
|
|
get(c);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var onKeyDown, onKeyUp;
|
|
|
|
|
var close = function () {
|
|
|
|
|
var closeUI = function () {
|
|
|
|
|
History.state = false;
|
|
|
|
|
$hist.hide();
|
|
|
|
|
$bottom.show();
|
|
|
|
|
$cke.show();
|
|
|
|
|
@ -283,33 +571,93 @@ define([
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Version buttons
|
|
|
|
|
$prev.click(function () { render(getPrevious()); });
|
|
|
|
|
$next.click(function () { render(getNext()); });
|
|
|
|
|
$fastPrev.click(function () { render(getPrevious(10)); });
|
|
|
|
|
$fastNext.click(function () { render(getNext(10)); });
|
|
|
|
|
$prev.click(function () { render(get(c - 1)); });
|
|
|
|
|
$next.click(function () { render(get(c + 1)); });
|
|
|
|
|
if (config.drive) {
|
|
|
|
|
$fastPrev.click(function () { render(get(c - 10)); });
|
|
|
|
|
$fastNext.click(function () { render(get(c + 10)); });
|
|
|
|
|
$userPrev.click(function () { render(get(c - 10)); });
|
|
|
|
|
$userNext.click(function () { render(get(c + 10)); });
|
|
|
|
|
} else {
|
|
|
|
|
$userPrev.click(function () { render(get(c - 1, false, 1)); });
|
|
|
|
|
$userNext.click(function () { render(get(c + 1, false, 1)); });
|
|
|
|
|
$fastPrev.click(function () { render(get(c - 1, false, 2)); });
|
|
|
|
|
$fastNext.click(function () { render(get(c + 1, false, 2)); });
|
|
|
|
|
}
|
|
|
|
|
onKeyDown = function (e) {
|
|
|
|
|
var p = function () { e.preventDefault(); };
|
|
|
|
|
if ([37, 40].indexOf(e.which) >= 0) { p(); return render(getPrevious()); } // Left
|
|
|
|
|
if ([38, 39].indexOf(e.which) >= 0) { p(); return render(getNext()); } // Right
|
|
|
|
|
if (e.which === 33) { p(); return render(getNext(10)); } // PageUp
|
|
|
|
|
if (e.which === 34) { p(); return render(getPrevious(10)); } // PageUp
|
|
|
|
|
if (e.which === 27) { p(); $close.click(); }
|
|
|
|
|
if (e.which === 39) { p(); return $next.click(); } // Right
|
|
|
|
|
if (e.which === 37) { p(); return $prev.click(); } // Left
|
|
|
|
|
if (e.which === 38) { p(); return $userNext.click(); } // Up
|
|
|
|
|
if (e.which === 40) { p(); return $userPrev.click(); } // Down
|
|
|
|
|
if (e.which === 33) { p(); return $fastNext.click(); } // PageUp
|
|
|
|
|
if (e.which === 34) { p(); return $fastPrev.click(); } // PageUp
|
|
|
|
|
if (e.which === 27) { p(); $(close).click(); }
|
|
|
|
|
};
|
|
|
|
|
onKeyUp = function (e) { e.stopPropagation(); };
|
|
|
|
|
$(window).on('keydown', onKeyDown).on('keyup', onKeyUp).focus();
|
|
|
|
|
|
|
|
|
|
// Snapshots
|
|
|
|
|
$(snapshot).click(function () {
|
|
|
|
|
var input = h('input', {
|
|
|
|
|
placeholder: Messages.snapshots_placeholder
|
|
|
|
|
});
|
|
|
|
|
var $input = $(input);
|
|
|
|
|
var content = h('div', [
|
|
|
|
|
h('h5', Messages.snapshots_new),
|
|
|
|
|
input
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
var buttons = [{
|
|
|
|
|
className: 'cancel',
|
|
|
|
|
name: Messages.filePicker_close,
|
|
|
|
|
onClick: function () {},
|
|
|
|
|
keys: [27],
|
|
|
|
|
}, {
|
|
|
|
|
className: 'primary',
|
|
|
|
|
iconClass: '.fa.fa-camera',
|
|
|
|
|
name: Messages.snapshots_new,
|
|
|
|
|
onClick: function () {
|
|
|
|
|
var val = $input.val();
|
|
|
|
|
if (!val) { return true; }
|
|
|
|
|
makeSnapshot(val);
|
|
|
|
|
},
|
|
|
|
|
keys: [],
|
|
|
|
|
}];
|
|
|
|
|
|
|
|
|
|
UI.openCustomModal(UI.dialog.customModal(content, {buttons: buttons }));
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
$input.focus();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Share
|
|
|
|
|
$(share).click(function () {
|
|
|
|
|
var block = get(c, true);
|
|
|
|
|
common.getSframeChannel().event('EV_SHARE_OPEN', {
|
|
|
|
|
versionHash: block.serverHash,
|
|
|
|
|
//title: title
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Close & restore buttons
|
|
|
|
|
$close.click(function () {
|
|
|
|
|
$(close).click(function () {
|
|
|
|
|
states = [];
|
|
|
|
|
close();
|
|
|
|
|
onClose();
|
|
|
|
|
closeUI();
|
|
|
|
|
});
|
|
|
|
|
$rev.click(function () {
|
|
|
|
|
UI.confirm(Messages.history_restorePrompt, function (yes) {
|
|
|
|
|
$(restore).click(function () {
|
|
|
|
|
var restorePrompt = config.drive ? Messages.history_restoreDrivePrompt
|
|
|
|
|
: Messages.history_restorePrompt;
|
|
|
|
|
UI.confirm(restorePrompt, function (yes) {
|
|
|
|
|
if (!yes) { return; }
|
|
|
|
|
close();
|
|
|
|
|
onRevert();
|
|
|
|
|
UI.log(Messages.history_restoreDone);
|
|
|
|
|
var done = onRevert();
|
|
|
|
|
if (done) {
|
|
|
|
|
closeUI();
|
|
|
|
|
var restoreDone = config.drive ? Messages.history_restoreDriveDone
|
|
|
|
|
: Messages.history_restoreDone;
|
|
|
|
|
UI.log(restoreDone);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
@ -328,11 +676,9 @@ define([
|
|
|
|
|
History.loading = false;
|
|
|
|
|
if (err) { throw new Error(err); }
|
|
|
|
|
update(newRt);
|
|
|
|
|
c = states.length - 1;
|
|
|
|
|
display();
|
|
|
|
|
if (isFull) {
|
|
|
|
|
$loadMore.off('click').hide();
|
|
|
|
|
$version.show();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
yflory
4 years ago