Changeset 4661

Timestamp:

02/06/08 05:18:33 (10 months ago)

Author:

rdworth

Message:

Fixed #1669 - UI Dialog modal option - thanks Scott Gonzalez (ported Mike Alsup's blockUI)

Location:

trunk

Files:

• themes/flora/flora.dialog.css (modified) (1 diff)
• ui/tests/uiTest.dialog.js (modified) (1 diff)
• ui/ui.dialog.js (modified) (7 diffs)

trunk/themes/flora/flora.dialog.css

@@ -29 +29 @@
     right: 7px;
     cursor: default;
+}
+
+.flora .ui-dialog .ui-dialog-titlebar-close span,
+.flora.ui-dialog .ui-dialog-titlebar-close span {
+    display: none;
 }
 

trunk/ui/tests/uiTest.dialog.js

@@ -40 +40 @@
                     "600" : "$('#foo').dialog({\n\t minWidth: 600 \n});"
                 },
+                "modal" : {
+                    "false" : "$('#foo').dialog({\n\t modal: false \n});",
+                    "true" : "$('#foo').dialog({\n\t modal: true \n});",
+                    "Css-BgWhiteOpacity0.5" : "$('#foo').dialog({\n\t modal: { backgroundColor: 'white', opacity: 0.5 } \n})"
+                },
                 "position" : {
                     "center" : "$('#foo').dialog({\n\t position: 'center' \n});",

trunk/ui/ui.dialog.js

@@ -1 +1 @@
 (function($) {
-
+    
     //If the UI scope is not available, add it
     $.ui = $.ui || {};
@@ -32 +32 @@
             buttons: [],
             draggable: true,
-            resizable: true
-        };
-        options = $.extend({}, defaults, options); //Extend and copy options
+            resizable: true,
+            modal: false
+        };
+        options = options || {};
+        var defaultOverrides = options.modal ? {resizable: false} : {};
+        options = $.extend({}, defaults, defaultOverrides, options); //Extend and copy options
         this.element = el;
         var self = this; //Do bindings
@@ -84 +87 @@
         var title = (options.title) ? options.title : (uiDialogContent.attr('title')) ? uiDialogContent.attr('title') : '';
         uiDialogTitlebar.append('<span class="ui-dialog-title">' + title + '</span>');
-        uiDialogTitlebar.append('<div class="ui-dialog-titlebar-close"></div>');
-        $('.ui-dialog-titlebar-close', uiDialogTitlebar)
+        uiDialogTitlebar.append('<a href="#" class="ui-dialog-titlebar-close"><span>X</span></a>');
+        this.uiDialogTitlebarClose = $('.ui-dialog-titlebar-close', uiDialogTitlebar)
             .hover(function() { $(this).addClass('ui-dialog-titlebar-close-hover'); }, 
                    function() { $(this).removeClass('ui-dialog-titlebar-close-hover'); })
@@ -93 +96 @@
             .click(function() {
                 self.close();
+                return false;
+            })
+            .keydown(function(ev) {
+                var ESC = 27;
+                ev.keyCode && ev.keyCode == ESC && self.close(); 
             });
 
@@ -122 +130 @@
     
         this.open = function() {
+            options.modal && overlay.show(self, options.modal);
             uiDialog.appendTo('body');
             var wnd = $(window), doc = $(document), top = doc.scrollTop(), left = doc.scrollLeft();
@@ -166 +175 @@
                 options: options
             };
+            this.uiDialogTitlebarClose.focus();
             $(this.element).triggerHandler("dialogopen", [openEV, openUI], options.open);
         };
 
         this.activate = function() {
-            var maxZ = curZ = 0;
+            var maxZ = 0;
             $('.ui-dialog:visible').each(function() {
-                var z = parseInt($(this).css("z-index"));
-                maxZ = z > maxZ ? z : maxZ;
-            });
-            uiDialog.css("z-index", maxZ + 1);
+                maxZ = Math.max(maxZ, parseInt($(this).css("z-index")));
+            });
+            overlay.$el && overlay.$el.css('z-index', ++maxZ);
+            uiDialog.css("z-index", ++maxZ);
         };
 
         this.close = function() {
+            options.modal && overlay.hide();
             uiDialog.hide();
 
@@ -194 +205 @@
     }
 
+    // This is a port of relevant pieces of Mike Alsup's blockUI plugin (http://www.malsup.com/jquery/block/)
+    // duplicated here for minimal overlay functionality and no dependency on a non-UI plugin
+    var overlay = {
+        $el: null,
+        events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
+            function(e) { return e + '.ui-dialog-overlay'; }).join(' '),
+        
+        show: function(dialog, css) {
+            if (this.$el) return;
+            
+            this.selects = this.ie6 && $('select:visible').css('visibility', 'hidden');
+            this.$el = $('<div"/>').appendTo(document.body)
+                .addClass('ui-dialog-overlay').css($.extend({
+                    borderWidth: 0, margin: 0, padding: 0,
+                    position: 'absolute', top: 0, left: 0,
+                    width: $(document).width(), // TODO: fix
+                    height: $(document).height() // TODO: fix
+                }, css));
+            
+            $('a, :input').bind(this.events, function() {
+                if ($(this).parents('.ui-dialog').length == 0) {
+                    dialog.uiDialogTitlebarClose.focus();
+                    return false;
+                }
+            });
+            $(document).bind('keydown.ui-dialog-overlay', function(e) {
+                var ESC = 27;
+                e.keyCode && e.keyCode == ESC && dialog.close(); 
+            });
+        },
+        
+        hide: function() {
+            $('a, :input').add(document).unbind('.ui-dialog-overlay');
+            this.ie6 && this.selects.css('visibility', 'visible');
+            this.$el = null;
+            $('.ui-dialog-overlay').remove();
+        },
+        
+        // IE 6 compatibility
+        ie6: $.browser.msie && $.browser.version < 7,
+        selects: null
+    };
+
 })(jQuery);