Add the history mode to the CryptDrive

8 years ago · f414d480a9
parent afb0061d7b
commit f414d480a9
5 changed files with 82 additions and 22 deletions
--- a/customize.dist/src/less/toolbar.less
+++ b/customize.dist/src/less/toolbar.less
@ -42,7 +42,7 @@
    }

    button {
-        &#shareButton, &.btn.btn-success {
+        &#shareButton, &.buttonSuccess {
            // Bootstrap 4 colors
            color: #fff;
            background: @toolbar-green;
@ -58,7 +58,7 @@
                margin-left: 5px;
            }
        }
-        &#newdoc, &.btn.btn-primary {
+        &#newdoc, &.buttonPrimary {
            // Bootstrap 4 colors
            color: #fff;
            background: #0275d8;
@ -443,7 +443,7 @@
        display: inline-block;
        vertical-align: middle;
        text-align: center;
-        input { width: 50px; }
+        input { width: 75px; }
    }
    .gotoInput {
        vertical-align: middle;
--- a/customize.dist/toolbar.css
+++ b/customize.dist/toolbar.css
@ -125,41 +125,41 @@
  border-color: #ccc;
 }
 .cryptpad-toolbar button#shareButton,
-.cryptpad-toolbar button.btn.btn-success {
+.cryptpad-toolbar button.buttonSuccess {
  color: #fff;
  background: #5cb85c;
  border-color: #5cb85c;
 }
 .cryptpad-toolbar button#shareButton:hover,
-.cryptpad-toolbar button.btn.btn-success:hover {
+.cryptpad-toolbar button.buttonSuccess:hover {
  background: #449d44;
  border: 1px solid #419641;
 }
 .cryptpad-toolbar button#shareButton span,
-.cryptpad-toolbar button.btn.btn-success span {
+.cryptpad-toolbar button.buttonSuccess span {
  color: #fff;
 }
 .cryptpad-toolbar button#shareButton .large,
-.cryptpad-toolbar button.btn.btn-success .large {
+.cryptpad-toolbar button.buttonSuccess .large {
  margin-left: 5px;
 }
 .cryptpad-toolbar button#newdoc,
-.cryptpad-toolbar button.btn.btn-primary {
+.cryptpad-toolbar button.buttonPrimary {
  color: #fff;
  background: #0275d8;
  border-color: #0275d8;
 }
 .cryptpad-toolbar button#newdoc:hover,
-.cryptpad-toolbar button.btn.btn-primary:hover {
+.cryptpad-toolbar button.buttonPrimary:hover {
  background: #025aa5;
  border: 1px solid #01549b;
 }
 .cryptpad-toolbar button#newdoc span,
-.cryptpad-toolbar button.btn.btn-primary span {
+.cryptpad-toolbar button.buttonPrimary span {
  color: #fff;
 }
 .cryptpad-toolbar button#newdoc .large,
-.cryptpad-toolbar button.btn.btn-primary .large {
+.cryptpad-toolbar button.buttonPrimary .large {
  margin-left: 5px;
 }
 .cryptpad-toolbar button.hidden {
@ -516,7 +516,7 @@
  text-align: center;
 }
 .cryptpad-toolbar-history .goto input {
-  width: 50px;
+  width: 75px;
 }
 .cryptpad-toolbar-history .gotoInput {
  vertical-align: middle;
--- a/www/common/common-history.js
+++ b/www/common/common-history.js
@ -18,12 +18,13 @@ define([
        return states;
    };

-    var loadHistory = function (common, cb) {
+    var loadHistory = function (config, common, cb) {
        var network = common.getNetwork();
        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) {
            return ChainPad.create({
                userName: 'history',
@ -35,7 +36,8 @@ define([
        };
        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 to = window.setTimeout(function () {
@ -134,12 +136,12 @@ define([
            $right.hide();
            $cke.hide();
            var $prev =$('<button>', {
-                'class': 'previous fa fa-step-backward btn btn-primary',
+                'class': 'previous fa fa-step-backward buttonPrimary',
                title: Messages.history_prev
            }).appendTo($hist);
            var $nav = $('<div>', {'class': 'goto'}).appendTo($hist);
            var $next = $('<button>', {
-                'class': 'next fa fa-step-forward btn btn-primary',
+                'class': 'next fa fa-step-forward buttonPrimary',
                title: Messages.history_next
            }).appendTo($hist);

@ -160,7 +162,7 @@ define([
                title: Messages.history_closeTitle
            }).text(Messages.history_close).appendTo($nav);
            var $rev = $('<button>', {
-                'class':'revertHistory btn btn-success',
+                'class':'revertHistory buttonSuccess',
                title: Messages.history_restoreTitle
            }).text(Messages.history_restore).appendTo($nav);

@ -211,7 +213,7 @@ define([
        };

        // Load all the history messages into a new chainpad object
-        loadHistory(common, function (err, newRt) {
+        loadHistory(config, common, function (err, newRt) {
            History.loading = false;
            if (err) { throw new Error(err); }
            realtime = newRt;
--- a/www/common/userObject.js
+++ b/www/common/userObject.js
@ -69,7 +69,7 @@ define([
        };

        var isFolder = exp.isFolder = function (element) {
-            return typeof(element) !== "string";
+            return typeof(element) === "object";
        };
        var isFolderEmpty = exp.isFolderEmpty = function (element) {
            if (typeof(element) !== "object") { return false; }
--- a/www/drive/main.js
+++ b/www/drive/main.js
@ -173,6 +173,10 @@ define([
    var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
    var $backupIcon = $('<span>', {"class": "fa fa-life-ring"});

+    var history = {
+        isHistoryMode: false,
+    };
+
    var init = function (proxy) {
        var files = proxy.drive;
        var isOwnDrive = function () {
@ -1646,7 +1650,8 @@ define([

            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].selectionEnd = getSearchCursor();

@ -1829,7 +1834,7 @@ define([
            var keys = Object.keys(root).sort();
            keys.forEach(function (key) {
                // Do not display files in the menu
-                if (filesOp.isFile(root[key])) { return; }
+                if (!filesOp.isFolder(root[key])) { return; }
                var newPath = path.slice();
                newPath.push(key);
                var isCurrentFolder = filesOp.comparePath(newPath, currentPath);
@ -2263,6 +2268,7 @@ define([
            }
        };
        proxy.on('change', [], function (o, n, p) {
+            if (history.isHistoryMode) { return; }
            var path = arguments[2];
            if (path[0] !== 'drive') { return false; }
            path = path.slice(1);
@ -2277,6 +2283,7 @@ define([
            module.resetTree();
            return false;
        }).on('remove', [], function (o, p) {
+            if (history.isHistoryMode) { return; }
            var path = arguments[1];
            if (path[0] !== 'drive') { return false; }
            path = path.slice(1);
@ -2302,6 +2309,17 @@ define([
            window.clearInterval(APP.resizeTree);
            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) {
            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) {
        if (typeof(newName) !== 'string') { return; }
        var myUserNameTemp = newName.trim();
@ -2434,6 +2461,37 @@ define([
                $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) {
                var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question');
                $backupButton.append($backupIcon.clone().css('marginRight', '0px'));