Diffstat (limited to 'frontend/beta/js/YUI-extensions/widgets/Toolbar.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI-extensions/widgets/Toolbar.js | 296 |
1 files changed, 296 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI-extensions/widgets/Toolbar.js b/frontend/beta/js/YUI-extensions/widgets/Toolbar.js new file mode 100644 index 0000000..7c14753 --- a/dev/null +++ b/frontend/beta/js/YUI-extensions/widgets/Toolbar.js | |||
@@ -0,0 +1,296 @@ | |||
1 | /** | ||
2 | * @class YAHOO.ext.Toolbar | ||
3 | * Basic Toolbar used by the Grid to create the paging toolbar. This class is reusable but functionality | ||
4 | * is limited. Look for more functionality in a future version. | ||
5 | * @constructor | ||
6 | * @param {String/HTMLElement/Element} container | ||
7 | * @param {Array} buttons (optional) array of button configs or elements to add | ||
8 | */ | ||
9 | YAHOO.ext.Toolbar = function(container, buttons){ | ||
10 | this.el = getEl(container, true); | ||
11 | var div = document.createElement('div'); | ||
12 | div.className = 'ytoolbar'; | ||
13 | var tb = document.createElement('table'); | ||
14 | tb.border = 0; | ||
15 | tb.cellPadding = 0; | ||
16 | tb.cellSpacing = 0; | ||
17 | div.appendChild(tb); | ||
18 | var tbody = document.createElement('tbody'); | ||
19 | tb.appendChild(tbody); | ||
20 | var tr = document.createElement('tr'); | ||
21 | tbody.appendChild(tr); | ||
22 | this.el.dom.appendChild(div); | ||
23 | this.tr = tr; | ||
24 | if(buttons){ | ||
25 | this.add.apply(this, buttons); | ||
26 | } | ||
27 | }; | ||
28 | |||
29 | YAHOO.ext.Toolbar.prototype = { | ||
30 | /** | ||
31 | * Adds element(s) to the toolbar - this function takes a variable number of | ||
32 | * arguments of mixed type and adds them to the toolbar... | ||
33 | * | ||
34 | * @param {Mixed} arg If arg is a ToolbarButton, it is added. If arg is a string, it is wrapped | ||
35 | * in a ytb-text element and added unless the text is "separator" in which case a separator | ||
36 | * is added. Otherwise, it is assumed the element is an HTMLElement and it is added directly. | ||
37 | */ | ||
38 | add : function(){ | ||
39 | for(var i = 0; i < arguments.length; i++){ | ||
40 | var el = arguments[i]; | ||
41 | var td = document.createElement('td'); | ||
42 | this.tr.appendChild(td); | ||
43 | if(el instanceof YAHOO.ext.ToolbarButton){ | ||
44 | el.init(td); | ||
45 | }else if(el instanceof Array){ | ||
46 | this.addButton(el); | ||
47 | }else if(typeof el == 'string'){ | ||
48 | var span = document.createElement('span'); | ||
49 | if(el == 'separator'){ | ||
50 | span.className = 'ytb-sep'; | ||
51 | }else{ | ||
52 | span.innerHTML = el; | ||
53 | span.className = 'ytb-text'; | ||
54 | } | ||
55 | td.appendChild(span); | ||
56 | }else if(typeof el == 'object' && el.nodeType){ // must be element? | ||
57 | td.appendChild(el); | ||
58 | }else if(typeof el == 'object'){ // must be button config? | ||
59 | this.addButton(el); | ||
60 | } | ||
61 | } | ||
62 | }, | ||
63 | |||
64 | /** | ||
65 | * Returns the element for this toolbar | ||
66 | * @return {YAHOO.ext.Element} | ||
67 | */ | ||
68 | getEl : function(){ | ||
69 | return this.el; | ||
70 | }, | ||
71 | |||
72 | /** | ||
73 | * Adds a separator | ||
74 | */ | ||
75 | addSeparator : function(){ | ||
76 | var td = document.createElement('td'); | ||
77 | this.tr.appendChild(td); | ||
78 | var span = document.createElement('span'); | ||
79 | span.className = 'ytb-sep'; | ||
80 | td.appendChild(span); | ||
81 | }, | ||
82 | |||
83 | /** | ||
84 | * Add a button (or buttons), see {@link YAHOO.ext.ToolbarButton} for more info on the config | ||
85 | * @param {Object/Array} config A button config or array of configs | ||
86 | * @return {YAHOO.ext.ToolbarButton/Array} | ||
87 | */ | ||
88 | addButton : function(config){ | ||
89 | if(config instanceof Array){ | ||
90 | var buttons = []; | ||
91 | for(var i = 0, len = config.length; i < len; i++) { | ||
92 | buttons.push(this.addButton(config[i])); | ||
93 | } | ||
94 | return buttons; | ||
95 | } | ||
96 | var b = config; | ||
97 | if(!(config instanceof YAHOO.ext.ToolbarButton)){ | ||
98 | b = new YAHOO.ext.ToolbarButton(config); | ||
99 | } | ||
100 | this.add(b); | ||
101 | return b; | ||
102 | }, | ||
103 | |||
104 | /** | ||
105 | * Adds text to the toolbar | ||
106 | * @param {String} text The text to add | ||
107 | * @return {HTMLElement} The span element created which you can use to update the text. | ||
108 | */ | ||
109 | addText : function(text){ | ||
110 | var td = document.createElement('td'); | ||
111 | this.tr.appendChild(td); | ||
112 | var span = document.createElement('span'); | ||
113 | span.className = 'ytb-text'; | ||
114 | span.innerHTML = text; | ||
115 | td.appendChild(span); | ||
116 | return span; | ||
117 | }, | ||
118 | |||
119 | /** | ||
120 | * Inserts a button (or buttons) at the specified index | ||
121 | * @param {Number} index The index where the buttons are to be inserted | ||
122 | * @param {Object/Array} config A button config or array of configs | ||
123 | * @return {YAHOO.ext.ToolbarButton/Array} | ||
124 | */ | ||
125 | insertButton : function(index, config){ | ||
126 | if(config instanceof Array){ | ||
127 | var buttons = []; | ||
128 | for(var i = 0, len = config.length; i < len; i++) { | ||
129 | buttons.push(this.insertButton(index + i, config[i])); | ||
130 | } | ||
131 | return buttons; | ||
132 | } | ||
133 | var b = new YAHOO.ext.ToolbarButton(config); | ||
134 | var td = document.createElement('td'); | ||
135 | var nextSibling = this.tr.childNodes[index]; | ||
136 | if (nextSibling) | ||
137 | this.tr.insertBefore(td, nextSibling); | ||
138 | else | ||
139 | this.tr.appendChild(td); | ||
140 | b.init(td); | ||
141 | return b; | ||
142 | } | ||
143 | }; | ||
144 | |||
145 | /** | ||
146 | * @class YAHOO.ext.ToolbarButton | ||
147 | * A toolbar button. The config has the following options: | ||
148 | * <ul> | ||
149 | * <li>className - The CSS class for the button. Use this to attach a background image for an icon.</li> | ||
150 | * <li>text - The button's text</li> | ||
151 | * <li>tooltip - The buttons tooltip text</li> | ||
152 | * <li>click - function to call when the button is clicked</li> | ||
153 | * <li>mouseover - function to call when the mouse moves over the button</li> | ||
154 | * <li>mouseout - function to call when the mouse moves off the button</li> | ||
155 | * <li>scope - The scope of the above event handlers</li> | ||
156 | * <li></li> | ||
157 | * <li></li> | ||
158 | * @constructor | ||
159 | * @param {Object} config | ||
160 | */ | ||
161 | YAHOO.ext.ToolbarButton = function(config){ | ||
162 | YAHOO.ext.util.Config.apply(this, config); | ||
163 | }; | ||
164 | |||
165 | YAHOO.ext.ToolbarButton.prototype = { | ||
166 | /** @private */ | ||
167 | init : function(appendTo){ | ||
168 | var element = document.createElement('span'); | ||
169 | element.className = 'ytb-button'; | ||
170 | if(this.id){ | ||
171 | element.id = this.id; | ||
172 | } | ||
173 | this.setDisabled(this.disabled === true); | ||
174 | var inner = document.createElement('span'); | ||
175 | inner.className = 'ytb-button-inner ' + (this.className || this.cls); | ||
176 | inner.unselectable = 'on'; | ||
177 | if(this.tooltip){ | ||
178 | element.setAttribute('title', this.tooltip); | ||
179 | } | ||
180 | if(this.style){ | ||
181 | YAHOO.ext.DomHelper.applyStyles(inner, this.style); | ||
182 | } | ||
183 | element.appendChild(inner); | ||
184 | appendTo.appendChild(element); | ||
185 | this.el = getEl(element, true); | ||
186 | this.el.unselectable(); | ||
187 | inner.innerHTML = (this.text ? this.text : ' '); | ||
188 | this.inner = inner; | ||
189 | this.el.mon('click', this.onClick, this, true); | ||
190 | this.el.mon('mouseover', this.onMouseOver, this, true); | ||
191 | this.el.mon('mouseout', this.onMouseOut, this, true); | ||
192 | }, | ||
193 | |||
194 | /** | ||
195 | * Sets this buttons click handler | ||
196 | * @param {Function} click The function to call when the button is clicked | ||
197 | * @param {Object} scope (optional) Scope for the function passed above | ||
198 | */ | ||
199 | setHandler : function(click, scope){ | ||
200 | this.click = click; | ||
201 | this.scope = scope; | ||
202 | }, | ||
203 | |||
204 | /** | ||
205 | * Set this buttons text | ||
206 | * @param {String} text | ||
207 | */ | ||
208 | setText : function(text){ | ||
209 | this.inner.innerHTML = text; | ||
210 | }, | ||
211 | |||
212 | /** | ||
213 | * Set this buttons tooltip text | ||
214 | * @param {String} text | ||
215 | */ | ||
216 | setTooltip : function(text){ | ||
217 | this.el.dom.title = text; | ||
218 | }, | ||
219 | |||
220 | /** | ||
221 | * Show this button | ||
222 | */ | ||
223 | show: function(){ | ||
224 | this.el.dom.parentNode.style.display = ''; | ||
225 | }, | ||
226 | |||
227 | /** | ||
228 | * Hide this button | ||
229 | */ | ||
230 | hide: function(){ | ||
231 | this.el.dom.parentNode.style.display = 'none'; | ||
232 | }, | ||
233 | |||
234 | /** | ||
235 | * Disable this button | ||
236 | */ | ||
237 | disable : function(){ | ||
238 | this.disabled = true; | ||
239 | if(this.el){ | ||
240 | this.el.addClass('ytb-button-disabled'); | ||
241 | } | ||
242 | }, | ||
243 | |||
244 | /** | ||
245 | * Enable this button | ||
246 | */ | ||
247 | enable : function(){ | ||
248 | this.disabled = false; | ||
249 | if(this.el){ | ||
250 | this.el.removeClass('ytb-button-disabled'); | ||
251 | } | ||
252 | }, | ||
253 | |||
254 | /** | ||
255 | * Returns true if this button is disabled. | ||
256 | * @return {Boolean} | ||
257 | */ | ||
258 | isDisabled : function(){ | ||
259 | return this.disabled === true; | ||
260 | }, | ||
261 | |||
262 | setDisabled : function(disabled){ | ||
263 | if(disabled){ | ||
264 | this.disable(); | ||
265 | }else{ | ||
266 | this.enable(); | ||
267 | } | ||
268 | }, | ||
269 | |||
270 | /** @private */ | ||
271 | onClick : function(){ | ||
272 | if(!this.disabled && this.click){ | ||
273 | this.click.call(this.scope || window, this); | ||
274 | } | ||
275 | }, | ||
276 | |||
277 | /** @private */ | ||
278 | onMouseOver : function(){ | ||
279 | if(!this.disabled){ | ||
280 | this.el.addClass('ytb-button-over'); | ||
281 | if(this.mouseover){ | ||
282 | this.mouseover.call(this.scope || window, this); | ||
283 | } | ||
284 | } | ||
285 | }, | ||
286 | |||
287 | /** @private */ | ||
288 | onMouseOut : function(){ | ||
289 | this.el.removeClass('ytb-button-over'); | ||
290 | if(!this.disabled){ | ||
291 | if(this.mouseout){ | ||
292 | this.mouseout.call(this.scope || window, this); | ||
293 | } | ||
294 | } | ||
295 | } | ||
296 | }; | ||