documentToolbar module

diff --git a/modules.js b/modules.js
index 5a297cf..4cd572c 100644 (file)
--- a/modules.js
+++ b/modules.js
@@ -13,6 +13,7 @@ define(function(require) {
         visualEditor: require('modules/visualEditor'),\r
         \r
         documentCanvas: require('modules/documentCanvas/documentCanvas'),\r
         visualEditor: require('modules/visualEditor'),\r
         \r
         documentCanvas: require('modules/documentCanvas/documentCanvas'),\r

+        documentToolbar: require('modules/documentToolbar/documentToolbar'),\r

         nodePane: require('modules/nodePane/nodePane'),\r
         metadataEditor: require('modules/metadataEditor/metadataEditor'),\r
         nodeFamilyTree: require('modules/nodeFamilyTree/nodeFamilyTree'),\r
         nodePane: require('modules/nodePane/nodePane'),\r
         metadataEditor: require('modules/metadataEditor/metadataEditor'),\r
         nodeFamilyTree: require('modules/nodeFamilyTree/nodeFamilyTree'),\r

diff --git a/modules.less b/modules.less
index e7384e1..fa6a64a 100644 (file)
--- a/modules.less
+++ b/modules.less
@@ -1,5 +1,6 @@
 @import 'modules/rng/rng.less';\r
 @import 'modules/mainBar/mainBar.less';\r
 @import 'modules/rng/rng.less';\r
 @import 'modules/mainBar/mainBar.less';\r

+@import 'modules/documentToolbar/documentToolbar.less';\r

 @import 'modules/indicator/indicator.less';\r
 @import 'modules/nodePane/nodePane.less';\r
 @import 'modules/metadataEditor/metadataEditor.less';
\ No newline at end of file
 @import 'modules/indicator/indicator.less';\r
 @import 'modules/nodePane/nodePane.less';\r
 @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 (file)
--- a/modules/documentCanvas/documentCanvas.js
+++ b/modules/documentCanvas/documentCanvas.js
@@ -248,8 +248,16 @@ return function(sandbox) {
         },\r
         selectNode: function(id) {\r
             view.selectNodeById(id);\r
         },\r
         selectNode: function(id) {\r
             view.selectNodeById(id);\r

+        },\r
+        toggleGrid: function(toggle) {\r
+            view.toggleGrid(toggle);\r
+        },\r
+        insertNewNode: function(wlxmlTag, wlxmlClass) {\r
+            view.insertNewNode(wlxmlTag, wlxmlClass);\r
+        },\r
+        wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) {\r
+            view.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);\r

         }\r
         }\r

-        \r

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

diff --git a/modules/documentToolbar/documentToolbar.js b/modules/documentToolbar/documentToolbar.js
new file mode 100644 (file)
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) {\r
+\r
+'use strict';\r
+\r
+return function(sandbox) {\r
+    \r
+    var view = {\r
+        node: $(_.template(template)()),\r
+        setup: function() {\r
+            var view = this;\r
+            \r
+            this.node.find('button').click(function(e) {\r
+                e.stopPropagation();\r
+                var btn = $(e.currentTarget);\r
+                if(btn.attr('data-btn-type') === 'toggle') {\r
+                    btn.toggleClass('active')\r
+                    var event;\r
+                    var btnId = btn.attr('data-btn');\r
+                    if(btnId === 'grid')\r
+                        event = 'toggleGrid';\r
+                    if(btnId === 'tags')\r
+                        event = 'toggleTags';\r
+                    sandbox.publish(event, btn.hasClass('active'));\r
+                }\r
+                if(btn.attr('data-btn-type') === 'cmd') {\r
+                    var command = btn.attr('data-btn');\r
+                    var meta = btn.attr('data-meta');\r
+                    if(command === 'new-node') {\r
+                        var wlxmlTag = view.getOption('newTag-tag');\r
+                        var wlxmlClass = view.getOption('newTag-class');\r
+                        if(meta) {\r
+                            var split = meta.split('/');\r
+                            wlxmlTag = split[0];\r
+                            wlxmlClass = split[1];\r
+                        }\r
+                        if(window.getSelection().isCollapsed) {\r
+                            //view.insertNewNode(wlxmlTag, wlxmlClass);\r
+                        }\r
+                        else {\r
+                            //this.wrapWithNodeRequest(wlxmlTag, wlxmlClass);\r
+                        }\r
+                        sandbox.publish('newNodeRequested', wlxmlTag, wlxmlClass);\r
+                    }\r
+                    //sandbox.publish('command', btn.attr('data-btn'), btn.attr('data-meta'));\r
+                }\r
+            });\r
+        },\r
+        getOption: function(option) {\r
+            return this.node.find('.rng-module-documentToolbar-toolbarOption[data-option=' + option +']').val();\r
+        }\r
+    }\r
+    \r
+    view.setup();\r
+\r
+    return {\r
+        start: function() { sandbox.publish('ready'); },\r
+        getView: function() { return view.node; },\r
+        getOption: function(option) { return view.getOption(option); }\r
+    }\r
+}\r
+\r
+});
\ No newline at end of file

