From b58b8f498d9b5e70aec099829b97af2c4d72da10 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Aleksander=20=C5=81ukasz?=
 <aleksander.lukasz@nowoczesnapolska.org.pl>
Date: Thu, 6 Jun 2013 13:07:45 +0200
Subject: [PATCH] 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 @@
+<div class="rng-module-documentToolbar">
+    <div class="rng-module-documentToolbar-toolbarGroup">
+        <button data-btn="new-node" data-meta="header/" data-btn-type="cmd" class="btn btn-mini">header</button>
+        <button data-btn="new-node" data-meta="div/p" data-btn-type="cmd" class="btn btn-mini">div/p</button>
+        <button data-btn="new-node" data-meta="span/cite" data-btn-type="cmd" class="btn btn-mini">span/cite</i></button>
+        <button data-btn="new-node" data-meta="span/uri" data-btn-type="cmd" class="btn btn-mini">span/uri</i></button>
+        <select class="rng-module-documentToolbar-toolbarOption" data-option="newTag-tag">
+            <% var options = ['', 'section', 'header', 'div', 'span', 'aside']; %>
+            <% options.forEach(function(option) { %>
+                <option value="<%= option %>" <% if(option==='span') { %>selected<% } %>><%= option %></option>
+            <% }); %>
+        </select>
+        <select class="rng-module-documentToolbar-toolbarOption" data-option="newTag-class">
+            <% var options = ['', 'author', 'title', 'cite', 'cite.code', 'cite.code.xml', 'list', 'list.items', 'item', 'uri', 'p', 'footnote', 'todo', 'emp', 'emph.tech'] %>
+            <% options.forEach(function(option) { %>
+                <option value="<%= option.replace(/\./g, '-') %>" <% if(option==='cite') { %>selected<% } %>><%= option %></option>
+            <% }); %>
+        </select>
+        <button data-btn="new-node" data-btn-type="cmd" class="btn btn-mini"><i class="icon-plus"></i></button>
+    </div>
+    <div class="rng-module-documentToolbar-toolbarGroup">
+        <button data-btn="grid" data-btn-type="toggle" class="btn btn-mini"><i class="icon-th-large"></i></button>
+        <button data-btn="tags" data-btn-type="toggle" class="btn btn-mini"><i class="icon-tag"></i></button>
+    </div>
+    <div style="clear: both;"></div>
+</div>
\ 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 @@
 <div>
+    <div fnpjs-place="toolbar"></div>
     <div class="rng-module-rng2-left" fnpjs-place="leftColumn"></div>
     <div class="rng-module-rng2-right" fnpjs-place="rightColumn"></div>
     <div style="clear:both;"></div>
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