Diffstat (limited to 'frontend/beta/js/YUI-extensions/widgets/Button.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI-extensions/widgets/Button.js | 185 |
1 files changed, 185 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI-extensions/widgets/Button.js b/frontend/beta/js/YUI-extensions/widgets/Button.js new file mode 100644 index 0000000..5bf3dc3 --- a/dev/null +++ b/frontend/beta/js/YUI-extensions/widgets/Button.js | |||
@@ -0,0 +1,185 @@ | |||
1 | /** | ||
2 | * @class YAHOO.ext.Button | ||
3 | * @extends YAHOO.ext.util.Observable | ||
4 | * Simple Button class | ||
5 | * @cfg {String} text The button text | ||
6 | * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event) | ||
7 | * @cfg {Object} scope The scope of the handler | ||
8 | * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width) | ||
9 | * @constructor | ||
10 | * Create a new button | ||
11 | * @param {String/HTMLElement/Element} renderTo The element to append the button to | ||
12 | * @param {Object} config The config object | ||
13 | */ | ||
14 | YAHOO.ext.Button = function(renderTo, config){ | ||
15 | YAHOO.ext.util.Config.apply(this, config); | ||
16 | this.events = { | ||
17 | /** | ||
18 | * @event click | ||
19 | * Fires when this button is clicked | ||
20 | * @param {Button} this | ||
21 | * @param {EventObject} e The click event | ||
22 | */ | ||
23 | 'click' : true | ||
24 | }; | ||
25 | if(renderTo){ | ||
26 | this.render(renderTo); | ||
27 | } | ||
28 | }; | ||
29 | |||
30 | YAHOO.extendX(YAHOO.ext.Button, YAHOO.ext.util.Observable, { | ||
31 | render : function(renderTo){ | ||
32 | var btn; | ||
33 | if(!this.dhconfig){ | ||
34 | if(!YAHOO.ext.Button.buttonTemplate){ | ||
35 | // hideous table template | ||
36 | YAHOO.ext.Button.buttonTemplate = new YAHOO.ext.DomHelper.Template('<a href="#" class="ybtn-focus"><table border="0" cellpadding="0" cellspacing="0" class="ybtn-wrap"><tbody><tr><td class="ybtn-left"> </td><td class="ybtn-center" unselectable="on">{0}</td><td class="ybtn-right"> </td></tr></tbody></table></a>'); | ||
37 | } | ||
38 | btn = YAHOO.ext.Button.buttonTemplate.append( | ||
39 | getEl(renderTo).dom, [this.text], true); | ||
40 | this.tbl = getEl(btn.dom.firstChild, true); | ||
41 | }else{ | ||
42 | btn = YAHOO.ext.DomHelper.append(this.footer.dom, this.dhconfig, true); | ||
43 | } | ||
44 | this.el = btn; | ||
45 | this.autoWidth(); | ||
46 | btn.addClass('ybtn'); | ||
47 | btn.mon('click', this.onClick, this, true); | ||
48 | btn.on('mouseover', this.onMouseOver, this, true); | ||
49 | btn.on('mouseout', this.onMouseOut, this, true); | ||
50 | btn.on('mousedown', this.onMouseDown, this, true); | ||
51 | btn.on('mouseup', this.onMouseUp, this, true); | ||
52 | }, | ||
53 | /** | ||
54 | * Returns the buttons element | ||
55 | * @return {YAHOO.ext.Element} | ||
56 | */ | ||
57 | getEl : function(){ | ||
58 | return this.el; | ||
59 | }, | ||
60 | |||
61 | /** | ||
62 | * Destroys this Button. | ||
63 | */ | ||
64 | destroy : function(){ | ||
65 | this.el.removeAllListeners(); | ||
66 | this.purgeListeners(); | ||
67 | this.el.update(''); | ||
68 | this.el.remove(); | ||
69 | }, | ||
70 | |||
71 | autoWidth : function(){ | ||
72 | if(this.tbl){ | ||
73 | this.el.setWidth('auto'); | ||
74 | this.tbl.setWidth('auto'); | ||
75 | if(this.minWidth){ | ||
76 | if(this.tbl.getWidth() < this.minWidth){ | ||
77 | this.tbl.setWidth(this.minWidth); | ||
78 | } | ||
79 | } | ||
80 | this.el.setWidth(this.tbl.getWidth()); | ||
81 | } | ||
82 | }, | ||
83 | /** | ||
84 | * Sets this buttons click handler | ||
85 | * @param {Function} handler The function to call when the button is clicked | ||
86 | * @param {Object} scope (optional) Scope for the function passed above | ||
87 | */ | ||
88 | setHandler : function(handler, scope){ | ||
89 | this.handler = handler; | ||
90 | this.scope = scope; | ||
91 | }, | ||
92 | |||
93 | /** | ||
94 | * Set this buttons text | ||
95 | * @param {String} text | ||
96 | */ | ||
97 | setText : function(text){ | ||
98 | this.text = text; | ||
99 | this.el.dom.firstChild.firstChild.firstChild.childNodes[1].innerHTML = text; | ||
100 | this.autoWidth(); | ||
101 | }, | ||
102 | |||
103 | /** | ||
104 | * Get the text for this button | ||
105 | * @return {String} | ||
106 | */ | ||
107 | getText : function(){ | ||
108 | return this.text; | ||
109 | }, | ||
110 | |||
111 | /** | ||
112 | * Show this button | ||
113 | */ | ||
114 | show: function(){ | ||
115 | this.el.setStyle('display', ''); | ||
116 | }, | ||
117 | |||
118 | /** | ||
119 | * Hide this button | ||
120 | */ | ||
121 | hide: function(){ | ||
122 | this.el.setStyle('display', 'none'); | ||
123 | }, | ||
124 | |||
125 | /** | ||
126 | * Convenience function for boolean show/hide | ||
127 | * @param {Boolean} visible true to show/false to hide | ||
128 | */ | ||
129 | setVisible: function(visible){ | ||
130 | if(visible) { | ||
131 | this.show(); | ||
132 | }else{ | ||
133 | this.hide(); | ||
134 | } | ||
135 | }, | ||
136 | |||
137 | /** | ||
138 | * Focus the button | ||
139 | */ | ||
140 | focus : function(){ | ||
141 | this.el.focus(); | ||
142 | }, | ||
143 | |||
144 | /** | ||
145 | * Disable this button | ||
146 | */ | ||
147 | disable : function(){ | ||
148 | this.el.addClass('ybtn-disabled'); | ||
149 | this.disabled = true; | ||
150 | }, | ||
151 | |||
152 | /** | ||
153 | * Enable this button | ||
154 | */ | ||
155 | enable : function(){ | ||
156 | this.el.removeClass('ybtn-disabled'); | ||
157 | this.disabled = false; | ||
158 | }, | ||
159 | |||
160 | onClick : function(e){ | ||
161 | e.preventDefault(); | ||
162 | if(!this.disabled){ | ||
163 | this.fireEvent('click', this, e); | ||
164 | if(this.handler){ | ||
165 | this.handler.call(this.scope || this, this, e); | ||
166 | } | ||
167 | } | ||
168 | }, | ||
169 | onMouseOver : function(e){ | ||
170 | if(!this.disabled){ | ||
171 | this.el.addClass('ybtn-over'); | ||
172 | } | ||
173 | }, | ||
174 | onMouseOut : function(e){ | ||
175 | this.el.removeClass('ybtn-over'); | ||
176 | }, | ||
177 | onMouseDown : function(){ | ||
178 | if(!this.disabled){ | ||
179 | this.el.addClass('ybtn-click'); | ||
180 | } | ||
181 | }, | ||
182 | onMouseUp : function(){ | ||
183 | this.el.removeClass('ybtn-click'); | ||
184 | } | ||
185 | }); | ||