Skip to content

Instantly share code, notes, and snippets.

@earnubs

earnubs/index.html

Created October 25, 2012 11:09
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 earnubs/3952031 to your computer and use it in GitHub Desktop.
Save earnubs/3952031 to your computer and use it in GitHub Desktop.
Download ZIP
YUI Panels
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<script src="http://yui.yahooapis.com/3.7.2/build/yui/yui-min.js"></script>
<script src=panels.js></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="panels.css">
<title>YUI Panels</title>
</head>
<body class="yui3-skin-sam">
<button class="u1-btn">Show Me!</button>
<p>Vestibulum facilisis adipiscing ante, posuere mollis justo varius vel. Etiam feugiat diam vel odio vulputate vitae vestibulum risus consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie magna ut risus fermentum non molestie turpis dignissim. Mauris ornare sagittis odio id dapibus. Aenean sem magna, molestie tempor ornare a, scelerisque sed lorem. Donec hendrerit gravida lacus, quis blandit nisl lacinia non. Maecenas non gravida orci.
<p>Nunc lacinia cursus turpis, sed iaculis diam ullamcorper sed. Maecenas placerat mollis ipsum in rhoncus. Morbi id est ante, quis lobortis sem. Suspendisse et augue et velit ultricies tempus. Nulla orci quam, sodales in egestas vel, auctor id neque. Pellentesque lorem nisi, malesuada non blandit a, blandit non leo. Ut iaculis lacus ac mi tempor sollicitudin iaculis felis malesuada.
<p>Aenean elit erat, rhoncus ac malesuada eget, elementum eget arcu. Curabitur ac malesuada mauris. In leo mauris, facilisis ac pellentesque ut, pretium in lorem. Suspendisse ac tincidunt odio. Proin eu dolor nunc, auctor pulvinar augue. Fusce in metus non ante iaculis pharetra. Cras elit justo, dictum nec porta non, suscipit id arcu. Aenean lacus ante, lobortis vel aliquet a, sollicitudin vel lorem. Quisque mattis lacinia eros, eu auctor nunc pharetra varius. Nulla in nunc ut ligula laoreet gravida vitae nec dui. Sed at elit nisl, ac volutpat massa. Aliquam feugiat iaculis auctor. Vivamus a euismod enim. Fusce libero lectus, adipiscing a vehicula et, luctus eu libero. Praesent fringilla fringilla diam non rutrum. Quisque vel arcu elit, a adipiscing mi.
<p>Proin dui justo, venenatis nec suscipit at, viverra a elit. Sed libero ligula, placerat non tempor at, auctor sed ipsum. Donec malesuada lorem semper est bibendum at porta nunc tempor. Duis sit amet malesuada ligula. Aliquam aliquet, libero sed suscipit volutpat, sapien purus fringilla turpis, ut malesuada metus elit vel mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit neque in urna mattis nec ornare quam scelerisque. Proin sit amet ullamcorper nisl. Pellentesque nec neque massa, quis suscipit sem. Sed pharetra dapibus sem, eu mattis massa consectetur quis. Quisque mollis pellentesque ipsum consequat accumsan. In ipsum sapien, mollis eget posuere ac, gravida a ligula. Nullam lacinia hendrerit nisl, quis porta lacus rutrum sed. Nam nec leo eu felis rhoncus mollis et iaculis sem. Sed vulputate fermentum mauris, id tristique ante tempor id.
<div class=yui3-widget-loading id="panelContent">
<div class="yui3-widget-hd">Modal Dialog Title</div>
Content...
</div>
</body>
</html>
Raw
panels.css
/* panel core styles, loaded with panel */
.yui3-panel {
position: absolute;
}
.yui3-panel-hidden {
visibility: hidden;
}
.yui3-widget-tmp-forcesize .yui3-panel-content {
overflow: hidden !important;
}
.yui3-panel .yui3-widget-hd {
position: relative;
}
.yui3-panel .yui3-widget-hd .yui3-widget-buttons {
position: absolute;
top: 0;
right: 0;
}
.yui3-panel .yui3-widget-ft .yui3-widget-buttons {
display: inline-block;
*display: inline;
zoom: 1;
}
/* u1 specific styles */
.yui3-widget-mask {
background:black;
opacity: 0;
}
.yui3-panel-content {
outline:none;
padding:10px 20px 20px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
border-radius: 3px;
background: white;
}
:active, :focus { outline-style: none; -moz-outline-style:none; }
Raw
panels.js
YUI({
fetchCSS: false
}).use('panel', 'plugin','base-build','event-custom','transition', function (Y) {
var AnimModalMaskPlugin = Y.AnimModalMaskPlugin = Y.Base.create("modalAnimPlugin", Y.Plugin.Base, [], {
initializer : function(config) {
// Override Widget's _uiSetVisible method, with the custom animated method
this.beforeHostMethod("_uiSetHostVisibleModal", this._uiAnimSetHostVisibleModal);
},
/**
* Performs events attaching/detaching, stack shifting and mask repositioning based on the visibility of the widget
*
* @method _uiSetHostVisibleModal
* @param {boolean} Whether the widget is visible or not
*/
_uiAnimSetHostVisibleModal : function (visible) {
var host = this.get('host'),
stack = host.STACK,
maskNode = host.get('maskNode'),
isModal = host.get('modal'),
topModal, index;
if (visible) {
if (stack && stack.length) {
Y.Array.each(stack, function(modal){
modal._detachUIHandlesModal();
modal._blur();
});
stack.unshift(host);
}
// push on top of stack
host._repositionMask(host);
host._uiSetHostZIndexModal(host.get('zIndex'));
if (isModal) {
maskNode.show('foo', {
duration: 0.4,
easing: 'ease-in',
opacity: 0.3
});
Y.later(1, host, '_attachUIHandlesModal');
host._focus();
}
} else {
if (stack && stack.length) {
index = Y.Array.indexOf(stack, host);
if (index >= 0) {
// Remove modal widget from global stack.
stack.splice(index, 1);
}
}
host._detachUIHandlesModal();
host._blur();
if (stack && stack.length) {
topModal = stack[0];
host._repositionMask(topModal);
//topModal._attachUIHandlesModal();
topModal._uiSetHostZIndexModal(topModal.get('zIndex'));
if (topModal.get('modal')) {
//topModal._attachUIHandlesModal();
Y.later(1, topModal, '_attachUIHandlesModal');
topModal._focus();
}
} else {
if (maskNode.getStyle('display') === 'block') {
maskNode.hide('fadeOut');
}
}
}
return new Y.Do.Prevent();
}
}, {
NS: 'animModalMaskPlugin'
});
var panel;
panel = new Y.Panel({
srcNode : '#panelContent',
width : 400,
centered: true,
render: true,
visible: false,
modal : true,
buttons: {
header: ['close'],
footer: [{
value: "Done",
action: function(e) {
e.preventDefault();
// do something then hide
}
}, {
value: "Cancel",
action: function(e) {
e.preventDefault();
this.hide();
}
}]
}
});
panel.plug(Foo);
Y.all('.u1-btn').on('click', function(e) {
panel.show();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment