First take on diffViewer

diff --git a/modules.js b/modules.js
index 990905b..46d787e 100644 (file)
--- a/modules.js
+++ b/modules.js
@@ -21,7 +21,8 @@ define(function(require) {
         nodeFamilyTree: require('modules/nodeFamilyTree/nodeFamilyTree'),\r
         nodeBreadCrumbs: require('modules/nodeBreadCrumbs/nodeBreadCrumbs'),\r
         \r
         nodeFamilyTree: require('modules/nodeFamilyTree/nodeFamilyTree'),\r
         nodeBreadCrumbs: require('modules/nodeBreadCrumbs/nodeBreadCrumbs'),\r
         \r

-        documentHistory: require('modules/documentHistory/documentHistory')\r
+        documentHistory: require('modules/documentHistory/documentHistory'),\r
+        diffViewer: require('modules/diffViewer/diffViewer')\r

         \r
     }\r
 });
\ No newline at end of file
         \r
     }\r
 });
\ No newline at end of file

diff --git a/modules/data/data.js b/modules/data/data.js
index 22c77fe..9b2b0cb 100644 (file)
--- a/modules/data/data.js
+++ b/modules/data/data.js
@@ -92,6 +92,16 @@ return function(sandbox) {
         },\r
         getHistory: function() {\r
             return history;\r
         },\r
         getHistory: function() {\r
             return history;\r

+        },\r
+        fetchDiff: function(ver1, ver2) {\r
+            $.ajax({\r
+                method: 'get',\r
+                url: '/' + gettext('editor') + '/' + document_id + '/diff',\r
+                data: {from: ver1, to: ver2},\r
+                success: function(data) {\r
+                    sandbox.publish('diffFetched', {table: data, ver1: ver1, ver2: ver2})\r
+                },\r
+            });\r

         }\r
     }\r
 };\r
         }\r
     }\r
 };\r

diff --git a/modules/diffViewer/diff.html b/modules/diffViewer/diff.html
new file mode 100644 (file)
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 (file)
index 0000000..254a19a
--- /dev/null
+++ b/modules/diffViewer/diffViewer.js
@@ -0,0 +1,35 @@
+define([\r
+'libs/jquery-1.9.1.min',\r
+'libs/underscore-min',\r
+'views/tabs/tabs',\r
+'libs/text!./diff.html'\r
+], function($, _, tabs, diffTemplateSrc) {\r
+\r
+'use strict';\r
+\r
+return function(sandbox) {\r
+    \r
+    var dom = $('<div>').addClass('rng-module-diffViewer');\r
+    var tabsView = (new tabs.View({position: 'right'})).render();\r
+    dom.append(tabsView.getAsView());\r
+    \r
+    var DiffView = function() {\r
+        this.dom = $(diffTemplateSrc)\r
+    }\r
+    DiffView.prototype.setTable = function(table) {\r
+        this.dom.append(table);\r
+    }\r
+    \r
+\r
+    return {\r
+        start: function() {sandbox.publish('ready');},\r
+        getView: function() {return dom;},\r
+        setDiff: function(diff) {\r
+            var diffView = new DiffView();\r
+            diffView.setTable(diff.table);\r
+            tabsView.addTab(diff.ver1 + '->' + diff.ver2, diff.ver1 + '-' + diff.ver2, diffView.dom);\r
+        }\r
+    };\r
+};\r
+\r
+});
\ No newline at end of file

