Fix: Consider visible text elements only when searching for next available one
[fnpeditor.git] / modules / documentHistory / documentHistory.js
index c90c879..c3a2f69 100644 (file)
-define([\r
-'libs/jquery-1.9.1.min',\r
-'libs/underscore-min',\r
-'libs/text!./templates/main.html',\r
-'libs/text!./templates/item.html'\r
-], function($, _, mainTemplateSrc, itemTemplateSrc) {\r
-\r
-'use strict';\r
-    \r
-return function(sandbox) {\r
-    \r
-    var dom = $(_.template(mainTemplateSrc)());\r
-    var domNodes = {\r
-        itemList: dom.find('.rng-module-documentHistory-itemsList'),\r
-    }\r
-    var itemViews = [];\r
-        \r
-    var addHistoryItem = function(item) {\r
-        historyItems.add(item);\r
-        var view = new itemView(item);\r
-        itemViews.push(view);\r
-        domNodes.itemList.prepend(view.dom);\r
-    }\r
-    \r
-    var toggleItemViews = function(toggle) {\r
-        itemViews.forEach(function(view) {\r
-            view.toggle(toggle);\r
-        });\r
-    }\r
-    \r
-    var historyItems = {\r
-        _itemsById: {},\r
-        _selected: [],\r
-        select: function(id) {\r
-            if(this._selected.length < 2) {\r
-                this._selected.push(id);\r
-                if(this._selected.length === 2)\r
-                    toggleItemViews(false);\r
-                return true;\r
-            }\r
-            return false;\r
-        },\r
-        unselect: function(item) {\r
-            this._selected = _.without(this._selected, id);\r
-            if(this._selected.length < 2)\r
-                toggleItemViews(true);\r
-        },\r
-        add: function(item) {\r
-            this._itemsById[item.id] = item;\r
-        },\r
-        selected: function(item) {\r
-            return _.contains(_selected, item.id);\r
-        }\r
-    };\r
-    \r
-    var itemView = function(item) {\r
-        this.item = item;\r
-        this.dom = $(this.template(item));\r
-        this.dom.on('click', this.onItemClicked);\r
-    };\r
-    itemView.prototype.template = _.template(itemTemplateSrc);\r
-    itemView.prototype.onItemClicked = function() {\r
-        if(historyItems.selected(item)) {\r
-            historyItems.unselect(item);\r
-            this.dimItem();\r
-        } else if(historyItems.select(item)) {\r
-            this.highlightItem();\r
-        }            \r
-    };\r
-    itemView.prototype.highlightItem = function() {\r
-        \r
-    };\r
-    itemView.prototype.dimItem = function() {\r
-    \r
-    };\r
-    itemView.prototype.toggle = function(toggle) {\r
-    \r
-    };\r
-\r
-    \r
-    \r
-    return {\r
-        start: function() { sandbox.publish('ready'); },\r
-        addHistory: function(history) {\r
-            history.forEach(function(historyItem) {\r
-                addHistoryItem(historyItem);\r
-            });\r
-        },\r
-        getView: function() {\r
-            return dom;\r
-        }\r
-    }\r
-}\r
-\r
+define([
+'libs/jquery-1.9.1.min',
+'libs/underscore-min',
+'./restoreDialog',
+'libs/text!./templates/main.html',
+'libs/text!./templates/item.html'
+], function($, _, restoreDialog, mainTemplateSrc, itemTemplateSrc) {
+
+'use strict';
+    
+return function(sandbox) {
+    
+    var dom = $(_.template(mainTemplateSrc)());
+    var domNodes = {
+        itemList: dom.find('.rng-module-documentHistory-itemsList'),
+    };
+    var itemViews = [];
+    
+    
+    dom.find('.btn.compare').click(function(e) {
+        var selected = historyItems.getSelected();
+        sandbox.publish('compare', selected[0], selected[1]);
+    });
+    
+    dom.find('.btn.restore').click(function(e) {
+        var dialog = restoreDialog.create();
+        dialog.on('restore', function(event) {
+            sandbox.publish('restoreVersion', {version: historyItems.getSelected()[0], description: event.data.description});
+            event.success();
+        });
+        dialog.show();
+    });
+    
+    dom.find('.btn.display').click(function(e) {
+        sandbox.publish('displayVersion', {version: historyItems.getSelected()[0]});
+    });
+        
+    var addHistoryItem = function(item, options) {
+        historyItems.add(item);
+        var view = new ItemView(item);
+        itemViews.push(view);
+        domNodes.itemList.prepend(view.dom);
+        if(options.animate) {
+            view.dom.hide().slideDown();
+        }
+    };
+    
+    var toggleItemViews = function(toggle) {
+        itemViews.forEach(function(view) {
+            if(!historyItems.isSelected(view.item))
+                view.toggle(toggle);
+        });
+    };
+    
+    var toggleButton = function(btn, toggle) {
+        dom.find('button.'+btn).toggleClass('disabled', !toggle);
+    };
+    
+    var historyItems = {
+        _itemsById: {},
+        _selected: [],
+        select: function(item) {
+            if(this._selected.length < 2) {
+                this._selected.push(item.version);
+                this._updateUI();
+                return true;
+            }
+            return false;
+        },
+        unselect: function(item) {
+            this._selected = _.without(this._selected, item.version);
+            this._updateUI();
+        },
+        add: function(item) {
+            this._itemsById[item.version] = item;
+        },
+        isSelected: function(item) {
+            return _.contains(this._selected, item.version);
+        },
+        getSelected: function() {
+            return this._selected;
+        },
+        _updateUI: function() {
+            var len = this._selected.length;
+            if(len === 0) {
+                toggleButton('compare', false);
+                toggleButton('display', false);
+                toggleButton('restore', false);
+            }
+            if(len === 1) {
+                toggleButton('compare', false);
+                toggleButton('display', true);
+                toggleButton('restore', true);
+            }
+            if(len === 2) {
+                toggleItemViews(false);
+                toggleButton('compare', true);
+                toggleButton('display', false);
+                toggleButton('restore', false);
+            } else {
+                toggleItemViews(true);
+            }
+        }
+    };
+    historyItems._updateUI();
+    
+    var ItemView = function(item) {
+        this.item = item;
+        this.dom = $(this.template(item));
+        this.dom.on('click', _.bind(this.onItemClicked, this));
+    };
+    ItemView.prototype.template = _.template(itemTemplateSrc);
+    ItemView.prototype.onItemClicked = function() {
+        if(historyItems.isSelected(this.item)) {
+            historyItems.unselect(this.item);
+            this.dimItem();
+        } else if(historyItems.select(this.item)) {
+            this.highlightItem();
+        }            
+    };
+    ItemView.prototype.highlightItem = function() {
+        this.dom.addClass('highlighted');
+    };
+    ItemView.prototype.dimItem = function() {
+        this.dom.removeClass('highlighted');
+    };
+    ItemView.prototype.toggle = function(toggle) {
+        this.dom.toggleClass('disabled', !toggle);
+    };
+
+    
+    
+    return {
+        start: function() { sandbox.publish('ready'); },
+        addHistory: function(history, options) {
+            history.forEach(function(historyItem) {
+                addHistoryItem(historyItem, options || {});
+            });
+        },
+        getView: function() {
+            return dom;
+        }
+    };
+};
+
 });
\ No newline at end of file