-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 = {},
+ 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);
+ action.on('actionExecuted', function(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;
}
};
- view.setup();
+ var setContextParam = function(what, ctx) {
+ contextParams[what] = ctx;
+ 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('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); }
};
};