| 1 | define(["dojo/_base/kernel", "dojo/_base/query" ,"dojo/_base/lang", "dojo/_base/declare", "dojo/_base/sniff", |
|---|
| 2 | "dojo/dom-construct", "dojo/dom-class", "dojo/dom-geometry", "dojo/_base/fx", "dojo/fx", "dijit/_Widget", |
|---|
| 3 | "dojo/NodeList-fx"], |
|---|
| 4 | function(kernel, query, lang, declare, has, domConstruct, domClass, domGeom, baseFx, coreFx, Widget, NodeListFx){ |
|---|
| 5 | kernel.experimental("dojox.fx.Shadow"); |
|---|
| 6 | declare("dojox.fx.Shadow", Widget,{ |
|---|
| 7 | // summary: Adds a drop-shadow to a node. |
|---|
| 8 | // |
|---|
| 9 | // example: |
|---|
| 10 | // | // add drop shadows to all nodes with class="hasShadow" |
|---|
| 11 | // | dojo.query(".hasShadow").forEach(function(n){ |
|---|
| 12 | // | var foo = new dojox.fx.Shadow({ node: n }); |
|---|
| 13 | // | foo.startup(); |
|---|
| 14 | // | }); |
|---|
| 15 | // |
|---|
| 16 | // shadowPng: String |
|---|
| 17 | // Base location for drop-shadow images |
|---|
| 18 | shadowPng: kernel.moduleUrl("dojox.fx", "resources/shadow"), |
|---|
| 19 | |
|---|
| 20 | // shadowThickness: Integer |
|---|
| 21 | // How wide (in px) to make the shadow |
|---|
| 22 | shadowThickness: 7, |
|---|
| 23 | |
|---|
| 24 | // shadowOffset: Integer |
|---|
| 25 | // How deep to make the shadow appear to be |
|---|
| 26 | shadowOffset: 3, |
|---|
| 27 | |
|---|
| 28 | // opacity: Float |
|---|
| 29 | // Overall opacity of the shadow |
|---|
| 30 | opacity: 0.75, |
|---|
| 31 | |
|---|
| 32 | // animate: Boolean |
|---|
| 33 | // A toggle to disable animated transitions |
|---|
| 34 | animate: false, |
|---|
| 35 | |
|---|
| 36 | // node: DomNode |
|---|
| 37 | // The node we will be applying this shadow to |
|---|
| 38 | node: null, |
|---|
| 39 | |
|---|
| 40 | startup: function(){ |
|---|
| 41 | // summary: Initializes the shadow. |
|---|
| 42 | |
|---|
| 43 | this.inherited(arguments); |
|---|
| 44 | this.node.style.position = "relative"; |
|---|
| 45 | // make all the pieces of the shadow, and position/size them as much |
|---|
| 46 | // as possible (but a lot of the coordinates are set in sizeShadow |
|---|
| 47 | this.pieces={}; |
|---|
| 48 | var x1 = -1 * this.shadowThickness; |
|---|
| 49 | var y0 = this.shadowOffset; |
|---|
| 50 | var y1 = this.shadowOffset + this.shadowThickness; |
|---|
| 51 | this._makePiece("tl", "top", y0, "left", x1); |
|---|
| 52 | this._makePiece("l", "top", y1, "left", x1, "scale"); |
|---|
| 53 | this._makePiece("tr", "top", y0, "left", 0); |
|---|
| 54 | this._makePiece("r", "top", y1, "left", 0, "scale"); |
|---|
| 55 | this._makePiece("bl", "top", 0, "left", x1); |
|---|
| 56 | this._makePiece("b", "top", 0, "left", 0, "crop"); |
|---|
| 57 | this._makePiece("br", "top", 0, "left", 0); |
|---|
| 58 | |
|---|
| 59 | this.nodeList = query(".shadowPiece",this.node); |
|---|
| 60 | |
|---|
| 61 | this.setOpacity(this.opacity); |
|---|
| 62 | this.resize(); |
|---|
| 63 | }, |
|---|
| 64 | |
|---|
| 65 | _makePiece: function(name, vertAttach, vertCoord, horzAttach, horzCoord, sizing){ |
|---|
| 66 | // summary: append a shadow pieces to the node, and position it |
|---|
| 67 | var img; |
|---|
| 68 | var url = this.shadowPng + name.toUpperCase() + ".png"; |
|---|
| 69 | if(has("ie") < 7){ |
|---|
| 70 | img = domConstruct.create("div"); |
|---|
| 71 | img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+url+"'"+ |
|---|
| 72 | (sizing?", sizingMethod='"+sizing+"'":"") + ")"; |
|---|
| 73 | }else{ |
|---|
| 74 | img = domConstruct.create("img", { src:url }); |
|---|
| 75 | } |
|---|
| 76 | |
|---|
| 77 | img.style.position="absolute"; |
|---|
| 78 | img.style[vertAttach]=vertCoord+"px"; |
|---|
| 79 | img.style[horzAttach]=horzCoord+"px"; |
|---|
| 80 | img.style.width=this.shadowThickness+"px"; |
|---|
| 81 | img.style.height=this.shadowThickness+"px"; |
|---|
| 82 | domClass.add(img,"shadowPiece"); |
|---|
| 83 | this.pieces[name]=img; |
|---|
| 84 | this.node.appendChild(img); |
|---|
| 85 | |
|---|
| 86 | }, |
|---|
| 87 | |
|---|
| 88 | setOpacity: function(/* Float */n,/* Object? */animArgs){ |
|---|
| 89 | // summary: set the opacity of the underlay |
|---|
| 90 | // note: does not work in IE? FIXME. |
|---|
| 91 | if(has("ie")){ return; } |
|---|
| 92 | if(!animArgs){ animArgs = {}; } |
|---|
| 93 | if(this.animate){ |
|---|
| 94 | var _anims = []; |
|---|
| 95 | this.nodeList.forEach(function(node){ |
|---|
| 96 | _anims.push(baseFx._fade(lang.mixin(animArgs,{ node: node, end: n }))); |
|---|
| 97 | }); |
|---|
| 98 | coreFx.combine(_anims).play(); |
|---|
| 99 | }else{ |
|---|
| 100 | this.nodeList.style("opacity",n); |
|---|
| 101 | } |
|---|
| 102 | |
|---|
| 103 | }, |
|---|
| 104 | |
|---|
| 105 | setDisabled: function(/* Boolean */disabled){ |
|---|
| 106 | // summary: enable / disable the shadow |
|---|
| 107 | if(disabled){ |
|---|
| 108 | if(this.disabled){ return; } |
|---|
| 109 | if(this.animate){ this.nodeList.fadeOut().play(); |
|---|
| 110 | }else{ this.nodeList.style("visibility","hidden"); } |
|---|
| 111 | this.disabled = true; |
|---|
| 112 | }else{ |
|---|
| 113 | if(!this.disabled){ return; } |
|---|
| 114 | if(this.animate){ this.nodeList.fadeIn().play(); |
|---|
| 115 | }else{ this.nodeList.style("visibility","visible"); } |
|---|
| 116 | this.disabled = false; |
|---|
| 117 | } |
|---|
| 118 | }, |
|---|
| 119 | |
|---|
| 120 | resize: function(/* dojox.fx._arg.ShadowResizeArgs */args){ |
|---|
| 121 | // summary: Resizes the shadow based on width and height. |
|---|
| 122 | var x; var y; |
|---|
| 123 | if(args){ x = args.x; y = args.y; |
|---|
| 124 | }else{ |
|---|
| 125 | var co = domGeom.position(this.node); |
|---|
| 126 | x = co.w; y = co.h; |
|---|
| 127 | } |
|---|
| 128 | var sideHeight = y - (this.shadowOffset+this.shadowThickness); |
|---|
| 129 | if (sideHeight < 0) { sideHeight = 0; } |
|---|
| 130 | if (y < 1) { y = 1; } |
|---|
| 131 | if (x < 1) { x = 1; } |
|---|
| 132 | with(this.pieces){ |
|---|
| 133 | l.style.height = sideHeight+"px"; |
|---|
| 134 | r.style.height = sideHeight+"px"; |
|---|
| 135 | b.style.width = x+"px"; |
|---|
| 136 | bl.style.top = y+"px"; |
|---|
| 137 | b.style.top = y+"px"; |
|---|
| 138 | br.style.top = y+"px"; |
|---|
| 139 | tr.style.left = x+"px"; |
|---|
| 140 | r.style.left = x+"px"; |
|---|
| 141 | br.style.left = x+"px"; |
|---|
| 142 | } |
|---|
| 143 | } |
|---|
| 144 | }); |
|---|
| 145 | return dojox.fx.Shadow; |
|---|
| 146 | }); |
|---|
