|
1 YUI.add('widget-autohide', function (Y, NAME) { |
|
2 |
|
3 /** |
|
4 * A widget-level extension that provides ability to hide widget when |
|
5 * certain events occur. |
|
6 * |
|
7 * @module widget-autohide |
|
8 * @author eferraiuolo, tilomitra |
|
9 * @since 3.4.0 |
|
10 */ |
|
11 |
|
12 |
|
13 var WIDGET_AUTOHIDE = 'widgetAutohide', |
|
14 AUTOHIDE = 'autohide', |
|
15 CLICK_OUTSIDE = 'clickoutside', |
|
16 FOCUS_OUTSIDE = 'focusoutside', |
|
17 DOCUMENT = 'document', |
|
18 KEY = 'key', |
|
19 PRESS_ESCAPE = 'esc', |
|
20 BIND_UI = 'bindUI', |
|
21 SYNC_UI = "syncUI", |
|
22 RENDERED = "rendered", |
|
23 BOUNDING_BOX = "boundingBox", |
|
24 VISIBLE = "visible", |
|
25 CHANGE = 'Change', |
|
26 |
|
27 getCN = Y.ClassNameManager.getClassName; |
|
28 |
|
29 /** |
|
30 * The WidgetAutohide class provides the hideOn attribute which can |
|
31 * be used to hide the widget when certain events occur. |
|
32 * |
|
33 * @class WidgetAutohide |
|
34 * @param {Object} config User configuration object |
|
35 */ |
|
36 function WidgetAutohide(config) { |
|
37 Y.after(this._bindUIAutohide, this, BIND_UI); |
|
38 Y.after(this._syncUIAutohide, this, SYNC_UI); |
|
39 |
|
40 |
|
41 if (this.get(RENDERED)) { |
|
42 this._bindUIAutohide(); |
|
43 this._syncUIAutohide(); |
|
44 } |
|
45 |
|
46 } |
|
47 |
|
48 /** |
|
49 * Static property used to define the default attribute |
|
50 * configuration introduced by WidgetAutohide. |
|
51 * |
|
52 * @property ATTRS |
|
53 * @static |
|
54 * @type Object |
|
55 */ |
|
56 WidgetAutohide.ATTRS = { |
|
57 |
|
58 |
|
59 /** |
|
60 * @attribute hideOn |
|
61 * @type array |
|
62 * |
|
63 * @description An array of objects corresponding to the nodes, events, and keycodes to hide the widget on. |
|
64 * The implementer can supply an array of objects, with each object having the following properties: |
|
65 * <p>eventName: (string, required): The eventName to listen to.</p> |
|
66 * <p>node: (Y.Node, optional): The Y.Node that will fire the event (defaults to the boundingBox of the widget)</p> |
|
67 * <p>keyCode: (string, optional): If listening for key events, specify the keyCode</p> |
|
68 * <p>By default, this attribute consists of one object which will cause the widget to hide if the |
|
69 * escape key is pressed.</p> |
|
70 */ |
|
71 hideOn: { |
|
72 validator: Y.Lang.isArray, |
|
73 valueFn : function() { |
|
74 return [ |
|
75 { |
|
76 node: Y.one(DOCUMENT), |
|
77 eventName: KEY, |
|
78 keyCode: PRESS_ESCAPE |
|
79 } |
|
80 ]; |
|
81 } |
|
82 } |
|
83 }; |
|
84 |
|
85 WidgetAutohide.prototype = { |
|
86 // *** Instance Members *** // |
|
87 |
|
88 _uiHandlesAutohide : null, |
|
89 |
|
90 // *** Lifecycle Methods *** // |
|
91 |
|
92 destructor : function () { |
|
93 |
|
94 this._detachUIHandlesAutohide(); |
|
95 }, |
|
96 |
|
97 /** |
|
98 * Binds event listeners to the widget. |
|
99 * <p> |
|
100 * This method in invoked after bindUI is invoked for the Widget class |
|
101 * using YUI's aop infrastructure. |
|
102 * </p> |
|
103 * @method _bindUIAutohide |
|
104 * @protected |
|
105 */ |
|
106 _bindUIAutohide : function () { |
|
107 |
|
108 this.after(VISIBLE+CHANGE, this._afterHostVisibleChangeAutohide); |
|
109 this.after("hideOnChange", this._afterHideOnChange); |
|
110 }, |
|
111 |
|
112 /** |
|
113 * Syncs up the widget based on its current state. In particular, removes event listeners if |
|
114 * widget is not visible, and attaches them otherwise. |
|
115 * <p> |
|
116 * This method in invoked after syncUI is invoked for the Widget class |
|
117 * using YUI's aop infrastructure. |
|
118 * </p> |
|
119 * @method _syncUIAutohide |
|
120 * @protected |
|
121 */ |
|
122 _syncUIAutohide : function () { |
|
123 |
|
124 this._uiSetHostVisibleAutohide(this.get(VISIBLE)); |
|
125 }, |
|
126 |
|
127 // *** Private Methods *** // |
|
128 |
|
129 /** |
|
130 * Removes event listeners if widget is not visible, and attaches them otherwise. |
|
131 * |
|
132 * @method _uiSetHostVisibleAutohide |
|
133 * @protected |
|
134 */ |
|
135 _uiSetHostVisibleAutohide : function (visible) { |
|
136 |
|
137 if (visible) { |
|
138 //this._attachUIHandlesAutohide(); |
|
139 Y.later(1, this, '_attachUIHandlesAutohide'); |
|
140 } else { |
|
141 this._detachUIHandlesAutohide(); |
|
142 } |
|
143 }, |
|
144 |
|
145 /** |
|
146 * Iterates through all objects in the hideOn attribute and creates event listeners. |
|
147 * |
|
148 * @method _attachUIHandlesAutohide |
|
149 * @protected |
|
150 */ |
|
151 _attachUIHandlesAutohide : function () { |
|
152 |
|
153 if (this._uiHandlesAutohide) { return; } |
|
154 |
|
155 var bb = this.get(BOUNDING_BOX), |
|
156 hide = Y.bind(this.hide,this), |
|
157 uiHandles = [], |
|
158 self = this, |
|
159 hideOn = this.get('hideOn'), |
|
160 i = 0, |
|
161 o = {node: undefined, ev: undefined, keyCode: undefined}; |
|
162 |
|
163 //push all events on which the widget should be hidden |
|
164 for (; i < hideOn.length; i++) { |
|
165 |
|
166 o.node = hideOn[i].node; |
|
167 o.ev = hideOn[i].eventName; |
|
168 o.keyCode = hideOn[i].keyCode; |
|
169 |
|
170 //no keycode or node defined |
|
171 if (!o.node && !o.keyCode && o.ev) { |
|
172 uiHandles.push(bb.on(o.ev, hide)); |
|
173 } |
|
174 |
|
175 //node defined, no keycode (not a keypress) |
|
176 else if (o.node && !o.keyCode && o.ev) { |
|
177 uiHandles.push(o.node.on(o.ev, hide)); |
|
178 } |
|
179 |
|
180 //node defined, keycode defined, event defined (its a key press) |
|
181 else if (o.node && o.keyCode && o.ev) { |
|
182 uiHandles.push(o.node.on(o.ev, hide, o.keyCode)); |
|
183 } |
|
184 |
|
185 else { |
|
186 } |
|
187 |
|
188 } |
|
189 |
|
190 this._uiHandlesAutohide = uiHandles; |
|
191 }, |
|
192 |
|
193 /** |
|
194 * Detaches all event listeners created by this extension |
|
195 * |
|
196 * @method _detachUIHandlesAutohide |
|
197 * @protected |
|
198 */ |
|
199 _detachUIHandlesAutohide : function () { |
|
200 |
|
201 Y.each(this._uiHandlesAutohide, function(h){ |
|
202 h.detach(); |
|
203 }); |
|
204 this._uiHandlesAutohide = null; |
|
205 }, |
|
206 |
|
207 /** |
|
208 * Default function called when the visibility of the widget changes. Determines |
|
209 * whether to attach or detach event listeners based on the visibility of the widget. |
|
210 * |
|
211 * @method _afterHostVisibleChangeAutohide |
|
212 * @protected |
|
213 */ |
|
214 _afterHostVisibleChangeAutohide : function (e) { |
|
215 |
|
216 this._uiSetHostVisibleAutohide(e.newVal); |
|
217 }, |
|
218 |
|
219 /** |
|
220 * Default function called when hideOn Attribute is changed. Remove existing listeners and create new listeners. |
|
221 * |
|
222 * @method _afterHideOnChange |
|
223 * @protected |
|
224 */ |
|
225 _afterHideOnChange : function(e) { |
|
226 this._detachUIHandlesAutohide(); |
|
227 |
|
228 if (this.get(VISIBLE)) { |
|
229 this._attachUIHandlesAutohide(); |
|
230 } |
|
231 } |
|
232 }; |
|
233 |
|
234 Y.WidgetAutohide = WidgetAutohide; |
|
235 |
|
236 |
|
237 }, '@VERSION@', {"requires": ["base-build", "event-key", "event-outside", "widget"]}); |