Add the history mode to the CryptDrive
This commit is contained in:
parent
afb0061d7b
commit
f414d480a9
5 changed files with 82 additions and 22 deletions
|
@ -42,7 +42,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
&#shareButton, &.btn.btn-success {
|
&#shareButton, &.buttonSuccess {
|
||||||
// Bootstrap 4 colors
|
// Bootstrap 4 colors
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: @toolbar-green;
|
background: @toolbar-green;
|
||||||
|
@ -58,7 +58,7 @@
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&#newdoc, &.btn.btn-primary {
|
&#newdoc, &.buttonPrimary {
|
||||||
// Bootstrap 4 colors
|
// Bootstrap 4 colors
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #0275d8;
|
background: #0275d8;
|
||||||
|
@ -443,7 +443,7 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
input { width: 50px; }
|
input { width: 75px; }
|
||||||
}
|
}
|
||||||
.gotoInput {
|
.gotoInput {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
|
@ -125,41 +125,41 @@
|
||||||
border-color: #ccc;
|
border-color: #ccc;
|
||||||
}
|
}
|
||||||
.cryptpad-toolbar button#shareButton,
|
.cryptpad-toolbar button#shareButton,
|
||||||
.cryptpad-toolbar button.btn.btn-success {
|
.cryptpad-toolbar button.buttonSuccess {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #5cb85c;
|
background: #5cb85c;
|
||||||
border-color: #5cb85c;
|
border-color: #5cb85c;
|
||||||
}
|
}
|
||||||
.cryptpad-toolbar button#shareButton:hover,
|
.cryptpad-toolbar button#shareButton:hover,
|
||||||
.cryptpad-toolbar button.btn.btn-success:hover {
|
.cryptpad-toolbar button.buttonSuccess:hover {
|
||||||
background: #449d44;
|
background: #449d44;
|
||||||
border: 1px solid #419641;
|
border: 1px solid #419641;
|
||||||
}
|
}
|
||||||
.cryptpad-toolbar button#shareButton span,
|
.cryptpad-toolbar button#shareButton span,
|
||||||
.cryptpad-toolbar button.btn.btn-success span {
|
.cryptpad-toolbar button.buttonSuccess span {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.cryptpad-toolbar button#shareButton .large,
|
.cryptpad-toolbar button#shareButton .large,
|
||||||
.cryptpad-toolbar button.btn.btn-success .large {
|
.cryptpad-toolbar button.buttonSuccess .large {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
.cryptpad-toolbar button#newdoc,
|
.cryptpad-toolbar button#newdoc,
|
||||||
.cryptpad-toolbar button.btn.btn-primary {
|
.cryptpad-toolbar button.buttonPrimary {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #0275d8;
|
background: #0275d8;
|
||||||
border-color: #0275d8;
|
border-color: #0275d8;
|
||||||
}
|
}
|
||||||
.cryptpad-toolbar button#newdoc:hover,
|
.cryptpad-toolbar button#newdoc:hover,
|
||||||
.cryptpad-toolbar button.btn.btn-primary:hover {
|
.cryptpad-toolbar button.buttonPrimary:hover {
|
||||||
background: #025aa5;
|
background: #025aa5;
|
||||||
border: 1px solid #01549b;
|
border: 1px solid #01549b;
|
||||||
}
|
}
|
||||||
.cryptpad-toolbar button#newdoc span,
|
.cryptpad-toolbar button#newdoc span,
|
||||||
.cryptpad-toolbar button.btn.btn-primary span {
|
.cryptpad-toolbar button.buttonPrimary span {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.cryptpad-toolbar button#newdoc .large,
|
.cryptpad-toolbar button#newdoc .large,
|
||||||
.cryptpad-toolbar button.btn.btn-primary .large {
|
.cryptpad-toolbar button.buttonPrimary .large {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
.cryptpad-toolbar button.hidden {
|
.cryptpad-toolbar button.hidden {
|
||||||
|
@ -516,7 +516,7 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.cryptpad-toolbar-history .goto input {
|
.cryptpad-toolbar-history .goto input {
|
||||||
width: 50px;
|
width: 75px;
|
||||||
}
|
}
|
||||||
.cryptpad-toolbar-history .gotoInput {
|
.cryptpad-toolbar-history .gotoInput {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
|
@ -18,12 +18,13 @@ define([
|
||||||
return states;
|
return states;
|
||||||
};
|
};
|
||||||
|
|
||||||
var loadHistory = function (common, cb) {
|
var loadHistory = function (config, common, cb) {
|
||||||
var network = common.getNetwork();
|
var network = common.getNetwork();
|
||||||
var hkn = network.historyKeeper;
|
var hkn = network.historyKeeper;
|
||||||
|
|
||||||
var wcId = common.hrefToHexChannelId(window.location.href);
|
var wcId = common.hrefToHexChannelId(config.href || window.location.href);
|
||||||
|
|
||||||
|
console.log(wcId);
|
||||||
var createRealtime = function(chan) {
|
var createRealtime = function(chan) {
|
||||||
return ChainPad.create({
|
return ChainPad.create({
|
||||||
userName: 'history',
|
userName: 'history',
|
||||||
|
@ -35,7 +36,8 @@ define([
|
||||||
};
|
};
|
||||||
var realtime = createRealtime();
|
var realtime = createRealtime();
|
||||||
|
|
||||||
var secret = common.getSecrets();
|
var hash = config.href ? common.parsePadUrl(config.href).hash : undefined;
|
||||||
|
var secret = common.getSecrets(hash);
|
||||||
var crypto = Crypto.createEncryptor(secret.keys);
|
var crypto = Crypto.createEncryptor(secret.keys);
|
||||||
|
|
||||||
var to = window.setTimeout(function () {
|
var to = window.setTimeout(function () {
|
||||||
|
@ -134,12 +136,12 @@ define([
|
||||||
$right.hide();
|
$right.hide();
|
||||||
$cke.hide();
|
$cke.hide();
|
||||||
var $prev =$('<button>', {
|
var $prev =$('<button>', {
|
||||||
'class': 'previous fa fa-step-backward btn btn-primary',
|
'class': 'previous fa fa-step-backward buttonPrimary',
|
||||||
title: Messages.history_prev
|
title: Messages.history_prev
|
||||||
}).appendTo($hist);
|
}).appendTo($hist);
|
||||||
var $nav = $('<div>', {'class': 'goto'}).appendTo($hist);
|
var $nav = $('<div>', {'class': 'goto'}).appendTo($hist);
|
||||||
var $next = $('<button>', {
|
var $next = $('<button>', {
|
||||||
'class': 'next fa fa-step-forward btn btn-primary',
|
'class': 'next fa fa-step-forward buttonPrimary',
|
||||||
title: Messages.history_next
|
title: Messages.history_next
|
||||||
}).appendTo($hist);
|
}).appendTo($hist);
|
||||||
|
|
||||||
|
@ -160,7 +162,7 @@ define([
|
||||||
title: Messages.history_closeTitle
|
title: Messages.history_closeTitle
|
||||||
}).text(Messages.history_close).appendTo($nav);
|
}).text(Messages.history_close).appendTo($nav);
|
||||||
var $rev = $('<button>', {
|
var $rev = $('<button>', {
|
||||||
'class':'revertHistory btn btn-success',
|
'class':'revertHistory buttonSuccess',
|
||||||
title: Messages.history_restoreTitle
|
title: Messages.history_restoreTitle
|
||||||
}).text(Messages.history_restore).appendTo($nav);
|
}).text(Messages.history_restore).appendTo($nav);
|
||||||
|
|
||||||
|
@ -211,7 +213,7 @@ define([
|
||||||
};
|
};
|
||||||
|
|
||||||
// Load all the history messages into a new chainpad object
|
// Load all the history messages into a new chainpad object
|
||||||
loadHistory(common, function (err, newRt) {
|
loadHistory(config, common, function (err, newRt) {
|
||||||
History.loading = false;
|
History.loading = false;
|
||||||
if (err) { throw new Error(err); }
|
if (err) { throw new Error(err); }
|
||||||
realtime = newRt;
|
realtime = newRt;
|
||||||
|
|
|
@ -69,7 +69,7 @@ define([
|
||||||
};
|
};
|
||||||
|
|
||||||
var isFolder = exp.isFolder = function (element) {
|
var isFolder = exp.isFolder = function (element) {
|
||||||
return typeof(element) !== "string";
|
return typeof(element) === "object";
|
||||||
};
|
};
|
||||||
var isFolderEmpty = exp.isFolderEmpty = function (element) {
|
var isFolderEmpty = exp.isFolderEmpty = function (element) {
|
||||||
if (typeof(element) !== "object") { return false; }
|
if (typeof(element) !== "object") { return false; }
|
||||||
|
|
|
@ -173,6 +173,10 @@ define([
|
||||||
var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
|
var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
|
||||||
var $backupIcon = $('<span>', {"class": "fa fa-life-ring"});
|
var $backupIcon = $('<span>', {"class": "fa fa-life-ring"});
|
||||||
|
|
||||||
|
var history = {
|
||||||
|
isHistoryMode: false,
|
||||||
|
};
|
||||||
|
|
||||||
var init = function (proxy) {
|
var init = function (proxy) {
|
||||||
var files = proxy.drive;
|
var files = proxy.drive;
|
||||||
var isOwnDrive = function () {
|
var isOwnDrive = function () {
|
||||||
|
@ -1646,7 +1650,8 @@ define([
|
||||||
|
|
||||||
module.resetTree();
|
module.resetTree();
|
||||||
|
|
||||||
$tree.find('#searchInput').focus();
|
// in history mode we want to focus the version number input
|
||||||
|
if (!history.isHistoryMode) { $tree.find('#searchInput').focus(); }
|
||||||
$tree.find('#searchInput')[0].selectionStart = getSearchCursor();
|
$tree.find('#searchInput')[0].selectionStart = getSearchCursor();
|
||||||
$tree.find('#searchInput')[0].selectionEnd = getSearchCursor();
|
$tree.find('#searchInput')[0].selectionEnd = getSearchCursor();
|
||||||
|
|
||||||
|
@ -1829,7 +1834,7 @@ define([
|
||||||
var keys = Object.keys(root).sort();
|
var keys = Object.keys(root).sort();
|
||||||
keys.forEach(function (key) {
|
keys.forEach(function (key) {
|
||||||
// Do not display files in the menu
|
// Do not display files in the menu
|
||||||
if (filesOp.isFile(root[key])) { return; }
|
if (!filesOp.isFolder(root[key])) { return; }
|
||||||
var newPath = path.slice();
|
var newPath = path.slice();
|
||||||
newPath.push(key);
|
newPath.push(key);
|
||||||
var isCurrentFolder = filesOp.comparePath(newPath, currentPath);
|
var isCurrentFolder = filesOp.comparePath(newPath, currentPath);
|
||||||
|
@ -2263,6 +2268,7 @@ define([
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
proxy.on('change', [], function (o, n, p) {
|
proxy.on('change', [], function (o, n, p) {
|
||||||
|
if (history.isHistoryMode) { return; }
|
||||||
var path = arguments[2];
|
var path = arguments[2];
|
||||||
if (path[0] !== 'drive') { return false; }
|
if (path[0] !== 'drive') { return false; }
|
||||||
path = path.slice(1);
|
path = path.slice(1);
|
||||||
|
@ -2277,6 +2283,7 @@ define([
|
||||||
module.resetTree();
|
module.resetTree();
|
||||||
return false;
|
return false;
|
||||||
}).on('remove', [], function (o, p) {
|
}).on('remove', [], function (o, p) {
|
||||||
|
if (history.isHistoryMode) { return; }
|
||||||
var path = arguments[1];
|
var path = arguments[1];
|
||||||
if (path[0] !== 'drive') { return false; }
|
if (path[0] !== 'drive') { return false; }
|
||||||
path = path.slice(1);
|
path = path.slice(1);
|
||||||
|
@ -2302,6 +2309,17 @@ define([
|
||||||
window.clearInterval(APP.resizeTree);
|
window.clearInterval(APP.resizeTree);
|
||||||
APP.resizeTree = undefined;
|
APP.resizeTree = undefined;
|
||||||
});
|
});
|
||||||
|
console.log(files);
|
||||||
|
history.onEnterHistory = function (obj) {
|
||||||
|
var files = obj.drive;
|
||||||
|
filesOp = FO.init(files, config);
|
||||||
|
refresh();
|
||||||
|
};
|
||||||
|
history.onLeaveHistory = function () {
|
||||||
|
var files = proxy.drive;
|
||||||
|
filesOp = FO.init(files, config);
|
||||||
|
refresh();
|
||||||
|
};
|
||||||
|
|
||||||
var createReadme = function (proxy, cb) {
|
var createReadme = function (proxy, cb) {
|
||||||
if (sessionStorage.createReadme) {
|
if (sessionStorage.createReadme) {
|
||||||
|
@ -2332,6 +2350,15 @@ define([
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var setHistory = function (bool, update) {
|
||||||
|
history.isHistoryMode = bool;
|
||||||
|
setEditable(!bool);
|
||||||
|
if (!bool && update) {
|
||||||
|
history.onLeaveHistory();
|
||||||
|
//init(); //TODO real proxy here
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
var setName = APP.setName = function (newName) {
|
var setName = APP.setName = function (newName) {
|
||||||
if (typeof(newName) !== 'string') { return; }
|
if (typeof(newName) !== 'string') { return; }
|
||||||
var myUserNameTemp = newName.trim();
|
var myUserNameTemp = newName.trim();
|
||||||
|
@ -2434,6 +2461,37 @@ define([
|
||||||
$linkToMain.off('click');
|
$linkToMain.off('click');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* add a history button */
|
||||||
|
var histConfig = {};
|
||||||
|
histConfig.onRender = function (val) {
|
||||||
|
if (typeof val === "undefined") { return; }
|
||||||
|
try {
|
||||||
|
var obj = JSON.parse(val || '{}');
|
||||||
|
history.currentObj = obj;
|
||||||
|
history.onEnterHistory(obj);
|
||||||
|
} catch (e) {
|
||||||
|
// Probably a parse error
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
histConfig.onClose = function () {
|
||||||
|
// Close button clicked
|
||||||
|
setHistory(false, true);
|
||||||
|
};
|
||||||
|
histConfig.onRevert = function (val) {
|
||||||
|
// Revert button clicked
|
||||||
|
setHistory(false, false);
|
||||||
|
proxy.drive = history.currentObj.drive;
|
||||||
|
};
|
||||||
|
histConfig.onReady = function () {
|
||||||
|
// Called when the history is loaded and the UI displayed
|
||||||
|
setHistory(true);
|
||||||
|
};
|
||||||
|
histConfig.$toolbar = $bar;
|
||||||
|
histConfig.href = window.location.origin + window.location.pathname + APP.hash;
|
||||||
|
var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
|
||||||
|
$rightside.append($hist);
|
||||||
|
|
||||||
if (!readOnly && !APP.loggedIn) {
|
if (!readOnly && !APP.loggedIn) {
|
||||||
var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question');
|
var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question');
|
||||||
$backupButton.append($backupIcon.clone().css('marginRight', '0px'));
|
$backupButton.append($backupIcon.clone().css('marginRight', '0px'));
|
||||||
|
|
Loading…
Reference in a new issue