dojox/widget/Dialog.js

  • Provides:

    • dojox.widget.Dialog

  • Requires:

    • dojo.window in common in project dojo
    • dojox.fx in common
    • dojox.widget.DialogSimple in common

  • dojox.widget.Dialog

    • type
      Function
    • chains:
      • dojox.widget.DialogSimple: (prototype)
      • dojox.widget.DialogSimple: (call)
    • summary
      A Lightbox-like Modal-dialog for HTML Content
    • description
      An HTML-capable Dialog widget with advanced sizing
options, animated show/hide and other useful options.

This Dialog is also very easy to apply custom styles to.

It works identically to a `dijit.Dialog` with several
additional parameters.
    • parameters:
      • props: (typeof )
      • node: (typeof )
    • source: [view]
        this.easing = props.easing || dojo._defaultEasing;
        this.dimensions = props.dimensions || [300, 300];

  • dojox.widget.Dialog.templateString

    • summary
  • dojox.widget.Dialog.sizeToViewport
       
    • type
      Boolean
    • summary
      If true, fix the size of the dialog to the Viewport based on
viewportPadding value rather than the calculated or natural
stlye. If false, base the size on a passed dimension attribute.
Eitherway, the viewportPadding value is used if the the content
extends beyond the viewport size for whatever reason.
  • dojox.widget.Dialog.viewportPadding
       
    • type
      Integer
    • summary
      If sizeToViewport="true", this is the amount of padding in pixels to leave
between the dialog border and the viewport edge.
This value is also used when sizeToViewport="false" and dimensions exceeded
by dialog content to ensure dialog does not go outside viewport boundary
  • dojox.widget.Dialog.dimensions
       
    • type
      Array
    • summary
      A two-element array of [widht,height] to animate the Dialog to if sizeToViewport="false"
Defaults to [300,300]
  • dojox.widget.Dialog.easing
       
    • type
      Function?|String
    • summary
      An easing function to apply to the sizing animation.
  • dojox.widget.Dialog.sizeDuration
       
    • type
      Integer
    • summary
      Time (in ms) to use in the Animation for sizing.
  • dojox.widget.Dialog.sizeMethod
       
    • type
      String
    • summary
      To be passed to dojox.fx.sizeTo, one of "chain" or "combine" to effect
the animation sequence.
  • dojox.widget.Dialog.showTitle
       
    • type
      Boolean
    • summary
      Toogle to show or hide the Title area. Can only be set at startup.
  • dojox.widget.Dialog.draggable
       
    • type
      Boolean
    • summary
      Make the pane draggable. Differs from dijit.Dialog by setting default to false
  • dojox.widget.Dialog.modal
       
    • type
      Boolean
    • summary
      If true, this Dialog instance will be truly modal and prevent closing until
explicitly told to by calling hide() - Defaults to false to preserve previous
behaviors.














