remove mismatched html tags
[fnpeditor.git] / src / editor / modules / documentToolbar / actionView.js
1 define(function(require) {
2     
3 'use strict';
4 /* globals gettext */
5
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');
12
13
14 viewTemplate = _.template(viewTemplate);
15 buttonTemplate = _.template(buttonTemplate);
16 selectionTemplate = _.template(selectionTemplate);
17
18 var iconExists = function(iconName) {
19     /* globals window */
20     var el = $('<i>').addClass('icon-' + iconName);
21     $('body').append(el);
22     var style = window.getComputedStyle(el[0]);
23     var toret = /glyphicons/.test(style.backgroundImage) && !/14px 14px/.test(style.backgroundPosition);
24     el.remove();
25     return toret;
26 };
27
28 var ActionView = Backbone.View.extend({
29     events: {
30         'mousedown .btn': 'onMouseDown',
31         'click .btn': 'onExecute',
32         'change select': 'onSelectionChange',
33         'mouseenter': 'onMouseEnter',
34         'mouseleave': 'onMouseLeave'
35     },
36     initialize: function() {
37         this.action = this.options.action;
38         this.action.on('paramsChanged', function() {
39             this.render();
40         }, this);
41         this.setElement(viewTemplate({tutorial: this.options.tutorial}));
42     },
43     render: function() {
44         /* globals document */
45
46         var actionState = this.action.getState();
47
48         if(!actionState) {
49             this.$el.html(buttonTemplate({label: gettext('error :('), iconName:''}));
50             this._button().attr('disabled', true);
51             return;
52         }
53
54         var templateContext = {
55             label: actionState.label || '?',
56             iconName: (iconExists(actionState.icon)) ? actionState.icon : null,
57             iconStyle: actionState.iconStyle
58         },
59             hovered = document.querySelectorAll(':hover'),
60             hovers = false,
61             button = this._button();
62            
63         if(hovered.length && _.last(hovered) === button[0]) {
64             hovers = true;
65         }
66
67         this.$el.empty();
68         _.pairs(this.action.definition.params).forEach(function(pair) {
69             var paramName = pair[0],
70                 paramDesc = pair[1],
71                 widget;
72             if(paramDesc.type === 'select') {
73                 widget = $(selectionTemplate({
74                     paramName: paramName,
75                     options: paramDesc.options
76                 }));
77                 if(this.action.params[paramName]) {
78                     widget.find('option[value=' + this.action.params[paramName].id + ']').attr('selected', true);
79                 }
80                 this.$el.append(widget);
81             }
82         }.bind(this));
83
84         this.$el.append(buttonTemplate(templateContext));
85         button = this._button();
86         
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>');
91         }
92         
93         if(actionState.toggled !== undefined) {
94             button.toggleClass('active', actionState.toggled);
95         }
96
97         if(hovers) {
98             this.trigger('hover');
99         }
100     },
101     onMouseEnter: function() {
102         this.trigger('hover');
103     },
104     onMouseLeave: function() {
105         this.trigger('leave');
106     },
107     onMouseDown: function() {
108         this.trigger('mousedown');
109     },
110     onExecute: function() {
111         this.action.execute();
112     },
113     onSelectionChange: function(e) {
114         var select = $(e.target),
115             paramName = select.attr('param');
116
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
121             }
122         }.bind(this));
123     },
124     _button: function() {
125         return this.$el.find('button');
126     }
127 });
128
129 var create = function(action, tutorial) {
130     var view = new ActionView({action: action, tutorial: tutorial});
131     view.render();
132
133     return {
134         on: function() {
135             view.on.apply(view, Array.prototype.slice.call(arguments, 0));
136         },
137         dom: view.$el,
138     };
139 };
140
141 return {
142     create: create
143 };
144
145 });