diff options
Diffstat (limited to 'lib/dijit/Dialog.js.uncompressed.js')
| -rw-r--r-- | lib/dijit/Dialog.js.uncompressed.js | 661 |
1 files changed, 661 insertions, 0 deletions
diff --git a/lib/dijit/Dialog.js.uncompressed.js b/lib/dijit/Dialog.js.uncompressed.js new file mode 100644 index 000000000..5122b716a --- /dev/null +++ b/lib/dijit/Dialog.js.uncompressed.js @@ -0,0 +1,661 @@ +require({cache:{ +'url:dijit/templates/Dialog.html':"<div class=\"dijitDialog\" role=\"dialog\" aria-labelledby=\"${id}_title\">\n\t<div data-dojo-attach-point=\"titleBar\" class=\"dijitDialogTitleBar\">\n\t\t<span data-dojo-attach-point=\"titleNode\" class=\"dijitDialogTitle\" id=\"${id}_title\"\n\t\t\t\trole=\"heading\" level=\"1\"></span>\n\t\t<span data-dojo-attach-point=\"closeButtonNode\" class=\"dijitDialogCloseIcon\" data-dojo-attach-event=\"ondijitclick: onCancel\" title=\"${buttonCancel}\" role=\"button\" tabIndex=\"-1\">\n\t\t\t<span data-dojo-attach-point=\"closeText\" class=\"closeText\" title=\"${buttonCancel}\">x</span>\n\t\t</span>\n\t</div>\n\t<div data-dojo-attach-point=\"containerNode\" class=\"dijitDialogPaneContent\"></div>\n</div>\n"}}); +define("dijit/Dialog", [ + "require", + "dojo/_base/array", // array.forEach array.indexOf array.map + "dojo/_base/connect", // connect._keypress + "dojo/_base/declare", // declare + "dojo/_base/Deferred", // Deferred + "dojo/dom", // dom.isDescendant + "dojo/dom-class", // domClass.add domClass.contains + "dojo/dom-geometry", // domGeometry.position + "dojo/dom-style", // domStyle.set + "dojo/_base/event", // event.stop + "dojo/_base/fx", // fx.fadeIn fx.fadeOut + "dojo/i18n", // i18n.getLocalization + "dojo/keys", + "dojo/_base/lang", // lang.mixin lang.hitch + "dojo/on", + "dojo/ready", + "dojo/sniff", // has("ie") has("opera") has("dijit-legacy-requires") + "dojo/window", // winUtils.getBox, winUtils.get + "dojo/dnd/Moveable", // Moveable + "dojo/dnd/TimedMoveable", // TimedMoveable + "./focus", + "./_base/manager", // manager.defaultDuration + "./_Widget", + "./_TemplatedMixin", + "./_CssStateMixin", + "./form/_FormMixin", + "./_DialogMixin", + "./DialogUnderlay", + "./layout/ContentPane", + "dojo/text!./templates/Dialog.html", + "./main", // for back-compat, exporting dijit._underlay (remove in 2.0) + "dojo/i18n!./nls/common" +], function(require, array, connect, declare, Deferred, + dom, domClass, domGeometry, domStyle, event, fx, i18n, keys, lang, on, ready, has, winUtils, + Moveable, TimedMoveable, focus, manager, _Widget, _TemplatedMixin, _CssStateMixin, _FormMixin, _DialogMixin, + DialogUnderlay, ContentPane, template, dijit){ + + // module: + // dijit/Dialog + + /*===== + dijit._underlay = function(kwArgs){ + // summary: + // A shared instance of a `dijit.DialogUnderlay` + // + // description: + // A shared instance of a `dijit.DialogUnderlay` created and + // used by `dijit.Dialog`, though never created until some Dialog + // or subclass thereof is shown. + }; + =====*/ + + var _DialogBase = declare("dijit._DialogBase", [_TemplatedMixin, _FormMixin, _DialogMixin, _CssStateMixin], { + templateString: template, + + baseClass: "dijitDialog", + + cssStateNodes: { + closeButtonNode: "dijitDialogCloseIcon" + }, + + // Map widget attributes to DOMNode attributes. + _setTitleAttr: [ + { node: "titleNode", type: "innerHTML" }, + { node: "titleBar", type: "attribute" } + ], + + // open: [readonly] Boolean + // True if Dialog is currently displayed on screen. + open: false, + + // duration: Integer + // The time in milliseconds it takes the dialog to fade in and out + duration: manager.defaultDuration, + + // refocus: Boolean + // A Toggle to modify the default focus behavior of a Dialog, which + // is to re-focus the element which had focus before being opened. + // False will disable refocusing. Default: true + refocus: true, + + // autofocus: Boolean + // A Toggle to modify the default focus behavior of a Dialog, which + // is to focus on the first dialog element after opening the dialog. + // False will disable autofocusing. Default: true + autofocus: true, + + // _firstFocusItem: [private readonly] DomNode + // The pointer to the first focusable node in the dialog. + // Set by `dijit/_DialogMixin._getFocusItems()`. + _firstFocusItem: null, + + // _lastFocusItem: [private readonly] DomNode + // The pointer to which node has focus prior to our dialog. + // Set by `dijit/_DialogMixin._getFocusItems()`. + _lastFocusItem: null, + + // doLayout: [protected] Boolean + // Don't change this parameter from the default value. + // This ContentPane parameter doesn't make sense for Dialog, since Dialog + // is never a child of a layout container, nor can you specify the size of + // Dialog in order to control the size of an inner widget. + doLayout: false, + + // draggable: Boolean + // Toggles the moveable aspect of the Dialog. If true, Dialog + // can be dragged by it's title. If false it will remain centered + // in the viewport. + draggable: true, + + _setDraggableAttr: function(/*Boolean*/ val){ + // Avoid _WidgetBase behavior of copying draggable attribute to this.domNode, + // as that prevents text select on modern browsers (#14452) + this._set("draggable", val); + }, + + // aria-describedby: String + // Allows the user to add an aria-describedby attribute onto the dialog. The value should + // be the id of the container element of text that describes the dialog purpose (usually + // the first text in the dialog). + // | <div data-dojo-type="dijit/Dialog" aria-describedby="intro" .....> + // | <div id="intro">Introductory text</div> + // | <div>rest of dialog contents</div> + // | </div> + "aria-describedby": "", + + // maxRatio: Number + // Maximum size to allow the dialog to expand to, relative to viewport size + maxRatio: 0.9, + + postMixInProperties: function(){ + var _nlsResources = i18n.getLocalization("dijit", "common"); + lang.mixin(this, _nlsResources); + this.inherited(arguments); + }, + + postCreate: function(){ + domStyle.set(this.domNode, { + display: "none", + position:"absolute" + }); + this.ownerDocumentBody.appendChild(this.domNode); + + this.inherited(arguments); + + this.connect(this, "onExecute", "hide"); + this.connect(this, "onCancel", "hide"); + this._modalconnects = []; + }, + + onLoad: function(){ + // summary: + // Called when data has been loaded from an href. + // Unlike most other callbacks, this function can be connected to (via `dojo.connect`) + // but should *not* be overridden. + // tags: + // callback + + // when href is specified we need to reposition the dialog after the data is loaded + // and find the focusable elements + this._position(); + if(this.autofocus && DialogLevelManager.isTop(this)){ + this._getFocusItems(this.domNode); + focus.focus(this._firstFocusItem); + } + this.inherited(arguments); + }, + + _onBlur: function(by){ + this.inherited(arguments); + + // If focus was accidentally removed from the dialog, such as if the user clicked a blank + // area of the screen, or clicked the browser's address bar and then tabbed into the page, + // then refocus. Won't do anything if focus was removed because the Dialog was closed, or + // because a new Dialog popped up on top of the old one. + var refocus = lang.hitch(this, function(){ + if(this.open && !this._destroyed && DialogLevelManager.isTop(this)){ + this._getFocusItems(this.domNode); + focus.focus(this._firstFocusItem); + } + }); + if(by == "mouse"){ + // wait for mouse up, and then refocus dialog; otherwise doesn't work + on.once(this.ownerDocument, "mouseup", refocus); + }else{ + refocus(); + } + }, + + _endDrag: function(){ + // summary: + // Called after dragging the Dialog. Saves the position of the dialog in the viewport, + // and also adjust position to be fully within the viewport, so user doesn't lose access to handle + var nodePosition = domGeometry.position(this.domNode), + viewport = winUtils.getBox(this.ownerDocument); + nodePosition.y = Math.min(Math.max(nodePosition.y, 0), (viewport.h - nodePosition.h)); + nodePosition.x = Math.min(Math.max(nodePosition.x, 0), (viewport.w - nodePosition.w)); + this._relativePosition = nodePosition; + this._position(); + }, + + _setup: function(){ + // summary: + // Stuff we need to do before showing the Dialog for the first + // time (but we defer it until right beforehand, for + // performance reasons). + // tags: + // private + + var node = this.domNode; + + if(this.titleBar && this.draggable){ + this._moveable = new ((has("ie") == 6) ? TimedMoveable // prevent overload, see #5285 + : Moveable)(node, { handle: this.titleBar }); + this.connect(this._moveable, "onMoveStop", "_endDrag"); + }else{ + domClass.add(node,"dijitDialogFixed"); + } + + this.underlayAttrs = { + dialogId: this.id, + "class": array.map(this["class"].split(/\s/), function(s){ return s+"_underlay"; }).join(" "), + ownerDocument: this.ownerDocument + }; + }, + + _size: function(){ + // summary: + // If necessary, shrink dialog contents so dialog fits in viewport + // tags: + // private + + this._checkIfSingleChild(); + + // If we resized the dialog contents earlier, reset them back to original size, so + // that if the user later increases the viewport size, the dialog can display w/out a scrollbar. + // Need to do this before the domGeometry.position(this.domNode) call below. + if(this._singleChild){ + if(typeof this._singleChildOriginalStyle != "undefined"){ + this._singleChild.domNode.style.cssText = this._singleChildOriginalStyle; + delete this._singleChildOriginalStyle; + } + }else{ + domStyle.set(this.containerNode, { + width:"auto", + height:"auto" + }); + } + + var bb = domGeometry.position(this.domNode); + + // Get viewport size but then reduce it by a bit; Dialog should always have some space around it + // to indicate that it's a popup. This will also compensate for possible scrollbars on viewport. + var viewport = winUtils.getBox(this.ownerDocument); + viewport.w *= this.maxRatio; + viewport.h *= this.maxRatio; + + if(bb.w >= viewport.w || bb.h >= viewport.h){ + // Reduce size of dialog contents so that dialog fits in viewport + + var containerSize = domGeometry.position(this.containerNode), + w = Math.min(bb.w, viewport.w) - (bb.w - containerSize.w), + h = Math.min(bb.h, viewport.h) - (bb.h - containerSize.h); + + if(this._singleChild && this._singleChild.resize){ + if(typeof this._singleChildOriginalStyle == "undefined"){ + this._singleChildOriginalStyle = this._singleChild.domNode.style.cssText; + } + this._singleChild.resize({w: w, h: h}); + }else{ + domStyle.set(this.containerNode, { + width: w + "px", + height: h + "px", + overflow: "auto", + position: "relative" // workaround IE bug moving scrollbar or dragging dialog + }); + } + }else{ + if(this._singleChild && this._singleChild.resize){ + this._singleChild.resize(); + } + } + }, + + _position: function(){ + // summary: + // Position modal dialog in the viewport. If no relative offset + // in the viewport has been determined (by dragging, for instance), + // center the node. Otherwise, use the Dialog's stored relative offset, + // and position the node to top: left: values based on the viewport. + if(!domClass.contains(this.ownerDocumentBody, "dojoMove")){ // don't do anything if called during auto-scroll + var node = this.domNode, + viewport = winUtils.getBox(this.ownerDocument), + p = this._relativePosition, + bb = p ? null : domGeometry.position(node), + l = Math.floor(viewport.l + (p ? p.x : (viewport.w - bb.w) / 2)), + t = Math.floor(viewport.t + (p ? p.y : (viewport.h - bb.h) / 2)) + ; + domStyle.set(node,{ + left: l + "px", + top: t + "px" + }); + } + }, + + _onKey: function(/*Event*/ evt){ + // summary: + // Handles the keyboard events for accessibility reasons + // tags: + // private + + if(evt.charOrCode){ + var node = evt.target; + if(evt.charOrCode === keys.TAB){ + this._getFocusItems(this.domNode); + } + var singleFocusItem = (this._firstFocusItem == this._lastFocusItem); + // see if we are shift-tabbing from first focusable item on dialog + if(node == this._firstFocusItem && evt.shiftKey && evt.charOrCode === keys.TAB){ + if(!singleFocusItem){ + focus.focus(this._lastFocusItem); // send focus to last item in dialog + } + event.stop(evt); + }else if(node == this._lastFocusItem && evt.charOrCode === keys.TAB && !evt.shiftKey){ + if(!singleFocusItem){ + focus.focus(this._firstFocusItem); // send focus to first item in dialog + } + event.stop(evt); + }else{ + // see if the key is for the dialog + while(node){ + if(node == this.domNode || domClass.contains(node, "dijitPopup")){ + if(evt.charOrCode == keys.ESCAPE){ + this.onCancel(); + }else{ + return; // just let it go + } + } + node = node.parentNode; + } + // this key is for the disabled document window + if(evt.charOrCode !== keys.TAB){ // allow tabbing into the dialog for a11y + event.stop(evt); + // opera won't tab to a div + }else if(!has("opera")){ + try{ + this._firstFocusItem.focus(); + }catch(e){ /*squelch*/ } + } + } + } + }, + + show: function(){ + // summary: + // Display the dialog + // returns: dojo/_base/Deferred + // Deferred object that resolves when the display animation is complete + + if(this.open){ return; } + + if(!this._started){ + this.startup(); + } + + // first time we show the dialog, there's some initialization stuff to do + if(!this._alreadyInitialized){ + this._setup(); + this._alreadyInitialized=true; + } + + if(this._fadeOutDeferred){ + this._fadeOutDeferred.cancel(); + } + + // Recenter Dialog if user scrolls browser. Connecting to document doesn't work on IE, need to use window. + var win = winUtils.get(this.ownerDocument); + this._modalconnects.push(on(win, "scroll", lang.hitch(this, "resize"))); + + this._modalconnects.push(on(this.domNode, connect._keypress, lang.hitch(this, "_onKey"))); + + domStyle.set(this.domNode, { + opacity:0, + display:"" + }); + + this._set("open", true); + this._onShow(); // lazy load trigger + + this._size(); + this._position(); + + // fade-in Animation object, setup below + var fadeIn; + + this._fadeInDeferred = new Deferred(lang.hitch(this, function(){ + fadeIn.stop(); + delete this._fadeInDeferred; + })); + + fadeIn = fx.fadeIn({ + node: this.domNode, + duration: this.duration, + beforeBegin: lang.hitch(this, function(){ + DialogLevelManager.show(this, this.underlayAttrs); + }), + onEnd: lang.hitch(this, function(){ + if(this.autofocus && DialogLevelManager.isTop(this)){ + // find focusable items each time dialog is shown since if dialog contains a widget the + // first focusable items can change + this._getFocusItems(this.domNode); + focus.focus(this._firstFocusItem); + } + this._fadeInDeferred.resolve(true); + delete this._fadeInDeferred; + }) + }).play(); + + return this._fadeInDeferred; + }, + + hide: function(){ + // summary: + // Hide the dialog + // returns: dojo/_base/Deferred + // Deferred object that resolves when the hide animation is complete + + // If we haven't been initialized yet then we aren't showing and we can just return. + // Likewise if we are already hidden, or are currently fading out. + if(!this._alreadyInitialized || !this.open){ + return; + } + if(this._fadeInDeferred){ + this._fadeInDeferred.cancel(); + } + + // fade-in Animation object, setup below + var fadeOut; + + this._fadeOutDeferred = new Deferred(lang.hitch(this, function(){ + fadeOut.stop(); + delete this._fadeOutDeferred; + })); + // fire onHide when the promise resolves. + this._fadeOutDeferred.then(lang.hitch(this, 'onHide')); + + fadeOut = fx.fadeOut({ + node: this.domNode, + duration: this.duration, + onEnd: lang.hitch(this, function(){ + this.domNode.style.display = "none"; + DialogLevelManager.hide(this); + this._fadeOutDeferred.resolve(true); + delete this._fadeOutDeferred; + }) + }).play(); + + if(this._scrollConnected){ + this._scrollConnected = false; + } + var h; + while(h = this._modalconnects.pop()){ + h.remove(); + } + + if(this._relativePosition){ + delete this._relativePosition; + } + this._set("open", false); + + return this._fadeOutDeferred; + }, + + resize: function(){ + // summary: + // Called when viewport scrolled or size changed. Position the Dialog and the underlay. + // tags: + // private + if(this.domNode.style.display != "none"){ + if(DialogUnderlay._singleton){ // avoid race condition during show() + DialogUnderlay._singleton.layout(); + } + this._position(); + this._size(); + } + }, + + destroy: function(){ + if(this._fadeInDeferred){ + this._fadeInDeferred.cancel(); + } + if(this._fadeOutDeferred){ + this._fadeOutDeferred.cancel(); + } + if(this._moveable){ + this._moveable.destroy(); + } + var h; + while(h = this._modalconnects.pop()){ + h.remove(); + } + + DialogLevelManager.hide(this); + + this.inherited(arguments); + } + }); + + var Dialog = declare("dijit.Dialog", [ContentPane, _DialogBase], { + // summary: + // A modal dialog Widget. + // description: + // Pops up a modal dialog window, blocking access to the screen + // and also graying out the screen Dialog is extended from + // ContentPane so it supports all the same parameters (href, etc.). + // example: + // | <div data-dojo-type="dijit/Dialog" data-dojo-props="href: 'test.html'"></div> + // example: + // | var foo = new Dialog({ title: "test dialog", content: "test content" }; + // | foo.placeAt(win.body()); + // | foo.startup(); + }); + Dialog._DialogBase = _DialogBase; // for monkey patching and dojox/widget/DialogSimple + + var DialogLevelManager = Dialog._DialogLevelManager = { + // summary: + // Controls the various active "levels" on the page, starting with the + // stuff initially visible on the page (at z-index 0), and then having an entry for + // each Dialog shown. + + _beginZIndex: 950, + + show: function(/*dijit/_WidgetBase*/ dialog, /*Object*/ underlayAttrs){ + // summary: + // Call right before fade-in animation for new dialog. + // Saves current focus, displays/adjusts underlay for new dialog, + // and sets the z-index of the dialog itself. + // + // New dialog will be displayed on top of all currently displayed dialogs. + // + // Caller is responsible for setting focus in new dialog after the fade-in + // animation completes. + + // Save current focus + ds[ds.length-1].focus = focus.curNode; + + // Display the underlay, or if already displayed then adjust for this new dialog + // TODO: one underlay per document (based on dialog.ownerDocument) + var underlay = DialogUnderlay._singleton; + if(!underlay || underlay._destroyed){ + underlay = dijit._underlay = DialogUnderlay._singleton = new DialogUnderlay(underlayAttrs); + }else{ + underlay.set(dialog.underlayAttrs); + } + + // Set z-index a bit above previous dialog + var zIndex = ds[ds.length-1].dialog ? ds[ds.length-1].zIndex + 2 : Dialog._DialogLevelManager._beginZIndex; + if(ds.length == 1){ // first dialog + underlay.show(); + } + domStyle.set(DialogUnderlay._singleton.domNode, 'zIndex', zIndex - 1); + + // Dialog + domStyle.set(dialog.domNode, 'zIndex', zIndex); + + ds.push({dialog: dialog, underlayAttrs: underlayAttrs, zIndex: zIndex}); + }, + + hide: function(/*dijit/_WidgetBase*/ dialog){ + // summary: + // Called when the specified dialog is hidden/destroyed, after the fade-out + // animation ends, in order to reset page focus, fix the underlay, etc. + // If the specified dialog isn't open then does nothing. + // + // Caller is responsible for either setting display:none on the dialog domNode, + // or calling dijit/popup.hide(), or removing it from the page DOM. + + if(ds[ds.length-1].dialog == dialog){ + // Removing the top (or only) dialog in the stack, return focus + // to previous dialog + + ds.pop(); + + var pd = ds[ds.length-1]; // the new active dialog (or the base page itself) + + // Adjust underlay, unless the underlay widget has already been destroyed + // because we are being called during page unload (when all widgets are destroyed) + if(!DialogUnderlay._singleton._destroyed){ + if(ds.length == 1){ + // Returning to original page. Hide the underlay. + DialogUnderlay._singleton.hide(); + }else{ + // Popping back to previous dialog, adjust underlay. + domStyle.set(DialogUnderlay._singleton.domNode, 'zIndex', pd.zIndex - 1); + DialogUnderlay._singleton.set(pd.underlayAttrs); + } + } + + // Adjust focus + if(dialog.refocus){ + // If we are returning control to a previous dialog but for some reason + // that dialog didn't have a focused field, set focus to first focusable item. + // This situation could happen if two dialogs appeared at nearly the same time, + // since a dialog doesn't set it's focus until the fade-in is finished. + var focus = pd.focus; + if(pd.dialog && (!focus || !dom.isDescendant(focus, pd.dialog.domNode))){ + pd.dialog._getFocusItems(pd.dialog.domNode); + focus = pd.dialog._firstFocusItem; + } + + if(focus){ + // Refocus the button that spawned the Dialog. This will fail in corner cases including + // page unload on IE, because the dijit/form/Button that launched the Dialog may get destroyed + // before this code runs. (#15058) + try{ + focus.focus(); + }catch(e){} + } + } + }else{ + // Removing a dialog out of order (#9944, #10705). + // Don't need to mess with underlay or z-index or anything. + var idx = array.indexOf(array.map(ds, function(elem){return elem.dialog}), dialog); + if(idx != -1){ + ds.splice(idx, 1); + } + } + }, + + isTop: function(/*dijit/_WidgetBase*/ dialog){ + // summary: + // Returns true if specified Dialog is the top in the task + return ds[ds.length-1].dialog == dialog; + } + }; + + // Stack representing the various active "levels" on the page, starting with the + // stuff initially visible on the page (at z-index 0), and then having an entry for + // each Dialog shown. + // Each element in stack has form { + // dialog: dialogWidget, + // focus: returnFromGetFocus(), + // underlayAttrs: attributes to set on underlay (when this widget is active) + // } + var ds = Dialog._dialogStack = [ + {dialog: null, focus: null, underlayAttrs: null} // entry for stuff at z-index: 0 + ]; + + // Back compat w/1.6, remove for 2.0 + if(has("dijit-legacy-requires")){ + ready(0, function(){ + var requires = ["dijit/TooltipDialog"]; + require(requires); // use indirection so modules not rolled into a build + }); + } + + return Dialog; +}); |