editor: Allow for editing raw source in the source editor if document contains invali...

[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 33f95a6..9ae5c94 100644 (file)
--- a/src/editor/modules/documentToolbar/documentToolbar.js
+++ b/src/editor/modules/documentToolbar/documentToolbar.js
@@ -1,87 +1,107 @@
-define(['libs/jquery', 'libs/underscore', 'utils/wlxml', 'libs/text!./template.html'], function($, _, wlxmlUtils, template) {
+define(['libs/jquery', 'libs/underscore', 'modules/documentToolbar/actionView', 'libs/text!./template.html'], function($, _, actionView, template) {
 
 'use strict';
-/* globals Node */
+
 
 return function(sandbox) {
     
-    var documentTemplates = sandbox.getBootstrappedData(),
-        currentNode;
+    var addedActions = [],
+        contextParams = {},
+        document, canvas;
 
     var view = {
-        node: $(_.template(template)({wlxmlUtils: wlxmlUtils, templates: documentTemplates})),
-        setup: function() {
-            var view = this;
+        node: $(_.template(template)()),
+        getOption: function(option) {
+            return this.node.find('.rng-module-documentToolbar-toolbarOption[data-option=' + option +']').val();
+        },
+        addAction: function(group, actionDescription) {
+            var action = sandbox.createAction(actionDescription.actionName, actionDescription.actionConfig),
+                view;
+            addedActions.push(action);
+            view = actionView.create(action);
             
-            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(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];
-                        }
-                    } else {
-                        params.meta = meta;
-                    }
-
-                    if(command === 'undo' || command === 'redo') {
-                        params.callback = function(disable) {
-                            btn.attr('disabled', !disable);
-                        };
-                    }
+            _.pairs(contextParams).forEach(function(pair) {
+                var name = pair[0],
+                    value = pair[1];
+                action.updateContextParam(name, value);
+            });
 
-                    _.extend(params, {ctrlKey: e.ctrlKey});
+            group.append(view.dom);
+            view.on('actionExecuted', function(action, ret) {
+                sandbox.publish('actionExecuted', action, ret);
+            });
 
-                    sandbox.publish('command', command, params);
-                }
+            view.on('hover', function() {
+                sandbox.publish('actionHovered', action);
+            });
+            view.on('leave', function() {
+                sandbox.publish('actionOff', action);
             });
         },
-        getOption: function(option) {
-            return this.node.find('.rng-module-documentToolbar-toolbarOption[data-option=' + option +']').val();
+        addActionsGroup: function() {
+            var div = $('<div>');
+            div.addClass('rng-module-documentToolbar-toolbarGroup');
+            this.node.append(div);
+            return div;
         }
     };
     
-    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);
-                    }
-                });
-            }
-        }
+    var setContextParam = function(what, ctx) {
+        contextParams[what] = ctx;
+        addedActions.forEach(function(action) {
+            action.updateContextParam(what, contextParams[what]);
+        });
     };
 
-    view.setup();
+    sandbox.registerKeyHandler('keydown', function(e) {
+        if(e.keyCode === 17) {
+            addedActions.forEach(function(action) {
+                action.updateKeyParam('ctrl', true);
+            });
+        }
+    });
+    sandbox.registerKeyHandler('keyup', function(e) {
+        if(e.keyCode === 17) {
+            addedActions.forEach(function(action) {
+                action.updateKeyParam('ctrl', false);
+            });
+        }
+    });
 
     return {
-        start: function() { sandbox.publish('ready'); },
+        start: function() {
+            var config = sandbox.getConfig().toolbar || {};
+            config.forEach(function(actionsGroup) {
+                var group = view.addActionsGroup();
+                actionsGroup.forEach(function(actionDescription) {
+                    if(typeof actionDescription === 'string') {
+                        actionDescription = {actionName: actionDescription, actionConfig: {}};
+                    }
+                    view.addAction(group, actionDescription);
+                });
+            });
+            sandbox.publish('ready');
+        },
         getView: function() { return view.node; },
-        setNodeElement: function(node) {
-            currentNode = node;
+        setDocumentFragment: function(fragment) {
+            if(!document) {
+                document = fragment.document;
+                document.on('operationEnd', function() {
+                    setContextParam('document', document);
+                });
+                setContextParam('document', document);
+            }
+            setContextParam('fragment', fragment);
+
+        },
+        setCanvas: function(_canvas) {
+            setContextParam('canvas', _canvas);
+            if(!canvas) {
+                canvas = _canvas;
+                canvas.on('changed', function() {
+                    setContextParam('canvas', _canvas);
+                });
+            }
         },
         getOption: function(option) { return view.getOption(option); }
     };