dojox/fx/Shadow.js

• Provides:

  • dojox.fx.Shadow

• Requires:

  • dijit._Widget in common in project dijit
  • dojo.NodeList-fx in common in project dojo

• dojox.fx.Shadow

  • type

    Function

  • chains:
    • dijit._Widget: (prototype)
    • dijit._Widget: (call)
  • summary

    Adds a drop-shadow to a node.

  • example

    
    	// add drop shadows to all nodes with class="hasShadow"
    	dojo.query(".hasShadow").forEach(function(n){
    		var foo = new dojox.fx.Shadow({ node: n });
    		foo.startup();
    	});

• dojox.fx.Shadow.shadowPng

  • type

    String

  • summary

    Base location for drop-shadow images

• dojox.fx.Shadow.shadowThickness

  • type

    Integer

  • summary

    How wide (in px) to make the shadow

• dojox.fx.Shadow.shadowOffset

  • type

    Integer

  • summary

    How deep to make the shadow appear to be

• dojox.fx.Shadow.opacity

  • type

    Float

  • summary

    Overall opacity of the shadow

• dojox.fx.Shadow.animate

  • type

    Boolean

  • summary

    A toggle to disable animated transitions

• dojox.fx.Shadow.node

  • summary

• dojox.fx.Shadow.startup

  • type

    Function

  • source: [view]
      this.inherited(arguments);
      this.node.style.position = "relative";
      // make all the pieces of the shadow, and position/size them as much
      // as possible (but a lot of the coordinates are set in sizeShadow
      this.pieces={};
      var x1 = -1 * this.shadowThickness;
      var y0 = this.shadowOffset;
      var y1 = this.shadowOffset + this.shadowThickness;
      this._makePiece("tl", "top", y0, "left", x1);
      this._makePiece("l", "top", y1, "left", x1, "scale");
      this._makePiece("tr", "top", y0, "left", 0);
      this._makePiece("r", "top", y1, "left", 0, "scale");
      this._makePiece("bl", "top", 0, "left", x1);
      this._makePiece("b", "top", 0, "left", 0, "crop");
      this._makePiece("br", "top", 0, "left", 0);
    
    
      this.nodeList = dojo.query(".shadowPiece",this.node);
    
    
      this.setOpacity(this.opacity);
      this.resize();
  • summary

    Initializes the shadow.

• dojox.fx.Shadow._makePiece

  • type

    Function

  • parameters:
    • name: (typeof )
    • vertAttach: (typeof )
    • vertCoord: (typeof )
    • horzAttach: (typeof )
    • horzCoord: (typeof )
    • sizing: (typeof )
  • source: [view]
      var img;
      var url = this.shadowPng + name.toUpperCase() + ".png";
      if(dojo.isIE < 7){
       img = dojo.create("div");
       img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+url+"'"+
        (sizing?", sizingMethod='"+sizing+"'":"") + ")";
      }else{
       img = dojo.create("img", { src:url });
      }
    
    
      img.style.position="absolute";
      img.style[vertAttach]=vertCoord+"px";
      img.style[horzAttach]=horzCoord+"px";
      img.style.width=this.shadowThickness+"px";
      img.style.height=this.shadowThickness+"px";
      dojo.addClass(img,"shadowPiece");
      this.pieces[name]=img;
      this.node.appendChild(img);
  • summary

    append a shadow pieces to the node, and position it

• dojox.fx.Shadow.setOpacity

  • type

    Function

  • parameters:
    • n: (typeof Float)
    • animArgs: (typeof Object)
  • source: [view]
      if(dojo.isIE){ return; }
      if(!animArgs){ animArgs = {}; }
      if(this.animate){
       var _anims = [];
       this.nodeList.forEach(function(node){
        _anims.push(dojo._fade(dojo.mixin(animArgs,{ node: node, end: n })));
       });
       dojo.fx.combine(_anims).play();
      }else{
       this.nodeList.style("opacity",n);
      }
  • summary

    set the opacity of the underlay
    note: does not work in IE? FIXME.

• dojox.fx.Shadow.setDisabled

  • type

    Function

  • parameters:
    • disabled: (typeof Boolean)
  • source: [view]
      if(disabled){
       if(this.disabled){ return; }
       if(this.animate){ this.nodeList.fadeOut().play();
       }else{ this.nodeList.style("visibility","hidden"); }
       this.disabled = true;
      }else{
       if(!this.disabled){ return; }
       if(this.animate){ this.nodeList.fadeIn().play();
       }else{ this.nodeList.style("visibility","visible"); }
       this.disabled = false;
      }
  • summary

    enable / disable the shadow

• dojox.fx.Shadow.resize

  • type

    Function

  • parameters:
    • args: (typeof dojox.fx._arg.ShadowResizeArgs)
  • source: [view]
      var x; var y;
      if(args){ x = args.x; y = args.y;
      }else{
       var co = dojo._getBorderBox(this.node);
       x = co.w; y = co.h;
      }
      var sideHeight = y - (this.shadowOffset+this.shadowThickness);
      if (sideHeight < 0) { sideHeight = 0; }
      if (y < 1) { y = 1; }
      if (x < 1) { x = 1; }
      with(this.pieces){
       l.style.height = sideHeight+"px";
       r.style.height = sideHeight+"px";
       b.style.width = x+"px";
       bl.style.top = y+"px";
       b.style.top = y+"px";
       br.style.top = y+"px";
       tr.style.left = x+"px";
       r.style.left = x+"px";
       br.style.left = x+"px";
      }
  • summary

    Resizes the shadow based on width and height.

• dojox.fx.Shadow.node.style.position

  • summary

• dojox.fx.Shadow.pieces

  • summary

• dojox.fx.Shadow.nodeList

  • summary

• dojox.fx.Shadow.disabled

  • summary

• animArgs.node

  • summary

• animArgs.end

  • summary

• dojox.fx

  • type

    Object

  • summary

• dojox

  • type

    Object

  • summary