X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/e9aaf1e41c5e695136d06f008c06b287da7d3eda..9831076c8f7385dffb533e0327cc7dd7c9f1ef92:/src/editor/modules/documentToolbar/documentToolbar.js diff --git a/src/editor/modules/documentToolbar/documentToolbar.js b/src/editor/modules/documentToolbar/documentToolbar.js index 33f95a6..82b6dca 100644 --- a/src/editor/modules/documentToolbar/documentToolbar.js +++ b/src/editor/modules/documentToolbar/documentToolbar.js @@ -1,87 +1,127 @@ -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 = {}, + contextDefer = {}, + duringClick = false, + 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; - } + _.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; + }); - _.extend(params, {ctrlKey: e.ctrlKey}); - - 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.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; + if(duringClick) { + contextDefer[what] = true; + } else { + refreshContextParam(what); } }; - view.setup(); + 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; }, - setNodeElement: function(node) { - currentNode = 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); } };