editor: canvas - styling for aside.comment nodes

[fnpeditor.git] / src / editor / modules / documentToolbar / documentToolbar.js

diff --git a/src/editor/modules/documentToolbar/documentToolbar.js b/src/editor/modules/documentToolbar/documentToolbar.js
index 75fcc72..84361ad 100644 (file)
--- a/src/editor/modules/documentToolbar/documentToolbar.js
+++ b/src/editor/modules/documentToolbar/documentToolbar.js
@@ -1,48 +1,57 @@
 define(['libs/jquery', 'libs/underscore', 'utils/wlxml', 'libs/text!./template.html'], function($, _, wlxmlUtils, template) {
 
 'use strict';
+/* globals Node */
 
 return function(sandbox) {
     
+    var documentTemplates = sandbox.getBootstrappedData(),
+        currentNode;
+
     var view = {
-        node: $(_.template(template)({tagNames: wlxmlUtils.wlxmlTagNames, classNames: wlxmlUtils.wlxmlClassNames})),
+        node: $(_.template(template)({tagNames: wlxmlUtils.wlxmlTagNames, classNames: wlxmlUtils.wlxmlClassNames, templates: documentTemplates})),
         setup: function() {
             var view = this;
             
             this.node.find('button').click(function(e) {
                 e.stopPropagation();
+
                 var btn = $(e.currentTarget),
                     btnName = btn.attr('data-name'),
                     meta = btn.attr('data-meta'),
                     params = {},
                     command = btnName;
 
-                if(btn.attr('data-btn-type') === 'toggle') {
-                    command = 'toggle-' + command;
-                    btn.toggleClass('active');
-                    params.toggle = btn.hasClass('active');
-                }
+                if(myHandlers[btnName]) {
+                    myHandlers[btnName](btn);
+                } else {
+                    if(btn.attr('data-btn-type') === 'toggle') {
+                        command = 'toggle-' + command;
+                        btn.toggleClass('active');
+                        params.toggle = btn.hasClass('active');
+                    }
 
-                if(btnName === 'new-node') {
-                    command = 'newNodeRequested';
-                    params.wlxmlTag = view.getOption('newTag-tag');
-                    params.wlxmlClass = view.getOption('newTag-class');
-                    if(meta) {
-                        var split = meta.split('/');
-                        params.wlxmlTag = split[0];
-                        params.wlxmlClass = split[1];
+                    if(btnName === 'new-node') {
+                        command = 'newNodeRequested';
+                        params.wlxmlTag = view.getOption('newTag-tag');
+                        params.wlxmlClass = view.getOption('newTag-class');
+                        if(meta) {
+                            var split = meta.split('/');
+                            params.wlxmlTag = split[0];
+                            params.wlxmlClass = split[1];
+                        }
+                    } else {
+                        params.meta = meta;
                     }
-                } else {
-                    params.meta = meta;
-                }
 
-                if(command === 'undo' || command === 'redo') {
-                    params.callback = function(disable) {
-                        btn.attr('disabled', !disable);
+                    if(command === 'undo' || command === 'redo') {
+                        params.callback = function(disable) {
+                            btn.attr('disabled', !disable);
+                        };
                     }
-                }
 
-                sandbox.publish('command', command, params);
+                    sandbox.publish('command', command, params);
+                }
             });
         },
         getOption: function(option) {
@@ -50,11 +59,28 @@ return function(sandbox) {
         }
     };
     
+    var myHandlers = {
+        templatesBtn: function() {
+            if(currentNode && currentNode.nodeType === Node.ELEMENT_NODE) {
+                var templateId = parseInt(view.node.find('[data-name=templates-select]').val(), 10);
+                documentTemplates.forEach(function(template) {
+                    if(template.id === templateId) {
+                        var toAdd = currentNode.document.createDocumentNode(template.content);
+                        currentNode.after(toAdd);
+                    }
+                });
+            }
+        }
+    };
+
     view.setup();
 
     return {
         start: function() { sandbox.publish('ready'); },
         getView: function() { return view.node; },
+        setNodeElement: function(node) {
+            currentNode = node;
+        },
         getOption: function(option) { return view.getOption(option); }
     };
 };