| 1 | define([ |
|---|
| 2 | "dojo", "dojox", "dojo/text!./Dialog/Dialog.html", |
|---|
| 3 | "dijit/Dialog", "dojo/window", "dojox/fx", "./DialogSimple" |
|---|
| 4 | ], function(dojo, dojox, template){ |
|---|
| 5 | |
|---|
| 6 | dojo.getObject('widget', true, dojox); |
|---|
| 7 | |
|---|
| 8 | return dojo.declare('dojox.widget.Dialog', dojox.widget.DialogSimple, |
|---|
| 9 | { |
|---|
| 10 | // summary: |
|---|
| 11 | // A Lightbox-like Modal-dialog for HTML Content |
|---|
| 12 | // description: |
|---|
| 13 | // An HTML-capable Dialog widget with advanced sizing |
|---|
| 14 | // options, animated show/hide and other useful options. |
|---|
| 15 | // |
|---|
| 16 | // This Dialog is also very easy to apply custom styles to. |
|---|
| 17 | // |
|---|
| 18 | // It works identically to a `dijit.Dialog` with several |
|---|
| 19 | // additional parameters. |
|---|
| 20 | |
|---|
| 21 | templateString: template, |
|---|
| 22 | |
|---|
| 23 | // sizeToViewport: Boolean |
|---|
| 24 | // If true, fix the size of the dialog to the Viewport based on |
|---|
| 25 | // viewportPadding value rather than the calculated or natural |
|---|
| 26 | // style. If false, base the size on a passed dimension attribute. |
|---|
| 27 | // Either way, the viewportPadding value is used if the the content |
|---|
| 28 | // extends beyond the viewport size for whatever reason. |
|---|
| 29 | sizeToViewport: false, |
|---|
| 30 | |
|---|
| 31 | // viewportPadding: Integer |
|---|
| 32 | // If sizeToViewport="true", this is the amount of padding in pixels to leave |
|---|
| 33 | // between the dialog border and the viewport edge. |
|---|
| 34 | // This value is also used when sizeToViewport="false" and dimensions exceeded |
|---|
| 35 | // by dialog content to ensure dialog does not go outside viewport boundary |
|---|
| 36 | viewportPadding: 35, |
|---|
| 37 | |
|---|
| 38 | // dimensions: Array |
|---|
| 39 | // A two-element array of [width,height] to animate the Dialog to if sizeToViewport="false" |
|---|
| 40 | // Defaults to [300,300] |
|---|
| 41 | dimensions: null, |
|---|
| 42 | |
|---|
| 43 | // easing: Function?|String? |
|---|
| 44 | // An easing function to apply to the sizing animation. |
|---|
| 45 | easing: null, |
|---|
| 46 | |
|---|
| 47 | // sizeDuration: Integer |
|---|
| 48 | // Time (in ms) to use in the Animation for sizing. |
|---|
| 49 | sizeDuration: dijit._defaultDuration, |
|---|
| 50 | |
|---|
| 51 | // sizeMethod: String |
|---|
| 52 | // To be passed to dojox.fx.sizeTo, one of "chain" or "combine" to effect |
|---|
| 53 | // the animation sequence. |
|---|
| 54 | sizeMethod: "chain", |
|---|
| 55 | |
|---|
| 56 | // showTitle: Boolean |
|---|
| 57 | // Toogle to show or hide the Title area. Can only be set at startup. |
|---|
| 58 | showTitle: false, |
|---|
| 59 | |
|---|
| 60 | // draggable: Boolean |
|---|
| 61 | // Make the pane draggable. Differs from dijit.Dialog by setting default to false |
|---|
| 62 | draggable: false, // simply over-ride the default from dijit.Dialog |
|---|
| 63 | |
|---|
| 64 | // modal: Boolean |
|---|
| 65 | // If true, this Dialog instance will be truly modal and prevent closing until |
|---|
| 66 | // explicitly told to by calling hide() - Defaults to false to preserve previous |
|---|
| 67 | // behaviors. |
|---|
| 68 | modal: false, |
|---|
| 69 | |
|---|
| 70 | constructor: function(props, node){ |
|---|
| 71 | this.easing = props.easing || dojo._defaultEasing; |
|---|
| 72 | this.dimensions = props.dimensions || [300, 300]; |
|---|
| 73 | }, |
|---|
| 74 | |
|---|
| 75 | _setup: function(){ |
|---|
| 76 | // summary: |
|---|
| 77 | // Piggyback on dijit.Dialog's _setup for load-time options, deferred to |
|---|
| 78 | |
|---|
| 79 | this.inherited(arguments); |
|---|
| 80 | if(!this._alreadyInitialized){ |
|---|
| 81 | this._navIn = dojo.fadeIn({ node: this.closeButtonNode }); |
|---|
| 82 | this._navOut = dojo.fadeOut({ node: this.closeButtonNode }); |
|---|
| 83 | if(!this.showTitle){ |
|---|
| 84 | dojo.addClass(this.domNode,"dojoxDialogNoTitle"); |
|---|
| 85 | } |
|---|
| 86 | } |
|---|
| 87 | }, |
|---|
| 88 | |
|---|
| 89 | layout: function(e){ |
|---|
| 90 | this._setSize(); |
|---|
| 91 | this.inherited(arguments); |
|---|
| 92 | }, |
|---|
| 93 | |
|---|
| 94 | _setSize: function(){ |
|---|
| 95 | // summary: |
|---|
| 96 | // cache and set our desired end position |
|---|
| 97 | this._vp = dojo.window.getBox(); |
|---|
| 98 | var tc = this.containerNode, |
|---|
| 99 | vpSized = this.sizeToViewport |
|---|
| 100 | ; |
|---|
| 101 | return this._displaysize = { |
|---|
| 102 | w: vpSized ? tc.scrollWidth : this.dimensions[0], |
|---|
| 103 | h: vpSized ? tc.scrollHeight : this.dimensions[1] |
|---|
| 104 | }; // Object |
|---|
| 105 | }, |
|---|
| 106 | |
|---|
| 107 | show: function(){ |
|---|
| 108 | if(this.open){ return; } |
|---|
| 109 | |
|---|
| 110 | this._setSize(); |
|---|
| 111 | dojo.style(this.closeButtonNode,"opacity", 0); |
|---|
| 112 | dojo.style(this.domNode, { |
|---|
| 113 | overflow: "hidden", |
|---|
| 114 | opacity: 0, |
|---|
| 115 | width: "1px", |
|---|
| 116 | height: "1px" |
|---|
| 117 | }); |
|---|
| 118 | dojo.style(this.containerNode, { |
|---|
| 119 | opacity: 0, |
|---|
| 120 | overflow: "hidden" |
|---|
| 121 | }); |
|---|
| 122 | |
|---|
| 123 | this.inherited(arguments); |
|---|
| 124 | |
|---|
| 125 | if(this.modal){ |
|---|
| 126 | // prevent escape key from closing dialog |
|---|
| 127 | // connect to body to trap this event from the Dialog a11y code, and stop escape key |
|---|
| 128 | // from doing anything in the modal:true case: |
|---|
| 129 | this._modalconnects.push(dojo.connect(dojo.body(), "onkeypress", function(e){ |
|---|
| 130 | if(e.charOrCode == dojo.keys.ESCAPE){ |
|---|
| 131 | dojo.stopEvent(e); |
|---|
| 132 | } |
|---|
| 133 | })); |
|---|
| 134 | }else{ |
|---|
| 135 | // otherwise, allow clicking on the underlay to close |
|---|
| 136 | this._modalconnects.push(dojo.connect(dijit._underlay.domNode, "onclick", this, "onCancel")); |
|---|
| 137 | } |
|---|
| 138 | this._modalconnects.push(dojo.connect(this.domNode,"onmouseenter",this,"_handleNav")); |
|---|
| 139 | this._modalconnects.push(dojo.connect(this.domNode,"onmouseleave",this,"_handleNav")); |
|---|
| 140 | |
|---|
| 141 | }, |
|---|
| 142 | |
|---|
| 143 | _handleNav: function(e){ |
|---|
| 144 | // summary: |
|---|
| 145 | // Handle's showing or hiding the close icon |
|---|
| 146 | |
|---|
| 147 | var navou = "_navOut", |
|---|
| 148 | navin = "_navIn", |
|---|
| 149 | animou = (e.type == "mouseout" ? navin : navou), |
|---|
| 150 | animin = (e.type == "mouseout" ? navou : navin) |
|---|
| 151 | ; |
|---|
| 152 | |
|---|
| 153 | this[animou].stop(); |
|---|
| 154 | this[animin].play(); |
|---|
| 155 | |
|---|
| 156 | }, |
|---|
| 157 | |
|---|
| 158 | // an experiment in a quicksilver-like hide. too choppy for me. |
|---|
| 159 | /* |
|---|
| 160 | hide: function(){ |
|---|
| 161 | // summary: |
|---|
| 162 | // Hide the dialog |
|---|
| 163 | |
|---|
| 164 | // if we haven't been initialized yet then we aren't showing and we can just return |
|---|
| 165 | if(!this._alreadyInitialized){ |
|---|
| 166 | return; |
|---|
| 167 | } |
|---|
| 168 | |
|---|
| 169 | this._fadeIn && this._fadeIn.stop(); |
|---|
| 170 | |
|---|
| 171 | if (this._scrollConnected){ |
|---|
| 172 | this._scrollConnected = false; |
|---|
| 173 | } |
|---|
| 174 | dojo.forEach(this._modalconnects, dojo.disconnect); |
|---|
| 175 | this._modalconnects = []; |
|---|
| 176 | if(this.refocus){ |
|---|
| 177 | this.connect(this._fadeOut,"onEnd",dojo.hitch(dijit,"focus",this._savedFocus)); |
|---|
| 178 | } |
|---|
| 179 | if(this._relativePosition){ |
|---|
| 180 | delete this._relativePosition; |
|---|
| 181 | } |
|---|
| 182 | |
|---|
| 183 | dojox.fx.sizeTo({ |
|---|
| 184 | node: this.domNode, |
|---|
| 185 | duration:this.sizeDuration || this.duration, |
|---|
| 186 | width: this._vp.w - 1, |
|---|
| 187 | height: 5, |
|---|
| 188 | onBegin: dojo.hitch(this,function(){ |
|---|
| 189 | this._fadeOut.play(this.sizeDuration / 2); |
|---|
| 190 | }) |
|---|
| 191 | }).play(); |
|---|
| 192 | |
|---|
| 193 | this.open = false; |
|---|
| 194 | }, */ |
|---|
| 195 | |
|---|
| 196 | _position: function(){ |
|---|
| 197 | |
|---|
| 198 | if(!this._started){ return; } // prevent content: from firing this anim #8914 |
|---|
| 199 | |
|---|
| 200 | if(this._sizing){ |
|---|
| 201 | this._sizing.stop(); |
|---|
| 202 | this.disconnect(this._sizingConnect); |
|---|
| 203 | delete this._sizing; |
|---|
| 204 | } |
|---|
| 205 | |
|---|
| 206 | this.inherited(arguments); |
|---|
| 207 | |
|---|
| 208 | if(!this.open){ dojo.style(this.containerNode, "opacity", 0); } |
|---|
| 209 | var pad = this.viewportPadding * 2; |
|---|
| 210 | |
|---|
| 211 | var props = { |
|---|
| 212 | node: this.domNode, |
|---|
| 213 | duration: this.sizeDuration || dijit._defaultDuration, |
|---|
| 214 | easing: this.easing, |
|---|
| 215 | method: this.sizeMethod |
|---|
| 216 | }; |
|---|
| 217 | |
|---|
| 218 | var ds = this._displaysize || this._setSize(); |
|---|
| 219 | props['width'] = ds.w = (ds.w + pad >= this._vp.w || this.sizeToViewport) |
|---|
| 220 | ? this._vp.w - pad : ds.w; |
|---|
| 221 | |
|---|
| 222 | props['height'] = ds.h = (ds.h + pad >= this._vp.h || this.sizeToViewport) |
|---|
| 223 | ? this._vp.h - pad : ds.h; |
|---|
| 224 | |
|---|
| 225 | this._sizing = dojox.fx.sizeTo(props); |
|---|
| 226 | this._sizingConnect = this.connect(this._sizing,"onEnd","_showContent"); |
|---|
| 227 | this._sizing.play(); |
|---|
| 228 | |
|---|
| 229 | }, |
|---|
| 230 | |
|---|
| 231 | _showContent: function(e){ |
|---|
| 232 | // summary: |
|---|
| 233 | // Show the inner container after sizing animation |
|---|
| 234 | |
|---|
| 235 | var container = this.containerNode; |
|---|
| 236 | dojo.style(this.domNode, { |
|---|
| 237 | overflow: "visible", |
|---|
| 238 | opacity: 1 |
|---|
| 239 | }); |
|---|
| 240 | dojo.style(this.closeButtonNode,"opacity",1); |
|---|
| 241 | dojo.style(container, { |
|---|
| 242 | height: this._displaysize.h - this.titleNode.offsetHeight + "px", |
|---|
| 243 | width: this._displaysize.w + "px", |
|---|
| 244 | overflow:"auto" |
|---|
| 245 | }); |
|---|
| 246 | dojo.anim(container, { opacity:1 }); |
|---|
| 247 | } |
|---|
| 248 | |
|---|
| 249 | }); |
|---|
| 250 | }); |
|---|
| 251 | |
|---|
