Revision: 34147
Updated Code
at October 21, 2010 11:15 by MostThingsWeb
Updated Code
/*
* Version 1.6
*
* http://mosttw.wordpress.com/
*
* Licensed under MIT License: http://en.wikipedia.org/wiki/MIT_License
*
* Copyright (c) 2010 MostThingsWeb
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
* Changelog:
*
* Version 1.6
* - Fixed overlay overflow issues in IE
* - Fixed overlay fadeIn in IE
*
*
* Version 1.5
* - Release
*
*/
/*
*
* Portions of this software come from jQuery UI Dialog 1.8.4
* License (below):
*
* jQuery UI Dialog 1.8.4
*
* Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Dialog
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
* jquery.ui.button.js
* jquery.ui.draggable.js
* jquery.ui.mouse.js
* jquery.ui.position.js
* jquery.ui.resizable.js
*/
(function($) {
// Get the dialog widget factory prototype
var proto = $.ui.dialog.prototype;
// Members need access to these class names
var uiDialogClasses = 'ui-dialog ' + 'ui-widget ' + 'ui-widget-content ' + 'ui-corner-all ';
// Internal function used to generate a random ID
function randomID() {
var id = "";
for ( var i = 1; i <= 10; i++)
id += (Math.floor(Math.random() * 10) + 1);
return id;
}
// To fade in the overlay without it going crazy, we need to know the opacity level
// set in the CSS
var overlayOpacity;
var overlayTestID = randomID();
var overlayReg = /Opacity=(\d+)/;
// Extract the opacity level
$("body").append("<div id='" + overlayTestID + "' class='ui-widget-overlay' style='display: none;'></div>");
try {
var overlayFilter = $("#" + overlayTestID).css("filter");
if (overlayReg.test(overlayFilter))
overlayOpacity = overlayReg.exec(overlayFilter)[1];
}
catch (ex){}
// If no overlay opacity is defined, assume 0 opacity
if (!overlayOpacity)
overlayOpacity = 0;
$("#" + overlayTestID).remove();
// Store the modified create() method
var _createMod = function() {
this.originalTitle = this.element.attr('title');
// #5742 - .attr() might return a DOMElement
if (typeof this.originalTitle !== "string")
this.originalTitle = "";
var self = this, options = self.options,
title = options.title || self.originalTitle || ' ', titleId = $.ui.dialog
.getTitleId(self.element),
uiDialog = (self.uiDialog = $('<div></div>')).appendTo(document.body)
.hide().addClass(uiDialogClasses + options.dialogClass).css( {
zIndex : options.zIndex
})
// setting tabIndex makes the div focusable
// setting outline to 0 prevents a border on focus in Mozilla
.attr('tabIndex', -1).css('outline', 0).keydown(
function(event) {
if (options.closeOnEscape && event.keyCode
&& event.keyCode === $.ui.keyCode.ESCAPE) {
self.close(event);
event.preventDefault();
}
}).attr( {
role : 'dialog',
'aria-labelledby' : titleId
}).mousedown(function(event) {
self.moveToTop(false, event);
}),
uiDialogContent = self.element.show().removeAttr('title').addClass(
'ui-dialog-content ' + 'ui-widget-content').appendTo(uiDialog),
uiDialogTitlebar = (self.uiDialogTitlebar = $('<div></div>'))
.addClass(
'ui-dialog-titlebar ' + 'ui-widget-header ' + 'ui-corner-all ' + 'ui-helper-clearfix')
.prependTo(uiDialog);
// Control the creation of the close 'X'
if (options.hasClose)
var uiDialogTitlebarClose = $('<a href="#"></a>').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');
}).click(function(event) {
self.close(event);
return false;
}).appendTo(uiDialogTitlebar),
uiDialogTitlebarCloseText = (self.uiDialogTitlebarCloseText = $('<span></span>'))
.addClass('ui-icon ' + 'ui-icon-closethick').text(
options.closeText).appendTo(uiDialogTitlebarClose);
var uiDialogTitle = $('<span></span>').addClass('ui-dialog-title')
.attr('id', titleId).html(title).prependTo(uiDialogTitlebar);
// handling of deprecated beforeclose (vs beforeClose) option
// Ticket #4669 http://dev.jqueryui.com/ticket/4669
// TODO: remove in 1.9pre
if ($.isFunction(options.beforeclose)
&& !$.isFunction(options.beforeClose))
options.beforeClose = options.beforeclose;
uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection();
if (options.draggable && $.fn.draggable)
self._makeDraggable();
if (options.resizable && $.fn.resizable)
self._makeResizable();
self._createButtons(options.buttons);
self._isOpen = false;
if ($.fn.bgiframe)
uiDialog.bgiframe();
};
// Override the destroy method to control the overlay
proto.destroy = function() {
var self = this;
self.uiDialog.hide();
self.element.unbind('.dialog').removeData('dialog').removeClass(
'ui-dialog-content ui-widget-content').hide().appendTo('body');
self.uiDialog.remove();
if (self.originalTitle)
self.element.attr('title', self.originalTitle);
return self;
};
proto.close = function() {
$.hideDialog();
};
// Override the open method to add fadeIn effect
proto.open = function(){
if (this._isOpen)
return;
var self = this, options = self.options, uiDialog = self.uiDialog;
// If an overlay is open, remember that
var overlayOpen = $(".ui-widget-overlay:visible").size() != 0;
// Open overlay
self.overlay = options.modal ? new $.ui.dialog.overlay(self) : null;
if (uiDialog.next().length)
uiDialog.appendTo('body');
self._size();
self._position(options.position);
var $dialog = uiDialog.show(options.show);
// Fix the modal positioning in IE
if (options.modal)
$(".ui-widget-overlay").css("position", "fixed")
// Add fadeIn effect
if (options.fadeIn) {
if (!overlayOpen && options.modal){
// IE needs to have the filter attribute applied before it fades in
$(".ui-widget-overlay").hide().css('filter', 'alpha(opacity=' + overlayOpacity + ')').fadeIn("normal");
}
$dialog.hide().fadeIn("normal");
}
self.moveToTop(true);
// prevent tabbing out of modal dialogs
if (options.modal) {
uiDialog.bind('keypress.ui-dialog', function(event) {
if (event.keyCode !== $.ui.keyCode.TAB)
return;
var tabbables = $(':tabbable', this), first = tabbables
.filter(':first'), last = tabbables.filter(':last');
if (event.target === last[0] && !event.shiftKey) {
first.focus(1);
return false;
} else if (event.target === first[0] && event.shiftKey) {
last.focus(1);
return false;
}
});
}
// 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
$(
self.element.find(':tabbable').get().concat(
uiDialog.find('.ui-dialog-buttonpane :tabbable').get()
.concat(uiDialog.get()))).eq(0).focus();
self._trigger('open');
self._isOpen = true;
return self;
};
// Internal function used for getting the element on top
function getTopElement(elems) {
// Store the greates z-index that has been seen so far
var maxZ = 0;
// Stores a reference to the element that has the greatest z-index so
// far
var maxElem;
// Check each element's z-index
elems.each(function() {
// If it's bigger than the currently biggest one, store the value
// and reference
if ($(this).css("z-index") > maxZ) {
maxElem = $(this);
maxZ = $(this).css("z-index");
}
});
// Finally, return the reference to the element on top
return maxElem;
}
$.showDialog = function(title, prompt, args) {
var options = {
resizable : false,
draggable : true,
closeOnEscape : false,
moveToTop : true,
title : title,
hasClose : true,
fadeIn : true
};
$.extend(options, args);
// Add some custom options
if (!options.hasClose)
$dialog._create = _createMod;
var id = randomID();
if ($("#dialogContainer").size() == 0)
$("body").append("<div id='dialogContainer'></div>");
// Add a div for the dialog after the special dialogContainer target div
$("#dialogContainer").after(
"<div id='m" + id + "'><p><div id='mp" + id + "'>" + prompt
+ "</div></p></div>");
$("#m" + id).dialog(options);
// Remove duplicate overlays
if ($(".ui-widget-overlay").size() > 1)
$(".ui-widget-overlay:first").remove();
return id;
};
$.hideDialog = function(id, fadeOut) {
// If an ID was not supplied, get the ID of the dialog currently on top
id = id
|| "#"
+ getTopElement($(".ui-dialog")).find(".ui-dialog-content")
.attr("id");
fadeOut = fadeOut || true;
// Remove the dialog
$(id).parent().andSelf().remove();
// If no dialogs are currently visible, remove the overlay
if ($(".ui-dialog:visible").size() === 0) {
if (fadeOut)
$(".ui-widget-overlay").fadeOut("normal");
else
$(".ui-widget-overlay").hide();
} else {
// If one or more overlays exist, change the z-index of the overlay
// so it is below the top-most dialog
$(".ui-widget-overlay")
.css(
{
"z-index" : parseInt(
getTopElement($(".ui-dialog:visible"))
.css("z-index"), 10) - 1
});
}
// Remove event blocking left over from the overlay
$.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
function(event) {
$(document).unbind(event + '.dialog-overlay');
});
};
$.clearDialogs = function(fadeOut) {
fadeOut = fadeOut || true;
// Find all the dialogs
$(".ui-dialog").each(function() {
// Remove them
$(this).find(".ui-dialog-content").parent().andSelf().remove();
});
// Remove the overlay
if (fadeOut)
$(".ui-widget-overlay").fadeOut("normal");
else
$(".ui-widget-overlay").hide();
// Remove event blocking left over from the overlay
$.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
function(event) {
$(document).unbind(event + '.dialog-overlay');
});
};
$.alert = function(prompt, arg) {
var args;
args = $.extend(args, arg, {
buttons : {
"Ok" : function() {
// When the Ok button is clicked, just hide this dialog
$.hideDialog(this);
}
}
} );
return $.showDialog("Info", prompt, args);
};
$.confirm = function(prompt, yes, no, arg) {
var args;
args = $.extend(args, arg, {
buttons : {
"No" : function() {
(no || $.noop).call();
$.hideDialog(this);
},
"Yes" : function() {
(yes || $.noop).call();
$.hideDialog(this);
}
}
});
return $.showDialog("Confirm", prompt, args);
};
})(jQuery);
Revision: 34146
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at October 18, 2010 09:55 by MostThingsWeb
Initial Code
/*
* Version 1.6
*
* http://mosttw.wordpress.com/
*
* Licensed under MIT License: http://en.wikipedia.org/wiki/MIT_License
*
* Copyright (c) 2010 MostThingsWeb
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
* Changelog:
*
* Version 1.6
* - Fixed overlay overflow issues in IE
* - Fixed overlay fadeIn in IE
*
*
* Version 1.5
* - Release
*
*/
/*
*
* Portions of this software come from jQuery UI Dialog 1.8.4
* License (below):
*
* jQuery UI Dialog 1.8.4
*
* Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Dialog
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
* jquery.ui.button.js
* jquery.ui.draggable.js
* jquery.ui.mouse.js
* jquery.ui.position.js
* jquery.ui.resizable.js
*/
(function($) {
// Get the dialog widget factory prototype
var proto = $.ui.dialog.prototype;
// Members need access to these class names
var uiDialogClasses = 'ui-dialog ' + 'ui-widget ' + 'ui-widget-content ' + 'ui-corner-all ';
// Internal function used to generate a random ID
function randomID() {
var id = "";
for ( var i = 1; i <= 10; i++)
id += (Math.floor(Math.random() * 10) + 1);
return id;
}
// To fade in the overlay without it going crazy, we need to know the opacity level
// set in the CSS
var overlayOpacity;
var overlayTestID = randomID();
var overlayReg = /Opacity=(\d+)/;
// Extract the opacity level
$("body").append("<div id='" + overlayTestID + "' class='ui-widget-overlay' style='display: none;'></div>");
try {
var overlayFilter = $("#" + overlayTestID).css("filter");
if (overlayReg.test(overlayFilter))
overlayOpacity = overlayReg.exec(overlayFilter)[1];
}
catch (ex){}
// If no overlay opacity is defined, assume 0 opacity
if (!overlayOpacity)
overlayOpacity = 0;
$("#" + overlayTestID).remove();
// Store the modified create() method
var _createMod = function() {
this.originalTitle = this.element.attr('title');
// #5742 - .attr() might return a DOMElement
if (typeof this.originalTitle !== "string")
this.originalTitle = "";
var self = this, options = self.options,
title = options.title || self.originalTitle || ' ', titleId = $.ui.dialog
.getTitleId(self.element),
uiDialog = (self.uiDialog = $('<div></div>')).appendTo(document.body)
.hide().addClass(uiDialogClasses + options.dialogClass).css( {
zIndex : options.zIndex
})
// setting tabIndex makes the div focusable
// setting outline to 0 prevents a border on focus in Mozilla
.attr('tabIndex', -1).css('outline', 0).keydown(
function(event) {
if (options.closeOnEscape && event.keyCode
&& event.keyCode === $.ui.keyCode.ESCAPE) {
self.close(event);
event.preventDefault();
}
}).attr( {
role : 'dialog',
'aria-labelledby' : titleId
}).mousedown(function(event) {
self.moveToTop(false, event);
}),
uiDialogContent = self.element.show().removeAttr('title').addClass(
'ui-dialog-content ' + 'ui-widget-content').appendTo(uiDialog),
uiDialogTitlebar = (self.uiDialogTitlebar = $('<div></div>'))
.addClass(
'ui-dialog-titlebar ' + 'ui-widget-header ' + 'ui-corner-all ' + 'ui-helper-clearfix')
.prependTo(uiDialog);
// Control the creation of the close 'X'
if (options.hasClose)
var uiDialogTitlebarClose = $('<a href="#"></a>').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');
}).click(function(event) {
self.close(event);
return false;
}).appendTo(uiDialogTitlebar),
uiDialogTitlebarCloseText = (self.uiDialogTitlebarCloseText = $('<span></span>'))
.addClass('ui-icon ' + 'ui-icon-closethick').text(
options.closeText).appendTo(uiDialogTitlebarClose);
var uiDialogTitle = $('<span></span>').addClass('ui-dialog-title')
.attr('id', titleId).html(title).prependTo(uiDialogTitlebar);
// handling of deprecated beforeclose (vs beforeClose) option
// Ticket #4669 http://dev.jqueryui.com/ticket/4669
// TODO: remove in 1.9pre
if ($.isFunction(options.beforeclose)
&& !$.isFunction(options.beforeClose))
options.beforeClose = options.beforeclose;
uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection();
if (options.draggable && $.fn.draggable)
self._makeDraggable();
if (options.resizable && $.fn.resizable)
self._makeResizable();
self._createButtons(options.buttons);
self._isOpen = false;
if ($.fn.bgiframe)
uiDialog.bgiframe();
};
// Override the destroy method to control the overlay
proto.destroy = function() {
var self = this;
self.uiDialog.hide();
self.element.unbind('.dialog').removeData('dialog').removeClass(
'ui-dialog-content ui-widget-content').hide().appendTo('body');
self.uiDialog.remove();
if (self.originalTitle)
self.element.attr('title', self.originalTitle);
return self;
};
proto.close = function() {
alert ("TODO restore overflow");
$.hideDialog();
};
// Override the open method to add fadeIn effect
proto.open = function(){
if (this._isOpen)
return;
var self = this, options = self.options, uiDialog = self.uiDialog;
// If an overlay is open, remember that
var overlayOpen = $(".ui-widget-overlay:visible").size() != 0;
// Open overlay
self.overlay = options.modal ? new $.ui.dialog.overlay(self) : null;
if (uiDialog.next().length)
uiDialog.appendTo('body');
self._size();
self._position(options.position);
var $dialog = uiDialog.show(options.show);
// Fix the modal positioning in IE
if (options.modal)
$(".ui-widget-overlay").css("position", "fixed")
// Add fadeIn effect
if (options.fadeIn) {
if (!overlayOpen && options.modal){
// IE needs to have the filter attribute applied before it fades in
$(".ui-widget-overlay").hide().css('filter', 'alpha(opacity=' + overlayOpacity + ')').fadeIn("normal");
}
$dialog.hide().fadeIn("normal");
}
self.moveToTop(true);
// prevent tabbing out of modal dialogs
if (options.modal) {
uiDialog.bind('keypress.ui-dialog', function(event) {
if (event.keyCode !== $.ui.keyCode.TAB)
return;
var tabbables = $(':tabbable', this), first = tabbables
.filter(':first'), last = tabbables.filter(':last');
if (event.target === last[0] && !event.shiftKey) {
first.focus(1);
return false;
} else if (event.target === first[0] && event.shiftKey) {
last.focus(1);
return false;
}
});
}
// 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
$(
self.element.find(':tabbable').get().concat(
uiDialog.find('.ui-dialog-buttonpane :tabbable').get()
.concat(uiDialog.get()))).eq(0).focus();
self._trigger('open');
self._isOpen = true;
return self;
};
// Internal function used for getting the element on top
function getTopElement(elems) {
// Store the greates z-index that has been seen so far
var maxZ = 0;
// Stores a reference to the element that has the greatest z-index so
// far
var maxElem;
// Check each element's z-index
elems.each(function() {
// If it's bigger than the currently biggest one, store the value
// and reference
if ($(this).css("z-index") > maxZ) {
maxElem = $(this);
maxZ = $(this).css("z-index");
}
});
// Finally, return the reference to the element on top
return maxElem;
}
$.showDialog = function(title, prompt, args) {
var options = {
resizable : false,
draggable : true,
closeOnEscape : false,
moveToTop : true,
title : title,
hasClose : true,
fadeIn : true
};
$.extend(options, args);
// Add some custom options
if (!options.hasClose)
$dialog._create = _createMod;
var id = randomID();
if ($("#dialogContainer").size() == 0)
$("body").append("<div id='dialogContainer'></div>");
// Add a div for the dialog after the special dialogContainer target div
$("#dialogContainer").after(
"<div id='m" + id + "'><p><div id='mp" + id + "'>" + prompt
+ "</div></p></div>");
$("#m" + id).dialog(options);
// Remove duplicate overlays
if ($(".ui-widget-overlay").size() > 1)
$(".ui-widget-overlay:first").remove();
return id;
};
$.hideDialog = function(id, fadeOut) {
// If an ID was not supplied, get the ID of the dialog currently on top
id = id
|| "#"
+ getTopElement($(".ui-dialog")).find(".ui-dialog-content")
.attr("id");
fadeOut = fadeOut || true;
// Remove the dialog
$(id).parent().andSelf().remove();
// If no dialogs are currently visible, remove the overlay
if ($(".ui-dialog:visible").size() === 0) {
if (fadeOut)
$(".ui-widget-overlay").fadeOut("normal");
else
$(".ui-widget-overlay").hide();
} else {
// If one or more overlays exist, change the z-index of the overlay
// so it is below the top-most dialog
$(".ui-widget-overlay")
.css(
{
"z-index" : parseInt(
getTopElement($(".ui-dialog:visible"))
.css("z-index"), 10) - 1
});
}
// Remove event blocking left over from the overlay
$.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
function(event) {
$(document).unbind(event + '.dialog-overlay');
});
};
$.clearDialogs = function(fadeOut) {
fadeOut = fadeOut || true;
// Find all the dialogs
$(".ui-dialog").each(function() {
// Remove them
$(this).find(".ui-dialog-content").parent().andSelf().remove();
});
// Remove the overlay
if (fadeOut)
$(".ui-widget-overlay").fadeOut("normal");
else
$(".ui-widget-overlay").hide();
// Remove event blocking left over from the overlay
$.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
function(event) {
$(document).unbind(event + '.dialog-overlay');
});
};
$.alert = function(prompt, arg) {
var args;
args = $.extend(args, arg, {
buttons : {
"Ok" : function() {
// When the Ok button is clicked, just hide this dialog
$.hideDialog(this);
}
}
} );
return $.showDialog("Info", prompt, args);
};
$.confirm = function(prompt, yes, no, arg) {
var args;
args = $.extend(args, arg, {
buttons : {
"No" : function() {
(no || $.noop).call();
$.hideDialog(this);
},
"Yes" : function() {
(yes || $.noop).call();
$.hideDialog(this);
}
}
});
return $.showDialog("Confirm", prompt, args);
};
})(jQuery);
Initial URL
http://mosttw.wordpress.com/2010/10/16/dialogwrapper-version-1-6-released/
Initial Description
Initial Title
dialogWrapper - version 1.6
Initial Tags
Initial Language
JavaScript