[483] | 1 | define([ |
---|
| 2 | "require", |
---|
| 3 | "dojo/_base/array", // array.forEach array.indexOf array.map |
---|
| 4 | "dojo/aspect", |
---|
| 5 | "dojo/_base/declare", // declare |
---|
| 6 | "dojo/Deferred", // Deferred |
---|
| 7 | "dojo/dom", // dom.isDescendant |
---|
| 8 | "dojo/dom-class", // domClass.add domClass.contains |
---|
| 9 | "dojo/dom-geometry", // domGeometry.position |
---|
| 10 | "dojo/dom-style", // domStyle.set |
---|
| 11 | "dojo/_base/fx", // fx.fadeIn fx.fadeOut |
---|
| 12 | "dojo/i18n", // i18n.getLocalization |
---|
| 13 | "dojo/keys", |
---|
| 14 | "dojo/_base/lang", // lang.mixin lang.hitch |
---|
| 15 | "dojo/on", |
---|
| 16 | "dojo/ready", |
---|
| 17 | "dojo/sniff", // has("ie") has("opera") has("dijit-legacy-requires") |
---|
| 18 | "dojo/window", // winUtils.getBox, winUtils.get |
---|
| 19 | "dojo/dnd/Moveable", // Moveable |
---|
| 20 | "dojo/dnd/TimedMoveable", // TimedMoveable |
---|
| 21 | "./focus", |
---|
| 22 | "./_base/manager", // manager.defaultDuration |
---|
| 23 | "./_Widget", |
---|
| 24 | "./_TemplatedMixin", |
---|
| 25 | "./_CssStateMixin", |
---|
| 26 | "./form/_FormMixin", |
---|
| 27 | "./_DialogMixin", |
---|
| 28 | "./DialogUnderlay", |
---|
| 29 | "./layout/ContentPane", |
---|
| 30 | "dojo/text!./templates/Dialog.html", |
---|
| 31 | "dojo/i18n!./nls/common" |
---|
| 32 | ], function(require, array, aspect, declare, Deferred, |
---|
| 33 | dom, domClass, domGeometry, domStyle, fx, i18n, keys, lang, on, ready, has, winUtils, |
---|
| 34 | Moveable, TimedMoveable, focus, manager, _Widget, _TemplatedMixin, _CssStateMixin, _FormMixin, _DialogMixin, |
---|
| 35 | DialogUnderlay, ContentPane, template){ |
---|
| 36 | |
---|
| 37 | // module: |
---|
| 38 | // dijit/Dialog |
---|
| 39 | |
---|
| 40 | var _DialogBase = declare("dijit._DialogBase" + (has("dojo-bidi") ? "_NoBidi" : ""), [_TemplatedMixin, _FormMixin, _DialogMixin, _CssStateMixin], { |
---|
| 41 | templateString: template, |
---|
| 42 | |
---|
| 43 | baseClass: "dijitDialog", |
---|
| 44 | |
---|
| 45 | cssStateNodes: { |
---|
| 46 | closeButtonNode: "dijitDialogCloseIcon" |
---|
| 47 | }, |
---|
| 48 | |
---|
| 49 | // Map widget attributes to DOMNode attributes. |
---|
| 50 | _setTitleAttr: { node: "titleNode", type: "innerHTML" }, |
---|
| 51 | |
---|
| 52 | // open: [readonly] Boolean |
---|
| 53 | // True if Dialog is currently displayed on screen. |
---|
| 54 | open: false, |
---|
| 55 | |
---|
| 56 | // duration: Integer |
---|
| 57 | // The time in milliseconds it takes the dialog to fade in and out |
---|
| 58 | duration: manager.defaultDuration, |
---|
| 59 | |
---|
| 60 | // refocus: Boolean |
---|
| 61 | // A Toggle to modify the default focus behavior of a Dialog, which |
---|
| 62 | // is to re-focus the element which had focus before being opened. |
---|
| 63 | // False will disable refocusing. Default: true |
---|
| 64 | refocus: true, |
---|
| 65 | |
---|
| 66 | // autofocus: Boolean |
---|
| 67 | // A Toggle to modify the default focus behavior of a Dialog, which |
---|
| 68 | // is to focus on the first dialog element after opening the dialog. |
---|
| 69 | // False will disable autofocusing. Default: true |
---|
| 70 | autofocus: true, |
---|
| 71 | |
---|
| 72 | // _firstFocusItem: [private readonly] DomNode |
---|
| 73 | // The pointer to the first focusable node in the dialog. |
---|
| 74 | // Set by `dijit/_DialogMixin._getFocusItems()`. |
---|
| 75 | _firstFocusItem: null, |
---|
| 76 | |
---|
| 77 | // _lastFocusItem: [private readonly] DomNode |
---|
| 78 | // The pointer to which node has focus prior to our dialog. |
---|
| 79 | // Set by `dijit/_DialogMixin._getFocusItems()`. |
---|
| 80 | _lastFocusItem: null, |
---|
| 81 | |
---|
| 82 | // doLayout: [protected] Boolean |
---|
| 83 | // Don't change this parameter from the default value. |
---|
| 84 | // This ContentPane parameter doesn't make sense for Dialog, since Dialog |
---|
| 85 | // is never a child of a layout container, nor can you specify the size of |
---|
| 86 | // Dialog in order to control the size of an inner widget. |
---|
| 87 | doLayout: false, |
---|
| 88 | |
---|
| 89 | // draggable: Boolean |
---|
| 90 | // Toggles the movable aspect of the Dialog. If true, Dialog |
---|
| 91 | // can be dragged by it's title. If false it will remain centered |
---|
| 92 | // in the viewport. |
---|
| 93 | draggable: true, |
---|
| 94 | _setDraggableAttr: function(/*Boolean*/ val){ |
---|
| 95 | // Avoid _WidgetBase behavior of copying draggable attribute to this.domNode, |
---|
| 96 | // as that prevents text select on modern browsers (#14452) |
---|
| 97 | this._set("draggable", val); |
---|
| 98 | }, |
---|
| 99 | |
---|
| 100 | // maxRatio: Number |
---|
| 101 | // Maximum size to allow the dialog to expand to, relative to viewport size |
---|
| 102 | maxRatio: 0.9, |
---|
| 103 | |
---|
| 104 | // closable: Boolean |
---|
| 105 | // Dialog show [x] icon to close itself, and ESC key will close the dialog. |
---|
| 106 | closable: true, |
---|
| 107 | _setClosableAttr: function(val){ |
---|
| 108 | this.closeButtonNode.style.display = val ? "" : "none"; |
---|
| 109 | this._set("closable", val); |
---|
| 110 | }, |
---|
| 111 | |
---|
| 112 | postMixInProperties: function(){ |
---|
| 113 | var _nlsResources = i18n.getLocalization("dijit", "common"); |
---|
| 114 | lang.mixin(this, _nlsResources); |
---|
| 115 | this.inherited(arguments); |
---|
| 116 | }, |
---|
| 117 | |
---|
| 118 | postCreate: function(){ |
---|
| 119 | domStyle.set(this.domNode, { |
---|
| 120 | display: "none", |
---|
| 121 | position: "absolute" |
---|
| 122 | }); |
---|
| 123 | this.ownerDocumentBody.appendChild(this.domNode); |
---|
| 124 | |
---|
| 125 | this.inherited(arguments); |
---|
| 126 | |
---|
| 127 | aspect.after(this, "onExecute", lang.hitch(this, "hide"), true); |
---|
| 128 | aspect.after(this, "onCancel", lang.hitch(this, "hide"), true); |
---|
| 129 | |
---|
| 130 | this._modalconnects = []; |
---|
| 131 | }, |
---|
| 132 | |
---|
| 133 | onLoad: function(){ |
---|
| 134 | // summary: |
---|
| 135 | // Called when data has been loaded from an href. |
---|
| 136 | // Unlike most other callbacks, this function can be connected to (via `dojo.connect`) |
---|
| 137 | // but should *not* be overridden. |
---|
| 138 | // tags: |
---|
| 139 | // callback |
---|
| 140 | |
---|
| 141 | // when href is specified we need to reposition the dialog after the data is loaded |
---|
| 142 | // and find the focusable elements |
---|
| 143 | this._size(); |
---|
| 144 | this._position(); |
---|
| 145 | |
---|
| 146 | if(this.autofocus && DialogLevelManager.isTop(this)){ |
---|
| 147 | this._getFocusItems(this.domNode); |
---|
| 148 | focus.focus(this._firstFocusItem); |
---|
| 149 | } |
---|
| 150 | |
---|
| 151 | this.inherited(arguments); |
---|
| 152 | }, |
---|
| 153 | |
---|
| 154 | focus: function(){ |
---|
| 155 | this._getFocusItems(this.domNode); |
---|
| 156 | focus.focus(this._firstFocusItem); |
---|
| 157 | }, |
---|
| 158 | |
---|
| 159 | _endDrag: function(){ |
---|
| 160 | // summary: |
---|
| 161 | // Called after dragging the Dialog. Saves the position of the dialog in the viewport, |
---|
| 162 | // and also adjust position to be fully within the viewport, so user doesn't lose access to handle |
---|
| 163 | var nodePosition = domGeometry.position(this.domNode), |
---|
| 164 | viewport = winUtils.getBox(this.ownerDocument); |
---|
| 165 | nodePosition.y = Math.min(Math.max(nodePosition.y, 0), (viewport.h - nodePosition.h)); |
---|
| 166 | nodePosition.x = Math.min(Math.max(nodePosition.x, 0), (viewport.w - nodePosition.w)); |
---|
| 167 | this._relativePosition = nodePosition; |
---|
| 168 | this._position(); |
---|
| 169 | }, |
---|
| 170 | |
---|
| 171 | _setup: function(){ |
---|
| 172 | // summary: |
---|
| 173 | // Stuff we need to do before showing the Dialog for the first |
---|
| 174 | // time (but we defer it until right beforehand, for |
---|
| 175 | // performance reasons). |
---|
| 176 | // tags: |
---|
| 177 | // private |
---|
| 178 | |
---|
| 179 | var node = this.domNode; |
---|
| 180 | |
---|
| 181 | if(this.titleBar && this.draggable){ |
---|
| 182 | this._moveable = new ((has("ie") == 6) ? TimedMoveable // prevent overload, see #5285 |
---|
| 183 | : Moveable)(node, { handle: this.titleBar }); |
---|
| 184 | aspect.after(this._moveable, "onMoveStop", lang.hitch(this, "_endDrag"), true); |
---|
| 185 | }else{ |
---|
| 186 | domClass.add(node, "dijitDialogFixed"); |
---|
| 187 | } |
---|
| 188 | |
---|
| 189 | this.underlayAttrs = { |
---|
| 190 | dialogId: this.id, |
---|
| 191 | "class": array.map(this["class"].split(/\s/),function(s){ |
---|
| 192 | return s + "_underlay"; |
---|
| 193 | }).join(" "), |
---|
| 194 | _onKeyDown: lang.hitch(this, "_onKey"), |
---|
| 195 | ownerDocument: this.ownerDocument |
---|
| 196 | }; |
---|
| 197 | }, |
---|
| 198 | |
---|
| 199 | _size: function(){ |
---|
| 200 | // summary: |
---|
| 201 | // If necessary, shrink dialog contents so dialog fits in viewport. |
---|
| 202 | // tags: |
---|
| 203 | // private |
---|
| 204 | |
---|
| 205 | this._checkIfSingleChild(); |
---|
| 206 | |
---|
| 207 | // If we resized the dialog contents earlier, reset them back to original size, so |
---|
| 208 | // that if the user later increases the viewport size, the dialog can display w/out a scrollbar. |
---|
| 209 | // Need to do this before the domGeometry.position(this.domNode) call below. |
---|
| 210 | if(this._singleChild){ |
---|
| 211 | if(typeof this._singleChildOriginalStyle != "undefined"){ |
---|
| 212 | this._singleChild.domNode.style.cssText = this._singleChildOriginalStyle; |
---|
| 213 | delete this._singleChildOriginalStyle; |
---|
| 214 | } |
---|
| 215 | }else{ |
---|
| 216 | domStyle.set(this.containerNode, { |
---|
| 217 | width: "auto", |
---|
| 218 | height: "auto" |
---|
| 219 | }); |
---|
| 220 | } |
---|
| 221 | |
---|
| 222 | var bb = domGeometry.position(this.domNode); |
---|
| 223 | |
---|
| 224 | // Get viewport size but then reduce it by a bit; Dialog should always have some space around it |
---|
| 225 | // to indicate that it's a popup. This will also compensate for possible scrollbars on viewport. |
---|
| 226 | var viewport = winUtils.getBox(this.ownerDocument); |
---|
| 227 | viewport.w *= this.maxRatio; |
---|
| 228 | viewport.h *= this.maxRatio; |
---|
| 229 | |
---|
| 230 | if(bb.w >= viewport.w || bb.h >= viewport.h){ |
---|
| 231 | // Reduce size of dialog contents so that dialog fits in viewport |
---|
| 232 | |
---|
| 233 | var containerSize = domGeometry.position(this.containerNode), |
---|
| 234 | w = Math.min(bb.w, viewport.w) - (bb.w - containerSize.w), |
---|
| 235 | h = Math.min(bb.h, viewport.h) - (bb.h - containerSize.h); |
---|
| 236 | |
---|
| 237 | if(this._singleChild && this._singleChild.resize){ |
---|
| 238 | if(typeof this._singleChildOriginalStyle == "undefined"){ |
---|
| 239 | this._singleChildOriginalStyle = this._singleChild.domNode.style.cssText; |
---|
| 240 | } |
---|
| 241 | this._singleChild.resize({w: w, h: h}); |
---|
| 242 | }else{ |
---|
| 243 | domStyle.set(this.containerNode, { |
---|
| 244 | width: w + "px", |
---|
| 245 | height: h + "px", |
---|
| 246 | overflow: "auto", |
---|
| 247 | position: "relative" // workaround IE bug moving scrollbar or dragging dialog |
---|
| 248 | }); |
---|
| 249 | } |
---|
| 250 | }else{ |
---|
| 251 | if(this._singleChild && this._singleChild.resize){ |
---|
| 252 | this._singleChild.resize(); |
---|
| 253 | } |
---|
| 254 | } |
---|
| 255 | }, |
---|
| 256 | |
---|
| 257 | _position: function(){ |
---|
| 258 | // summary: |
---|
| 259 | // Position the dialog in the viewport. If no relative offset |
---|
| 260 | // in the viewport has been determined (by dragging, for instance), |
---|
| 261 | // center the dialog. Otherwise, use the Dialog's stored relative offset, |
---|
| 262 | // adjusted by the viewport's scroll. |
---|
| 263 | if(!domClass.contains(this.ownerDocumentBody, "dojoMove")){ // don't do anything if called during auto-scroll |
---|
| 264 | var node = this.domNode, |
---|
| 265 | viewport = winUtils.getBox(this.ownerDocument), |
---|
| 266 | p = this._relativePosition, |
---|
| 267 | bb = p ? null : domGeometry.position(node), |
---|
| 268 | l = Math.floor(viewport.l + (p ? p.x : (viewport.w - bb.w) / 2)), |
---|
| 269 | t = Math.floor(viewport.t + (p ? p.y : (viewport.h - bb.h) / 2)) |
---|
| 270 | ; |
---|
| 271 | domStyle.set(node, { |
---|
| 272 | left: l + "px", |
---|
| 273 | top: t + "px" |
---|
| 274 | }); |
---|
| 275 | } |
---|
| 276 | }, |
---|
| 277 | |
---|
| 278 | _onKey: function(/*Event*/ evt){ |
---|
| 279 | // summary: |
---|
| 280 | // Handles the keyboard events for accessibility reasons |
---|
| 281 | // tags: |
---|
| 282 | // private |
---|
| 283 | |
---|
| 284 | if(evt.keyCode == keys.TAB){ |
---|
| 285 | this._getFocusItems(this.domNode); |
---|
| 286 | var node = evt.target; |
---|
| 287 | if(this._firstFocusItem == this._lastFocusItem){ |
---|
| 288 | // don't move focus anywhere, but don't allow browser to move focus off of dialog either |
---|
| 289 | evt.stopPropagation(); |
---|
| 290 | evt.preventDefault(); |
---|
| 291 | }else if(node == this._firstFocusItem && evt.shiftKey){ |
---|
| 292 | // if we are shift-tabbing from first focusable item in dialog, send focus to last item |
---|
| 293 | focus.focus(this._lastFocusItem); |
---|
| 294 | evt.stopPropagation(); |
---|
| 295 | evt.preventDefault(); |
---|
| 296 | }else if(node == this._lastFocusItem && !evt.shiftKey){ |
---|
| 297 | // if we are tabbing from last focusable item in dialog, send focus to first item |
---|
| 298 | focus.focus(this._firstFocusItem); |
---|
| 299 | evt.stopPropagation(); |
---|
| 300 | evt.preventDefault(); |
---|
| 301 | } |
---|
| 302 | }else if(this.closable && evt.keyCode == keys.ESCAPE){ |
---|
| 303 | this.onCancel(); |
---|
| 304 | evt.stopPropagation(); |
---|
| 305 | evt.preventDefault(); |
---|
| 306 | } |
---|
| 307 | }, |
---|
| 308 | |
---|
| 309 | show: function(){ |
---|
| 310 | // summary: |
---|
| 311 | // Display the dialog |
---|
| 312 | // returns: dojo/promise/Promise |
---|
| 313 | // Promise object that resolves when the display animation is complete |
---|
| 314 | |
---|
| 315 | if(this.open){ |
---|
| 316 | return; |
---|
| 317 | } |
---|
| 318 | |
---|
| 319 | if(!this._started){ |
---|
| 320 | this.startup(); |
---|
| 321 | } |
---|
| 322 | |
---|
| 323 | // first time we show the dialog, there's some initialization stuff to do |
---|
| 324 | if(!this._alreadyInitialized){ |
---|
| 325 | this._setup(); |
---|
| 326 | this._alreadyInitialized = true; |
---|
| 327 | } |
---|
| 328 | |
---|
| 329 | if(this._fadeOutDeferred){ |
---|
| 330 | // There's a hide() operation in progress, so cancel it, but still call DialogLevelManager.hide() |
---|
| 331 | // as though the hide() completed, in preparation for the DialogLevelManager.show() call below. |
---|
| 332 | this._fadeOutDeferred.cancel(); |
---|
| 333 | DialogLevelManager.hide(this); |
---|
| 334 | } |
---|
| 335 | |
---|
| 336 | // Recenter Dialog if user scrolls browser. Connecting to document doesn't work on IE, need to use window. |
---|
| 337 | var win = winUtils.get(this.ownerDocument); |
---|
| 338 | this._modalconnects.push(on(win, "scroll", lang.hitch(this, "resize"))); |
---|
| 339 | |
---|
| 340 | this._modalconnects.push(on(this.domNode, "keydown", lang.hitch(this, "_onKey"))); |
---|
| 341 | |
---|
| 342 | domStyle.set(this.domNode, { |
---|
| 343 | opacity: 0, |
---|
| 344 | display: "" |
---|
| 345 | }); |
---|
| 346 | |
---|
| 347 | this._set("open", true); |
---|
| 348 | this._onShow(); // lazy load trigger |
---|
| 349 | |
---|
| 350 | this._size(); |
---|
| 351 | this._position(); |
---|
| 352 | |
---|
| 353 | // fade-in Animation object, setup below |
---|
| 354 | var fadeIn; |
---|
| 355 | |
---|
| 356 | this._fadeInDeferred = new Deferred(lang.hitch(this, function(){ |
---|
| 357 | fadeIn.stop(); |
---|
| 358 | delete this._fadeInDeferred; |
---|
| 359 | })); |
---|
| 360 | |
---|
| 361 | // If delay is 0, code below will delete this._fadeInDeferred instantly, so grab promise while we can. |
---|
| 362 | var promise = this._fadeInDeferred.promise; |
---|
| 363 | |
---|
| 364 | fadeIn = fx.fadeIn({ |
---|
| 365 | node: this.domNode, |
---|
| 366 | duration: this.duration, |
---|
| 367 | beforeBegin: lang.hitch(this, function(){ |
---|
| 368 | DialogLevelManager.show(this, this.underlayAttrs); |
---|
| 369 | }), |
---|
| 370 | onEnd: lang.hitch(this, function(){ |
---|
| 371 | if(this.autofocus && DialogLevelManager.isTop(this)){ |
---|
| 372 | // find focusable items each time dialog is shown since if dialog contains a widget the |
---|
| 373 | // first focusable items can change |
---|
| 374 | this._getFocusItems(this.domNode); |
---|
| 375 | focus.focus(this._firstFocusItem); |
---|
| 376 | } |
---|
| 377 | this._fadeInDeferred.resolve(true); |
---|
| 378 | delete this._fadeInDeferred; |
---|
| 379 | }) |
---|
| 380 | }).play(); |
---|
| 381 | |
---|
| 382 | return promise; |
---|
| 383 | }, |
---|
| 384 | |
---|
| 385 | hide: function(){ |
---|
| 386 | // summary: |
---|
| 387 | // Hide the dialog |
---|
| 388 | // returns: dojo/promise/Promise |
---|
| 389 | // Promise object that resolves when the display animation is complete |
---|
| 390 | |
---|
| 391 | // If we haven't been initialized yet then we aren't showing and we can just return. |
---|
| 392 | // Likewise if we are already hidden, or are currently fading out. |
---|
| 393 | if(!this._alreadyInitialized || !this.open){ |
---|
| 394 | return; |
---|
| 395 | } |
---|
| 396 | if(this._fadeInDeferred){ |
---|
| 397 | this._fadeInDeferred.cancel(); |
---|
| 398 | } |
---|
| 399 | |
---|
| 400 | // fade-in Animation object, setup below |
---|
| 401 | var fadeOut; |
---|
| 402 | |
---|
| 403 | this._fadeOutDeferred = new Deferred(lang.hitch(this, function(){ |
---|
| 404 | fadeOut.stop(); |
---|
| 405 | delete this._fadeOutDeferred; |
---|
| 406 | })); |
---|
| 407 | |
---|
| 408 | // fire onHide when the promise resolves. |
---|
| 409 | this._fadeOutDeferred.then(lang.hitch(this, 'onHide')); |
---|
| 410 | |
---|
| 411 | // If delay is 0, code below will delete this._fadeOutDeferred instantly, so grab promise while we can. |
---|
| 412 | var promise = this._fadeOutDeferred.promise; |
---|
| 413 | |
---|
| 414 | fadeOut = fx.fadeOut({ |
---|
| 415 | node: this.domNode, |
---|
| 416 | duration: this.duration, |
---|
| 417 | onEnd: lang.hitch(this, function(){ |
---|
| 418 | this.domNode.style.display = "none"; |
---|
| 419 | DialogLevelManager.hide(this); |
---|
| 420 | this._fadeOutDeferred.resolve(true); |
---|
| 421 | delete this._fadeOutDeferred; |
---|
| 422 | }) |
---|
| 423 | }).play(); |
---|
| 424 | |
---|
| 425 | if(this._scrollConnected){ |
---|
| 426 | this._scrollConnected = false; |
---|
| 427 | } |
---|
| 428 | var h; |
---|
| 429 | while(h = this._modalconnects.pop()){ |
---|
| 430 | h.remove(); |
---|
| 431 | } |
---|
| 432 | |
---|
| 433 | if(this._relativePosition){ |
---|
| 434 | delete this._relativePosition; |
---|
| 435 | } |
---|
| 436 | this._set("open", false); |
---|
| 437 | |
---|
| 438 | return promise; |
---|
| 439 | }, |
---|
| 440 | |
---|
| 441 | resize: function(){ |
---|
| 442 | // summary: |
---|
| 443 | // Called when viewport scrolled or size changed. Adjust Dialog as necessary to keep it visible. |
---|
| 444 | // tags: |
---|
| 445 | // private |
---|
| 446 | if(this.domNode.style.display != "none"){ |
---|
| 447 | this._size(); |
---|
| 448 | if(!has("touch")){ |
---|
| 449 | // If the user has scrolled the display then reposition the Dialog. But don't do it for touch |
---|
| 450 | // devices, because it will counteract when a keyboard pops up and then the browser auto-scrolls |
---|
| 451 | // the focused node into view. |
---|
| 452 | this._position(); |
---|
| 453 | } |
---|
| 454 | } |
---|
| 455 | }, |
---|
| 456 | |
---|
| 457 | destroy: function(){ |
---|
| 458 | if(this._fadeInDeferred){ |
---|
| 459 | this._fadeInDeferred.cancel(); |
---|
| 460 | } |
---|
| 461 | if(this._fadeOutDeferred){ |
---|
| 462 | this._fadeOutDeferred.cancel(); |
---|
| 463 | } |
---|
| 464 | if(this._moveable){ |
---|
| 465 | this._moveable.destroy(); |
---|
| 466 | } |
---|
| 467 | var h; |
---|
| 468 | while(h = this._modalconnects.pop()){ |
---|
| 469 | h.remove(); |
---|
| 470 | } |
---|
| 471 | |
---|
| 472 | DialogLevelManager.hide(this); |
---|
| 473 | |
---|
| 474 | this.inherited(arguments); |
---|
| 475 | } |
---|
| 476 | }); |
---|
| 477 | |
---|
| 478 | if(has("dojo-bidi")){ |
---|
| 479 | _DialogBase = declare("dijit._DialogBase", _DialogBase, { |
---|
| 480 | _setTitleAttr: function(/*String*/ title){ |
---|
| 481 | this._set("title", title); |
---|
| 482 | this.titleNode.innerHTML = title; |
---|
| 483 | this.applyTextDir(this.titleNode); |
---|
| 484 | }, |
---|
| 485 | |
---|
| 486 | _setTextDirAttr: function(textDir){ |
---|
| 487 | if(this._created && this.textDir != textDir){ |
---|
| 488 | this._set("textDir", textDir); |
---|
| 489 | this.set("title", this.title); |
---|
| 490 | } |
---|
| 491 | } |
---|
| 492 | }); |
---|
| 493 | } |
---|
| 494 | |
---|
| 495 | var Dialog = declare("dijit.Dialog", [ContentPane, _DialogBase], { |
---|
| 496 | // summary: |
---|
| 497 | // A modal dialog Widget. |
---|
| 498 | // description: |
---|
| 499 | // Pops up a modal dialog window, blocking access to the screen |
---|
| 500 | // and also graying out the screen Dialog is extended from |
---|
| 501 | // ContentPane so it supports all the same parameters (href, etc.). |
---|
| 502 | // example: |
---|
| 503 | // | <div data-dojo-type="dijit/Dialog" data-dojo-props="href: 'test.html'"></div> |
---|
| 504 | // example: |
---|
| 505 | // | var foo = new Dialog({ title: "test dialog", content: "test content" }); |
---|
| 506 | // | foo.placeAt(win.body()); |
---|
| 507 | // | foo.startup(); |
---|
| 508 | }); |
---|
| 509 | Dialog._DialogBase = _DialogBase; // for monkey patching and dojox/widget/DialogSimple |
---|
| 510 | |
---|
| 511 | var DialogLevelManager = Dialog._DialogLevelManager = { |
---|
| 512 | // summary: |
---|
| 513 | // Controls the various active "levels" on the page, starting with the |
---|
| 514 | // stuff initially visible on the page (at z-index 0), and then having an entry for |
---|
| 515 | // each Dialog shown. |
---|
| 516 | |
---|
| 517 | _beginZIndex: 950, |
---|
| 518 | |
---|
| 519 | show: function(/*dijit/_WidgetBase*/ dialog, /*Object*/ underlayAttrs){ |
---|
| 520 | // summary: |
---|
| 521 | // Call right before fade-in animation for new dialog. |
---|
| 522 | // Saves current focus, displays/adjusts underlay for new dialog, |
---|
| 523 | // and sets the z-index of the dialog itself. |
---|
| 524 | // |
---|
| 525 | // New dialog will be displayed on top of all currently displayed dialogs. |
---|
| 526 | // |
---|
| 527 | // Caller is responsible for setting focus in new dialog after the fade-in |
---|
| 528 | // animation completes. |
---|
| 529 | |
---|
| 530 | // Save current focus |
---|
| 531 | ds[ds.length - 1].focus = focus.curNode; |
---|
| 532 | |
---|
| 533 | // Set z-index a bit above previous dialog |
---|
| 534 | var zIndex = ds[ds.length - 1].dialog ? ds[ds.length - 1].zIndex + 2 : Dialog._DialogLevelManager._beginZIndex; |
---|
| 535 | domStyle.set(dialog.domNode, 'zIndex', zIndex); |
---|
| 536 | |
---|
| 537 | // Display the underlay, or if already displayed then adjust for this new dialog |
---|
| 538 | DialogUnderlay.show(underlayAttrs, zIndex - 1); |
---|
| 539 | |
---|
| 540 | ds.push({dialog: dialog, underlayAttrs: underlayAttrs, zIndex: zIndex}); |
---|
| 541 | }, |
---|
| 542 | |
---|
| 543 | hide: function(/*dijit/_WidgetBase*/ dialog){ |
---|
| 544 | // summary: |
---|
| 545 | // Called when the specified dialog is hidden/destroyed, after the fade-out |
---|
| 546 | // animation ends, in order to reset page focus, fix the underlay, etc. |
---|
| 547 | // If the specified dialog isn't open then does nothing. |
---|
| 548 | // |
---|
| 549 | // Caller is responsible for either setting display:none on the dialog domNode, |
---|
| 550 | // or calling dijit/popup.hide(), or removing it from the page DOM. |
---|
| 551 | |
---|
| 552 | if(ds[ds.length - 1].dialog == dialog){ |
---|
| 553 | // Removing the top (or only) dialog in the stack, return focus |
---|
| 554 | // to previous dialog |
---|
| 555 | |
---|
| 556 | ds.pop(); |
---|
| 557 | |
---|
| 558 | var pd = ds[ds.length - 1]; // the new active dialog (or the base page itself) |
---|
| 559 | |
---|
| 560 | // Adjust underlay |
---|
| 561 | if(ds.length == 1){ |
---|
| 562 | // Returning to original page. Hide the underlay. |
---|
| 563 | DialogUnderlay.hide(); |
---|
| 564 | }else{ |
---|
| 565 | // Popping back to previous dialog, adjust underlay. |
---|
| 566 | DialogUnderlay.show(pd.underlayAttrs, pd.zIndex - 1); |
---|
| 567 | } |
---|
| 568 | |
---|
| 569 | // Adjust focus. |
---|
| 570 | // TODO: regardless of setting of dialog.refocus, if the exeucte() method set focus somewhere, |
---|
| 571 | // don't shift focus back to button. Note that execute() runs at the start of the fade-out but |
---|
| 572 | // this code runs later, at the end of the fade-out. Menu has code like this. |
---|
| 573 | if(dialog.refocus){ |
---|
| 574 | // If we are returning control to a previous dialog but for some reason |
---|
| 575 | // that dialog didn't have a focused field, set focus to first focusable item. |
---|
| 576 | // This situation could happen if two dialogs appeared at nearly the same time, |
---|
| 577 | // since a dialog doesn't set it's focus until the fade-in is finished. |
---|
| 578 | var focus = pd.focus; |
---|
| 579 | if(pd.dialog && (!focus || !dom.isDescendant(focus, pd.dialog.domNode))){ |
---|
| 580 | pd.dialog._getFocusItems(pd.dialog.domNode); |
---|
| 581 | focus = pd.dialog._firstFocusItem; |
---|
| 582 | } |
---|
| 583 | |
---|
| 584 | if(focus){ |
---|
| 585 | // Refocus the button that spawned the Dialog. This will fail in corner cases including |
---|
| 586 | // page unload on IE, because the dijit/form/Button that launched the Dialog may get destroyed |
---|
| 587 | // before this code runs. (#15058) |
---|
| 588 | try{ |
---|
| 589 | focus.focus(); |
---|
| 590 | }catch(e){ |
---|
| 591 | } |
---|
| 592 | } |
---|
| 593 | } |
---|
| 594 | }else{ |
---|
| 595 | // Removing a dialog out of order (#9944, #10705). |
---|
| 596 | // Don't need to mess with underlay or z-index or anything. |
---|
| 597 | var idx = array.indexOf(array.map(ds, function(elem){ |
---|
| 598 | return elem.dialog; |
---|
| 599 | }), dialog); |
---|
| 600 | if(idx != -1){ |
---|
| 601 | ds.splice(idx, 1); |
---|
| 602 | } |
---|
| 603 | } |
---|
| 604 | }, |
---|
| 605 | |
---|
| 606 | isTop: function(/*dijit/_WidgetBase*/ dialog){ |
---|
| 607 | // summary: |
---|
| 608 | // Returns true if specified Dialog is the top in the task |
---|
| 609 | return ds[ds.length - 1].dialog == dialog; |
---|
| 610 | } |
---|
| 611 | }; |
---|
| 612 | |
---|
| 613 | // Stack representing the various active "levels" on the page, starting with the |
---|
| 614 | // stuff initially visible on the page (at z-index 0), and then having an entry for |
---|
| 615 | // each Dialog shown. |
---|
| 616 | // Each element in stack has form { |
---|
| 617 | // dialog: dialogWidget, |
---|
| 618 | // focus: returnFromGetFocus(), |
---|
| 619 | // underlayAttrs: attributes to set on underlay (when this widget is active) |
---|
| 620 | // } |
---|
| 621 | var ds = Dialog._dialogStack = [ |
---|
| 622 | {dialog: null, focus: null, underlayAttrs: null} // entry for stuff at z-index: 0 |
---|
| 623 | ]; |
---|
| 624 | |
---|
| 625 | // If focus was accidentally removed from the dialog, such as if the user clicked a blank |
---|
| 626 | // area of the screen, or clicked the browser's address bar and then tabbed into the page, |
---|
| 627 | // then refocus. Won't do anything if focus was removed because the Dialog was closed, or |
---|
| 628 | // because a new Dialog popped up on top of the old one, or when focus moves to popups |
---|
| 629 | focus.watch("curNode", function(attr, oldNode, node){ |
---|
| 630 | // Note: if no dialogs, ds.length==1 but ds[ds.length-1].dialog is null |
---|
| 631 | var topDialog = ds[ds.length - 1].dialog; |
---|
| 632 | |
---|
| 633 | // If a node was focused, and there's a Dialog currently showing, and not in the process of fading out... |
---|
| 634 | // Ignore focus events on other document though because it's likely an Editor inside of the Dialog. |
---|
| 635 | if(node && topDialog && !topDialog._fadeOutDeferred && node.ownerDocument == topDialog.ownerDocument){ |
---|
| 636 | // If the node that was focused is inside the dialog or in a popup, even a context menu that isn't |
---|
| 637 | // technically a descendant of the the dialog, don't do anything. |
---|
| 638 | do{ |
---|
| 639 | if(node == topDialog.domNode || domClass.contains(node, "dijitPopup")){ return; } |
---|
| 640 | }while(node = node.parentNode); |
---|
| 641 | |
---|
| 642 | // Otherwise, return focus to the dialog. Use a delay to avoid confusing dijit/focus code's |
---|
| 643 | // own tracking of focus. |
---|
| 644 | topDialog.focus(); |
---|
| 645 | } |
---|
| 646 | }); |
---|
| 647 | |
---|
| 648 | // Back compat w/1.6, remove for 2.0 |
---|
| 649 | if(has("dijit-legacy-requires")){ |
---|
| 650 | ready(0, function(){ |
---|
| 651 | var requires = ["dijit/TooltipDialog"]; |
---|
| 652 | require(requires); // use indirection so modules not rolled into a build |
---|
| 653 | }); |
---|
| 654 | } |
---|
| 655 | |
---|
| 656 | return Dialog; |
---|
| 657 | }); |
---|