~launchpad-pqm/launchpad/devel

« back to all changes in this revision

Viewing changes to lib/lp/app/javascript/lazr/gallery-event-binder/gallery-event-binder.js

[r=deryck][bug=803954] Bring lazr-js source into lp tree and package
        yui as a dependency

Show diffs side-by-side

added added

removed removed

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