editor: Inserting document templates support

TODO: Refactor it out of documentToolbar module, use some kind of
more generalized mechanism.

diff --git a/src/editor/modules/documentToolbar/documentToolbar.js b/src/editor/modules/documentToolbar/documentToolbar.js
index d903483..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';
 define(['libs/jquery', 'libs/underscore', 'utils/wlxml', 'libs/text!./template.html'], function($, _, wlxmlUtils, template) {
 
 'use strict';

+/* globals Node */

 
 return function(sandbox) {
     
 
 return function(sandbox) {
     

+    var documentTemplates = sandbox.getBootstrappedData(),
+        currentNode;
+

     var view = {
     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();
         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;
 
                 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) {
             });
         },
         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; },
     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); }
     };
 };
         getOption: function(option) { return view.getOption(option); }
     };
 };

diff --git a/src/editor/modules/documentToolbar/template.html b/src/editor/modules/documentToolbar/template.html
index 0572bb5..17eecde 100644 (file)
--- a/src/editor/modules/documentToolbar/template.html
+++ b/src/editor/modules/documentToolbar/template.html
@@ -39,5 +39,16 @@
         <button data-name="grid" data-btn-type="toggle" class="btn btn-mini"><i class="icon-th-large"></i></button>
     </div>
 
         <button data-name="grid" data-btn-type="toggle" class="btn btn-mini"><i class="icon-th-large"></i></button>
     </div>
 

+    <% if(templates) { %>
+    <div class="rng-module-documentToolbar-toolbarGroup">
+        <select data-name="templates-select">
+        <% templates.forEach(function(template) { %>
+            <option value="<%= template.id %>"><%= template.name %></option>
+        <% }); %>
+        </select>
+        <button class="btn btn-mini" data-name="templatesBtn">+</button>
+    </div>
+    <% } %>
+

     <div style="clear: both;"></div>
 </div>
\ No newline at end of file
     <div style="clear: both;"></div>
 </div>
\ No newline at end of file

diff --git a/src/editor/modules/rng/rng.js b/src/editor/modules/rng/rng.js
index ff23c9d..a5432c0 100644 (file)
--- a/src/editor/modules/rng/rng.js
+++ b/src/editor/modules/rng/rng.js
@@ -42,6 +42,7 @@ return function(sandbox) {
             sandbox.getModule('nodePane').setNodeElement(nodeElement);
             sandbox.getModule('nodeFamilyTree').setElement(nodeElement);
             sandbox.getModule('nodeBreadCrumbs').setNodeElement(nodeElement);
             sandbox.getModule('nodePane').setNodeElement(nodeElement);
             sandbox.getModule('nodeFamilyTree').setElement(nodeElement);
             sandbox.getModule('nodeBreadCrumbs').setNodeElement(nodeElement);

+            sandbox.getModule('documentToolbar').setNodeElement(nodeElement);

         },
         updateCurrentTextElement: function(textElement) {
             sandbox.getModule('nodeFamilyTree').setElement(textElement);
         },
         updateCurrentTextElement: function(textElement) {
             sandbox.getModule('nodeFamilyTree').setElement(textElement);