1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
YUI.add('gallery-event-binder', function(Y) {
/**
* <p>The Event Binder satisfies a very specific need. Binding user actions until a
* particular YUI instance become ready, and the listeners defined before flushing those
* events through a queue. This will help to catch some early user interactions due
* the ondemand nature of YUI 3.
*
* <p>To use the Event Binder Module, you have to leverage YUI_config object first. More information
* about this object visit this page: http://developer.yahoo.com/yui/3/api/config.html<p>
* <p>There is a member of this global object that you have to set up, the member is called: "eventbinder". To get
* more information about this object, visit this page: http://yuilibrary.com/gallery/show/event-binder</p>
*
* <p>
* <code>
* <script type="text/javascript"> <br>
* <br>
* // Call the "use" method, passing in "gallery-event-binder". Then you can<br>
* // call Y.EventBinder.flush('click'); to flush all the events that might had happened<br>
* // before your listeners were defined. <br>
* <br>
* YUI().use("gallery-event-binder", "event", function(Y) { <br>
* <br>
* Y.on('click', function(e) {<br>
* // do your stuff here...<br>
* }, '#demo');<br>
* <br>
* Y.EventBinder.flush('click');<br>
* <br>
* });<br>
*});<br>
* <br>
* <br>
* </script> <br>
* </code>
* </p>
*
* <p>The Event Binder has a single method called "flush". This method accept one argument to
* identify what type of event should be flushed. The argument can be:</p>
* <ul>
* <li>click</li>
* <li>dblclick</li>
* <li>mouseover</li>
* <li>mouseout</li>
* <li>mousedown</li>
* <li>mouseup</li>
* <li>mousemove</li>
* <li>keydown</li>
* <li>keyup</li>
* <li>keypress</li>
* <li>...etc...</li>
* </ul>
* <p>Keep in mind that before flushing any of these events, you have to add them to the
* monitoring system through the configuration object (YUI_config.eventbinder), otherwise
* YUI will be unable to listen for any early user interaction.</p>
* </p>
*
* @module gallery-event-binder
*/
function _modulesReady (e, modules, handler) {
var args = Y.Array(modules);
// stopping the module inmidiately
e.halt();
// adding the loading class
e.target.addClass('yui3-waiting');
args.push(function() {
// once the modules gets ready, let's remove the original binder
handler.detach();
// removing the loading class
e.target.removeClass('yui3-waiting');
// let's simulate the new event based on the original facade
Y.Event.simulate(e.target._node, e.type, e);
});
Y.use.apply (Y, args);
}
Y.EventBinder = {
/*
* Filter all the events in the queue by type, and simulate those that match.
* @method flush
* @param type {string} The type of event to flush
*/
flush: function (type) {
var config = Y.config.eventbinder || {};
config.q = config.q || [];
type = type || 'click';
if (config.fn) {
// once you call flush, the original listener should be removed
Y.Event.detach(type, config.fn, Y.config.doc);
}
// filtering all the events in the queue by type
Y.each(config.q, function(o) {
if (type == o.type) {
// removing the loading class
Y.one(o.target).removeClass('yui3-waiting');
// let's simulate the new event based on the backup object described by "e" in the configuration
Y.Event.simulate(o.target, type, o);
}
});
},
/*
* Adds an event listener. This method is an wrap for Y.on, and instead of supporting
* a regular callback, it loads a set of modules and simulate the same event once those
* modules become available.
* @method on
* @param type {string} The type of event to append
* @param modules {string|array} a module or a list of modules that should be loaded when this event happens
* @param el {String|HTMLElement|Array|NodeList} An id, an element reference, or a collection of ids and/or elements to assign the listener to.
* @return {EventHandle} the detach handle
*/
on: function (type, modules, el) {
// setting the event listener
var handler = Y.on (type, function(e) {
return _modulesReady(e, modules, handler);
}, el);
},
/*
* Adds an event listener. This method is an wrap for Y.on, and instead of supporting
* a regular callback, it loads a set of modules and simulate the same event once those
* modules become available.
* @method delegate
* @param type {string} the event type to delegate
* @param modules {string|array} a module or a list of modules that should be loaded when this event happens
* @param el {String|HTMLElement|Array|NodeList} An id, an element reference, or a collection of ids and/or elements representing the delegation container.
* @param spec {string} a selector that must match the target of the event.
* @return {EventHandle} the detach handle
*/
delegate: function (type, modules, el, spec) {
// setting the delegate listener
var handler = Y.delegate (type, function(e) {
return _modulesReady(e, modules, handler);
}, el, spec);
}
};
}, 'gallery-2010.06.23-18-37', {"requires": ["event-simulate", "event-base", "event-delegate"]});
|