/* * YUI Extensions 0.33 RC2 * Copyright(c) 2006, Jack Slocum. */ /** * @class YAHOO.ext.BasicDialog * @extends YAHOO.ext.util.Observable * Lightweight Dialog Class. * * The code below lists all configuration options along with the default value. * If the default value is what you want you can leave it out: *
var dlg = new YAHOO.ext.BasicDialog('element-id', {
width: auto,
height: auto,
x: 200, //(defaults to center screen if blank)
y: 500, //(defaults to center screen if blank)
animateTarget: null,// (no animation) This is the id or element to animate from
resizable: true,
minHeight: 80,
minWidth: 200,
modal: false,
autoScroll: true,
closable: true,
constraintoviewport: true,
draggable: true,
autoTabs: false, (if true searches child nodes for elements with class ydlg-tab and converts them to tabs)
proxyDrag: false, (drag a proxy element rather than the dialog itself)
fixedcenter: false,
shadow: false,
minButtonWidth: 75,
shim: false // true to create an iframe shim to
// keep selects from showing through
});
* @constructor
* Create a new BasicDialog.
* @param {String/HTMLElement/YAHOO.ext.Element} el The id of or container element
* @param {Object} config configuration options
*/
YAHOO.ext.BasicDialog = function(el, config){
el = getEl(el, true);
this.el = el;
this.el.setDisplayed(true);
this.el.hide = this.hideAction;
this.id = this.el.id;
this.el.addClass('ydlg');
this.shadowOffset = 3;
this.minHeight = 80;
this.minWidth = 200;
this.minButtonWidth = 75;
this.defaultButton = null;
YAHOO.ext.util.Config.apply(this, config);
this.proxy = el.createProxy('ydlg-proxy');
this.proxy.hide = this.hideAction;
this.proxy.setOpacity(.5);
this.proxy.hide();
if(config.width){
el.setWidth(config.width);
}
if(config.height){
el.setHeight(config.height);
}
this.size = el.getSize();
if(typeof config.x != 'undefined' && typeof config.y != 'undefined'){
this.xy = [config.x,config.y];
}else{
this.xy = el.getCenterXY(true);
}
// find the header, body and footer
var cn = el.dom.childNodes;
for(var i = 0, len = cn.length; i < len; i++) {
var node = cn[i];
if(node && node.nodeType == 1){
if(YAHOO.util.Dom.hasClass(node, 'ydlg-hd')){
this.header = getEl(node, true);
}else if(YAHOO.util.Dom.hasClass(node, 'ydlg-bd')){
this.body = getEl(node, true);
}else if(YAHOO.util.Dom.hasClass(node, 'ydlg-ft')){
/**
* The footer element
* @type YAHOO.ext.Element
*/
this.footer = getEl(node, true);
}
}
}
var dh = YAHOO.ext.DomHelper;
if(!this.header){
/**
* The header element
* @type YAHOO.ext.Element
*/
this.header = dh.append(el.dom, {tag: 'div', cls:'ydlg-hd'}, true);
}
if(!this.body){
/**
* The body element
* @type YAHOO.ext.Element
*/
this.body = dh.append(el.dom, {tag: 'div', cls:'ydlg-bd'}, true);
}
// wrap the header for special rendering
var hl = dh.insertBefore(this.header.dom, {tag: 'div', cls:'ydlg-hd-left'});
var hr = dh.append(hl, {tag: 'div', cls:'ydlg-hd-right'});
hr.appendChild(this.header.dom);
// wrap the body and footer for special rendering
this.bwrap = dh.insertBefore(this.body.dom, {tag: 'div', cls:'ydlg-dlg-body'}, true);
this.bwrap.dom.appendChild(this.body.dom);
if(this.footer) this.bwrap.dom.appendChild(this.footer.dom);
if(this.autoScroll !== false && !this.autoTabs){
this.body.setStyle('overflow', 'auto');
}
if(this.closable !== false){
this.el.addClass('ydlg-closable');
this.close = dh.append(el.dom, {tag: 'div', cls:'ydlg-close'}, true);
this.close.mon('click', function(){
this.hide();
}, this, true);
}
if(this.resizable !== false){
this.el.addClass('ydlg-resizable');
this.resizer = new YAHOO.ext.Resizable(el, {
minWidth: this.minWidth || 80,
minHeight:this.minHeight || 80,
handles: 'all',
pinned: true
});
this.resizer.on('beforeresize', this.beforeResize, this, true);
this.resizer.delayedListener('resize', this.onResize, this, true);
}
if(this.draggable !== false){
el.addClass('ydlg-draggable');
if (!this.proxyDrag) {
var dd = new YAHOO.util.DD(el.dom.id, 'WindowDrag');
}
else {
var dd = new YAHOO.util.DDProxy(el.dom.id, 'WindowDrag', {dragElId: this.proxy.id});
}
dd.setHandleElId(this.header.id);
dd.endDrag = this.endMove.createDelegate(this);
dd.startDrag = this.startMove.createDelegate(this);
dd.onDrag = this.onDrag.createDelegate(this);
this.dd = dd;
}
if(this.modal){
this.mask = dh.append(document.body, {tag: 'div', cls:'ydlg-mask'}, true);
this.mask.enableDisplayMode('block');
this.mask.hide();
}
if(this.shadow){
this.shadow = el.createProxy({tag: 'div', cls:'ydlg-shadow'});
this.shadow.setOpacity(.3);
this.shadow.setVisibilityMode(YAHOO.ext.Element.VISIBILITY);
this.shadow.setDisplayed('block');
this.shadow.hide = this.hideAction;
this.shadow.hide();
}else{
this.shadowOffset = 0;
}
if(this.shim){
this.shim = this.el.createShim();
this.shim.hide = this.hideAction;
this.shim.hide();
}
if(this.autoTabs){
var tabEls = YAHOO.util.Dom.getElementsByClassName('ydlg-tab', 'div', el.dom);
if(tabEls.length > 0){
this.body.addClass(this.tabPosition == 'bottom' ? 'ytabs-bottom' : 'ytabs-top');
this.tabs = new YAHOO.ext.TabPanel(this.body.dom, this.tabPosition == 'bottom');
for(var i = 0, len = tabEls.length; i < len; i++) {
var tabEl = tabEls[i];
this.tabs.addTab(YAHOO.util.Dom.generateId(tabEl), tabEl.title);
tabEl.title = '';
}
this.tabs.activate(tabEls[0].id);
}
}
this.syncBodyHeight();
this.events = {
/**
* @event keydown
* Fires when a key is pressed
* @param {YAHOO.ext.BasicDialog} this
* @param {YAHOO.ext.EventObject} e
*/
'keydown' : new YAHOO.util.CustomEvent('keydown'),
/**
* @event move
* Fires when this dialog is moved by the user.
* @param {YAHOO.ext.BasicDialog} this
* @param {Number} x The new page X
* @param {Number} y The new page Y
*/
'move' : new YAHOO.util.CustomEvent('move'),
/**
* @event resize
* Fires when this dialog is resized by the user.
* @param {YAHOO.ext.BasicDialog} this
* @param {Number} width The new width
* @param {Number} height The new height
*/
'resize' : new YAHOO.util.CustomEvent('resize'),
/**
* @event beforehide
* Fires before this dialog is hidden.
* @param {YAHOO.ext.BasicDialog} this
*/
'beforehide' : new YAHOO.util.CustomEvent('beforehide'),
/**
* @event hide
* Fires when this dialog is hidden.
* @param {YAHOO.ext.BasicDialog} this
*/
'hide' : new YAHOO.util.CustomEvent('hide'),
/**
* @event beforeshow
* Fires before this dialog is shown.
* @param {YAHOO.ext.BasicDialog} this
*/
'beforeshow' : new YAHOO.util.CustomEvent('beforeshow'),
/**
* @event show
* Fires when this dialog is shown.
* @param {YAHOO.ext.BasicDialog} this
*/
'show' : new YAHOO.util.CustomEvent('show')
};
el.mon('keydown', this.onKeyDown, this, true);
el.mon("mousedown", this.toFront, this, true);
YAHOO.ext.EventManager.onWindowResize(this.adjustViewport, this, true);
this.el.hide();
YAHOO.ext.DialogManager.register(this);
};
YAHOO.extendX(YAHOO.ext.BasicDialog, YAHOO.ext.util.Observable, {
beforeResize : function(){
this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
},
onResize : function(){
this.refreshSize();
this.syncBodyHeight();
this.adjustAssets();
this.fireEvent('resize', this, this.size.width, this.size.height);
},
onKeyDown : function(e){
this.fireEvent('keydown', this, e);
},
/**
* Resizes the dialog.
* @param {Number} width
* @param {Number} height
* @return {YAHOO.ext.BasicDialog} this
*/
resizeTo : function(width, height){
this.el.setSize(width, height);
this.size = {width: width, height: height};
this.syncBodyHeight();
if(this.fixedcenter){
this.center();
}
if(this.isVisible()){
this.constrainXY();
this.adjustAssets();
}
return this;
},
/**
* Adds a key listener for when this dialog is displayed
* @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
* {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
* @param {Function} fn The function to call
* @param {Object} scope (optional) The scope of the function
* @return {YAHOO.ext.BasicDialog} this
*/
addKeyListener : function(key, fn, scope){
var keyCode, shift, ctrl, alt;
if(typeof key == 'object'){
keyCode = key['key'];
shift = key['shift'];
ctrl = key['ctrl'];
alt = key['alt'];
}else{
keyCode = key;
}
var handler = function(dlg, e){
if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){
var k = e.getKey();
if(keyCode instanceof Array){
for(var i = 0, len = keyCode.length; i < len; i++){
if(keyCode[i] == k){
fn.call(scope || window, dlg, k, e);
return;
}
}
}else{
if(k == keyCode){
fn.call(scope || window, dlg, k, e);
}
}
}
};
this.on('keydown', handler);
return this;
},
/**
* Returns the TabPanel component (if autoTabs)
* @return {YAHOO.ext.TabPanel}
*/
getTabs : function(){
if(!this.tabs){
this.body.addClass(this.tabPosition == 'bottom' ? 'ytabs-bottom' : 'ytabs-top');
this.tabs = new YAHOO.ext.TabPanel(this.body.dom, this.tabPosition == 'bottom');
}
return this.tabs;
},
/**
* Adds a button.
* @param {String/Object} config A string becomes the button text, an object is expected to be a valid YAHOO.ext.DomHelper element config
* @param {Function} handler The function called when the button is clicked
* @param {Object} scope (optional) The scope of the handler function
* @return {YAHOO.ext.BasicDialog.Button}
*/
addButton : function(config, handler, scope){
var dh = YAHOO.ext.DomHelper;
if(!this.footer){
this.footer = dh.append(this.bwrap.dom, {tag: 'div', cls:'ydlg-ft'}, true);
}
var btn;
if(typeof config == 'string'){
if(!this.buttonTemplate){
// hideous table template
this.buttonTemplate = new YAHOO.ext.DomHelper.Template('| {0} |
if(!dialog){
dialog = new YAHOO.ext.LayoutDialog("download-dlg", {
modal: true,
width:600,
height:450,
shadow:true,
minWidth:500,
minHeight:350,
autoTabs:true,
proxyDrag:true,
// layout config merges with the dialog config
center:{
tabPosition: 'top',
alwaysShowTabs: true
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.setDefaultButton(dialog.addButton('Close', dialog.hide, dialog));
dialog.addButton('Build It!', this.getDownload, this);
// we can even add nested layouts
var innerLayout = new YAHOO.ext.BorderLayout('dl-inner', {
east: {
initialSize: 200,
autoScroll:true,
split:true
},
center: {
autoScroll:true
}
});
innerLayout.beginUpdate();
innerLayout.add('east', new YAHOO.ext.ContentPanel('dl-details'));
innerLayout.add('center', new YAHOO.ext.ContentPanel('selection-panel'));
innerLayout.endUpdate(true);
// when doing updates to the top level layout in a dialog, you need to
// use dialog.beginUpdate()/endUpdate() instead of layout.beginUpdate()/endUpdate()
var layout = dialog.getLayout();
dialog.beginUpdate();
layout.add('center', new YAHOO.ext.ContentPanel('standard-panel',
{title: 'Download the Source', fitToFrame:true}));
layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout,
{title: 'Build your own yui-ext.js'}));
layout.getRegion('center').showPanel(sp);
dialog.endUpdate();
* @constructor
* @param {String/HTMLElement/YAHOO.ext.Element} el The id of or container element
* @param {Object} config configuration options
*/
YAHOO.ext.LayoutDialog = function(el, config){
config.autoTabs = false;
YAHOO.ext.LayoutDialog.superclass.constructor.call(this, el, config);
this.body.setStyle({overflow:'hidden', position:'relative'});
this.layout = new YAHOO.ext.BorderLayout(this.body.dom, config);
this.layout.monitorWindowResize = false;
};
YAHOO.extendX(YAHOO.ext.LayoutDialog, YAHOO.ext.BasicDialog, {
/**
* Ends update of the layout