Skip to content

Instantly share code, notes, and snippets.

@sgilligan

sgilligan/Widget Animation Plugin

Created February 6, 2011 15:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sgilligan/813423 to your computer and use it in GitHub Desktop.
Save sgilligan/813423 to your computer and use it in GitHub Desktop.
Download ZIP
Trying to manually inject an animation method
Raw
Widget Animation Plugin
<!DOCTYPE html>
<html>
<head>
<title>WidgetAnim test</title>
<style type="text/css">
.yui3-js-enabled .yui3-overlay-loading {top:-1000em; left:-1000em; position:absolute; }
.yui3-overlay-content {background-color:#ccc; border:1px solid #000; padding:5px; }
.yui3-overlay .yui3-widget-hd, .yui3-overlay .yui3-widget-bd, .yui3-overlay .yui3-widget-ft { background-color:#eee; padding:2px; border:1px solid #999;}
.yui3-overlay .yui3-widget-bd { background-color:#fff;}
</style>
</head>
<body class="yui3-skin-sam">
<h1>Widget Anim test</h2>
<div id="overlay" class="yui3-overlay-loading">
<div class="yui3-widget-hd">Overlay Header</div>
<div class="yui3-widget-bd">Overlay Body</div>
<div class="yui3-widget-ft">Overlay Footer</div>
</div>
<button type="button" id="show">Show</button>
<button type="button" id="hide">Hide</button>
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui.js"></script>
<script>
YUI({filter:'raw'}).use('overlay','widget-anim','anim', function(Y){
var overlay = new Y.Overlay({
srcNode: "#overlay",
width:"10em",
height:"10em",
visible:false,
shim:false,
align: {
node: "#show",
points: ["tl", "bl"]
},
plugins: [{
fn:Y.Plugin.WidgetAnim,
cfg:{duration:1,
animHide: {
valueFn: function() {
return new Y.Anim({
node: this.get(HOST).get(BOUNDING_BOX),
to: { opacity: 0 },
duration: this.get(DURATION)
});
}
}
}
}]
});
overlay.render();
Y.on("click", function() {overlay.show()}, "#show");
Y.on("click", function() {overlay.hide()}, "#hide");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment