1 define(function(require) {
6 var $ = require('libs/jquery'),
7 Backbone = require('libs/backbone'),
8 _ = require('libs/underscore'),
9 viewTemplate = require('libs/text!modules/documentToolbar/templates/actionView.html'),
10 buttonTemplate = require('libs/text!modules/documentToolbar/templates/actionViewButton.html'),
11 selectionTemplate = require('libs/text!modules/documentToolbar/templates/actionViewSelection.html');
14 viewTemplate = _.template(viewTemplate);
15 buttonTemplate = _.template(buttonTemplate);
16 selectionTemplate = _.template(selectionTemplate);
18 var iconExists = function(iconName) {
20 var el = $('<i>').addClass('icon-' + iconName);
22 var style = window.getComputedStyle(el[0]);
23 var toret = /glyphicons/.test(style.backgroundImage) && !/14px 14px/.test(style.backgroundPosition);
28 var ActionView = Backbone.View.extend({
30 'mousedown .btn': 'onMouseDown',
31 'click .btn': 'onExecute',
32 'change select': 'onSelectionChange',
33 'mouseenter': 'onMouseEnter',
34 'mouseleave': 'onMouseLeave'
36 initialize: function() {
37 this.action = this.options.action;
38 this.action.on('paramsChanged', function() {
41 this.setElement(viewTemplate({tutorial: this.options.tutorial}));
44 /* globals document */
46 var actionState = this.action.getState();
49 this.$el.html(buttonTemplate({label: gettext('error :('), iconName:''}));
50 this._button().attr('disabled', true);
54 var templateContext = {
55 label: actionState.label || '?',
56 iconName: (iconExists(actionState.icon)) ? actionState.icon : null,
57 iconStyle: actionState.iconStyle
59 hovered = document.querySelectorAll(':hover'),
61 button = this._button();
63 if(hovered.length && _.last(hovered) === button[0]) {
68 _.pairs(this.action.definition.params).forEach(function(pair) {
69 var paramName = pair[0],
72 if(paramDesc.type === 'select') {
73 widget = $(selectionTemplate({
75 options: paramDesc.options
77 if(this.action.params[paramName]) {
78 widget.find('option[value=' + this.action.params[paramName].id + ']').attr('selected', true);
80 this.$el.append(widget);
84 this.$el.append(buttonTemplate(templateContext));
85 button = this._button();
87 if(!actionState.allowed) {
88 button.attr('disabled', true);
89 button.wrap('<div style="position: relative;">');
90 button.after('<div style="position: absolute; top:0; bottom:0; left:0; right: 0"></div>');
93 if(actionState.toggled !== undefined) {
94 button.toggleClass('active', actionState.toggled);
98 this.trigger('hover');
101 onMouseEnter: function() {
102 this.trigger('hover');
104 onMouseLeave: function() {
105 this.trigger('leave');
107 onMouseDown: function() {
108 this.trigger('mousedown');
110 onExecute: function() {
111 this.action.execute();
113 onSelectionChange: function(e) {
114 var select = $(e.target),
115 paramName = select.attr('param');
117 this.action.definition.params[paramName].options.some(function(option) {
118 if(option.id.toString() === select.val()) {
119 this.action.updateWidgetParam(paramName, option);
120 return true; // break
124 _button: function() {
125 return this.$el.find('button');
129 var create = function(action, tutorial) {
130 var view = new ActionView({action: action, tutorial: tutorial});
135 view.on.apply(view, Array.prototype.slice.call(arguments, 0));