From 6acc3ff7909dd7f070973c112ebd9291862982f8 Mon Sep 17 00:00:00 2001 From: nikrou Date: Sat, 20 Feb 2010 19:56:36 +0000 Subject: Feature 1442 : update jquery * update jquery to 1.4.1 * update jquery ui to 1.7.2 git-svn-id: http://piwigo.org/svn/trunk@4918 68402e56-0260-453c-a942-63ccdbb3a9ee --- template-common/lib/ui/ui.dialog.js | 754 ++++++++++++++++++++++-------------- 1 file changed, 464 insertions(+), 290 deletions(-) (limited to 'template-common/lib/ui/ui.dialog.js') diff --git a/template-common/lib/ui/ui.dialog.js b/template-common/lib/ui/ui.dialog.js index 858e9e28b..fdd5b26df 100644 --- a/template-common/lib/ui/ui.dialog.js +++ b/template-common/lib/ui/ui.dialog.js @@ -1,10 +1,10 @@ /* - * jQuery UI Dialog + * jQuery UI Dialog 1.7.2 * - * Copyright (c) 2008 Richard D. Worth (rdworth.org) + * 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: @@ -15,182 +15,357 @@ (function($) { var setDataSwitch = { - dragStart: "start.draggable", - drag: "drag.draggable", - dragStop: "stop.draggable", - maxHeight: "maxHeight.resizable", - minHeight: "minHeight.resizable", - maxWidth: "maxWidth.resizable", - minWidth: "minWidth.resizable", - resizeStart: "start.resizable", - resize: "drag.resizable", - resizeStop: "stop.resizable" -}; + dragStart: "start.draggable", + drag: "drag.draggable", + dragStop: "stop.draggable", + maxHeight: "maxHeight.resizable", + minHeight: "minHeight.resizable", + maxWidth: "maxWidth.resizable", + minWidth: "minWidth.resizable", + resizeStart: "start.resizable", + resize: "drag.resizable", + resizeStop: "stop.resizable" + }, + + uiDialogClasses = + 'ui-dialog ' + + 'ui-widget ' + + 'ui-widget-content ' + + 'ui-corner-all '; $.widget("ui.dialog", { - init: function() { + + _init: function() { + this.originalTitle = this.element.attr('title'); + var self = this, options = this.options, - resizeHandles = typeof options.resizable == 'string' - ? options.resizable - : 'n,e,s,w,se,sw,ne,nw', - - uiDialogContent = this.element - .addClass('ui-dialog-content') - .wrap('
') - .wrap('
'), - - uiDialogContainer = (this.uiDialogContainer = uiDialogContent.parent() - .addClass('ui-dialog-container') - .css({position: 'relative', width: '100%', height: '100%'})), - - title = options.title || uiDialogContent.attr('title') || '', - uiDialogTitlebar = (this.uiDialogTitlebar = - $('
')) - .append('' + title + '') - .append('X') - .prependTo(uiDialogContainer), - - uiDialog = (this.uiDialog = uiDialogContainer.parent()) + + title = options.title || this.originalTitle || ' ', + titleId = $.ui.dialog.getTitleId(this.element), + + uiDialog = (this.uiDialog = $('
')) .appendTo(document.body) .hide() - .addClass('ui-dialog') - .addClass(options.dialogClass) - // add content classes to dialog - // to inherit theme at top level of element - .addClass(uiDialogContent.attr('className')) - .removeClass('ui-dialog-content') + .addClass(uiDialogClasses + options.dialogClass) .css({ position: 'absolute', - width: options.width, - height: options.height, overflow: 'hidden', 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(ev) { - if (options.closeOnEscape) { - var ESC = 27; - (ev.keyCode && ev.keyCode == ESC && self.close()); - } + .attr('tabIndex', -1).css('outline', 0).keydown(function(event) { + (options.closeOnEscape && event.keyCode + && event.keyCode == $.ui.keyCode.ESCAPE && self.close(event)); + }) + .attr({ + role: 'dialog', + 'aria-labelledby': titleId }) - .mousedown(function() { - self.moveToTop(); + .mousedown(function(event) { + self.moveToTop(false, event); }), - - uiDialogButtonPane = (this.uiDialogButtonPane = $('
')) - .addClass('ui-dialog-buttonpane').css({ position: 'absolute', bottom: 0 }) - .appendTo(uiDialog); + + uiDialogContent = this.element + .show() + .removeAttr('title') + .addClass( + 'ui-dialog-content ' + + 'ui-widget-content') + .appendTo(uiDialog), + + uiDialogTitlebar = (this.uiDialogTitlebar = $('
')) + .addClass( + 'ui-dialog-titlebar ' + + 'ui-widget-header ' + + 'ui-corner-all ' + + 'ui-helper-clearfix' + ) + .prependTo(uiDialog), + + uiDialogTitlebarClose = $('') + .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 = $('')) + .addClass( + 'ui-icon ' + + 'ui-icon-closethick' + ) + .text(options.closeText) + .appendTo(uiDialogTitlebarClose), + + uiDialogTitle = $('') + .addClass('ui-dialog-title') + .attr('id', titleId) + .html(title) + .prependTo(uiDialogTitlebar); + + uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection(); + + (options.draggable && $.fn.draggable && this._makeDraggable()); + (options.resizable && $.fn.resizable && this._makeResizable()); + + this._createButtons(options.buttons); + this._isOpen = false; + + (options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe()); + (options.autoOpen && this.open()); - this.uiDialogTitlebarClose = $('.ui-dialog-titlebar-close', uiDialogTitlebar) - .hover( - function() { - $(this).addClass('ui-dialog-titlebar-close-hover'); - }, - function() { - $(this).removeClass('ui-dialog-titlebar-close-hover'); - } - ) - .mousedown(function(ev) { - ev.stopPropagation(); - }) - .click(function() { - self.close(); - return false; - }); + }, - this.uiDialogTitlebar.find("*").add(this.uiDialogTitlebar).each(function() { - $.ui.disableSelection(this); - }); + destroy: function() { + (this.overlay && this.overlay.destroy()); + this.uiDialog.hide(); + this.element + .unbind('.dialog') + .removeData('dialog') + .removeClass('ui-dialog-content ui-widget-content') + .hide().appendTo('body'); + this.uiDialog.remove(); - if ($.fn.draggable) { - uiDialog.draggable({ - cancel: '.ui-dialog-content', - helper: options.dragHelper, - handle: '.ui-dialog-titlebar', - start: function(e, ui) { - self.moveToTop(); - (options.dragStart && options.dragStart.apply(self.element[0], arguments)); - }, - drag: function(e, ui) { - (options.drag && options.drag.apply(self.element[0], arguments)); - }, - stop: function(e, ui) { - (options.dragStop && options.dragStop.apply(self.element[0], arguments)); - $.ui.dialog.overlay.resize(); - } - }); - (options.draggable || uiDialog.draggable('disable')); + (this.originalTitle && this.element.attr('title', this.originalTitle)); + }, + + close: function(event) { + var self = this; + + if (false === self._trigger('beforeclose', event)) { + return; } + + (self.overlay && self.overlay.destroy()); + self.uiDialog.unbind('keypress.ui-dialog'); + + (self.options.hide + ? self.uiDialog.hide(self.options.hide, function() { + self._trigger('close', event); + }) + : self.uiDialog.hide() && self._trigger('close', event)); + + $.ui.dialog.overlay.resize(); + + self._isOpen = false; - if ($.fn.resizable) { - uiDialog.resizable({ - cancel: '.ui-dialog-content', - helper: options.resizeHelper, - maxWidth: options.maxWidth, - maxHeight: options.maxHeight, - minWidth: options.minWidth, - minHeight: options.minHeight, - start: function() { - (options.resizeStart && options.resizeStart.apply(self.element[0], arguments)); - }, - resize: function(e, ui) { - (options.autoResize && self.size.apply(self)); - (options.resize && options.resize.apply(self.element[0], arguments)); - }, - handles: resizeHandles, - stop: function(e, ui) { - (options.autoResize && self.size.apply(self)); - (options.resizeStop && options.resizeStop.apply(self.element[0], arguments)); - $.ui.dialog.overlay.resize(); + // adjust the maxZ to allow other modal dialogs to continue to work (see #4309) + if (self.options.modal) { + var maxZ = 0; + $('.ui-dialog').each(function() { + if (this != self.uiDialog[0]) { + maxZ = Math.max(maxZ, $(this).css('z-index')); } }); - (options.resizable || uiDialog.resizable('disable')); + $.ui.dialog.maxZ = maxZ; } - - this.createButtons(options.buttons); - this.isOpen = false; - - (options.bgiframe && $.fn.bgiframe && uiDialog.bgiframe()); - (options.autoOpen && this.open()); }, - - setData: function(key, value){ - (setDataSwitch[key] && this.uiDialog.data(setDataSwitch[key], value)); - switch (key) { - case "buttons": - this.createButtons(value); - break; - case "draggable": - this.uiDialog.draggable(value ? 'enable' : 'disable'); - break; - case "height": - this.uiDialog.height(value); - break; - case "position": - this.position(value); - break; - case "resizable": - (typeof value == 'string' && this.uiDialog.data('handles.resizable', value)); - this.uiDialog.resizable(value ? 'enable' : 'disable'); - break; - case "title": - $(".ui-dialog-title", this.uiDialogTitlebar).text(value); - break; - case "width": - this.uiDialog.width(value); - break; + + 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); } - $.widget.prototype.setData.apply(this, arguments); + if (this.options.zIndex > $.ui.dialog.maxZ) { + $.ui.dialog.maxZ = this.options.zIndex; + } + (this.overlay && this.overlay.$el.css('z-index', $.ui.dialog.overlay.maxZ = ++$.ui.dialog.maxZ)); + + //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed. + // http://ui.jquery.com/bugs/ticket/3193 + var saveScroll = { scrollTop: this.element.attr('scrollTop'), scrollLeft: this.element.attr('scrollLeft') }; + this.uiDialog.css('z-index', ++$.ui.dialog.maxZ); + this.element.attr(saveScroll); + this._trigger('focus', event); }, - - position: function(pos) { + + open: function() { + if (this._isOpen) { return; } + + var options = this.options, + uiDialog = this.uiDialog; + + this.overlay = options.modal ? new $.ui.dialog.overlay(this) : null; + (uiDialog.next().length && uiDialog.appendTo('body')); + this._size(); + this._position(options.position); + uiDialog.show(options.show); + this.moveToTop(true); + + // prevent tabbing out of modal dialogs + (options.modal && uiDialog.bind('keypress.ui-dialog', function(event) { + if (event.keyCode != $.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 = $('
') + .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() { return !(hasButtons = true); })); + if (hasButtons) { + $.each(buttons, function(name, fn) { + $('') + .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(); + } + }); + }, + + _makeResizable: function(handles) { + handles = (handles === undefined ? this.options.resizable : handles); + var self = this, + options = this.options, + resizeHandles = typeof handles == 'string' + ? handles + : 'n,e,s,w,se,sw,ne,nw'; + + this.uiDialog.resizable({ + cancel: '.ui-dialog-content', + alsoResize: this.element, + maxWidth: options.maxWidth, + maxHeight: options.maxHeight, + minWidth: options.minWidth, + minHeight: options.minHeight, + start: function() { + $(this).addClass("ui-dialog-resizing"); + (options.resizeStart && options.resizeStart.apply(self.element[0], arguments)); + }, + resize: function() { + (options.resize && options.resize.apply(self.element[0], arguments)); + }, + handles: resizeHandles, + stop: function() { + $(this).removeClass("ui-dialog-resizing"); + options.height = $(this).height(); + options.width = $(this).width(); + (options.resizeStop && options.resizeStop.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 ($.inArray(pos, ['center','top','right','bottom','left']) >= 0) { pos = [ pos == 'right' || pos == 'left' ? pos : 'center', @@ -208,11 +383,11 @@ $.widget("ui.dialog", { pLeft += 0; break; case 'right': - pLeft += wnd.width() - this.uiDialog.width(); + pLeft += wnd.width() - this.uiDialog.outerWidth(); break; default: case 'center': - pLeft += (wnd.width() - this.uiDialog.width()) / 2; + pLeft += (wnd.width() - this.uiDialog.outerWidth()) / 2; } } if (pos[1].constructor == Number) { @@ -223,134 +398,136 @@ $.widget("ui.dialog", { pTop += 0; break; case 'bottom': - pTop += wnd.height() - this.uiDialog.height(); + pTop += wnd.height() - this.uiDialog.outerHeight(); break; default: case 'middle': - pTop += (wnd.height() - this.uiDialog.height()) / 2; + pTop += (wnd.height() - this.uiDialog.outerHeight()) / 2; } } - + // prevent the dialog from being too high (make sure the titlebar // is accessible) pTop = Math.max(pTop, minTop); this.uiDialog.css({top: pTop, left: pLeft}); }, - size: function() { - var container = this.uiDialogContainer, - titlebar = this.uiDialogTitlebar, - content = this.element, - tbMargin = parseInt(content.css('margin-top'),10) + parseInt(content.css('margin-bottom'),10), - lrMargin = parseInt(content.css('margin-left'),10) + parseInt(content.css('margin-right'),10); - content.height(container.height() - titlebar.outerHeight() - tbMargin); - content.width(container.width() - lrMargin); - }, - - open: function() { - if (this.isOpen) { return; } - - this.overlay = this.options.modal ? new $.ui.dialog.overlay(this) : null; - (this.uiDialog.next().length > 0) && this.uiDialog.appendTo('body'); - this.position(this.options.position); - this.uiDialog.show(this.options.show); - this.options.autoResize && this.size(); - this.moveToTop(true); - - // CALLBACK: open - var openEV = null; - var openUI = { - options: this.options - }; - this.uiDialogTitlebarClose.focus(); - this.element.triggerHandler("dialogopen", [openEV, openUI], this.options.open); - - this.isOpen = true; + _setData: function(key, value){ + (setDataSwitch[key] && this.uiDialog.data(setDataSwitch[key], value)); + switch (key) { + case "buttons": + this._createButtons(value); + break; + case "closeText": + this.uiDialogTitlebarCloseText.text(value); + break; + case "dialogClass": + this.uiDialog + .removeClass(this.options.dialogClass) + .addClass(uiDialogClasses + value); + break; + case "draggable": + (value + ? this._makeDraggable() + : this.uiDialog.draggable('destroy')); + break; + case "height": + this.uiDialog.height(value); + break; + case "position": + this._position(value); + break; + case "resizable": + var uiDialog = this.uiDialog, + isResizable = this.uiDialog.is(':data(resizable)'); + + // currently resizable, becoming non-resizable + (isResizable && !value && uiDialog.resizable('destroy')); + + // currently resizable, changing handles + (isResizable && typeof value == 'string' && + uiDialog.resizable('option', 'handles', value)); + + // currently non-resizable, becoming resizable + (isResizable || this._makeResizable(value)); + break; + case "title": + $(".ui-dialog-title", this.uiDialogTitlebar).html(value || ' '); + break; + case "width": + this.uiDialog.width(value); + break; + } + + $.widget.prototype._setData.apply(this, arguments); }, - - // the force parameter allows us to move modal dialogs to their correct - // position on open - moveToTop: function(force) { - if ((this.options.modal && !force) - || (!this.options.stack && !this.options.modal)) { return this.element.triggerHandler("dialogfocus", [null, { options: this.options }], this.options.focus); } - - var maxZ = this.options.zIndex, options = this.options; - $('.ui-dialog:visible').each(function() { - maxZ = Math.max(maxZ, parseInt($(this).css('z-index'), 10) || options.zIndex); + + _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' }); - (this.overlay && this.overlay.$el.css('z-index', ++maxZ)); - this.uiDialog.css('z-index', ++maxZ); - - this.element.triggerHandler("dialogfocus", [null, { options: this.options }], this.options.focus); - }, - - close: function() { - (this.overlay && this.overlay.destroy()); - this.uiDialog.hide(this.options.hide); - - // CALLBACK: close - var closeEV = null; - var closeUI = { - options: this.options - }; - this.element.triggerHandler("dialogclose", [closeEV, closeUI], this.options.close); - $.ui.dialog.overlay.resize(); - - this.isOpen = false; - }, - - destroy: function() { - (this.overlay && this.overlay.destroy()); - this.uiDialog.hide(); + + // 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 - .unbind('.dialog') - .removeData('dialog') - .removeClass('ui-dialog-content') - .hide().appendTo('body'); - this.uiDialog.remove(); - }, - - createButtons: function(buttons) { - var self = this, - hasButtons = false, - uiDialogButtonPane = this.uiDialogButtonPane; - - // remove any existing buttons - uiDialogButtonPane.empty().hide(); - - $.each(buttons, function() { return !(hasButtons = true); }); - if (hasButtons) { - uiDialogButtonPane.show(); - $.each(buttons, function(name, fn) { - $('