The next step, part 2

Widget provides some structure

initializer : function(config) {
var node = this.get("node");
if(node) {
if(!this.get("content")) {
this.set("content",
node.getAttribute("title"));
}
node.removeAttribute("title");
}
},
destructor : function() {
this._handlers.detach();
this._handlers = null;
},

bindUI : function() {
var node = this.get("node");
this._handlers = node.on({
mouseenter : {
fn : function() {
this.get('boundingBox').setStyles({
left : e.pageX + 5,
top : e.pageY + 5
});
this.show();
},
context : this
},
mouseleave: Y.bind(this.hide, this)
});
},

syncUI : function() {
this.publish("sync", {
defaultFn : Y.bind(function() {
this.get('contentBox')
.setContent(this.get('content'));
}, this)
}).fire();
}

YUI().use("gallery-tooltip", function(Y) {
var tooltip = new Y.Tooltip({
visible : false,
render : true,
node : Y.one("a")
});
});

new Y.Tooltip({
visible : false,
render : true,
node : Y.one("a"),
plugins : [ Y.Plugin.TooltipSimpleDisplay ]
});
//or
var tooltip = New Y.Tooltip({
visible : false,
render : true,
node : Y.one("a")
});
tooltip.plug(Y.Plugin.TooltipSimpleDisplay);

Y.Base.create("TooltipSimpleDisplay", Y.Plugin.Base, [], {
initializer : function() {
var host = this.get("host");
host.on("sync", function(e) {
//prevent default sync method
e.preventDefault();
var content = host.get('content') + " + plugin";
host.get("contentBox").setContent(content);
}, this);
}
}, {
NS : 'TooltipSimpleDisplay'
});

Powered by Custom Events
That call to preventDefault is important

syncUI : function() {
this.publish("sync", {
//Now we see why this slightly
//odd syntax was important
//it lets this method be
//overriden by plugins
defaultFn : Y.bind(function() {
this.get('contentBox')
.setContent(this.get('content'));
}, this)
}).fire();
}

We can go further
http://www.flickr.com/photos/st3f4n/4501172754/

Transitions Module
Adding some flash

new Y.Tooltip({
visible : false,
render : true,
node : Y.one("a"),
plugins : [
//from gallery
Y.Plugin.TransitionOverlay
]
});

Still, not really all that useful
http://www.flickr.com/photos/zen/1174874997/

Y.Base.create("WidgetYQL", Y.Plugin.Base, [], {
_yql : null,
this.after([
"queryChange", "formatterChange", "configChange"
], this._createYQL, this);
},
_ _createYQL : function() {
attrs = this.getAttrs([
"query", "formatter", "config"
]);
this._yql = new Y.YQLRequest(
attrs.query,
Y.bind(attrs.formatter, this),
attrs.config
);
},
sendQuery : function() {
return this._yql.send();
}

tooltip.plug(Y.Plugin.WidgetYQL, {
query : "SELECT * FROM ...",
formatter : function(r) {
host._yqlData = r.query.results.quote;
host.set("content",
r.query...LastTradePriceOnly);
host.fire("yqlResponse", r);
}
});

Plugins on top of plugins
http://idont/have/a/source/its/just/funny

new Y.Tooltip({
visible : false,
render : true,
node : Y.one('a'),
plugins : [
Y.Plugin.TransitionOverlay,
Y.Plugin.TooltipYQL,
Y.Plugin.TooltipDisplay
]
});

Didn’t do anything too dumb
(yet)

Not very useful though
http://www.flickr.com/photos/sewitsforyou/3466154372/

new Y.Test.Case({
name : "Tooltip Event Simulation Test",
"tooltip should show on mouseenter" :
function() {
//create tooltip
var tooltip = ...
//simulate mousing over the link
Y.one("a").simulate("mouseover");
//fail if the tooltip isn't visible
Y.assert(
tooltip.get("visible"),
"Tooltip wasn't visible“
);
}
});

Lots of JS is async though
Sync tests don’t solve everything

"tooltip should transition to visible" : function() {
var tooltip = ...
//resume the test once the transition has finished
tooltip.transitionPlugin.on("end",
function(visible) {
this.resume(function() {
Y.assert(visible && tooltip.get("visible"),
"Tooltip wasn't visible");
});
}, this);
//show the overlay, triggering the transition
tooltip.show();
//wait for a bit for the transition to end
this.wait(1000);
}

Inline JS, great for prototyping
Bad for more complicated testing

new Y.Test.Case({
name : "Advanced Tests",
//set up a tooltip before every test, clean it up
setUp : function() { ... },
tearDown : function() { ... },
//multiple tests
"tooltip should render without errors" : function() { ... },
"tooltip should show on mouseenter" : function() { ... },
"tooltip should transition to visible" : function() { ... },
"YQL plugin should get data from YQL" : function() { ... }
});

YUI Gallery
You’ve been meaning to share more anyways, right?

One way to flesh out your idea
Definitely not the only one

Patrick Cavit
@tivac on twitter
“tivac” in IRC
http://patcavit.com
http://lanyrd.com/people/tivac/

The next step, part 2

More Related Content

What's hot (18)

Similar to The next step, part 2 (20)

Recently uploaded (20)

The next step, part 2

Editor's Notes