YUI 3: Events Evolved
-
Upload
luke-smith -
Category
Technology
-
view
4.354 -
download
2
description
Transcript of YUI 3: Events Evolved
![Page 1: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/1.jpg)
YUICONF 2009
yuilibrary: lsmith
github: lsmith
twitter: @ls_n
Luke Smith
Events Evolved
Monday, January 17, 2011
![Page 2: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/2.jpg)
YUICONF 2009
<input type="button" onclick="doSomething();">
Monday, January 17, 2011
![Page 3: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/3.jpg)
YUICONF 2009
<input type="button" onclick="doSomething();">
Monday, January 17, 2011
![Page 4: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/4.jpg)
YUICONF 2009
<input type="button" onclick="doSomething();">
button.onclick = doSomething;
Monday, January 17, 2011
![Page 5: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/5.jpg)
YUICONF 2009
button.onclick = doSomething;
<input type="button" onclick="doSomething();">
Monday, January 17, 2011
![Page 6: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/6.jpg)
YUICONF 2009
button.onclick = doSomething;
<input type="button" onclick="doSomething();">
button.addEventListener('click', doSomething, false);
Monday, January 17, 2011
![Page 7: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/7.jpg)
YUICONF 2009
button.addEventListener('click', doSomething, false);
<input type="button" onclick="doSomething();">
button.onclick = doSomething;
Monday, January 17, 2011
![Page 8: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/8.jpg)
YUICONF 2009
button.addEventListener('click', doSomething, false);
<input type="button" onclick="doSomething();">
button.onclick = doSomething;
Monday, January 17, 2011
![Page 9: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/9.jpg)
YUICONF 2009
if (button.addEventListener) { button.addEventListener('click', doSomething, false);} else if (button.attachEvent) { button.attachEvent('click', doSomething);} else { button.onclick = doSomething;}
Monday, January 17, 2011
![Page 10: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/10.jpg)
YUICONF 2009
if (button.addEventListener) { button.addEventListener('click', doSomething, false);} else if (button.attachEvent) { button.attachEvent('click', doSomething);} else { button.onclick = doSomething;}
DUMB
Monday, January 17, 2011
![Page 11: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/11.jpg)
YUICONF 2009
<input type="button" onclick="doSomething();">
button.onclick = doSomething;
button.addEventListener('click', doSomething, false);
if (button.addEventListener) { /* madness */ }
Monday, January 17, 2011
![Page 12: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/12.jpg)
YUICONF 2009
if (button.addEventListener) { /* madness */ }
<input type="button" onclick="doSomething();">
button.onclick = doSomething;
button.addEventListener('click', doSomething, false);
addEvent(button, 'click', doSomething);
Monday, January 17, 2011
![Page 13: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/13.jpg)
YUICONF 2009
function doSomething(e) { if (e && e.preventDefault) { e.preventDefault(); }
return false;}
Monday, January 17, 2011
![Page 14: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/14.jpg)
YUICONF 2009
function doSomething(e) { if (e && e.preventDefault) { e.preventDefault(); }
return false;}
Monday, January 17, 2011
![Page 15: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/15.jpg)
YUICONF 2009
We've been through this
function doSomething(e) { if (e && e.preventDefault) { e.preventDefault(); }
return false;}
Monday, January 17, 2011
![Page 16: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/16.jpg)
YUICONF 2009
if (button.addEventListener) { /* madness */ }
<input type="button" onclick="doSomething();">
button.onclick = doSomething;
button.addEventListener('click', doSomething, false);
addEvent(button, 'click', doSomething);
Monday, January 17, 2011
![Page 17: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/17.jpg)
YUICONF 2009
if (button.addEventListener) { /* madness */ }
<input type="button" onclick="doSomething();">
button.onclick = doSomething;
button.addEventListener('click', doSomething, false);
addEvent(button, 'click', doSomething);
Monday, January 17, 2011
![Page 18: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/18.jpg)
YUICONF 2009
YAHOO.util.Event.on(button,'click',doSomething);
YUI 2
Monday, January 17, 2011
![Page 19: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/19.jpg)
YUICONF 2009
YAHOO.util.Event.on(button,'click',doSomething);
YAHOO.util.Event.preventDefault(e);
YUI 2
Monday, January 17, 2011
![Page 20: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/20.jpg)
YUICONF 2009
YAHOO.util.Event.on(button,'click',doSomething);
YAHOO.util.Event.preventDefault(e);
YUI 2
✓Normalized subscription
Monday, January 17, 2011
![Page 21: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/21.jpg)
YUICONF 2009
YAHOO.util.Event.on(button,'click',doSomething);
YAHOO.util.Event.preventDefault(e);
YUI 2
✓Normalized subscription✓Normalized event handling
Monday, January 17, 2011
![Page 22: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/22.jpg)
YUICONF 2009
YAHOO.util.Event.on(button,'click',doSomething);
YAHOO.util.Event.preventDefault(e);
YUI 2
✓Normalized subscription✓Normalized event handling✓DOM-like method names
Monday, January 17, 2011
![Page 23: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/23.jpg)
YUICONF 2009
button.on('click', doSomething);
e.preventDefault();
YUI 3
Monday, January 17, 2011
![Page 24: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/24.jpg)
YUICONF 2009
button.on('click', doSomething);
e.preventDefault();
YUI 3
✓Normalized subscription
Monday, January 17, 2011
![Page 25: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/25.jpg)
YUICONF 2009
button.on('click', doSomething);
e.preventDefault();
YUI 3
✓Normalized subscription✓Normalized event handling
Monday, January 17, 2011
![Page 26: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/26.jpg)
YUICONF 2009
button.on('click', doSomething);
e.preventDefault();
YUI 3
✓Normalized subscription✓Normalized event handling✓DOM-like method names
Monday, January 17, 2011
![Page 27: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/27.jpg)
YUICONF 2009
button.on('click', doSomething);
e.preventDefault();
YUI 3
✓Normalized subscription✓Normalized event handling✓DOM-like method names✓DOM-like context
Monday, January 17, 2011
![Page 28: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/28.jpg)
YUICONF 2009
button.on('click', doSomething);
e.preventDefault();
YUI 3
✓Normalized subscription✓Normalized event handling✓DOM-like method names✓DOM-like context✓Terse
Monday, January 17, 2011
![Page 29: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/29.jpg)
YUICONF 2009
We give you the DOM
Monday, January 17, 2011
![Page 30: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/30.jpg)
YUICONF 2009
We give you the DOM
... but it works
Monday, January 17, 2011
![Page 31: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/31.jpg)
YUICONF 2009
You are here
Monday, January 17, 2011
![Page 32: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/32.jpg)
YUICONF 2009
Custom Events
YUI 2
Monday, January 17, 2011
![Page 33: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/33.jpg)
YUICONF 2009
this.myEvent = new YAHOO.util.CustomEvent("myEvent");
Custom Events
instance.myEvent.subscribe(doSomething);
YUI 2
this.myEvent.fire();
Monday, January 17, 2011
![Page 34: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/34.jpg)
YUICONF 2009
Custom Events
YUI 2
instance.subscribe("myEvent",doSomething);
this.fireEvent("myEvent");
Monday, January 17, 2011
![Page 35: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/35.jpg)
YUICONF 2009
Custom Events
instance.on("myEvent", doSomething);
YUI 3
this.fire("myEvent");
Monday, January 17, 2011
![Page 36: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/36.jpg)
YUICONF 2009
this.publish("myEvent", config);
Custom Events
instance.on("myEvent", doSomething);
YUI 3
this.fire("myEvent");
Monday, January 17, 2011
![Page 37: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/37.jpg)
YUICONF 2009
Y.extend( MyClass, Y.EventTarget );
Y.EventTarget
✓ Event API
Monday, January 17, 2011
![Page 38: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/38.jpg)
YUICONF 2009
Y.extend( MyClass, Y.Base );
Y.EventTarget
✓ Event API
Y.Base
✓ Event API
✓ Attributes
✓ Plugins
Monday, January 17, 2011
![Page 39: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/39.jpg)
YUICONF 2009
Y.extend( MyClass, Y.Widget );
Y.EventTarget
✓ Event API
Y.Base
✓ Event API
✓ Attributes
✓ Plugins
Y.Widget
✓ Event API
✓ Attributes
✓ Plugins
✓ UI Lifecycle
Monday, January 17, 2011
![Page 40: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/40.jpg)
YUICONF 2009
Y.extend( MyClass, Y.Widget );
Y.EventTarget
✓ Event API
Y.Base
✓ Event API
✓ Attributes
✓ Plugins
Y.Widget
✓ Event API
✓ Attributes
✓ Plugins
✓ UI Lifecycle
Monday, January 17, 2011
![Page 41: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/41.jpg)
YUICONF 2009
Y.extend( MyClass, Y.Base );
Y.EventTarget
✓ Event API
Y.Base
✓ Event API
✓ Attributes
✓ Plugins
Y.Widget
✓ Event API
✓ Attributes
✓ Plugins
✓ UI Lifecycle
Monday, January 17, 2011
![Page 42: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/42.jpg)
YUICONF 2009
✓DOM events
✓Custom events
Normalized subscription
instance.on("myEvent", doSomething);
button.on("click", doSomething);
Monday, January 17, 2011
![Page 43: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/43.jpg)
YUICONF 2009
✓DOM events
✓Custom events
subscriptionUnified
instance.on("myEvent", doSomething);
button.on("click", doSomething);
Monday, January 17, 2011
![Page 44: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/44.jpg)
YUICONF 2009
DOM Events Module/App Events
Event API
Your App
Monday, January 17, 2011
![Page 45: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/45.jpg)
YUICONF 2009
DOMCustom Events
Monday, January 17, 2011
![Page 46: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/46.jpg)
YUICONF 2009
DOMCustom Events
Monday, January 17, 2011
![Page 47: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/47.jpg)
YUICONF 2009
Custom Events more DOM like
✓Unify Subscription API
- Default behaviors
- Bubbling
Monday, January 17, 2011
![Page 48: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/48.jpg)
YUICONF 2009
Custom Events more DOM like
✓Unify Subscription API
- Default behaviors
- Bubbling
foo.on(event, fn)
Monday, January 17, 2011
![Page 49: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/49.jpg)
YUICONF 2009
Custom Events more DOM like
✓Unify Subscription API
- Default behaviors
- Bubblingthis.publish(...)
Monday, January 17, 2011
![Page 50: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/50.jpg)
YUICONF 2009
Custom Events more DOM like
Default behaviors
Monday, January 17, 2011
![Page 51: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/51.jpg)
YUICONF 2009
this.publish("myEvent", config);
Custom Events
YUI 3
instance.on("myEvent", doSomething);
this.fire("myEvent");
Monday, January 17, 2011
![Page 52: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/52.jpg)
YUICONF 2009
this.publish("myEvent", config);
Custom Events
YUI 3
Monday, January 17, 2011
![Page 53: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/53.jpg)
YUICONF 2009
initializer: function () {
this.publish("start", {
defaultFn: this._defStartFn
});
}
Default behaviors
this.publish( name, config );
Monday, January 17, 2011
![Page 54: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/54.jpg)
YUICONF 2009
initializer: function () {
this.publish("start", {
defaultFn: this._defStartFn
});
}
Default behaviors
this.publish( name, config );
Monday, January 17, 2011
![Page 55: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/55.jpg)
YUICONF 2009
Default behaviors
initializer: function () { ... },
_defStartFn: function (e) {
Y.log("started " + e.time);
this._disableControls();
this._getGoing(e.urgency);}
Monday, January 17, 2011
![Page 56: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/56.jpg)
YUICONF 2009
e.timee.urgency
this.fire("start", payload);
Event payload
Monday, January 17, 2011
![Page 57: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/57.jpg)
YUICONF 2009
e.timee.urgency
Event payload
this.fire("start", { time: new Date(), urgency: 'ASAP'});
Monday, January 17, 2011
![Page 58: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/58.jpg)
YUICONF 2009
instance.on("start", doSomething);
this.fire("start");
Monday, January 17, 2011
![Page 59: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/59.jpg)
YUICONF 2009
instance.on("start", doSomething);
this.fire("start"); execute subscribers
_defStartFn
prevented?end yes
no
Monday, January 17, 2011
![Page 60: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/60.jpg)
YUICONF 2009
function doSomething(e) {
if (e.urgency === 'ASAP') {
e.preventDefault();
}
}
Behavior is preventableprevented?
Monday, January 17, 2011
![Page 61: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/61.jpg)
YUICONF 2009
... but it doesn't have to be
initializer: function () {
this.publish("start", {
defaultFn: this._defStartFn,
preventable: false
});
}
Monday, January 17, 2011
![Page 62: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/62.jpg)
YUICONF 2009
... but it doesn't have to be
initializer: function () {
this.publish("start", {
defaultFn: this._defStartFn,
preventedFn: this._prvStartFn
});
}
Monday, January 17, 2011
![Page 63: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/63.jpg)
YUICONF 2009
Monday, January 17, 2011
![Page 64: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/64.jpg)
YUICONF 2009
Dogfood (nom)
initializer: function () { this.publish("add", { defaultFn: this._defAddFn });
this.publish("flush", { defaultFn: this._defFlushFn });}
cache.js
Monday, January 17, 2011
![Page 65: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/65.jpg)
YUICONF 2009
Dogfood (nom)
initializer: function () { this.publish(ENTRY, { defaultFn: this._defEntryFn });
this.publish(RESET, { defaultFn: this._defResetFn });}
console.js
Monday, January 17, 2011
![Page 66: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/66.jpg)
YUICONF 2009
Dogfood (nom)
initializer: function () { this.publish("request", { defaultFn: Y.bind("_defRequestFn", this), queuable:true }); ...}
datasource.js
Monday, January 17, 2011
![Page 67: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/67.jpg)
YUICONF 2009
Dogfood (nom)
initializer: function () { this.publish(EV_MOUSE_DOWN, { defaultFn: this._defMouseDownFn, bubbles: true }); ...}
drag.js
Monday, January 17, 2011
![Page 68: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/68.jpg)
YUICONF 2009
Dogfood (nom)
initializer: function () { this.publish(SYNC, { defaultFn: this._defSyncFn }); this.publish(POSITION_THUMB, { defaultFn: this._defPositionThumbFn });}
slider.js
Monday, January 17, 2011
![Page 69: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/69.jpg)
YUICONF 2009
Dogfood (nom)
this.publish({
execute: { defaultFn : this._defExecFn },
shift : { defaultFn : this._defShiftFn },
add : { defaultFn : this._defAddFn },
promote: { defaultFn : this._defPromoteFn },
remove : { defaultFn : this._defRemoveFn }
});
async-queue.js
Monday, January 17, 2011
![Page 70: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/70.jpg)
YUICONF 2009
We love default behaviors
You should, too
Monday, January 17, 2011
![Page 71: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/71.jpg)
YUICONF 2009
Custom Events more DOM like
✓Unify Subscription API
✓Default behaviors
- Bubbling
Monday, January 17, 2011
![Page 72: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/72.jpg)
YUICONF 2009
Custom Events more DOM like
Bubbling
Monday, January 17, 2011
![Page 73: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/73.jpg)
YUICONF 2009
Bubbling
initializer: function () {
this.publish("start", {
bubbles: true
});
this.addTarget(host);
}
Monday, January 17, 2011
![Page 74: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/74.jpg)
YUICONF 2009
Bubbling
initializer: function () {
this.publish("start", {
broadcast: 1
});
}
Monday, January 17, 2011
![Page 75: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/75.jpg)
YUICONF 2009
Bubbling
initializer: function () {
this.publish("start", {
bubbles: true,
stoppedFn: this._stopStartFn
});
}
Monday, January 17, 2011
![Page 76: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/76.jpg)
YUICONF 2009
Event Delegation
<UL>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
Y.all('li') .on('click', sayHi);
Monday, January 17, 2011
![Page 77: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/77.jpg)
YUICONF 2009
Event Delegation
<UL>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
Y.all('li') .on('click', sayHi);
6 subscriptions
Monday, January 17, 2011
![Page 78: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/78.jpg)
YUICONF 2009
Event Delegation
Y.one('ul') .on('click', sayHi);
<UL>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
Monday, January 17, 2011
![Page 79: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/79.jpg)
YUICONF 2009
Event Delegation
Y.one('ul') .on('click', sayHi);
1 subscription
<UL>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
Monday, January 17, 2011
![Page 80: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/80.jpg)
YUICONF 2009
Event Delegation
Y.one('ul').delegate( 'click',sayHi,'li');
<UL>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
Monday, January 17, 2011
![Page 81: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/81.jpg)
YUICONF 2009
Event Delegation
Y.one('ul').delegate( 'click',sayHi,'li');
1 subscription
<UL>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
Monday, January 17, 2011
![Page 82: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/82.jpg)
YUICONF 2009
Event Delegation
instance1
instance2
instance3
instance4
instance5
instance6
instance1.on('start', sayHi);
instance2.on('start', sayHi);
instance3.on('start', sayHi);
instance4.on('start', sayHi);
instance5.on('start', sayHi);
instance6.on('start', sayHi);
Monday, January 17, 2011
![Page 83: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/83.jpg)
YUICONF 2009
Event Delegation
instance1
instance2
instance3
instance4
instance5
instance6
instance1.on('start', sayHi);
instance2.on('start', sayHi);
instance3.on('start', sayHi);
instance4.on('start', sayHi);
instance5.on('start', sayHi);
instance6.on('start', sayHi);
6 subscriptions
Monday, January 17, 2011
![Page 84: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/84.jpg)
YUICONF 2009
Event Delegation
ManagerClass
instance1
instance2
instance3
instance4
instance5
instance6
Mgr.on('foo:start', sayHi);
Monday, January 17, 2011
![Page 85: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/85.jpg)
YUICONF 2009
Event Delegation
ManagerClass
instance1
instance2
instance3
instance4
instance5
instance6
Mgr.on('foo:start', sayHi);
1 subscription
Monday, January 17, 2011
![Page 86: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/86.jpg)
YUICONF 2009
Event Delegation
ManagerClass
instance1
instance2
instance3
instance4
instance5
instance6
Mgr.on('foo:start', sayHi);
1 subscription
initializer: function () { this.addTarget( this.get("host"); );}
Monday, January 17, 2011
![Page 87: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/87.jpg)
YUICONF 2009
Dogfood
var draggable = new Y.DD.Drag({ node: '#dragme'});
draggable.on('start', doSomething);
Drag and Drop
Monday, January 17, 2011
![Page 88: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/88.jpg)
YUICONF 2009
Dogfood
var draggable = new Y.DD.Drag({ node: '#dragme'});
Y.DD.DDM.on('drag:start', doSomething);
Drag and Drop
Monday, January 17, 2011
![Page 89: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/89.jpg)
YUICONF 2009
Dogfood
Y.on('yui:log', doSomething);
Y.Global.on('yui:log', doSomething);
Y.Global
Monday, January 17, 2011
![Page 90: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/90.jpg)
YUICONF 2009
Custom Events more DOM like
✓Unify Subscription API
✓Default behaviors
✓Bubbling
Monday, January 17, 2011
![Page 91: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/91.jpg)
YUICONF 2009
DOMCustom Events
Monday, January 17, 2011
![Page 92: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/92.jpg)
YUICONF 2009
Above and beyond
Monday, January 17, 2011
![Page 93: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/93.jpg)
YUICONF 2009
Above and beyond
- Subscription context override
Monday, January 17, 2011
![Page 94: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/94.jpg)
YUICONF 2009
Above and beyond
- Subscription context override
- Subscription payload
Monday, January 17, 2011
![Page 95: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/95.jpg)
YUICONF 2009
Above and beyond
- Subscription context override
- Subscription payload
- Easy event detach
Monday, January 17, 2011
![Page 96: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/96.jpg)
YUICONF 2009
Above and beyond
- Subscription context override
- Subscription payload
- Easy event detach
- "After" subscriptions
Monday, January 17, 2011
![Page 97: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/97.jpg)
YUICONF 2009
Above and beyond
- Subscription context override
- Subscription payload
- Easy event detach
- "After" subscriptions
- New DOM events
Monday, January 17, 2011
![Page 98: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/98.jpg)
YUICONF 2009
instance.on("start", myObj.startHandler);
on()++
Monday, January 17, 2011
![Page 99: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/99.jpg)
YUICONF 2009
on()++
instance.on("start", Y.bind(myObj.startHandler, myObj));
Monday, January 17, 2011
![Page 100: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/100.jpg)
YUICONF 2009
on()++
instance.on("start", myObj.startHandler, myObj);
instance.on(event, handler, context);
Monday, January 17, 2011
![Page 101: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/101.jpg)
YUICONF 2009
on()++
node.on("click", myObj.clickHandler, myObj);
instance.on(event, handler, context);node.on(event, handler, context);
Monday, January 17, 2011
![Page 102: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/102.jpg)
YUICONF 2009
instance.on("start", myObj.startHandler);
on()++
Monday, January 17, 2011
![Page 103: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/103.jpg)
YUICONF 2009
on()++
instance.on("start", Y.rbind(myObj.startHandler, myObj, 1, new Date(), { foo: "bar" }));
Monday, January 17, 2011
![Page 104: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/104.jpg)
YUICONF 2009
on()++
instance.on("start", myObj.startHandler, myObj, 1, new Date(), { foo: "bar" });
instance.on(evt, fn, ctx, arg1, ...argN);node.on(evt, fn, ctx, arg1, ...argN);
Monday, January 17, 2011
![Page 105: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/105.jpg)
YUICONF 2009
on()++
instance.on("start", myObj.startHandler, myObj, 1, new Date(), { foo: "bar" });
instance.on(evt, fn, ctx, arg1, ...argN);node.on(evt, fn, ctx, arg1, ...argN);
node.on(evt, fn, null, arg1, ...argN);
Monday, January 17, 2011
![Page 106: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/106.jpg)
YUICONF 2009
Above and beyond
✓Subscription context override
✓Subscription payload
- Easy event detach
- "After" subscriptions
- New DOM events
Monday, January 17, 2011
![Page 107: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/107.jpg)
YUICONF 2009
Above and beyond
✓Subscription context override
✓Subscription payload
- Easy event detach
- "After" subscriptions
- New DOM events
Monday, January 17, 2011
![Page 108: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/108.jpg)
YUICONF 2009
button.detach("click", doSomething);
Handles and categories
Monday, January 17, 2011
![Page 109: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/109.jpg)
YUICONF 2009
button.detach("click", doSomething);
Handles and categories
var sub = button.on("click", doSomething);sub.detach();
Monday, January 17, 2011
![Page 110: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/110.jpg)
YUICONF 2009
button.detach("click", doSomething);
Handles and categories
var sub = button.on("click", doSomething);sub.detach();
button.on("my-cat|click", doSomething);button.detach("my-cat|click");
Monday, January 17, 2011
![Page 111: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/111.jpg)
YUICONF 2009
button.detach("click", doSomething);
Handles and categories
var sub = button.on("click", doSomething);sub.detach();
widget.on("guid|xChange", handleXChange);widget.on("guid|yChange", handleYChange);widget.detach("guid|*");
Monday, January 17, 2011
![Page 112: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/112.jpg)
YUICONF 2009
Above and beyond
✓Subscription context override
✓Subscription payload
✓Easy event detach
- "After" subscriptions
- New DOM events
Monday, January 17, 2011
![Page 113: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/113.jpg)
YUICONF 2009
Above and beyond
✓Subscription context override
✓Subscription payload
✓Easy event detach
- "After" subscriptions
- New DOM events
Monday, January 17, 2011
![Page 114: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/114.jpg)
YUICONF 2009
instance
event
_defEventFn
instance.on(event,handler)
Monday, January 17, 2011
![Page 115: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/115.jpg)
YUICONF 2009
instance
event
_defEventFn
instance.on(event,handler)
instance.after(event,handler)
Monday, January 17, 2011
![Page 116: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/116.jpg)
YUICONF 2009
this.after("attrChange", this._updateUI);
After moments
Y.Base
✓ Event API
✓ Attributes
✓ Plugins
Monday, January 17, 2011
![Page 117: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/117.jpg)
YUICONF 2009
this.after("attrChange", this._updateUI);
After moments
Side effects of a state change
Y.Base
✓ Event API
✓ Attributes
✓ Plugins
Monday, January 17, 2011
![Page 118: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/118.jpg)
YUICONF 2009
instance
event
_defEventFn
instance.on(event,handler)
instance.after(event,handler)
Monday, January 17, 2011
![Page 119: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/119.jpg)
YUICONF 2009
instance
event
_defEventFn
instance.on(event,handler)
instance.after(event,handler)
State UNCHANGED
Monday, January 17, 2011
![Page 120: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/120.jpg)
YUICONF 2009
instance
event
_defEventFn
instance.on(event,handler)
instance.after(event,handler)
State UNCHANGED
Change state
Monday, January 17, 2011
![Page 121: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/121.jpg)
YUICONF 2009
instance
event
_defEventFn
instance.on(event,handler)
instance.after(event,handler)
State UNCHANGED
Change state
State CHANGED
Monday, January 17, 2011
![Page 122: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/122.jpg)
YUICONF 2009
Monday, January 17, 2011
![Page 123: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/123.jpg)
YUICONF 2009
Above and beyond
✓Subscription context override
✓Subscription payload
✓Easy event detach
✓ "After" subscriptions
- New DOM events
Monday, January 17, 2011
![Page 124: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/124.jpg)
YUICONF 2009
Above and beyond
✓Subscription context override
✓Subscription payload
✓Easy event detach
✓ "After" subscriptions
- New DOM events
Monday, January 17, 2011
![Page 125: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/125.jpg)
YUICONF 2009
Y.Env.evt.plugins.YOUR_EVENT =Y.Node.DOM_EVENTS.YOUR_EVENT = {
on: function (type, handler, ctx) {
}
}
DOM++
Monday, January 17, 2011
![Page 126: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/126.jpg)
YUICONF 2009
Y.Env.evt.plugins.YOUR_EVENT =Y.Node.DOM_EVENTS.YOUR_EVENT = {
on: function (type, handler, ctx) {
}
}
DOM++
Monday, January 17, 2011
![Page 127: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/127.jpg)
YUICONF 2009
Y.Env.evt.plugins.konami =Y.Node.DOM_EVENTS.konami = {
}
Konami
Monday, January 17, 2011
![Page 128: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/128.jpg)
YUICONF 2009
Y.Env.evt.plugins.konami =Y.Node.DOM_EVENTS.konami = { on: function (type, fn, ctx) { var progress = {}, handlers = {}, keys = [38,38,40,40,37,39,37,39,66,65], ... node.on("keydown", _checkProgress);
return detachHandle;}
Konami
Monday, January 17, 2011
![Page 129: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/129.jpg)
YUICONF 2009
node.on('konami', addUnicorns);
Using your event
Monday, January 17, 2011
![Page 130: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/130.jpg)
YUICONF 2009
Above and beyond
✓Subscription context override
✓Subscription payload
✓Easy event detach
✓ "After" subscriptions
✓New DOM events
Monday, January 17, 2011
![Page 131: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/131.jpg)
YUICONF 2009
Summary✓Unified subscription
✓Default behaviors
✓Bubbling
✓Context override
✓Subscription payload
✓Easy event detach
✓ "After" subscriptions
✓New DOM events
DOMCustom Events
Monday, January 17, 2011
![Page 132: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/132.jpg)
YUICONF 2009
Rethink how you use events
Monday, January 17, 2011
![Page 133: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/133.jpg)
YUICONF 2009
Rethink how you build your apps
Monday, January 17, 2011
![Page 134: YUI 3: Events Evolved](https://reader033.fdocuments.in/reader033/viewer/2022052523/55621dd5d8b42ad44d8b4920/html5/thumbnails/134.jpg)
YUICONF 2009
Image credit
http://www.redandgreen.org/R2Kphotos2.htm (revolution)http://www.vinylrecords.ch/B/BE/Beatles/http://www.flickr.com/photos/farewell_goodnight/214712018/http://www.flickr.com/photos/docman/2948845217/http://www.flickr.com/photos/yabanji/3175297773/http://www.flickr.com/photos/hueyatl/233553293/http://www.flickr.com/photos/dark_hylian/56050955/http://www.flickr.com/photos/techthis/3528776386/
Monday, January 17, 2011