diff --git a/modules/documentToolbar/documentToolbar.less b/modules/documentToolbar/documentToolbar.less
new file mode 100644 (file)
index 0000000..0686e38
--- /dev/null
+++ b/modules/documentToolbar/documentToolbar.less
@@ -0,0 +1,28 @@
+.rng-module-documentToolbar {\r
+    margin: -15px 0 10px 0;\r
+    white-space:nowrap; \r
+    word-spacing:0;\r
+    \r
+    select {\r
+        line-height: 14px;\r
+        font-size:9px;\r
+        height: auto;\r
+        width: 50px;\r
+        padding: 1px;\r
+    -webkit-appearance: button;\r
+    -moz-appearance: button;\r
+    appearance: button;\r
+        margin-bottom: 0;\r
+    }\r
+\r
+    .rng-module-documentToolbar-toolbarGroup {\r
+        border-width: 0 1px 0 0;\r
+        border-style: solid;\r
+        border-color: #ddd;\r
+        padding: 0 8px 0 0;\r
+        margin: 0 8px 0 0;\r
+        float:left;\r
+    }\r
+    \r
+}\r
+\r

diff --git a/modules/documentToolbar/template.html b/modules/documentToolbar/template.html
new file mode 100644 (file)
index 0000000..104f00a
--- /dev/null
+++ b/modules/documentToolbar/template.html
@@ -0,0 +1,26 @@
+<div class="rng-module-documentToolbar">\r
+    <div class="rng-module-documentToolbar-toolbarGroup">\r
+        <button data-btn="new-node" data-meta="header/" data-btn-type="cmd" class="btn btn-mini">header</button>\r
+        <button data-btn="new-node" data-meta="div/p" data-btn-type="cmd" class="btn btn-mini">div/p</button>\r
+        <button data-btn="new-node" data-meta="span/cite" data-btn-type="cmd" class="btn btn-mini">span/cite</i></button>\r
+        <button data-btn="new-node" data-meta="span/uri" data-btn-type="cmd" class="btn btn-mini">span/uri</i></button>\r
+        <select class="rng-module-documentToolbar-toolbarOption" data-option="newTag-tag">\r
+            <% var options = ['', 'section', 'header', 'div', 'span', 'aside']; %>\r
+            <% options.forEach(function(option) { %>\r
+                <option value="<%= option %>" <% if(option==='span') { %>selected<% } %>><%= option %></option>\r
+            <% }); %>\r
+        </select>\r
+        <select class="rng-module-documentToolbar-toolbarOption" data-option="newTag-class">\r
+            <% var options = ['', 'author', 'title', 'cite', 'cite.code', 'cite.code.xml', 'list', 'list.items', 'item', 'uri', 'p', 'footnote', 'todo', 'emp', 'emph.tech'] %>\r
+            <% options.forEach(function(option) { %>\r
+                <option value="<%= option.replace(/\./g, '-') %>" <% if(option==='cite') { %>selected<% } %>><%= option %></option>\r
+            <% }); %>\r
+        </select>\r
+        <button data-btn="new-node" data-btn-type="cmd" class="btn btn-mini"><i class="icon-plus"></i></button>\r
+    </div>\r
+    <div class="rng-module-documentToolbar-toolbarGroup">\r
+        <button data-btn="grid" data-btn-type="toggle" class="btn btn-mini"><i class="icon-th-large"></i></button>\r
+        <button data-btn="tags" data-btn-type="toggle" class="btn btn-mini"><i class="icon-tag"></i></button>\r
+    </div>\r
+    <div style="clear: both;"></div>\r
+</div>
\ No newline at end of file

diff --git a/modules/rng/editingLayout.html b/modules/rng/editingLayout.html
index f98ca07..c8d5a3d 100644 (file)
--- a/modules/rng/editingLayout.html
+++ b/modules/rng/editingLayout.html
@@ -1,4 +1,5 @@
 <div>\r
 <div>\r

+    <div fnpjs-place="toolbar"></div>\r

     <div class="rng-module-rng2-left" fnpjs-place="leftColumn"></div>\r
     <div class="rng-module-rng2-right" fnpjs-place="rightColumn"></div>\r
     <div style="clear:both;"></div>\r
     <div class="rng-module-rng2-left" fnpjs-place="leftColumn"></div>\r
     <div class="rng-module-rng2-right" fnpjs-place="rightColumn"></div>\r
     <div style="clear:both;"></div>\r

diff --git a/modules/rng/rng.js b/modules/rng/rng.js
index fec264e..09e1b90 100644 (file)
--- a/modules/rng/rng.js
+++ b/modules/rng/rng.js
@@ -54,7 +54,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(['visualEditor', 'sourceEditor', 'documentCanvas', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'mainBar', 'indicator'], function(moduleName) {\r
+            _.each(['visualEditor', 'sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'mainBar', 'indicator'], function(moduleName) {\r

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


@@ -150,6 +150,22 @@ return function(sandbox) {
         nodeSelected: function(id) {\r
             sandbox.getModule('documentCanvas').selectNode(id);\r
         }\r
         nodeSelected: function(id) {\r
             sandbox.getModule('documentCanvas').selectNode(id);\r
         }\r

+    };\r
+    \r
+    eventHandlers.documentToolbar = {\r
+        ready: function() {\r
+            views.visualEditing.setView('toolbar', sandbox.getModule('documentToolbar').getView());\r
+        },\r
+        toggleGrid: function(toggle) {\r
+            sandbox.getModule('documentCanvas').toggleGrid(toggle);\r
+        },\r
+        newNodeRequested: function(wlxmlTag, wlxmlClass) {\r
+            if(window.getSelection().isCollapsed) {\r
+                sandbox.getModule('documentCanvas').insertNewNode(wlxmlTag, wlxmlClass);\r
+            } else {\r
+                sandbox.getModule('documentCanvas').wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);\r
+            }\r
+        }\r

     }\r
     \r
     /* api */\r
     }\r
     \r
     /* api */\r