an experiment in a quicksilver-like hide. too choppy for me.


































},
  • dojox.widget.Dialog._setup
       
    • type
      Function
    • source: [view] 
                    
      

                      this.inherited(arguments);
        if(!this._alreadyInitialized){
         this._navIn = dojo.fadeIn({ node: this.closeButtonNode });
         this._navOut = dojo.fadeOut({ node: this.closeButtonNode });
         if(!this.showTitle){
          dojo.addClass(this.domNode,"dojoxDialogNoTitle");
         }
        }
                    
      
                    
    • summary
      Piggyback on dijit.Dialog's _setup for load-time options, deferred to
  • dojox.widget.Dialog.layout
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      this._setSize();
        this.inherited(arguments);
                    
      
                    
    • summary
  • dojox.widget.Dialog._setSize
       
    • type
      Function
    • source: [view] 
                    
      

                      this._vp = dojo.window.getBox();
        var tc = this.containerNode,
         vpSized = this.sizeToViewport
        ;
        return this._displaysize = {
         w: vpSized ? tc.scrollWidth : this.dimensions[0],
         h: vpSized ? tc.scrollHeight : this.dimensions[1]
        }; // Object
                    
      
                    
    • summary
      cache and set our desired end position
  • dojox.widget.Dialog.show
       
    • type
      Function
    • source: [view] 
                    
      

                      if(this.open){ return; }

        
        this._setSize();
        dojo.style(this.closeButtonNode,"opacity", 0);
        dojo.style(this.domNode, {
         overflow: "hidden",
         opacity: 0,
         width: "1px",
         height: "1px"
        });
        dojo.style(this.containerNode, {
         opacity: 0,
         overflow: "hidden"
        });

        
        this.inherited(arguments);


        if(this.modal){
         // prevent escape key from closing dialog
         // connect to body to trap this event from the Dialog a11y code, and stop escape key
         // from doing anything in the modal:true case:
         this._modalconnects.push(dojo.connect(dojo.body(), "onkeypress", function(e){
          if(e.charOrCode == dojo.keys.ESCAPE){
           dojo.stopEvent(e);
          }
         }));
        }else{
         // otherwise, allow clicking on the underlay to close
         this._modalconnects.push(dojo.connect(dijit._underlay.domNode, "onclick", this, "onCancel"));
        }
        this._modalconnects.push(dojo.connect(this.domNode,"onmouseenter",this,"_handleNav"));
        this._modalconnects.push(dojo.connect(this.domNode,"onmouseleave",this,"_handleNav"));
                    
      
                    
    • summary
  • dojox.widget.Dialog._handleNav
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      var navou = "_navOut",
         navin = "_navIn",
         animou = (e.type == "mouseout" ? navin : navou),
         animin = (e.type == "mouseout" ? navou : navin)
        ;

        
        this[animou].stop();
        this[animin].play();
                    
      
                    
    • summary
      Handle's showing or hiding the close icon
  • dojox.widget.Dialog._position
       
    • type
      Function
    • source: [view] 
                    
      

                      if(!this._started){ return; } // prevent content: from firing this anim #8914

        
        if(this._sizing){
         this._sizing.stop();
         this.disconnect(this._sizingConnect);
         delete this._sizing;
        }

        
        this.inherited(arguments);

        
        if(!this.open){ dojo.style(this.containerNode, "opacity", 0); }
        var pad = this.viewportPadding * 2;

        
        var props = {
         node: this.domNode,
         duration: this.sizeDuration || dijit._defaultDuration,
         easing: this.easing,
         method: this.sizeMethod
        };


        var ds = this._displaysize || this._setSize();
        props['width'] = ds.w = (ds.w + pad >= this._vp.w || this.sizeToViewport)
         ? this._vp.w - pad : ds.w;

         
        props['height'] = ds.h = (ds.h + pad >= this._vp.h || this.sizeToViewport)
         ? this._vp.h - pad : ds.h;

        
        this._sizing = dojox.fx.sizeTo(props);
        this._sizingConnect = this.connect(this._sizing,"onEnd","_showContent");
        this._sizing.play();
                    
      
                    
    • returns
      prevent content: from firing this anim #8914
    • summary
  • dojox.widget.Dialog._showContent
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      var container = this.containerNode;
        dojo.style(this.domNode, {
         overflow: "visible",
         opacity: 1
        });
        dojo.style(this.closeButtonNode,"opacity",1);
        dojo.style(container, {
         height: this._displaysize.h - this.titleNode.offsetHeight + "px",
         width: this._displaysize.w + "px",
         overflow:"auto"
        });
        dojo.anim(container, { opacity:1 });
                    
      
                    
    • summary
      Show the inner container after sizing animation
  • dojox.widget.Dialog._navIn
       
    • summary
  • dojox.widget.Dialog._navOut
       
    • summary
  • dojox.widget.Dialog._vp
       
    • summary
  • dojox.widget.Dialog._displaysize
       
    • summary
  • dojox.widget.Dialog._sizing
       
    • summary
  • dojox.widget.Dialog._sizingConnect
       
    • summary
  • dojox.widget
       
    • type
      Object
    • summary
  • dojox
       
    • type
      Object
    • summary