From: Aleksander Łukasz <aleksander.lukasz@nowoczesnapolska.org.pl>
Date: Fri, 14 Jun 2013 10:51:46 +0000 (+0200)
Subject: First take on diffViewer
X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/f61fd6fa1d5871782b079ee50fb6bb10777cadc2?ds=sidebyside

First take on diffViewer
---

diff --git a/modules.js b/modules.js
index 990905b..46d787e 100644
--- a/modules.js
+++ b/modules.js
@@ -21,7 +21,8 @@ define(function(require) {
         nodeFamilyTree: require('modules/nodeFamilyTree/nodeFamilyTree'),
         nodeBreadCrumbs: require('modules/nodeBreadCrumbs/nodeBreadCrumbs'),
         
-        documentHistory: require('modules/documentHistory/documentHistory')
+        documentHistory: require('modules/documentHistory/documentHistory'),
+        diffViewer: require('modules/diffViewer/diffViewer')
         
     }
 });
\ No newline at end of file
diff --git a/modules/data/data.js b/modules/data/data.js
index 22c77fe..9b2b0cb 100644
--- a/modules/data/data.js
+++ b/modules/data/data.js
@@ -92,6 +92,16 @@ return function(sandbox) {
         },
         getHistory: function() {
             return history;
+        },
+        fetchDiff: function(ver1, ver2) {
+            $.ajax({
+                method: 'get',
+                url: '/' + gettext('editor') + '/' + document_id + '/diff',
+                data: {from: ver1, to: ver2},
+                success: function(data) {
+                    sandbox.publish('diffFetched', {table: data, ver1: ver1, ver2: ver2})
+                },
+            });
         }
     }
 };
diff --git a/modules/diffViewer/diff.html b/modules/diffViewer/diff.html
new file mode 100644
index 0000000..cbf9b54
--- /dev/null
+++ b/modules/diffViewer/diff.html
@@ -0,0 +1 @@
+<div class="rng-module-diffViewer-diffView"></div>
\ No newline at end of file
diff --git a/modules/diffViewer/diffViewer.js b/modules/diffViewer/diffViewer.js
new file mode 100644
index 0000000..254a19a
--- /dev/null
+++ b/modules/diffViewer/diffViewer.js
@@ -0,0 +1,35 @@
+define([
+'libs/jquery-1.9.1.min',
+'libs/underscore-min',
+'views/tabs/tabs',
+'libs/text!./diff.html'
+], function($, _, tabs, diffTemplateSrc) {
+
+'use strict';
+
+return function(sandbox) {
+    
+    var dom = $('<div>').addClass('rng-module-diffViewer');
+    var tabsView = (new tabs.View({position: 'right'})).render();
+    dom.append(tabsView.getAsView());
+    
+    var DiffView = function() {
+        this.dom = $(diffTemplateSrc)
+    }
+    DiffView.prototype.setTable = function(table) {
+        this.dom.append(table);
+    }
+    
+
+    return {
+        start: function() {sandbox.publish('ready');},
+        getView: function() {return dom;},
+        setDiff: function(diff) {
+            var diffView = new DiffView();
+            diffView.setTable(diff.table);
+            tabsView.addTab(diff.ver1 + '->' + diff.ver2, diff.ver1 + '-' + diff.ver2, diffView.dom);
+        }
+    };
+};
+
+});
\ No newline at end of file
diff --git a/modules/diffViewer/diffViewer.less b/modules/diffViewer/diffViewer.less
new file mode 100644
index 0000000..db3d8ff
--- /dev/null
+++ b/modules/diffViewer/diffViewer.less
@@ -0,0 +1,56 @@
+.rng-module-diffViewer {
+    .nav-tabs > li > a {
+        min-width: 0;
+        font-size: 0.9em;
+        padding: 4px 6px;
+    }
+    
+    .diff_table {
+        border-width: 1px;
+        border-style: solid;
+        border-color: black;
+        empty-cells: show;
+        border-spacing: 0px;
+    }
+
+    .diff_table td {
+        border-width: 0px 1px 1px 0px;
+        border-style: dotted;
+        border-color: grey;
+        font-size: 10px;
+        line-height: 20px;
+        font-family: monospace;
+        padding: 0px;
+        white-space: pre-line;
+        /*word-wrap:break-word;
+         word-break:break-all; */
+    }
+
+    .diff_table th {
+        border-width: 0px 1px 1px 0px;
+        border-style: solid;
+        border-color: black;
+        background: #e5ffe5;
+    }
+
+    .diff_table tr.change {
+        background-color: #dcdcdc;
+    }
+
+    .diff_mark {
+        display: inline-block;
+        padding: 2px;
+    }
+
+    .diff_mark_removed {
+        background-color: #ff9c94;
+    }
+
+    .diff_mark_added {
+        background-color: #90ee90;
+    }
+
+    .diff_mark_changed {
+        background-color: yellow;
+    }
+}
\ No newline at end of file
diff --git a/modules/documentHistory/documentHistory.js b/modules/documentHistory/documentHistory.js
index 61eec9e..0693469 100644
--- a/modules/documentHistory/documentHistory.js
+++ b/modules/documentHistory/documentHistory.js
@@ -14,6 +14,12 @@ return function(sandbox) {
         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]);
