Use new history UI for onlyoffice

customize.dist/src/less2/include/toolbar-history.less

@@ -65,6 +65,17 @@
                 }
             }
         }
+        &.cp-history-oo {
+            .cp-history-timeline-container {
+                height: 20px !important;
+                .cp-history-timeline-pos {
+                    height: 20px !important;
+                }
+            }
+            .cp-history-timeline-actions {
+                margin-left: 0 !important;
+            }
+        }
         .cp-history-timeline-line {
             display: flex;
             .cp-history-timeline-legend {
@@ -149,6 +160,12 @@
                     margin-right: 5px;
                 }
             }
+            .cp-history-timeline-version:empty {
+                display: none;
+            }
+            .cp-history-timeline-time:empty {
+                display: none;
+            }
             .cp-history-timeline-next {
                 button:last-child {
                     margin-right: 0;

www/common/onlyoffice/history.js

@@ -12,13 +12,14 @@ define([
         History.loading = true;
         var $toolbar = config.$toolbar;
         var sframeChan = common.getSframeChannel();
+        History.readOnly = common.getMetadataMgr().getPrivateData().readOnly || !common.isLoggedIn();
 
         if (!config.onlyoffice || !config.setHistory || !config.onCheckpoint || !config.onPatch) {
             throw new Error("Missing config element");
         }
 
         var cpIndex = -1;
-        var msgIndex = 0;
+        var msgIndex = -1;
         var ooMessages = {};
         var loading = false;
         var update = function () {};
@@ -42,11 +43,13 @@ define([
 
         var $version, $time, $share;
         var $hist = $toolbar.find('.cp-toolbar-history');
+        $hist.addClass('cp-smallpatch');
+        $hist.addClass('cp-history-oo');
         var $bottom = $toolbar.find('.cp-toolbar-bottom');
 
         var getVersion = function () {
             var major = sortedCp.length - cpIndex;
-            return major + '.' + msgIndex;
+            return major + '.' + (msgIndex+1);
         };
         var showVersion = function (initial) {
             var v = getVersion();
@@ -55,15 +58,16 @@ define([
             }
             $version.text("Version: " + v); // XXX
 
-            var $pos = $hist.find('.cp-toolbar-history-pos');
+            var $pos = $hist.find('.cp-history-timeline-pos');
             var cps = sortedCp.length;
             var id = sortedCp[cps - cpIndex -1] || -1;
             if (!ooMessages[id]) { return; }
             var msgs = ooMessages[id];
-            var p = 100*(msgIndex / (msgs.length));
+            console.log(ooMessages);
+            var p = 100*((msgIndex+1) / (msgs.length));
             $pos.css('margin-left', p+'%');
 
-            var time = msgs[msgIndex].time;
+            var time = msgs[msgIndex] && msgs[msgIndex].time;
             if (time) { $time.text(new Date(time).toLocaleString()); }
             else { $time.text(''); }
         };
@@ -93,7 +97,7 @@ define([
             // Next cp or last hash
             var fromHash = nextId ? hashes[nextId].hash : config.onlyoffice.lastHash;
 
-            msgIndex = 0;
+            msgIndex = -1;
 
             showVersion();
             if (ooMessages[id]) {
@@ -129,25 +133,12 @@ define([
 
         var Messages = common.Messages;
 
-        var states = [];
-
         $hist.html('').css('display', 'flex');
         $bottom.hide();
 
         UI.spinner($hist).get().show();
 
-        var $fastPrev = $('<button>', {
+        var $fastPrev, $fastNext, $next;
-            'class': 'cp-toolbar-history-fast-previous fa fa-fast-backward buttonPrimary',
-            title: Messages.history_prev
-        });
-        var $next = $('<button>', {
-            'class': 'cp-toolbar-history-next fa fa-step-forward buttonPrimary',
-            title: Messages.history_next
-        });
-        var $fastNext = $('<button>', {
-            'class': 'cp-toolbar-history-fast-next fa fa-fast-forward buttonPrimary',
-            title: Messages.history_next
-        });
 
         var getId = function () {
             var cps = sortedCp.length;
@@ -155,7 +146,9 @@ define([
         };
 
         update = function () {
+            console.log($fastPrev, $next, $fastNext);
             var cps = sortedCp.length;
+            console.log(cpIndex, msgIndex, cps);
             $fastPrev.show();
             $next.show();
             $fastNext.show();
@@ -167,64 +160,109 @@ define([
             }
             var id = getId();
             var msgs = (ooMessages[id] || []).length;
-            if (msgIndex >= msgs) {
+            if (msgIndex >= (msgs-1)) {
                 $next.hide();
             }
         };
 
         var next = function () {
             var id = getId();
-            if (!ooMessages[id]) { return; }
+            if (!ooMessages[id]) { loading = false; return; }
             var msgs = ooMessages[id];
+            msgIndex++;
             var patch = msgs[msgIndex];
+            if (!patch) { loading = false; return; }
             config.onPatch(patch);
-            loading = false;
-            msgIndex++;
             showVersion();
             setTimeout(function () {
                 $('iframe').blur();
+                loading = false;
             }, 200);
         };
 
+
         // Create the history toolbar
         var display = function () {
             $hist.html('');
 
-            var $rev = $('<button>', {
+            var fastPrev = h('button.cp-toolbar-history-previous', { title: Messages.history_prev }, [
-                'class':'cp-toolbar-history-revert buttonSuccess fa fa-check-circle-o',
+                h('i.fa.fa-fast-backward'),
-                title: Messages.history_restoreTitle
+            ]);
-            }).appendTo($hist);//.text(Messages.history_restore);
+            var fastNext = h('button.cp-toolbar-history-next', { title: Messages.history_next }, [
-            if (History.readOnly) { $rev.css('visibility', 'hidden'); }
+                h('i.fa.fa-fast-forward'),
-            $('<span>', {'class': 'cp-history-filler'}).appendTo($hist);
+            ]);
-
+            var _next = h('button.cp-toolbar-history-next', { title: Messages.history_next }, [
-            $fastPrev.appendTo($hist);
+                h('i.fa.fa-step-forward')
-            //$prev.hide().appendTo($hist);
+            ]);
-            var $nav = $('<div>', {'class': 'cp-toolbar-history-goto'}).appendTo($hist);
+            $fastPrev = $(fastPrev);
-            $next.hide().appendTo($hist);
+            $fastNext = $(fastNext).hide();
-            $fastNext.hide().appendTo($hist);
+            $next = $(_next).hide();
-
+
-            $share = $('<button>', {
+            var pos = h('span.cp-history-timeline-pos');
-                'class': 'fa fa-shhare-alt buttonPrimary',
+            var time = h('div.cp-history-timeline-time');
-                title: Messages.shareButton
+            var version = h('div.cp-history-timeline-version');
-            }).hide().appendTo($hist);
+            $time = $(time);
-            $('<span>', {'class': 'cp-history-filler'}).appendTo($hist);
+            $version = $(version);
-            $time = $(h('div')).appendTo($hist);
+            var bar;
-            var $close = $('<button>', {
+            var timeline = h('div.cp-toolbar-history-timeline', [
-                'class':'cp-toolbar-history-close fa fa-window-close',
+                h('div.cp-history-timeline-line', [
-                title: Messages.history_closeTitle
+                    bar = h('span.cp-history-timeline-container')
-            }).appendTo($hist);
+                ]),
-
+                h('div.cp-history-timeline-actions', [
-            var $bar = $('<div>', {'class': 'cp-toolbar-history-bar'}).appendTo($nav);
+                    h('span.cp-history-timeline-prev', [
-            var $container = $('<div>', {'class':'cp-toolbar-history-pos-container'}).appendTo($bar);
+                        fastPrev,
-            $('<div>', {'class': 'cp-toolbar-history-pos'}).appendTo($container);
+                    ]),
-
+                    time,
-            $version = $('<span>', {
+                    version,
-                'class': 'cp-toolbar-history-version'
+                    h('span.cp-history-timeline-next', [
-            }).prependTo($bar);
+                        _next,
+                        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 restore = h('button', {
+                title: Messages.history_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;
+            }
+
+            $share = $(share);
+            $hist.append([timeline, actions]);
+            $(bar).append(pos);
 
             var onKeyDown, onKeyUp;
-            var close = function () {
+            var closeUI = function () {
-                History.loading = false;
                 $hist.hide();
                 $bottom.show();
                 $(window).trigger('resize');
@@ -232,30 +270,6 @@ define([
                 $(window).off('keyup', onKeyUp);
             };
 
-            // Close & restore buttons
-            $close.click(function () {
-                states = [];
-                close();
-                onClose();
-            });
-            $rev.click(function () {
-                UI.confirm(Messages.history_restorePrompt, function (yes) {
-                    if (!yes) { return; }
-                    close();
-                    History.loading = false;
-                    onRevert();
-                    UI.log(Messages.history_restoreDone);
-                });
-            });
-
-            // Versioned link
-            $share.click(function () {
-                // XXX
-                common.getSframeChannel().event('EV_SHARE_OPEN', {
-                    versionHash: getVersion()
-                });
-            });
-
             // Push one patch
             $next.click(function () {
                 if (loading) { return; }
@@ -275,7 +289,7 @@ define([
             $fastPrev.click(function () {
                 if (loading) { return; }
                 loading = true;
-                if (msgIndex === 0) {
+                if (msgIndex === -1) {
                     cpIndex++;
                 }
                 loadMoreOOHistory();
@@ -286,11 +300,33 @@ define([
                 if ([38, 39].indexOf(e.which) >= 0) { p(); return $next.click(); } // Right
                 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(); }
+                if (e.which === 27) { p(); return $(close).click(); }
             };
             onKeyUp = function (e) { e.stopPropagation(); };
             $(window).on('keydown', onKeyDown).on('keyup', onKeyUp).focus();
-            $(window).trigger('resize');
+
+            // Versioned link
+            $share.click(function () {
+                common.getSframeChannel().event('EV_SHARE_OPEN', {
+                    versionHash: getVersion()
+                });
+            });
+
+            // Close & restore buttons
+            $(close).click(function () {
+                History.loading = false;
+                onClose();
+                closeUI();
+            });
+            $(restore).click(function () {
+                UI.confirm(Messages.history_restorePrompt, function (yes) {
+                    if (!yes) { return; }
+                    closeUI();
+                    History.loading = false;
+                    onRevert();
+                    UI.log(Messages.history_restoreDone);
+                });
+            });
         };
 
         display();

www/common/onlyoffice/inner.js

@@ -1113,7 +1113,7 @@ define([
         startOO = function (blob, file, force) {
             if (APP.ooconfig && !force) { return void console.error('already started'); }
             var url = URL.createObjectURL(blob);
-            var lock = readOnly || APP.migrate;
+            var lock = !APP.history && (readOnly || APP.migrate);
 
             // Starting from version 3, we can use the view mode again
             // defined but never used