src/editor/modules/documentHistory/documentHistory.js

   1 define([
   2 'libs/jquery',
   3 'libs/underscore',
   4 'libs/text!./templates/main.html',
   5 'libs/text!./templates/item.html'
   6 ], function($, _, mainTemplateSrc, itemTemplateSrc) {
   7
   8 'use strict';
   9
  10 return function(sandbox) {
  11
  12     var dom = $(_.template(mainTemplateSrc)());
  13     var domNodes = {
  14         itemList: dom.find('.rng-module-documentHistory-itemsList'),
  15     };
  16     var itemViews = [];
  17
  18
  19     dom.find('.btn.compare').click(function() {
  20         var selected = historyItems.getSelected();
  21         sandbox.publish('compare', selected[0], selected[1]);
  22     });
  23
  24     dom.find('.btn.restore').click(function() {
  25         sandbox.publish('restoreVersion', historyItems.getSelected()[0]);
  26     });
  27
  28     dom.find('.btn.display').click(function() {
  29         sandbox.publish('displayVersion', {version: historyItems.getSelected()[0]});
  30     });
  31
  32     var addHistoryItem = function(item, options) {
  33         historyItems.add(item);
  34         var view = new ItemView(item);
  35         itemViews.push(view);
  36         domNodes.itemList.prepend(view.dom);
  37         if(options.animate) {
  38             view.dom.hide().slideDown();
  39         }
  40     };
  41
  42     var toggleItemViews = function(toggle) {
  43         itemViews.forEach(function(view) {
  44             if(!historyItems.isSelected(view.item)) {
  45                 view.toggle(toggle);
  46             }
  47         });
  48     };
  49
  50     var toggleButton = function(btn, toggle) {
  51         dom.find('button.'+btn).toggleClass('disabled', !toggle);
  52     };
  53
  54     var historyItems = {
  55         _itemsById: {},
  56         _selected: [],
  57         select: function(item) {
  58             if(this._selected.length < 2) {
  59                 this._selected.push(item.version);
  60                 this._updateUI();
  61                 return true;
  62             }
  63             return false;
  64         },
  65         unselect: function(item) {
  66             this._selected = _.without(this._selected, item.version);
  67             this._updateUI();
  68         },
  69         add: function(item) {
  70             this._itemsById[item.version] = item;
  71         },
  72         isSelected: function(item) {
  73             return _.contains(this._selected, item.version);
  74         },
  75         getSelected: function() {
  76             return this._selected;
  77         },
  78         _updateUI: function() {
  79             var len = this._selected.length;
  80             if(len === 0) {
  81                 toggleButton('compare', false);
  82                 toggleButton('display', false);
  83                 toggleButton('restore', false);
  84             }
  85             if(len === 1) {
  86                 toggleButton('compare', false);
  87                 toggleButton('display', true);
  88                 toggleButton('restore', true);
  89             }
  90             if(len === 2) {
  91                 toggleItemViews(false);
  92                 toggleButton('compare', true);
  93                 toggleButton('display', false);
  94                 toggleButton('restore', false);
  95             } else {
  96                 toggleItemViews(true);
  97             }
  98         }
  99     };
 100     historyItems._updateUI();
 101
 102     var ItemView = function(item) {
 103         this.item = item;
 104         this.dom = $(this.template(item));
 105         this.dom.on('click', _.bind(this.onItemClicked, this));
 106     };
 107     ItemView.prototype.template = _.template(itemTemplateSrc);
 108     ItemView.prototype.onItemClicked = function() {
 109         if(historyItems.isSelected(this.item)) {
 110             historyItems.unselect(this.item);
 111             this.dimItem();
 112         } else if(historyItems.select(this.item)) {
 113             this.highlightItem();
 114         }
 115     };
 116     ItemView.prototype.highlightItem = function() {
 117         this.dom.addClass('highlighted');
 118     };
 119     ItemView.prototype.dimItem = function() {
 120         this.dom.removeClass('highlighted');
 121     };
 122     ItemView.prototype.toggle = function(toggle) {
 123         this.dom.toggleClass('disabled', !toggle);
 124     };
 125
 126
 127
 128     return {
 129         start: function() { sandbox.publish('ready'); },
 130         addHistory: function(history, options) {
 131             history.forEach(function(historyItem) {
 132                 addHistoryItem(historyItem, options || {});
 133             });
 134         },
 135         getView: function() {
 136             return dom;
 137         }
 138     };
 139 };
 140
 141 });