summaryrefslogtreecommitdiff
path: root/frontend/beta/js/YUI-extensions/widgets/Toolbar.js
Unidiff
Diffstat (limited to 'frontend/beta/js/YUI-extensions/widgets/Toolbar.js') (more/less context) (show whitespace changes)
-rw-r--r--frontend/beta/js/YUI-extensions/widgets/Toolbar.js296
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
29YAHOO.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 */
161YAHOO.ext.ToolbarButton = function(config){
162 YAHOO.ext.util.Config.apply(this, config);
163};
164
165YAHOO.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 : '&#160;');
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};