1 if(!dojo._hasResource["dojox.fx.Shadow"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
2 dojo._hasResource["dojox.fx.Shadow"] = true;
3 dojo.provide("dojox.fx.Shadow");
4 dojo.experimental("dojox.fx.Shadow");
6 dojo.require("dijit._Widget");
7 dojo.require("dojo.NodeList-fx");
9 dojo.declare("dojox.fx.Shadow",
11 // summary: Adds a drop-shadow to a node.
14 // | // add drop shadows to all nodes with class="hasShadow"
15 // | dojo.query(".hasShadow").forEach(function(n){
16 // | var foo = new dojox.fx.Shadow({ node: n });
21 // Base location for drop-shadow images
22 shadowPng: dojo.moduleUrl("dojox.fx", "resources/shadow"),
24 // shadowThickness: Integer
25 // How wide (in px) to make the shadow
28 // shadowOffset: Integer
29 // How deep to make the shadow appear to be
33 // Overall opacity of the shadow
37 // A toggle to disable animated transitions
41 // The node we will be applying this shadow to
45 // summary: Initializes the shadow.
47 this.inherited(arguments);
48 this.node.style.position = "relative";
49 // make all the pieces of the shadow, and position/size them as much
50 // as possible (but a lot of the coordinates are set in sizeShadow
52 var x1 = -1 * this.shadowThickness;
53 var y0 = this.shadowOffset;
54 var y1 = this.shadowOffset + this.shadowThickness;
55 this._makePiece("tl", "top", y0, "left", x1);
56 this._makePiece("l", "top", y1, "left", x1, "scale");
57 this._makePiece("tr", "top", y0, "left", 0);
58 this._makePiece("r", "top", y1, "left", 0, "scale");
59 this._makePiece("bl", "top", 0, "left", x1);
60 this._makePiece("b", "top", 0, "left", 0, "crop");
61 this._makePiece("br", "top", 0, "left", 0);
63 this.nodeList = dojo.query(".shadowPiece",this.node);
65 this.setOpacity(this.opacity);
69 _makePiece: function(name, vertAttach, vertCoord, horzAttach, horzCoord, sizing){
70 // summary: append a shadow pieces to the node, and position it
72 var url = this.shadowPng + name.toUpperCase() + ".png";
73 if((dojo.isIE)&&(dojo.isIE<7)){
74 img=document.createElement("div");
75 img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+url+"'"+
76 (sizing?", sizingMethod='"+sizing+"'":"") + ")";
78 img=document.createElement("img");
82 img.style.position="absolute";
83 img.style[vertAttach]=vertCoord+"px";
84 img.style[horzAttach]=horzCoord+"px";
85 img.style.width=this.shadowThickness+"px";
86 img.style.height=this.shadowThickness+"px";
87 dojo.addClass(img,"shadowPiece");
88 this.pieces[name]=img;
89 this.node.appendChild(img);
93 setOpacity: function(/* Float */n,/* Object? */animArgs){
94 // summary: set the opacity of the underlay
95 // note: does not work in IE? FIXME.
96 if(dojo.isIE){ return; }
97 if(!animArgs){ animArgs = {}; }
100 this.nodeList.forEach(function(node){
101 _anims.push(dojo._fade(dojo.mixin(animArgs,{ node: node, end: n })));
103 dojo.fx.combine(_anims).play();
105 this.nodeList.style("opacity",n);
110 setDisabled: function(/* Boolean */disabled){
111 // summary: enable / disable the shadow
113 if(this.disabled){ return; }
114 if(this.animate){ this.nodeList.fadeOut().play();
115 }else{ this.nodeList.style("visibility","hidden"); }
116 this.disabled = true;
118 if(!this.disabled){ return; }
119 if(this.animate){ this.nodeList.fadeIn().play();
120 }else{ this.nodeList.style("visibility","visible"); }
121 this.disabled = false;
125 resize: function(/* dojox.fx._arg.ShadowResizeArgs */args){
126 // summary: Resizes the shadow based on width and height.
128 if(args){ x = args.x; y = args.y;
130 var co = dojo._getBorderBox(this.node);
133 var sideHeight = y - (this.shadowOffset+this.shadowThickness);
134 if (sideHeight < 0) { sideHeight = 0; }
135 if (y < 1) { y = 1; }
136 if (x < 1) { x = 1; }
138 l.style.height = sideHeight+"px";
139 r.style.height = sideHeight+"px";
140 b.style.width = x+"px";
141 bl.style.top = y+"px";
142 b.style.top = y+"px";
143 br.style.top = y+"px";
144 tr.style.left = x+"px";
145 r.style.left = x+"px";
146 br.style.left = x+"px";