123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411 |
- if (!dojo._hasResource["dijit.Dialog"]) { // _hasResource checks added by
- // build. Do not use _hasResource
- // directly in your code.
- dojo._hasResource["dijit.Dialog"] = true;
- dojo.provide("dijit.Dialog");
- dojo.require("dojo.dnd.move");
- dojo.require("dojo.fx");
- dojo.require("dijit._Widget");
- dojo.require("dijit._Templated");
- dojo.require("dijit.layout.ContentPane");
- dojo.require("dijit.form.Form");
- dojo.declare("dijit.DialogUnderlay", [dijit._Widget, dijit._Templated], {
- // summary: the thing that grays out the screen behind the dialog
- // Template has two divs; outer div is used for fade-in/fade-out, and
- // also to hold background iframe.
- // Inner div has opacity specified in CSS file.
- templateString : "<div class=dijitDialogUnderlayWrapper id='${id}_underlay'><div class=dijitDialogUnderlay dojoAttachPoint='node'></div></div>",
- postCreate : function() {
- dojo.body().appendChild(this.domNode);
- this.bgIframe = new dijit.BackgroundIframe(this.domNode);
- },
- layout : function() {
- // summary
- // Sets the background to the size of the viewport (rather than the
- // size
- // of the document) since we need to cover the whole browser window,
- // even
- // if the document is only a few lines long.
- var viewport = dijit.getViewport();
- var is = this.node.style, os = this.domNode.style;
- os.top = viewport.t + "px";
- os.left = viewport.l + "px";
- is.width = viewport.w + "px";
- is.height = viewport.h + "px";
- // process twice since the scroll bar may have been removed
- // by the previous resizing
- var viewport2 = dijit.getViewport();
- if (viewport.w != viewport2.w) {
- is.width = viewport2.w + "px";
- }
- if (viewport.h != viewport2.h) {
- is.height = viewport2.h + "px";
- }
- },
- show : function() {
- this.domNode.style.display = "block";
- this.layout();
- if (this.bgIframe.iframe) {
- this.bgIframe.iframe.style.display = "block";
- }
- this._resizeHandler = this.connect(window, "onresize", "layout");
- },
- hide : function() {
- this.domNode.style.display = "none";
- if (this.bgIframe.iframe) {
- this.bgIframe.iframe.style.display = "none";
- }
- this.disconnect(this._resizeHandler);
- },
- uninitialize : function() {
- if (this.bgIframe) {
- this.bgIframe.destroy();
- }
- }
- });
- dojo.declare("dijit.Dialog", [dijit.layout.ContentPane, dijit._Templated,
- dijit.form._FormMixin], {
- // summary:
- // 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.)
- templateString : null,
- templateString : "<div class=\"dijitDialog\">\n\t<div dojoAttachPoint=\"titleBar\" class=\"dijitDialogTitleBar\" tabindex=\"0\" waiRole=\"dialog\">\n\t<span dojoAttachPoint=\"titleNode\" class=\"dijitDialogTitle\">${title}</span>\n\t<span dojoAttachPoint=\"closeButtonNode\" class=\"dijitDialogCloseIcon\" dojoAttachEvent=\"onclick: hide\">\n\t\t<span dojoAttachPoint=\"closeText\" class=\"closeText\">x</span>\n\t</span>\n\t</div>\n\t\t<div dojoAttachPoint=\"containerNode\" class=\"dijitDialogPaneContent\"></div>\n\t<span dojoAttachPoint=\"tabEnd\" dojoAttachEvent=\"onfocus:_cycleFocus\" tabindex=\"0\"></span>\n</div>\n",
- // open: Boolean
- // is True or False depending on state of dialog
- open : false,
- // duration: Integer
- // The time in milliseconds it takes the dialog to fade in and
- // out
- duration : 400,
- _lastFocusItem : null,
- attributeMap : dojo.mixin(dojo
- .clone(dijit._Widget.prototype.attributeMap), {
- title : "titleBar"
- }),
- postCreate : function() {
- dojo.body().appendChild(this.domNode);
- this.inherited("postCreate", arguments);
- this.domNode.style.display = "none";
- this.connect(this, "onExecute", "hide");
- this.connect(this, "onCancel", "hide");
- },
- onLoad : function() {
- // summary:
- // when href is specified we need to reposition the dialog
- // after the data is loaded
- this._position();
- this.inherited("onLoad", arguments);
- },
- _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)
- this._modalconnects = [];
- if (this.titleBar) {
- this._moveable = new dojo.dnd.Moveable(this.domNode, {
- handle : this.titleBar
- });
- }
- this._underlay = new dijit.DialogUnderlay();
- var node = this.domNode;
- this._fadeIn = dojo.fx.combine([dojo.fadeIn({
- node : node,
- duration : this.duration
- }), dojo.fadeIn({
- node : this._underlay.domNode,
- duration : this.duration,
- onBegin : dojo.hitch(
- this._underlay, "show")
- })]);
- this._fadeOut = dojo.fx.combine([dojo.fadeOut({
- node : node,
- duration : this.duration,
- onEnd : function() {
- node.style.display = "none";
- }
- }), dojo.fadeOut({
- node : this._underlay.domNode,
- duration : this.duration,
- onEnd : dojo.hitch(
- this._underlay, "hide")
- })]);
- },
- uninitialize : function() {
- if (this._underlay) {
- this._underlay.destroy();
- }
- },
- _position : function() {
- // summary: position modal dialog in center of screen
- if (dojo.hasClass(dojo.body(), "dojoMove")) {
- return;
- }
- var viewport = dijit.getViewport();
- var mb = dojo.marginBox(this.domNode);
- var style = this.domNode.style;
- style.left = Math.floor((viewport.l + (viewport.w - mb.w)
- / 2))
- + "px";
- style.top = Math.floor((viewport.t + (viewport.h - mb.h)
- / 2))
- + "px";
- },
- _findLastFocus : function(/* Event */evt) {
- // summary: called from onblur of dialog container to
- // determine the last focusable item
- this._lastFocused = evt.target;
- },
- _cycleFocus : function(/* Event */evt) {
- // summary: when tabEnd receives focus, advance focus around
- // to titleBar
- // on first focus to tabEnd, store the last focused item in
- // dialog
- if (!this._lastFocusItem) {
- this._lastFocusItem = this._lastFocused;
- }
- this.titleBar.focus();
- },
- _onKey : function(/* Event */evt) {
- if (evt.keyCode) {
- var node = evt.target;
- // see if we are shift-tabbing from titleBar
- if (node == this.titleBar && evt.shiftKey
- && evt.keyCode == dojo.keys.TAB) {
- if (this._lastFocusItem) {
- this._lastFocusItem.focus(); // send focus to
- // last item in
- // dialog if
- // known
- }
- dojo.stopEvent(evt);
- } else {
- // see if the key is for the dialog
- while (node) {
- if (node == this.domNode) {
- if (evt.keyCode == dojo.keys.ESCAPE) {
- this.hide();
- } else {
- return; // just let it go
- }
- }
- node = node.parentNode;
- }
- // this key is for the disabled document window
- if (evt.keyCode != dojo.keys.TAB) { // allow tabbing
- // into the
- // dialog for
- // a11y
- dojo.stopEvent(evt);
- // opera won't tab to a div
- } else if (!dojo.isOpera) {
- try {
- this.titleBar.focus();
- } catch (e) {/* squelch */
- }
- }
- }
- }
- },
- show : function() {
- // summary: display the dialog
- // first time we show the dialog, there's some
- // initialization stuff to do
- if (!this._alreadyInitialized) {
- this._setup();
- this._alreadyInitialized = true;
- }
- if (this._fadeOut.status() == "playing") {
- this._fadeOut.stop();
- }
- this._modalconnects.push(dojo.connect(window, "onscroll",
- this, "layout"));
- this._modalconnects.push(dojo.connect(
- document.documentElement, "onkeypress", this,
- "_onKey"));
- // IE doesn't bubble onblur events - use ondeactivate
- // instead
- var ev = typeof(document.ondeactivate) == "object"
- ? "ondeactivate"
- : "onblur";
- this._modalconnects.push(dojo.connect(this.containerNode,
- ev, this, "_findLastFocus"));
- dojo.style(this.domNode, "opacity", 0);
- this.domNode.style.display = "block";
- this.open = true;
- this._loadCheck(); // lazy load trigger
- this._position();
- this._fadeIn.play();
- this._savedFocus = dijit.getFocus(this);
- // set timeout to allow the browser to render dialog
- setTimeout(dojo.hitch(this, function() {
- dijit.focus(this.titleBar);
- }), 50);
- },
- hide : function() {
- // summary
- // Hide the dialog
- // if we haven't been initialized yet then we aren't showing
- // and we can just return
- if (!this._alreadyInitialized) {
- return;
- }
- if (this._fadeIn.status() == "playing") {
- this._fadeIn.stop();
- }
- this._fadeOut.play();
- if (this._scrollConnected) {
- this._scrollConnected = false;
- }
- dojo.forEach(this._modalconnects, dojo.disconnect);
- this._modalconnects = [];
- this.connect(this._fadeOut, "onEnd", dojo.hitch(this,
- function() {
- dijit.focus(this._savedFocus);
- }));
- this.open = false;
- },
- layout : function() {
- // summary: position the Dialog and the underlay
- if (this.domNode.style.display == "block") {
- this._underlay.layout();
- this._position();
- }
- }
- });
- dojo.declare("dijit.TooltipDialog", [dijit.layout.ContentPane,
- dijit._Templated, dijit.form._FormMixin], {
- // summary:
- // Pops up a dialog that appears like a Tooltip
- // title: String
- // Description of tooltip dialog (required for a11Y)
- title : "",
- _lastFocusItem : null,
- templateString : null,
- templateString : "<div class=\"dijitTooltipDialog\" >\n\t<div class=\"dijitTooltipContainer\">\n\t\t<div class =\"dijitTooltipContents dijitTooltipFocusNode\" dojoAttachPoint=\"containerNode\" tabindex=\"0\" waiRole=\"dialog\"></div>\n\t</div>\n\t<span dojoAttachPoint=\"tabEnd\" tabindex=\"0\" dojoAttachEvent=\"focus:_cycleFocus\"></span>\n\t<div class=\"dijitTooltipConnector\" ></div>\n</div>\n",
- postCreate : function() {
- this.inherited("postCreate", arguments);
- this.connect(this.containerNode, "onkeypress", "_onKey");
- // IE doesn't bubble onblur events - use ondeactivate
- // instead
- var ev = typeof(document.ondeactivate) == "object"
- ? "ondeactivate"
- : "onblur";
- this.connect(this.containerNode, ev, "_findLastFocus");
- this.containerNode.title = this.title;
- },
- orient : function(/* Object */corner) {
- // summary: configure widget to be displayed in given
- // position relative to the button
- this.domNode.className = "dijitTooltipDialog "
- + " dijitTooltipAB"
- + (corner.charAt(1) == 'L' ? "Left" : "Right")
- + " dijitTooltip"
- + (corner.charAt(0) == 'T' ? "Below" : "Above");
- },
- onOpen : function(/* Object */pos) {
- // summary: called when dialog is displayed
- this.orient(pos.corner);
- this._loadCheck(); // lazy load trigger
- this.containerNode.focus();
- },
- _onKey : function(/* Event */evt) {
- // summary: keep keyboard focus in dialog; close dialog on
- // escape key
- if (evt.keyCode == dojo.keys.ESCAPE) {
- this.onCancel();
- } else if (evt.target == this.containerNode && evt.shiftKey
- && evt.keyCode == dojo.keys.TAB) {
- if (this._lastFocusItem) {
- this._lastFocusItem.focus();
- }
- dojo.stopEvent(evt);
- } else if (evt.keyCode == dojo.keys.TAB) {
- // we want the browser's default tab handling to move
- // focus
- // but we don't want the tab to propagate upwards
- evt.stopPropagation();
- }
- },
- _findLastFocus : function(/* Event */evt) {
- // summary: called from onblur of dialog container to
- // determine the last focusable item
- this._lastFocused = evt.target;
- },
- _cycleFocus : function(/* Event */evt) {
- // summary: when tabEnd receives focus, advance focus around
- // to containerNode
- // on first focus to tabEnd, store the last focused item in
- // dialog
- if (!this._lastFocusItem) {
- this._lastFocusItem = this._lastFocused;
- }
- this.containerNode.focus();
- }
- });
- }
|