diff --git a/modules/diffViewer/diffViewer.less b/modules/diffViewer/diffViewer.less
new file mode 100644 (file)
index 0000000..db3d8ff
--- /dev/null
+++ b/modules/diffViewer/diffViewer.less
@@ -0,0 +1,56 @@
+.rng-module-diffViewer {\r
+    .nav-tabs > li > a {\r
+        min-width: 0;\r
+        font-size: 0.9em;\r
+        padding: 4px 6px;\r
+    }\r
+    \r
+    .diff_table {\r
+        border-width: 1px;\r
+        border-style: solid;\r
+        border-color: black;\r
+        empty-cells: show;\r
+        border-spacing: 0px;\r
+    }\r
+\r
+    .diff_table td {\r
+        border-width: 0px 1px 1px 0px;\r
+        border-style: dotted;\r
+        border-color: grey;\r
+        font-size: 10px;\r
+        line-height: 20px;\r
+        font-family: monospace;\r
+        padding: 0px;\r
+        white-space: pre-line;\r
+        /*word-wrap:break-word;\r
+         word-break:break-all; */\r
+    }\r
+\r
+    .diff_table th {\r
+        border-width: 0px 1px 1px 0px;\r
+        border-style: solid;\r
+        border-color: black;\r
+        background: #e5ffe5;\r
+    }\r
+\r
+    .diff_table tr.change {\r
+        background-color: #dcdcdc;\r
+    }\r
+\r
+    .diff_mark {\r
+        display: inline-block;\r
+        padding: 2px;\r
+    }\r
+\r
+    .diff_mark_removed {\r
+        background-color: #ff9c94;\r
+    }\r
+\r
+    .diff_mark_added {\r
+        background-color: #90ee90;\r
+    }\r
+\r
+    .diff_mark_changed {\r
+        background-color: yellow;\r
+    }\r
+}
\ No newline at end of file

diff --git a/modules/documentHistory/documentHistory.js b/modules/documentHistory/documentHistory.js
index 61eec9e..0693469 100644 (file)
--- a/modules/documentHistory/documentHistory.js
+++ b/modules/documentHistory/documentHistory.js
@@ -14,6 +14,12 @@ return function(sandbox) {
         itemList: dom.find('.rng-module-documentHistory-itemsList'),\r
     }\r
     var itemViews = [];\r
         itemList: dom.find('.rng-module-documentHistory-itemsList'),\r
     }\r
     var itemViews = [];\r

