Changeset 8925

Timestamp:

06/04/07 22:18:55 (19 months ago)

Author:

alex

Message:

ensure that repeated showings of a dialog continue to show the background. Improve background show/hide to actually fade things in and out. We want dialogs to be visually attractive. More work on transitions may be in order (e.g., Lightbox effects). Refs #3247

Files:

• dijit/trunk/layout/Dialog.js (modified) (9 diffs)
• dojo/trunk/_base/fx.js (modified) (2 diffs)

dijit/trunk/layout/Dialog.js

@@ -13 +13 @@
         [dijit.layout.ContentPane, dijit.base.TemplatedWidget],
         {
-                // summary
-                //      Pops up a modal dialog window, blocking access to the screen and also graying out the screen
-                //      Dialog is extended from ContentPane so it supports all the same parameters (href, etc.)
+                // summary:
+                //              Pops up a modal dialog window, blocking access to the screen
+                //              and also graying out the screen Dialog is extended from
+                //              ContentPane so it supports all the same parameters (href, etc.)
 
                 templatePath: dojo.moduleUrl("dijit.layout", "templates/Dialog.html"),
@@ -42 +43 @@
                 
                 _trapTabs: function(/*Event*/ e){
-                        // summary
-                        //      callback on focus
-                        if(e.target == this.tabStartOuter) {
-                                if(this._fromTrap) {
-                                        this.tabStart.focus();
-                                        this._fromTrap = false;
-                                } else {
+                        // summary: callback on focus
+                        if(e.target == this.tabStartOuter){
+                                if(this._fromTrap){
+                                        this.tabStart.focus();
+                                        this._fromTrap = false;
+                                }else{
                                         this._fromTrap = true;
                                         this.tabEnd.focus();
                                 }
-                        } else if (e.target == this.tabStart) {
-                                if(this._fromTrap) {
-                                        this._fromTrap = false;
-                                } else {
+                        }else if(e.target == this.tabStart){
+                                if(this._fromTrap){
+                                        this._fromTrap = false;
+                                }else{
                                         this._fromTrap = true;
                                         this.tabEnd.focus();
                                 }
-                        } else if(e.target == this.tabEndOuter) {
-                                if(this._fromTrap) {
+                        }else if(e.target == this.tabEndOuter){
+                                if(this._fromTrap){
                                         this.tabEnd.focus();
                                         this._fromTrap = false;
-                                } else {
-                                        this._fromTrap = true;
-                                        this.tabStart.focus();
-                                }
-                        } else if(e.target == this.tabEnd) {
-                                if(this._fromTrap) {
-                                        this._fromTrap = false;
-                                } else {
-                                        this._fromTrap = true;
-                                        this.tabStart.focus();
-                                }
-                        }
-                },
-
-                _clearTrap: function(/*Event*/ e) {
-                        // summary
-                        //      callback on blur
-                        var _this = this;
-                        setTimeout(function() {
-                                _this._fromTrap = false;
-                        }, 100);
-                },
-
-                _setup: function() {
-                        // summary
-                        //      stuff we need to do before showing the Dialog for the first time
-                        //      (but we defer it until right beforehand, for performance reasons)
+                                }else{
+                                        this._fromTrap = true;
+                                        this.tabStart.focus();
+                                }
+                        }else if(e.target == this.tabEnd){
+                                if(this._fromTrap){
+                                        this._fromTrap = false;
+                                }else{
+                                        this._fromTrap = true;
+                                        this.tabStart.focus();
+                                }
+                        }
+                },
+
+                _clearTrap: function(/*Event*/ e){
+                        // summary: callback on blur
+                        setTimeout(dojo.hitch(this, function(){
+                                this._fromTrap = false;
+                        }), 100);
+                },
+
+                _visibleBgOpacity: 0.4,
+
+                _setup: function(){
+                        // summary:
+                        //              stuff we need to do before showing the Dialog for the first
+                        //              time (but we defer it until right beforehand, for
+                        //              performance reasons)
 
                         var b = dojo.body();
@@ -108 +109 @@
                         this._fadeIn = dojo.fadeIn({
                                 node: node,
-                                duration: this._duration,
-                                onEnd: dojo.hitch(this, "_showBackground")
-                        });
+                                duration: this._duration
+                        }).combine([
+                                dojo.animateProperty({
+                                        node: this.bg,
+                                        duration: this._duration,
+                                        onBegin: dojo.hitch(this, "_showBackground"),
+                                        properties: {
+                                                opacity: { start: 0, end: this._visibleBgOpacity }
+                                        }
+                                })
+                        ]);
+
                         this._fadeOut = dojo.fadeOut({
                                 node: node,
@@ -117 +127 @@
                                         node.style.display="none";
                                 }
-                        });
+                        }).combine([
+                                dojo.fadeOut({
+                                        node: this.bg,
+                                        duration: this._duration
+                                })
+                        ]);
                 },
 
@@ -129 +144 @@
                 },
 
-                _sizeBackground: function() {
+                _sizeBackground: function(){
                         // summary
                         //              Sets the background to the size of the viewport (rather than the size
@@ -149 +164 @@
                         // by the previous resizing
                         viewport = dijit.util.getViewport();
-                        if (viewport.w != w) { this.bg.style.width = viewport.w + "px"; }
-                        if (viewport.h != h) { this.bg.style.height = viewport.h + "px"; }
-                },
-
-                _showBackground: function() {
+                        if(viewport.w != w){ this.bg.style.width = viewport.w + "px"; }
+                        if(viewport.h != h){ this.bg.style.height = viewport.h + "px"; }
+                },
+
+                _showBackground: function(){
+                        console.debug("_showBackground");
                         this.bg.style.display = "block";
                         if(this.bgIframe.iframe){
@@ -160 +176 @@
                 },
 
-                _center: function() {
+                _center: function(){
                         // summary: position modal dialog in center of screen
 
@@ -181 +197 @@
 
                 _onKey: function(/*Event*/ evt){
-                        if (evt.keyCode){
+                        if(evt.keyCode){
                                 // see if the key is for the dialog
                                 var node = evt.target;
                                 while (node != null){
-                                        if (node == this.domNode){
+                                        if(node == this.domNode){
                                                 return; // yes, so just let it go
                                         }
@@ -195 +211 @@
                                 // opera won't tab to a div
                                 }else if (!dojo.isOpera){
-                                        try {
+                                        try{
                                                 this.tabStart.focus(); 
-                                        } catch(e){}
-                                }
-                        }
-                },
-
-                show: function() {
+                                        }catch(e){}
+                                }
+                        }
+                },
+
+                show: function(){
                         // summary: display the dialog
 

dojo/trunk/_base/fx.js

@@ -214 +214 @@
                 combine: function(/*dojo._Animation[]*/ anims){
                         dojo.forEach(anims, function(anim){
-                                dojo.connect(this, "play", anim, "play");
+                                dojo.forEach([ 
+                                        "beforeBegin", "onBegin", "onAnimate", "onEnd", 
+                                        "onPlay", "onPause", "onStop", "play" 
+                                ], function(evt){
+                                        if(anim[evt]){
+                                                // if(!this[evt]){ this[evt] = function(){}; }
+                                                dojo.connect(this, evt, anim, evt);
+                                        }
+                                }, this);
                         }, this);
                         return this; // dojo._Animation
@@ -339 +347 @@
                                                 }
                                         }
+                                        this._percent = 0;
                                         this.fire("onEnd");
                                 }