From f61fd6fa1d5871782b079ee50fb6bb10777cadc2 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Fri, 14 Jun 2013 12:51:46 +0200 Subject: [PATCH] First take on diffViewer --- modules.js | 3 +- modules/data/data.js | 10 ++++ modules/diffViewer/diff.html | 1 + modules/diffViewer/diffViewer.js | 35 ++++++++++++++ modules/diffViewer/diffViewer.less | 56 ++++++++++++++++++++++ modules/documentHistory/documentHistory.js | 15 ++++-- modules/rng/diffLayout.html | 4 ++ modules/rng/diffLayout.less | 12 +++++ modules/rng/rng.js | 24 ++++++++-- modules/rng/rng.less | 3 +- styles/main.less | 3 +- views/tabs/tabs.js | 4 ++ 12 files changed, 160 insertions(+), 10 deletions(-) create mode 100644 modules/diffViewer/diff.html create mode 100644 modules/diffViewer/diffViewer.js create mode 100644 modules/diffViewer/diffViewer.less create mode 100644 modules/rng/diffLayout.html create mode 100644 modules/rng/diffLayout.less 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 @@ +
\ 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 = $('
').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 @@ +
+
+
+
\ 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; }, -- 2.20.1