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, 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"); } var getStates = function (rt) { var states = []; var b = rt.getAuthBlock(); if (b) { states.unshift(b); } while (b.getParent()) { b = b.getParent(); states.unshift(b); } return states; }; var createRealtime = function (config) { return ChainPad.create({ userName: 'history', validateContent: function (content) { try { JSON.parse(content); return true; } catch (e) { console.log('Failed to parse, rejecting patch'); return false; } }, initialState: '', logLevel: config.debug ? 2 : 0, noPrune: true }); }; var fillChainPad = function (realtime, messages) { messages.forEach(function (m) { realtime.message(m); }); }; 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; var loadMoreHistory = function (config, common, cb) { if (isComplete) { return void cb ('EFULL'); } var realtime = createRealtime(config); var sframeChan = common.getSframeChannel(); sframeChan.query('Q_GET_HISTORY_RANGE', { lastKnownHash: lastKnownHash, sharedFolder: config.sharedFolder }, function (err, data) { if (err) { return void console.error(err); } if (!Array.isArray(data.messages)) { return void console.error('Not an array!'); } lastKnownHash = data.lastKnownHash; isComplete = data.isFull; var messages = (data.messages || []).map(function (obj) { 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); cb (null, realtime, data.isFull); }); }; // config.setHistory(bool, bool) // - bool1: history value // - bool2: reset old content? var render = function (val) { if (typeof val === "undefined") { return; } try { config.applyVal(val); } catch (e) { // Probably a parse error console.error(e); } }; var onClose = function () { config.setHistory(false, true); }; var onRevert = function () { // 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 $bottom = $toolbar.find('.cp-toolbar-bottom'); var $cke = $toolbar.find('.cke_toolbox_main'); $hist.html('').css('display', 'flex'); $bottom.hide(); $cke.hide(); UI.spinner($hist).get().show(); var update = function (newRt) { realtime = newRt; if (!realtime) { return []; } states = getStates(realtime); refreshBar(); return states; }; 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.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); return; } loading = false; if (err) { return void console.error(err); } update(newRt); $loadMore.find('.fa-ellipsis-h').show(); $loadMore.find('.fa-refresh').hide(); get(c); if (isFull) { $loadMore.off('click').hide(); } if (cb) { cb(); } }); }; // 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; } if (i < -(states.length - 2)) { i = -(states.length - 2); } 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 (i <= -(states.length - 11)) { loadMore(); } if (blockOnly) { return states[idx]; } var val = states[idx].getContent().doc; c = i; $hist.find('.cp-toolbar-history-next, .cp-toolbar-history-previous') .prop('disabled', ''); if (c === -(states.length-1)) { $hist.find('.cp-toolbar-history-previous').prop('disabled', 'disabled'); } if (c === 0) { $hist.find('.cp-toolbar-history-next').prop('disabled', 'disabled'); } 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 var time = states[idx].time; if (time) { $time.text(new Date(time).toLocaleString()); } else { $time.text(''); } if (config.debug) { console.log(states[idx]); var ops = states[idx] && states[idx].getPatch() && states[idx].getPatch().operations; if (Array.isArray(ops)) { ops.forEach(function (op) { console.log(op); }); } } 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, $input) { 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); } $input.val(''); 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 $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); var $bar = $(bar); $bar.find('.cp-history-snapshots').append(pos); $bar.click(function (e) { e.stopPropagation(); 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)); }); $loadMore = $(_loadMore).click(function () { loadMore(function () { get(c); }); }); var onKeyDown, onKeyUp; var closeUI = function () { History.state = false; $hist.hide(); $bottom.show(); $cke.show(); $(window).trigger('resize'); $(window).off('keydown', onKeyDown); $(window).off('keyup', onKeyUp); }; // Version buttons $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 (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, $input); }, 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 () { states = []; onClose(); closeUI(); }); $(restore).click(function () { var restorePrompt = config.drive ? Messages.history_restoreDrivePrompt : Messages.history_restorePrompt; UI.confirm(restorePrompt, function (yes) { if (!yes) { return; } var done = onRevert(); if (done) { closeUI(); var restoreDone = config.drive ? Messages.history_restoreDriveDone : Messages.history_restoreDone; UI.log(restoreDone); } }); }); // Display the latest content render(get(c)); $(window).trigger('resize'); }; if (config.onOpen) { config.onOpen(); } // Load all the history messages into a new chainpad object loadMoreHistory(config, common, function (err, newRt, isFull) { History.readOnly = common.getMetadataMgr().getPrivateData().readOnly; History.loading = false; if (err) { throw new Error(err); } update(newRt); display(); if (isFull) { $loadMore.off('click').hide(); } }); }; return History; });