+    });
         
     var addHistoryItem = function(item, options) {
         historyItems.add(item);
@@ -27,7 +33,7 @@ return function(sandbox) {
     
     var toggleItemViews = function(toggle) {
         itemViews.forEach(function(view) {
-            if(!historyItems.selected(view.item))
+            if(!historyItems.isSelected(view.item))
                 view.toggle(toggle);
         });
     }
@@ -54,9 +60,12 @@ return function(sandbox) {
         add: function(item) {
             this._itemsById[item.version] = item;
         },
-        selected: function(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) {
@@ -88,7 +97,7 @@ return function(sandbox) {
     };
     itemView.prototype.template = _.template(itemTemplateSrc);
     itemView.prototype.onItemClicked = function() {
-        if(historyItems.selected(this.item)) {
+        if(historyItems.isSelected(this.item)) {
             historyItems.unselect(this.item);
             this.dimItem();
         } else if(historyItems.select(this.item)) {
diff --git a/modules/rng/diffLayout.html b/modules/rng/diffLayout.html
new file mode 100644
index 0000000..c07dd77
--- /dev/null
+++ b/modules/rng/diffLayout.html
@@ -0,0 +1,4 @@
+<div class="rng-module-rng-diffLayout">
+    <div fnpjs-place="left"></div>
+    <div fnpjs-place="right"></div>
+</div>
\ No newline at end of file
diff --git a/modules/rng/diffLayout.less b/modules/rng/diffLayout.less
new file mode 100644
index 0000000..bbe51aa
--- /dev/null
+++ b/modules/rng/diffLayout.less
@@ -0,0 +1,12 @@
+.rng-module-rng-diffLayout {
+    [fnpjs-place=left] {
+        width: 200px;
+        margin: 0 20 0 0px;
+        float: left;
+    }
+    [fnpjs-place=right] {
+        width: 700px;
+        float: right;
+    }
+
+}
\ No newline at end of file
diff --git a/modules/rng/rng.js b/modules/rng/rng.js
index e3e97ed..16a6d25 100644
--- a/modules/rng/rng.js
+++ b/modules/rng/rng.js
@@ -4,7 +4,8 @@ define([
 'views/tabs/tabs',
 'libs/text!./mainLayout.html',
 'libs/text!./editingLayout.html',
-], function(layout, vbox, tabs, mainLayoutTemplate, visualEditingLayoutTemplate) {
+'libs/text!./diffLayout.html',
+], function(layout, vbox, tabs, mainLayoutTemplate, visualEditingLayoutTemplate, diffLayoutTemplate) {
 
 'use strict';
 
@@ -74,12 +75,15 @@ return function(sandbox) {
         mainTabs: (new tabs.View()).render(),
         visualEditing: new layout.Layout(visualEditingLayoutTemplate),
         visualEditingSidebar: (new tabs.View({stacked: true})).render(),
-        currentNodePaneLayout: new vbox.VBox()
+        currentNodePaneLayout: new vbox.VBox(),
+        diffLayout: new layout.Layout(diffLayoutTemplate)
     }
     
     views.visualEditing.setView('rightColumn', views.visualEditingSidebar.getAsView());
     addMainTab('Edytor', 'editor', views.visualEditing.getAsView());
     
+    addMainTab('Historia', 'history', views.diffLayout.getAsView());
+    
     sandbox.getDOM().append(views.mainLayout.getAsView());
     
     views.visualEditingSidebar.addTab({icon: 'pencil'}, 'edit', views.currentNodePaneLayout.getAsView());
@@ -111,7 +115,7 @@ return function(sandbox) {
         ready: function() {
             views.mainLayout.setView('mainView', views.mainTabs.getAsView());
             
-            _.each(['sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'nodeBreadCrumbs', 'mainBar', 'indicator', 'documentHistory'], function(moduleName) {
+            _.each(['sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'nodeBreadCrumbs', 'mainBar', 'indicator', 'documentHistory', 'diffViewer'], function(moduleName) {
                 sandbox.getModule(moduleName).start();
             });
         },
@@ -136,6 +140,9 @@ return function(sandbox) {
         },
         historyItemAdded: function(item) {
             sandbox.getModule('documentHistory').addHistory([item], {animate: true});
+        },
+        diffFetched: function(diff) {
+            sandbox.getModule('diffViewer').setDiff(diff);
         }
     }
     
@@ -255,7 +262,16 @@ return function(sandbox) {
     eventHandlers.documentHistory = {
         ready: function() {
             sandbox.getModule('documentHistory').addHistory(sandbox.getModule('data').getHistory());
-            addMainTab('Historia', 'history', sandbox.getModule('documentHistory').getView());
+            views.diffLayout.setView('left', sandbox.getModule('documentHistory').getView());
+        },
+        compare: function(ver1, ver2) {
+            sandbox.getModule('data').fetchDiff(ver1, ver2);
+        }
+    }
+    
+    eventHandlers.diffViewer = {
+        ready: function() {
+            views.diffLayout.setView('right', sandbox.getModule('diffViewer').getView());
         }
     }
     
diff --git a/modules/rng/rng.less b/modules/rng/rng.less
index 7e8241c..79ae6a2 100644
--- a/modules/rng/rng.less
+++ b/modules/rng/rng.less
@@ -1,2 +1,3 @@
 @import 'mainLayout.less';
-@import 'editingLayout.less';
\ No newline at end of file
+@import 'editingLayout.less';
+@import 'diffLayout.less';
\ No newline at end of file
diff --git a/styles/main.less b/styles/main.less
index 3897bdd..da38074 100644
--- a/styles/main.less
+++ b/styles/main.less
@@ -11,4 +11,5 @@
 @import '../modules/indicator/indicator.less';
 @import '../modules/nodePane/nodePane.less';
 @import '../modules/nodeFamilyTree/nodeFamilyTree.less';
-@import '../modules/metadataEditor/metadataEditor.less';
\ No newline at end of file
+@import '../modules/metadataEditor/metadataEditor.less';
+@import '../modules/diffViewer/diffViewer.less';
diff --git a/views/tabs/tabs.js b/views/tabs/tabs.js
index de776c6..43df1c1 100644
--- a/views/tabs/tabs.js
+++ b/views/tabs/tabs.js
@@ -31,6 +31,10 @@ define([
             if(this.options.stacked) {
                 this.nodes.tabBar.addClass('nav-stacked nav-pills').removeClass('nav-tabs');
             }
+            if(this.options.position === 'right') {
+                this.$el.addClass('tabs-right');
+                this.nodes.content.addClass('tab-content');
+            }
             return this;
         },