public
Created

Extending Overlay Test Case

  • Download Gist
overlayExtend.htm
HTML
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
<!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-overlay {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', function (Y) {
var fb, FbLike;
 
/* AS a subclassed/extended Overlay */
FbLike = Y.Base.create('facebook', Y.Overlay, [Y.WidgetModality, Y.WidgetAutohide], {
init: function(config) {
// Why can't these be in my ATTR object?
Y.mix(config, {
modal: true,
hideOn: [{eventName: 'clickoutside'}]
});
 
// continue with the superclass method
FbLike.superclass.init.apply(this, arguments);
},
bindUI: function() {
//this._myBind(); //won't bind here - footerContent not yet in place ???
this.after('facebook:footerContentChange', Y.bind(this._myBind, this));
},
_myBind: function() {
var fb = this;
this.get('boundingBox').one('a').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>"}
}
});
 
fb = new FbLike({});
Y.one('#btn').on('click', function(e) {fb.show()});
});
</script>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.