+    \r
+    \r
+    dom.find('.btn.compare').click(function(e) {\r
+        var selected = historyItems.getSelected();\r
+        sandbox.publish('compare', selected[0], selected[1]);\r
+    });\r

         \r
     var addHistoryItem = function(item, options) {\r
         historyItems.add(item);\r
         \r
     var addHistoryItem = function(item, options) {\r
         historyItems.add(item);\r


@@ -27,7 +33,7 @@ return function(sandbox) {
     \r
     var toggleItemViews = function(toggle) {\r
         itemViews.forEach(function(view) {\r
     \r
     var toggleItemViews = function(toggle) {\r
         itemViews.forEach(function(view) {\r

-            if(!historyItems.selected(view.item))\r
+            if(!historyItems.isSelected(view.item))\r

                 view.toggle(toggle);\r
         });\r
     }\r
                 view.toggle(toggle);\r
         });\r
     }\r


@@ -54,9 +60,12 @@ return function(sandbox) {
         add: function(item) {\r
             this._itemsById[item.version] = item;\r
         },\r
         add: function(item) {\r
             this._itemsById[item.version] = item;\r
         },\r

-        selected: function(item) {\r
+        isSelected: function(item) {\r

             return _.contains(this._selected, item.version);\r
         },\r
             return _.contains(this._selected, item.version);\r
         },\r

+        getSelected: function() {\r
+            return this._selected;\r
+        },\r

         _updateUI: function() {\r
             var len = this._selected.length;\r
             if(len === 0) {\r
         _updateUI: function() {\r
             var len = this._selected.length;\r
             if(len === 0) {\r


@@ -88,7 +97,7 @@ return function(sandbox) {
     };\r
     itemView.prototype.template = _.template(itemTemplateSrc);\r
     itemView.prototype.onItemClicked = function() {\r
     };\r
     itemView.prototype.template = _.template(itemTemplateSrc);\r
     itemView.prototype.onItemClicked = function() {\r

-        if(historyItems.selected(this.item)) {\r
+        if(historyItems.isSelected(this.item)) {\r

             historyItems.unselect(this.item);\r
             this.dimItem();\r
         } else if(historyItems.select(this.item)) {\r
             historyItems.unselect(this.item);\r
             this.dimItem();\r
         } else if(historyItems.select(this.item)) {\r

diff --git a/modules/rng/diffLayout.html b/modules/rng/diffLayout.html
new file mode 100644 (file)
index 0000000..c07dd77
--- /dev/null
+++ b/modules/rng/diffLayout.html
@@ -0,0 +1,4 @@
+<div class="rng-module-rng-diffLayout">\r
+    <div fnpjs-place="left"></div>\r
+    <div fnpjs-place="right"></div>\r
+</div>
\ No newline at end of file

diff --git a/modules/rng/diffLayout.less b/modules/rng/diffLayout.less
new file mode 100644 (file)
index 0000000..bbe51aa
--- /dev/null
+++ b/modules/rng/diffLayout.less
@@ -0,0 +1,12 @@
+.rng-module-rng-diffLayout {\r
+    [fnpjs-place=left] {\r
+        width: 200px;\r
+        margin: 0 20 0 0px;\r
+        float: left;\r
+    }\r
+    [fnpjs-place=right] {\r
+        width: 700px;\r
+        float: right;\r
+    }\r
+\r
+}
\ No newline at end of file

diff --git a/modules/rng/rng.js b/modules/rng/rng.js
index e3e97ed..16a6d25 100644 (file)
--- a/modules/rng/rng.js
+++ b/modules/rng/rng.js
@@ -4,7 +4,8 @@ define([
 'views/tabs/tabs',\r
 'libs/text!./mainLayout.html',\r
 'libs/text!./editingLayout.html',\r
 'views/tabs/tabs',\r
 'libs/text!./mainLayout.html',\r
 'libs/text!./editingLayout.html',\r

-], function(layout, vbox, tabs, mainLayoutTemplate, visualEditingLayoutTemplate) {\r
+'libs/text!./diffLayout.html',\r
+], function(layout, vbox, tabs, mainLayoutTemplate, visualEditingLayoutTemplate, diffLayoutTemplate) {\r

 \r
 'use strict';\r
 \r
 \r
 'use strict';\r
 \r


@@ -74,12 +75,15 @@ return function(sandbox) {
         mainTabs: (new tabs.View()).render(),\r
         visualEditing: new layout.Layout(visualEditingLayoutTemplate),\r
         visualEditingSidebar: (new tabs.View({stacked: true})).render(),\r
         mainTabs: (new tabs.View()).render(),\r
         visualEditing: new layout.Layout(visualEditingLayoutTemplate),\r
         visualEditingSidebar: (new tabs.View({stacked: true})).render(),\r

-        currentNodePaneLayout: new vbox.VBox()\r
+        currentNodePaneLayout: new vbox.VBox(),\r
+        diffLayout: new layout.Layout(diffLayoutTemplate)\r

     }\r
     \r
     views.visualEditing.setView('rightColumn', views.visualEditingSidebar.getAsView());\r
     addMainTab('Edytor', 'editor', views.visualEditing.getAsView());\r
     \r
     }\r
     \r
     views.visualEditing.setView('rightColumn', views.visualEditingSidebar.getAsView());\r
     addMainTab('Edytor', 'editor', views.visualEditing.getAsView());\r
     \r

+    addMainTab('Historia', 'history', views.diffLayout.getAsView());\r
+    \r

     sandbox.getDOM().append(views.mainLayout.getAsView());\r
     \r
     views.visualEditingSidebar.addTab({icon: 'pencil'}, 'edit', views.currentNodePaneLayout.getAsView());\r
     sandbox.getDOM().append(views.mainLayout.getAsView());\r
     \r
     views.visualEditingSidebar.addTab({icon: 'pencil'}, 'edit', views.currentNodePaneLayout.getAsView());\r


@@ -111,7 +115,7 @@ return function(sandbox) {
         ready: function() {\r
             views.mainLayout.setView('mainView', views.mainTabs.getAsView());\r
             \r
         ready: function() {\r
             views.mainLayout.setView('mainView', views.mainTabs.getAsView());\r
             \r

-            _.each(['sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'nodeBreadCrumbs', 'mainBar', 'indicator', 'documentHistory'], function(moduleName) {\r
+            _.each(['sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'nodeBreadCrumbs', 'mainBar', 'indicator', 'documentHistory', 'diffViewer'], function(moduleName) {\r

                 sandbox.getModule(moduleName).start();\r
             });\r
         },\r
                 sandbox.getModule(moduleName).start();\r
             });\r
         },\r


@@ -136,6 +140,9 @@ return function(sandbox) {
         },\r
         historyItemAdded: function(item) {\r
             sandbox.getModule('documentHistory').addHistory([item], {animate: true});\r
         },\r
         historyItemAdded: function(item) {\r
             sandbox.getModule('documentHistory').addHistory([item], {animate: true});\r

+        },\r
+        diffFetched: function(diff) {\r
+            sandbox.getModule('diffViewer').setDiff(diff);\r

         }\r
     }\r
     \r
         }\r
     }\r
     \r


@@ -255,7 +262,16 @@ return function(sandbox) {
     eventHandlers.documentHistory = {\r
         ready: function() {\r
             sandbox.getModule('documentHistory').addHistory(sandbox.getModule('data').getHistory());\r
     eventHandlers.documentHistory = {\r
         ready: function() {\r
             sandbox.getModule('documentHistory').addHistory(sandbox.getModule('data').getHistory());\r

-            addMainTab('Historia', 'history', sandbox.getModule('documentHistory').getView());\r
+            views.diffLayout.setView('left', sandbox.getModule('documentHistory').getView());\r
+        },\r
+        compare: function(ver1, ver2) {\r
+            sandbox.getModule('data').fetchDiff(ver1, ver2);\r
+        }\r
+    }\r
+    \r
+    eventHandlers.diffViewer = {\r
+        ready: function() {\r
+            views.diffLayout.setView('right', sandbox.getModule('diffViewer').getView());\r

         }\r
     }\r
     \r
         }\r
     }\r
     \r

diff --git a/modules/rng/rng.less b/modules/rng/rng.less
index 7e8241c..79ae6a2 100644 (file)
--- a/modules/rng/rng.less
+++ b/modules/rng/rng.less
@@ -1,2 +1,3 @@
 @import 'mainLayout.less';\r
 @import 'mainLayout.less';\r

-@import 'editingLayout.less';
\ No newline at end of file
+@import 'editingLayout.less';\r
+@import 'diffLayout.less';
\ No newline at end of file

diff --git a/styles/main.less b/styles/main.less
index 3897bdd..da38074 100644 (file)
--- a/styles/main.less
+++ b/styles/main.less
@@ -11,4 +11,5 @@
 @import '../modules/indicator/indicator.less';\r
 @import '../modules/nodePane/nodePane.less';\r
 @import '../modules/nodeFamilyTree/nodeFamilyTree.less';\r
 @import '../modules/indicator/indicator.less';\r
 @import '../modules/nodePane/nodePane.less';\r
 @import '../modules/nodeFamilyTree/nodeFamilyTree.less';\r

-@import '../modules/metadataEditor/metadataEditor.less';
\ No newline at end of file
+@import '../modules/metadataEditor/metadataEditor.less';\r
+@import '../modules/diffViewer/diffViewer.less';\r

diff --git a/views/tabs/tabs.js b/views/tabs/tabs.js
index de776c6..43df1c1 100644 (file)
--- a/views/tabs/tabs.js
+++ b/views/tabs/tabs.js
@@ -31,6 +31,10 @@ define([
             if(this.options.stacked) {\r
                 this.nodes.tabBar.addClass('nav-stacked nav-pills').removeClass('nav-tabs');\r
             }\r
             if(this.options.stacked) {\r
                 this.nodes.tabBar.addClass('nav-stacked nav-pills').removeClass('nav-tabs');\r
             }\r

+            if(this.options.position === 'right') {\r
+                this.$el.addClass('tabs-right');\r
+                this.nodes.content.addClass('tab-content');\r
+            }\r

             return this;\r
         },\r
         \r
             return this;\r
         },\r
         \r