Cross Reference: /yui3/src/event-custom/docs/partials/flow-example-js.mustache
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
6df0c25001d3c28414969e057dfa8c1f3352a129Luke Smith// Bubbling events are added by the event-custom module.
6df0c25001d3c28414969e057dfa8c1f3352a129Luke SmithYUI().use('event-custom', 'node', function (Y) {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith var logger = Y.one("#log");
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith stopCheckbox = Y.one("#stopPropagation"),
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith preventCheckbox = Y.one("#preventDefault");
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // We'll create two classes, one to fire the event, and another to be a
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // bubble target for the other. All events from the Publisher class can
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // then be subscribed from either the Publisher instance or the BubbleTarget
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // instance that it's related to.
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith function BubbleTarget() {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Y.log("BubbleTarget constructor executed.");
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith }
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith function Publisher(bubbleTo) {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Y.log("Publisher constructor executed.");
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith this.init(bubbleTo); // see class prototype below
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith }
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // Publishers need to add the provided target to their bubble chain with
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // `addTarget`. We'll do this, and publish an event, in an `init` method
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Publisher.prototype = {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith init: function (bubbleTo) {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // `addTarget` is the EventTarget method to register new bubble
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // targets for this instance
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith this.addTarget(bubbleTo);
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // It's only necessary to publish events with special configuration,
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // such as default, stop, or prevent behaviors. You can always
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // fire any event name you wish, published or unpublished.
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith this.publish("testEvent", {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // Pass an event facade to subscribers so they can call
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // e.preventDefault() and other methods.
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith emitFacade: true,
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // An event's default behavior is defined in defaultFn. This
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // will execute unless a subscriber calls `e.preventDefault()`
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith defaultFn: function () {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Y.log("defaultFn: testEvent's defaultFn executed.");
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith },
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // You can react to subscribers preventing default behavior as
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // well, by defining a preventedFn.
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith preventedFn: function () {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Y.log("preventedFn: A subscriber to testEvent called preventDefault().");
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith },
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // If a subscriber calls `e.stopPropagation()`, the event won't
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // bubble any further, and the stoppedFn will be called if one
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // is defined.
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith stoppedFn: function () {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Y.log("stoppedFn: A subscriber to testEvent called stopPropagation().");
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith }
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith });
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith }
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith };
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // To fire events or be a bubble target, augment a class with EventTarget
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Y.augment(Publisher, Y.EventTarget);
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Y.augment(BubbleTarget, Y.EventTarget);
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // SEE IT IN ACTION
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith var bubbleTarget = new BubbleTarget();
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // You can subscribe to the "testEvent" from the BubbleTarget, even before
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // a Publisher is created
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith bubbleTarget.subscribe("testEvent", function (e) {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Y.log("testEvent fired on the BubbleTarget object.");
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith });
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // Create a Publisher instance, and link it to our BubbleTarget
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith var publisher = new Publisher(bubbleTarget);
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // We can also subscribe to the testEvent on the Publisher instance.
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith publisher.on("testEvent", function (e) {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Y.log("testEvent subscriber fired on the publisher object.");
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith if (stopCheckbox.get("checked")) {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith e.stopPropagation();
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith }
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith if (preventCheckbox.get("checked")) {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith e.preventDefault();
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith }
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith });
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // Wire up the example button to fire the event from our publisher
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Y.one("#fire").on("click", function (e) {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith logger.empty(); // clear out the logger:
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith publisher.fire("testEvent");
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith });
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith // A little supporting magic to output Y.log() statements to the screen
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Y.on("yui:log", function (e) {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith logger.append("<li>" + e.msg + "</li>");
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith });
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith});