topical media & game development
lib-jquery-style-custom-development-bundle-ui-ui.dialog.js / js
/*
* jQuery UI Dialog 1.7.1
*
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI/Dialog
*
* Depends:
* ui.core.js
* ui.draggable.js
* ui.resizable.js
*/
(function(.widget("ui.dialog", {
_init: function() {
this.originalTitle = this.element.attr('title');
var self = this,
options = this.options,
title = options.title || this.originalTitle || ' ',
titleId = .ui.keyCode.ESCAPE && self.close(event));
})
.attr({
role: 'dialog',
'aria-labelledby': titleId
})
.mousedown(function(event) {
self.moveToTop(false, event);
}),
uiDialogContent = this.element
.show()
.removeAttr('title')
.addClass(
'ui-dialog-content ' +
'ui-widget-content')
.appendTo(uiDialog),
uiDialogTitlebar = (this.uiDialogTitlebar = $('<div></div>'))
.addClass(
'ui-dialog-titlebar ' +
'ui-widget-header ' +
'ui-corner-all ' +
'ui-helper-clearfix'
)
.prependTo(uiDialog),
uiDialogTitlebarClose = $('<a href="#"/>')
.addClass(
'ui-dialog-titlebar-close ' +
'ui-corner-all'
)
.attr('role', 'button')
.hover(
function() {
uiDialogTitlebarClose.addClass('ui-state-hover');
},
function() {
uiDialogTitlebarClose.removeClass('ui-state-hover');
}
)
.focus(function() {
uiDialogTitlebarClose.addClass('ui-state-focus');
})
.blur(function() {
uiDialogTitlebarClose.removeClass('ui-state-focus');
})
.mousedown(function(ev) {
ev.stopPropagation();
})
.click(function(event) {
self.close(event);
return false;
})
.appendTo(uiDialogTitlebar),
uiDialogTitlebarCloseText = (this.uiDialogTitlebarCloseText = $('<span/>'))
.addClass(
'ui-icon ' +
'ui-icon-closethick'
)
.text(options.closeText)
.appendTo(uiDialogTitlebarClose),
uiDialogTitle = $('<span/>')
.addClass('ui-dialog-title')
.attr('id', titleId)
.html(title)
.prependTo(uiDialogTitlebar);
uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection();
(options.draggable && .fn.resizable && this._makeResizable());
this._createButtons(options.buttons);
this._isOpen = false;
(options.bgiframe && .ui.dialog.overlay.resize();
self._isOpen = false;
},
isOpen: function() {
return this._isOpen;
},
// the force parameter allows us to move modal dialogs to their correct
// position on open
moveToTop: function(force, event) {
if ((this.options.modal && !force)
|| (!this.options.stack && !this.options.modal)) {
return this._trigger('focus', event);
}
if (this.options.zIndex > .ui.dialog.maxZ = this.options.zIndex;
}
(this.overlay && this.overlay..ui.dialog.overlay.maxZ = ++.ui.dialog.maxZ);
this.element.attr(saveScroll);
this._trigger('focus', event);
},
open: function() {
if (this._isOpen) { return; }
var options = this.options,
uiDialog = this.uiDialog;
this.overlay = options.modal ? new .ui.keyCode.TAB) {
return;
}
var tabbables = $(':tabbable', this),
first = tabbables.filter(':first')[0],
last = tabbables.filter(':last')[0];
if (event.target == last && !event.shiftKey) {
setTimeout(function() {
first.focus();
}, 1);
} else if (event.target == first && event.shiftKey) {
setTimeout(function() {
last.focus();
}, 1);
}
}));
// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
$([])
.add(uiDialog.find('.ui-dialog-content :tabbable:first'))
.add(uiDialog.find('.ui-dialog-buttonpane :tabbable:first'))
.add(uiDialog)
.filter(':first')
.focus();
this._trigger('open');
this._isOpen = true;
},
_createButtons: function(buttons) {
var self = this,
hasButtons = false,
uiDialogButtonPane = $('<div></div>')
.addClass(
'ui-dialog-buttonpane ' +
'ui-widget-content ' +
'ui-helper-clearfix'
);
// if we already have a button pane, remove it
this.uiDialog.find('.ui-dialog-buttonpane').remove();
(typeof buttons == 'object' && buttons !== null &&
.each(buttons, function(name, fn) {
$('<button type="button"></button>')
.addClass(
'ui-state-default ' +
'ui-corner-all'
)
.text(name)
.click(function() { fn.apply(self.element[0], arguments); })
.hover(
function() {
this.addClass('ui-state-hover');
},
function() {
this.removeClass('ui-state-hover');
}
)
.focus(function() {
this.addClass('ui-state-focus');
})
.blur(function() {
this.removeClass('ui-state-focus');
})
.appendTo(uiDialogButtonPane);
});
uiDialogButtonPane.appendTo(this.uiDialog);
}
},
_makeDraggable: function() {
var self = this,
options = this.options,
heightBeforeDrag;
this.uiDialog.draggable({
cancel: '.ui-dialog-content',
handle: '.ui-dialog-titlebar',
containment: 'document',
start: function() {
heightBeforeDrag = options.height;
this.height(this.height()).addClass("ui-dialog-dragging");
(options.dragStart && options.dragStart.apply(self.element[0], arguments));
},
drag: function() {
(options.drag && options.drag.apply(self.element[0], arguments));
},
stop: function() {
this.removeClass("ui-dialog-dragging").height(heightBeforeDrag);
(options.dragStop && options.dragStop.apply(self.element[0], arguments));
.ui.dialog.overlay.resize();
}
})
.find('.ui-resizable-se').addClass('ui-icon ui-icon-grip-diagonal-se');
},
_position: function(pos) {
var wnd = window, doc = document,
pTop = doc.scrollTop(), pLeft = doc.scrollLeft(),
minTop = pTop;
if (.widget.prototype._setData.apply(this, arguments);
},
_size: function() {
/* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
* divs will both have width and height set, so we need to reset them
*/
var options = this.options;
// reset content sizing
this.element.css({
height: 0,
minHeight: 0,
width: 'auto'
});
// reset wrapper sizing
// determine the height of all the non-content elements
var nonContentHeight = this.uiDialog.css({
height: 'auto',
width: options.width
})
.height();
this.element
.css({
minHeight: Math.max(options.minHeight - nonContentHeight, 0),
height: options.height == 'auto'
? 'auto'
: Math.max(options.height - nonContentHeight, 0)
});
}
});
.ui.dialog, {
version: "1.7.1",
defaults: {
autoOpen: true,
bgiframe: false,
buttons: {},
closeOnEscape: true,
closeText: 'close',
dialogClass: '',
draggable: true,
hide: null,
height: 'auto',
maxHeight: false,
maxWidth: false,
minHeight: 150,
minWidth: 150,
modal: false,
position: 'center',
resizable: true,
show: null,
stack: true,
title: '',
width: 300,
zIndex: 1000
},
getter: 'isOpen',
uuid: 0,
maxZ: 0,
getTitleId: function(el.attr('id') || ++this.uuid);
},
overlay: function(dialog) {
this..ui.dialog.overlay.create(dialog);
}
});
.ui.dialog.overlay, {
instances: [],
maxZ: 0,
events: .ui.dialog.overlay.events, function(event) {
var dialogZ = $(event.target).parents('.ui-dialog').css('zIndex') || 0;
return (dialogZ > .ui.keyCode.ESCAPE && dialog.close(event));
});
// handle window resize
window.bind('resize.dialog-overlay', el = $('<div></div>').appendTo(document.body)
.addClass('ui-widget-overlay').css({
width: this.width(),
height: this.height()
});
(dialog.options.bgiframe && el.bgiframe());
this.instances.push(el;
},
destroy: function(.inArray(this.instances, el.remove();
},
height: function() {
// handle IE 6
if (.browser.version < 7) {
var scrollHeight = Math.max(
document.documentElement.scrollHeight,
document.body.scrollHeight
);
var offsetHeight = Math.max(
document.documentElement.offsetHeight,
document.body.offsetHeight
);
if (scrollHeight < offsetHeight) {
return window.height() + 'px';
} else {
return scrollHeight + 'px';
}
// handle "good" browsers
} else {
return document.height() + 'px';
}
},
width: function() {
// handle IE 6
if (.browser.version < 7) {
var scrollWidth = Math.max(
document.documentElement.scrollWidth,
document.body.scrollWidth
);
var offsetWidth = Math.max(
document.documentElement.offsetWidth,
document.body.offsetWidth
);
if (scrollWidth < offsetWidth) {
return window.width() + 'px';
} else {
return scrollWidth + 'px';
}
// handle "good" browsers
} else {
return document.width() + 'px';
}
},
resize: function() {
/* If the dialog is draggable and the user drags it past the
* right edge of the window, the document becomes wider so we
* need to stretch the overlay. If the user then drags the
* dialog back to the left, the document will become narrower,
* so we need to shrink the overlay to the appropriate size.
* This is handled by shrinking the overlay before setting it
* to the full document size.
*/
var .each(overlays = overlays.css({
width: 0,
height: 0
}).css({
width: .ui.dialog.overlay.height()
});
}
});
.ui.dialog.overlay.prototype, {
destroy: function() {
el);
}
});
})(jQuery);
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.