From b58b8f498d9b5e70aec099829b97af2c4d72da10 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Thu, 6 Jun 2013 13:07:45 +0200 Subject: [PATCH 1/1] documentToolbar module --- modules.js | 1 + modules.less | 1 + modules/documentCanvas/documentCanvas.js | 10 +++- modules/documentToolbar/documentToolbar.js | 62 ++++++++++++++++++++ modules/documentToolbar/documentToolbar.less | 28 +++++++++ modules/documentToolbar/template.html | 26 ++++++++ modules/rng/editingLayout.html | 1 + modules/rng/rng.js | 18 +++++- 8 files changed, 145 insertions(+), 2 deletions(-) create mode 100644 modules/documentToolbar/documentToolbar.js create mode 100644 modules/documentToolbar/documentToolbar.less create mode 100644 modules/documentToolbar/template.html diff --git a/modules.js b/modules.js index 5a297cf..4cd572c 100644 --- a/modules.js +++ b/modules.js @@ -13,6 +13,7 @@ define(function(require) { visualEditor: require('modules/visualEditor'), documentCanvas: require('modules/documentCanvas/documentCanvas'), + documentToolbar: require('modules/documentToolbar/documentToolbar'), nodePane: require('modules/nodePane/nodePane'), metadataEditor: require('modules/metadataEditor/metadataEditor'), nodeFamilyTree: require('modules/nodeFamilyTree/nodeFamilyTree'), diff --git a/modules.less b/modules.less index e7384e1..fa6a64a 100644 --- a/modules.less +++ b/modules.less @@ -1,5 +1,6 @@ @import 'modules/rng/rng.less'; @import 'modules/mainBar/mainBar.less'; +@import 'modules/documentToolbar/documentToolbar.less'; @import 'modules/indicator/indicator.less'; @import 'modules/nodePane/nodePane.less'; @import 'modules/metadataEditor/metadataEditor.less'; \ No newline at end of file diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js index 93d1866..ac978f2 100644 --- a/modules/documentCanvas/documentCanvas.js +++ b/modules/documentCanvas/documentCanvas.js @@ -248,8 +248,16 @@ return function(sandbox) { }, selectNode: function(id) { view.selectNodeById(id); + }, + toggleGrid: function(toggle) { + view.toggleGrid(toggle); + }, + insertNewNode: function(wlxmlTag, wlxmlClass) { + view.insertNewNode(wlxmlTag, wlxmlClass); + }, + wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) { + view.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass); } - } }; diff --git a/modules/documentToolbar/documentToolbar.js b/modules/documentToolbar/documentToolbar.js new file mode 100644 index 0000000..a2a1567 --- /dev/null +++ b/modules/documentToolbar/documentToolbar.js @@ -0,0 +1,62 @@ +define(['libs/jquery-1.9.1.min', 'libs/underscore-min', 'libs/text!./template.html'], function($, _, template) { + +'use strict'; + +return function(sandbox) { + + var view = { + node: $(_.template(template)()), + setup: function() { + var view = this; + + this.node.find('button').click(function(e) { + e.stopPropagation(); + var btn = $(e.currentTarget); + if(btn.attr('data-btn-type') === 'toggle') { + btn.toggleClass('active') + var event; + var btnId = btn.attr('data-btn'); + if(btnId === 'grid') + event = 'toggleGrid'; + if(btnId === 'tags') + event = 'toggleTags'; + sandbox.publish(event, btn.hasClass('active')); + } + if(btn.attr('data-btn-type') === 'cmd') { + var command = btn.attr('data-btn'); + var meta = btn.attr('data-meta'); + if(command === 'new-node') { + var wlxmlTag = view.getOption('newTag-tag'); + var wlxmlClass = view.getOption('newTag-class'); + if(meta) { + var split = meta.split('/'); + wlxmlTag = split[0]; + wlxmlClass = split[1]; + } + if(window.getSelection().isCollapsed) { + //view.insertNewNode(wlxmlTag, wlxmlClass); + } + else { + //this.wrapWithNodeRequest(wlxmlTag, wlxmlClass); + } + sandbox.publish('newNodeRequested', wlxmlTag, wlxmlClass); + } + //sandbox.publish('command', btn.attr('data-btn'), btn.attr('data-meta')); + } + }); + }, + getOption: function(option) { + return this.node.find('.rng-module-documentToolbar-toolbarOption[data-option=' + option +']').val(); + } + } + + view.setup(); + + return { + start: function() { sandbox.publish('ready'); }, + getView: function() { return view.node; }, + getOption: function(option) { return view.getOption(option); } + } +} + +}); \ No newline at end of file diff --git a/modules/documentToolbar/documentToolbar.less b/modules/documentToolbar/documentToolbar.less new file mode 100644 index 0000000..0686e38 --- /dev/null +++ b/modules/documentToolbar/documentToolbar.less @@ -0,0 +1,28 @@ +.rng-module-documentToolbar { + margin: -15px 0 10px 0; + white-space:nowrap; + word-spacing:0; + + select { + line-height: 14px; + font-size:9px; + height: auto; + width: 50px; + padding: 1px; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + margin-bottom: 0; + } + + .rng-module-documentToolbar-toolbarGroup { + border-width: 0 1px 0 0; + border-style: solid; + border-color: #ddd; + padding: 0 8px 0 0; + margin: 0 8px 0 0; + float:left; + } + +} + diff --git a/modules/documentToolbar/template.html b/modules/documentToolbar/template.html new file mode 100644 index 0000000..104f00a --- /dev/null +++ b/modules/documentToolbar/template.html @@ -0,0 +1,26 @@ +
+
+ + + + + + + +
+
+ + +
+
+
\ No newline at end of file diff --git a/modules/rng/editingLayout.html b/modules/rng/editingLayout.html index f98ca07..c8d5a3d 100644 --- a/modules/rng/editingLayout.html +++ b/modules/rng/editingLayout.html @@ -1,4 +1,5 @@
+
diff --git a/modules/rng/rng.js b/modules/rng/rng.js index fec264e..09e1b90 100644 --- a/modules/rng/rng.js +++ b/modules/rng/rng.js @@ -54,7 +54,7 @@ return function(sandbox) { ready: function() { views.mainLayout.setView('mainView', views.mainTabs.getAsView()); - _.each(['visualEditor', 'sourceEditor', 'documentCanvas', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'mainBar', 'indicator'], function(moduleName) { + _.each(['visualEditor', 'sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'mainBar', 'indicator'], function(moduleName) { sandbox.getModule(moduleName).start(); }); }, @@ -150,6 +150,22 @@ return function(sandbox) { nodeSelected: function(id) { sandbox.getModule('documentCanvas').selectNode(id); } + }; + + eventHandlers.documentToolbar = { + ready: function() { + views.visualEditing.setView('toolbar', sandbox.getModule('documentToolbar').getView()); + }, + toggleGrid: function(toggle) { + sandbox.getModule('documentCanvas').toggleGrid(toggle); + }, + newNodeRequested: function(wlxmlTag, wlxmlClass) { + if(window.getSelection().isCollapsed) { + sandbox.getModule('documentCanvas').insertNewNode(wlxmlTag, wlxmlClass); + } else { + sandbox.getModule('documentCanvas').wrapSelectionWithNewNode(wlxmlTag, wlxmlClass); + } + } } /* api */ -- 2.20.1