editor: bottom panel

[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 d903483..82b6dca 100644 (file)
--- a/src/editor/modules/documentToolbar/documentToolbar.js
+++ b/src/editor/modules/documentToolbar/documentToolbar.js
@@ -1,60 +1,128 @@
-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';
 
+
 return function(sandbox) {
     
+    var addedActions = [],
+        contextParams = {},
+        contextDefer = {},
+        duringClick = false,
+        document, canvas;
+
     var view = {
-        node: $(_.template(template)({tagNames: wlxmlUtils.wlxmlTagNames, classNames: wlxmlUtils.wlxmlClassNames})),
-        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(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;
-                }
+            _.pairs(contextParams).forEach(function(pair) {
+                var name = pair[0],
+                    value = pair[1];
+                action.updateContextParam(name, value);
+            });
 
-                if(command === 'undo' || command === 'redo') {
-                    params.callback = function(disable) {
-                        btn.attr('disabled', !disable);
-                    };
-                }
+            group.append(view.dom);
+            view.on('actionExecuted', function(action, ret) {
+                sandbox.publish('actionExecuted', action, ret);
+                duringClick = false;
+                _.pairs(contextDefer).forEach(function(pair) {
+                    var what = pair[0],
+                        deferred = pair[1];
+                    if(deferred) {
+                        refreshContextParam(what);
+                    }
+                });
+            });
+            view.on('mousedown', function() {
+                duringClick = true;
+            });
 
-                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;
         }
     };
     
-    view.setup();
+    var setContextParam = function(what, ctx) {
+        contextParams[what] = ctx;
+        if(duringClick) {
+            contextDefer[what] = true;
+        } else {
+            refreshContextParam(what);
+        }
+    };
+
+    var refreshContextParam = function(what) {
+        addedActions.forEach(function(action) {
+            action.updateContextParam(what, contextParams[what]);
+        });
+    };
+
+    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; },
+        setDocumentFragment: function(fragment) {
+            if(!document) {
+                document = fragment.document;
+                document.on('operationEnd', function() {
+                    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); }
     };
 };