Skip to content

Instantly share code, notes, and snippets.

@sgilligan

sgilligan/overlayExtend-3.htm

Created November 10, 2011 12:00
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/1354698 to your computer and use it in GitHub Desktop.
Save sgilligan/1354698 to your computer and use it in GitHub Desktop.
Download ZIP
Extending Overlay Test Case 3
Raw
overlayExtend-3.htm
<!DOCTYPE html>
<html>
<head>
<title>Overlay Test</title>
<script type="text/javascript" src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<style type='text/css'>
body {margin:10px}
.yui3-widget {outline:none}
.yui3-widget-mask {background-color:black; opacity:.1}
.yui3-facebook {font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size:14px; background:none; border:10px solid rgba(0,0,0,0.445);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0;}
.yui3-facebook .yui3-widget-hd {padding:8px 10px; background:none; background-color:#6D84B4; color:white; font-weight:bold;border:1px solid #3B5998; border-bottom:none}
.yui3-facebook .yui3-widget-bd {padding:15px; background:white; text-align:center;border:1px solid #3B5998; border-top:none;border-bottom:none}
.yui3-facebook iframe {border:none; overflow:hidden; width:380px; height:80px}
.yui3-facebook .yui3-widget-bd .fbUrl {text-align:left; background-color: #F2F2F2; margin:-15px -15px 10px -15px; border-bottom: 1px solid #CCCCCC; color: #999999; font-size: 12px; font-weight: 400; line-height: 1.2; padding: 9px 10px;}
.yui3-facebook .yui3-widget-ft {background-color:#F2F2F2;border:1px solid #3B5998; border-top:1px solid #ccc; text-align:right; padding:10px 0px 12px 0px;}
.yui3-facebook .yui3-widget-ft a {border: 1px solid #2A437E; color: #FFFFFF; font-size: 13px; font-weight: 700; margin:0px 10px 0 0; padding: 3px 6px; text-decoration: none; border-color: #29447E #29447E #1A356E; background-image: url("http://static.ak.fbcdn.net/rsrc.php/v1/yh/r/ygNt2LRjO5d.png"); background-position: 0 -98px;}
.yui3-facebook-hidden {visibility:hidden}
</style>
</head>
<body class='yui3-skin-sam'>
<button id='btn'>Open Window</button><br />
<script type='text/javascript'>
YUI().use('overlay', 'widget-modality', 'widget-autohide', 'dd-plugin', function (Y) {
//YUI().use('widget', 'widget-stdmod', 'widget-position', 'widget-stack', 'widget-position-align', 'widget-position-constrain', 'widget-modality', 'widget-autohide', function (Y) {
var fb, FbLike;
/* AS a subclassed/extended Overlay */
FbLike = Y.Base.create('facebook', Y.Overlay, [Y.WidgetModality, Y.WidgetAutohide], {
//FbLike = Y.Base.create("facebook", Y.Widget, [Y.WidgetStdMod, Y.WidgetPosition, Y.WidgetStack, Y.WidgetPositionAlign, Y.WidgetPositionConstrain, Y.WidgetModality, Y.WidgetAutohide], {
init: function(config) {
// pass modal in via constructor (bug workaround for WidgetModality)
config.modal = true;
// continue with the superclass method
FbLike.superclass.init.apply(this, arguments);
},
bindUI: function() {
//won't bind here - footerContent not yet in place ???
this._myBind();
// must uncomment and place binding on content detect
//this.after('facebook:footerContentChange', Y.bind(this._myBind, this));
},
_myBind: function() {
var fb = this, aRef = this.get('boundingBox').one('a');
if (!aRef) {
alert('footer content not rendered: cannot bind');
} else {
aRef.on('click', function(e){
e.preventDefault();
fb.hide();
});
}
}
}, {
ATTRS: {
width: {value:400},
centered: {value:true},
zIndex: {value:100},
render: {value:true},
visible: {value:false},
headerContent: {value:"Title"},
bodyContent: {value:"<div class='fbUrl'>Subtitle</div><div class='fb-like'>content</div>"},
footerContent: {value: "<a class='close' href='#'>Close</a>"},
hideOn: {value:[{eventName: 'clickoutside'}], valueFn:undefined},
plugins: {value:[ Y.Plugin.Drag ]}
}
});
fb = new FbLike({});
Y.one('#btn').on('click', function(e) {fb.show()});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment