|
1 /** |
|
2 * Button.js |
|
3 * |
|
4 * Copyright, Moxiecode Systems AB |
|
5 * Released under LGPL License. |
|
6 * |
|
7 * License: http://www.tinymce.com/license |
|
8 * Contributing: http://www.tinymce.com/contributing |
|
9 */ |
|
10 |
|
11 /** |
|
12 * This class is used to create buttons. You can create them directly or through the Factory. |
|
13 * |
|
14 * @example |
|
15 * // Create and render a button to the body element |
|
16 * tinymce.ui.Factory.create({ |
|
17 * type: 'button', |
|
18 * text: 'My button' |
|
19 * }).renderTo(document.body); |
|
20 * |
|
21 * @-x-less Button.less |
|
22 * @class tinymce.ui.Button |
|
23 * @extends tinymce.ui.Widget |
|
24 */ |
|
25 define("tinymce/ui/Button", [ |
|
26 "tinymce/ui/Widget" |
|
27 ], function(Widget) { |
|
28 "use strict"; |
|
29 |
|
30 return Widget.extend({ |
|
31 Defaults: { |
|
32 classes: "widget btn", |
|
33 role: "button" |
|
34 }, |
|
35 |
|
36 /** |
|
37 * Constructs a new button instance with the specified settings. |
|
38 * |
|
39 * @constructor |
|
40 * @param {Object} settings Name/value object with settings. |
|
41 * @setting {String} size Size of the button small|medium|large. |
|
42 * @setting {String} image Image to use for icon. |
|
43 * @setting {String} icon Icon to use for button. |
|
44 */ |
|
45 init: function(settings) { |
|
46 var self = this, size; |
|
47 |
|
48 self.on('click mousedown', function(e) { |
|
49 e.preventDefault(); |
|
50 }); |
|
51 |
|
52 self._super(settings); |
|
53 size = settings.size; |
|
54 |
|
55 if (settings.subtype) { |
|
56 self.addClass(settings.subtype); |
|
57 } |
|
58 |
|
59 if (size) { |
|
60 self.addClass('btn-' + size); |
|
61 } |
|
62 }, |
|
63 |
|
64 /** |
|
65 * Sets/gets the current button icon. |
|
66 * |
|
67 * @method icon |
|
68 * @param {String} [icon] New icon identifier. |
|
69 * @return {String|tinymce.ui.MenuButton} Current icon or current MenuButton instance. |
|
70 */ |
|
71 icon: function(icon) { |
|
72 var self = this, prefix = self.classPrefix; |
|
73 |
|
74 if (typeof icon == 'undefined') { |
|
75 return self.settings.icon; |
|
76 } |
|
77 |
|
78 self.settings.icon = icon; |
|
79 icon = icon ? prefix + 'ico ' + prefix + 'i-' + self.settings.icon : ''; |
|
80 |
|
81 if (self._rendered) { |
|
82 var btnElm = self.getEl().firstChild, iconElm = btnElm.getElementsByTagName('i')[0]; |
|
83 |
|
84 if (icon) { |
|
85 if (!iconElm || iconElm != btnElm.firstChild) { |
|
86 iconElm = document.createElement('i'); |
|
87 btnElm.insertBefore(iconElm, btnElm.firstChild); |
|
88 } |
|
89 |
|
90 iconElm.className = icon; |
|
91 } else if (iconElm) { |
|
92 btnElm.removeChild(iconElm); |
|
93 } |
|
94 |
|
95 self.text(self._text); // Set text again to fix whitespace between icon + text |
|
96 } |
|
97 |
|
98 return self; |
|
99 }, |
|
100 |
|
101 /** |
|
102 * Repaints the button for example after it's been resizes by a layout engine. |
|
103 * |
|
104 * @method repaint |
|
105 */ |
|
106 repaint: function() { |
|
107 var btnStyle = this.getEl().firstChild.style; |
|
108 |
|
109 btnStyle.width = btnStyle.height = "100%"; |
|
110 |
|
111 this._super(); |
|
112 }, |
|
113 |
|
114 /** |
|
115 * Sets/gets the current button text. |
|
116 * |
|
117 * @method text |
|
118 * @param {String} [text] New button text. |
|
119 * @return {String|tinymce.ui.Button} Current text or current Button instance. |
|
120 */ |
|
121 text: function(text) { |
|
122 var self = this; |
|
123 |
|
124 if (self._rendered) { |
|
125 var textNode = self.getEl().lastChild.lastChild; |
|
126 if (textNode) { |
|
127 textNode.data = self.translate(text); |
|
128 } |
|
129 } |
|
130 |
|
131 return self._super(text); |
|
132 }, |
|
133 |
|
134 /** |
|
135 * Renders the control as a HTML string. |
|
136 * |
|
137 * @method renderHtml |
|
138 * @return {String} HTML representing the control. |
|
139 */ |
|
140 renderHtml: function() { |
|
141 var self = this, id = self._id, prefix = self.classPrefix; |
|
142 var icon = self.settings.icon, image; |
|
143 |
|
144 image = self.settings.image; |
|
145 if (image) { |
|
146 icon = 'none'; |
|
147 |
|
148 // Support for [high dpi, low dpi] image sources |
|
149 if (typeof image != "string") { |
|
150 image = window.getSelection ? image[0] : image[1]; |
|
151 } |
|
152 |
|
153 image = ' style="background-image: url(\'' + image + '\')"'; |
|
154 } else { |
|
155 image = ''; |
|
156 } |
|
157 |
|
158 icon = self.settings.icon ? prefix + 'ico ' + prefix + 'i-' + icon : ''; |
|
159 |
|
160 return ( |
|
161 '<div id="' + id + '" class="' + self.classes() + '" tabindex="-1" aria-labelledby="' + id + '">' + |
|
162 '<button role="presentation" type="button" tabindex="-1">' + |
|
163 (icon ? '<i class="' + icon + '"' + image + '></i>' : '') + |
|
164 (self._text ? (icon ? '\u00a0' : '') + self.encode(self._text) : '') + |
|
165 '</button>' + |
|
166 '</div>' |
|
167 ); |
|
168 } |
|
169 }); |
|
170 }); |