git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/Dialog.js

   1 if(!dojo._hasResource["dijit.Dialog"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
   2 dojo._hasResource["dijit.Dialog"] = true;
   3 dojo.provide("dijit.Dialog");
   4
   5 dojo.require("dojo.dnd.TimedMoveable");
   6 dojo.require("dojo.fx");
   7
   8 dojo.require("dijit._Widget");
   9 dojo.require("dijit._Templated");
  10 dojo.require("dijit.layout.ContentPane");
  11 dojo.require("dijit.form.Form");
  12 dojo.requireLocalization("dijit", "common", null, "zh,pt,da,tr,ru,de,sv,ja,he,fi,nb,el,ar,ROOT,pt-pt,cs,fr,es,ko,nl,zh-tw,pl,it,hu");
  13
  14 dojo.declare(
  15         "dijit.DialogUnderlay",
  16         [dijit._Widget, dijit._Templated],
  17         {
  18                 // summary: The component that grays out the screen behind the dialog
  19
  20                 // Template has two divs; outer div is used for fade-in/fade-out, and also to hold background iframe.
  21                 // Inner div has opacity specified in CSS file.
  22                 templateString: "<div class='dijitDialogUnderlayWrapper' id='${id}_wrapper'><div class='dijitDialogUnderlay ${class}' id='${id}' dojoAttachPoint='node'></div></div>",
  23
  24                 attributeMap: {},
  25
  26                 postCreate: function(){
  27                         // summary: Append the underlay to the body
  28                         dojo.body().appendChild(this.domNode);
  29                         this.bgIframe = new dijit.BackgroundIframe(this.domNode);
  30                 },
  31
  32                 layout: function(){
  33                         // summary: Sets the background to the size of the viewport
  34                         //
  35                         // description:
  36                         //      Sets the background to the size of the viewport (rather than the size
  37                         //      of the document) since we need to cover the whole browser window, even
  38                         //      if the document is only a few lines long.
  39
  40                         var viewport = dijit.getViewport();
  41                         var is = this.node.style,
  42                                 os = this.domNode.style;
  43
  44                         os.top = viewport.t + "px";
  45                         os.left = viewport.l + "px";
  46                         is.width = viewport.w + "px";
  47                         is.height = viewport.h + "px";
  48
  49                         // process twice since the scroll bar may have been removed
  50                         // by the previous resizing
  51                         var viewport2 = dijit.getViewport();
  52                         if(viewport.w != viewport2.w){ is.width = viewport2.w + "px"; }
  53                         if(viewport.h != viewport2.h){ is.height = viewport2.h + "px"; }
  54                 },
  55
  56                 show: function(){
  57                         // summary: Show the dialog underlay
  58                         this.domNode.style.display = "block";
  59                         this.layout();
  60                         if(this.bgIframe.iframe){
  61                                 this.bgIframe.iframe.style.display = "block";
  62                         }
  63                         this._resizeHandler = this.connect(window, "onresize", "layout");
  64                 },
  65
  66                 hide: function(){
  67                         // summary: hides the dialog underlay
  68                         this.domNode.style.display = "none";
  69                         if(this.bgIframe.iframe){
  70                                 this.bgIframe.iframe.style.display = "none";
  71                         }
  72                         this.disconnect(this._resizeHandler);
  73                 },
  74
  75                 uninitialize: function(){
  76                         if(this.bgIframe){
  77                                 this.bgIframe.destroy();
  78                         }
  79                 }
  80         }
  81 );
  82
  83
  84 dojo.declare("dijit._DialogMixin", null,
  85         {
  86                 attributeMap: dijit._Widget.prototype.attributeMap,
  87
  88                 // execute: Function
  89                 //      User defined function to do stuff when the user hits the submit button
  90                 execute: function(/*Object*/ formContents){},
  91
  92                 // onCancel: Function
  93                 //      Callback when user has canceled dialog, to notify container
  94                 //      (user shouldn't override)
  95                 onCancel: function(){},
  96
  97                 // onExecute: Function
  98                 //      Callback when user is about to execute dialog, to notify container
  99                 //      (user shouldn't override)
 100                 onExecute: function(){},
 101
 102                 _onSubmit: function(){
 103                         // summary: callback when user hits submit button
 104                         this.onExecute();       // notify container that we are about to execute
 105                         this.execute(this.getValues());
 106                 },
 107
 108                 _getFocusItems: function(/*Node*/ dialogNode){
 109                         // find focusable Items each time a dialog is opened
 110                         var focusItem = dijit.getFirstInTabbingOrder(dialogNode);
 111                         this._firstFocusItem = focusItem ? focusItem : dialogNode;
 112                         focusItem = dijit.getLastInTabbingOrder(dialogNode);
 113                         this._lastFocusItem = focusItem ? focusItem : this._firstFocusItem;
 114                         if(dojo.isMoz && this._firstFocusItem.tagName.toLowerCase() == "input" && dojo.attr(this._firstFocusItem, "type").toLowerCase() == "file"){
 115                                         //FF doesn't behave well when first element is input type=file, set first focusable to dialog container
 116                                         dojo.attr(dialogNode, "tabindex", "0");
 117                                         this._firstFocusItem = dialogNode;
 118                         }
 119                 }
 120         }
 121 );
 122
 123 dojo.declare(
 124         "dijit.Dialog",
 125         [dijit.layout.ContentPane, dijit._Templated, dijit.form._FormMixin, dijit._DialogMixin],
 126         {
 127                 // summary: A modal dialog Widget
 128                 //
 129                 // description:
 130                 //      Pops up a modal dialog window, blocking access to the screen
 131                 //      and also graying out the screen Dialog is extended from
 132                 //      ContentPane so it supports all the same parameters (href, etc.)
 133                 //
 134                 // example:
 135                 // |    <div dojoType="dijit.Dialog" href="test.html"></div>
 136                 //
 137                 // example:
 138                 // |    <div id="test">test content</div>
 139                 // |    ...
 140                 // |    var foo = new dijit.Dialog({ title: "test dialog" },dojo.byId("test"));
 141                 // |    foo.startup();
 142
 143                 templateString: null,
 144                 templateString:"<div class=\"dijitDialog\" tabindex=\"-1\" waiRole=\"dialog\" waiState=\"labelledby-${id}_title\">\n\t<div dojoAttachPoint=\"titleBar\" class=\"dijitDialogTitleBar\">\n\t<span dojoAttachPoint=\"titleNode\" class=\"dijitDialogTitle\" id=\"${id}_title\">${title}</span>\n\t<span dojoAttachPoint=\"closeButtonNode\" class=\"dijitDialogCloseIcon\" dojoAttachEvent=\"onclick: onCancel\">\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</div>\n",
 145
 146                 // open: Boolean
 147                 //              is True or False depending on state of dialog
 148                 open: false,
 149
 150                 // duration: Integer
 151                 //              The time in milliseconds it takes the dialog to fade in and out
 152                 duration: 400,
 153
 154                 // refocus: Boolean
 155                 //              A Toggle to modify the default focus behavior of a Dialog, which
 156                 //              is to re-focus the element which had focus before being opened.
 157                 //              False will disable refocusing. Default: true
 158                 refocus: true,
 159
 160                 // _firstFocusItem: DomNode
 161                 //              The pointer to the first focusable node in the dialog
 162                 _firstFocusItem:null,
 163
 164                 // _lastFocusItem: DomNode
 165                 //              The pointer to which node has focus prior to our dialog
 166                 _lastFocusItem:null,
 167
 168                 // doLayout: Boolean
 169                 //              Don't change this parameter from the default value.
 170                 //              This ContentPane parameter doesn't make sense for Dialog, since Dialog
 171                 //              is never a child of a layout container, nor can you specify the size of
 172                 //              Dialog in order to control the size of an inner widget.
 173                 doLayout: false,
 174
 175                 attributeMap: dojo.mixin(dojo.clone(dijit._Widget.prototype.attributeMap),
 176                         {title: "titleBar"}),
 177
 178                 postCreate: function(){
 179                         dojo.body().appendChild(this.domNode);
 180                         this.inherited(arguments);
 181                         var _nlsResources = dojo.i18n.getLocalization("dijit", "common");
 182                         if(this.closeButtonNode){
 183                                 this.closeButtonNode.setAttribute("title", _nlsResources.buttonCancel);
 184                         }
 185                         if(this.closeText){
 186                                 this.closeText.setAttribute("title", _nlsResources.buttonCancel);
 187                         }
 188                         var s = this.domNode.style;
 189                         s.visibility = "hidden";
 190                         s.position = "absolute";
 191                         s.display = "";
 192                         s.top = "-9999px";
 193
 194                         this.connect(this, "onExecute", "hide");
 195                         this.connect(this, "onCancel", "hide");
 196                         this._modalconnects = [];
 197                 },
 198
 199                 onLoad: function(){
 200                         // summary: when href is specified we need to reposition the dialog after the data is loaded
 201                         this._position();
 202                         this.inherited(arguments);
 203                 },
 204
 205                 _setup: function(){
 206                         // summary:
 207                         //              stuff we need to do before showing the Dialog for the first
 208                         //              time (but we defer it until right beforehand, for
 209                         //              performance reasons)
 210
 211                         if(this.titleBar){
 212                                 this._moveable = new dojo.dnd.TimedMoveable(this.domNode, { handle: this.titleBar, timeout: 0 });
 213                         }
 214
 215                         this._underlay = new dijit.DialogUnderlay({
 216                                 id: this.id+"_underlay",
 217                                 "class": dojo.map(this["class"].split(/\s/), function(s){ return s+"_underlay"; }).join(" ")
 218                         });
 219
 220                         var node = this.domNode;
 221                         this._fadeIn = dojo.fx.combine(
 222                                 [dojo.fadeIn({
 223                                         node: node,
 224                                         duration: this.duration
 225                                  }),
 226                                  dojo.fadeIn({
 227                                         node: this._underlay.domNode,
 228                                         duration: this.duration,
 229                                         onBegin: dojo.hitch(this._underlay, "show")
 230                                  })
 231                                 ]
 232                         );
 233
 234                         this._fadeOut = dojo.fx.combine(
 235                                 [dojo.fadeOut({
 236                                         node: node,
 237                                         duration: this.duration,
 238                                         onEnd: function(){
 239                                                 node.style.visibility="hidden";
 240                                                 node.style.top = "-9999px";
 241                                         }
 242                                  }),
 243                                  dojo.fadeOut({
 244                                         node: this._underlay.domNode,
 245                                         duration: this.duration,
 246                                         onEnd: dojo.hitch(this._underlay, "hide")
 247                                  })
 248                                 ]
 249                         );
 250                 },
 251
 252                 uninitialize: function(){
 253                         if(this._fadeIn && this._fadeIn.status() == "playing"){
 254                                 this._fadeIn.stop();
 255                         }
 256                         if(this._fadeOut && this._fadeOut.status() == "playing"){
 257                                 this._fadeOut.stop();
 258                         }
 259                         if(this._underlay){
 260                                 this._underlay.destroy();
 261                         }
 262                 },
 263
 264                 _position: function(){
 265                         // summary: position modal dialog in center of screen
 266
 267                         if(dojo.hasClass(dojo.body(),"dojoMove")){ return; }
 268                         var viewport = dijit.getViewport();
 269                         var mb = dojo.marginBox(this.domNode);
 270
 271                         var style = this.domNode.style;
 272                         style.left = Math.floor((viewport.l + (viewport.w - mb.w)/2)) + "px";
 273                         style.top = Math.floor((viewport.t + (viewport.h - mb.h)/2)) + "px";
 274                 },
 275
 276                 _onKey: function(/*Event*/ evt){
 277                         // summary: handles the keyboard events for accessibility reasons
 278                         if(evt.keyCode){
 279                                 var node = evt.target;
 280                                 if (evt.keyCode == dojo.keys.TAB){
 281                                         this._getFocusItems(this.domNode);
 282                                 }
 283                                 var singleFocusItem = (this._firstFocusItem == this._lastFocusItem);
 284                                 // see if we are shift-tabbing from first focusable item on dialog
 285                                 if(node == this._firstFocusItem && evt.shiftKey && evt.keyCode == dojo.keys.TAB){
 286                                         if(!singleFocusItem){
 287                                                 dijit.focus(this._lastFocusItem); // send focus to last item in dialog
 288                                         }
 289                                         dojo.stopEvent(evt);
 290                                 }else if(node == this._lastFocusItem && evt.keyCode == dojo.keys.TAB && !evt.shiftKey){
 291                                         if (!singleFocusItem){
 292                                                 dijit.focus(this._firstFocusItem); // send focus to first item in dialog
 293                                         }
 294                                         dojo.stopEvent(evt);
 295                                 }else{
 296                                         // see if the key is for the dialog
 297                                         while(node){
 298                                                 if(node == this.domNode){
 299                                                         if(evt.keyCode == dojo.keys.ESCAPE){
 300                                                                 this.hide();
 301                                                         }else{
 302                                                                 return; // just let it go
 303                                                         }
 304                                                 }
 305                                                 node = node.parentNode;
 306                                         }
 307                                         // this key is for the disabled document window
 308                                         if(evt.keyCode != dojo.keys.TAB){ // allow tabbing into the dialog for a11y
 309                                                 dojo.stopEvent(evt);
 310                                         // opera won't tab to a div
 311                                         }else if(!dojo.isOpera){
 312                                                 try{
 313                                                         this._firstFocusItem.focus();
 314                                                 }catch(e){ /*squelch*/ }
 315                                         }
 316                                 }
 317                         }
 318                 },
 319
 320                 show: function(){
 321                         // summary: display the dialog
 322
 323                         if(this.open){ return; }
 324
 325                         // first time we show the dialog, there's some initialization stuff to do
 326                         if(!this._alreadyInitialized){
 327                                 this._setup();
 328                                 this._alreadyInitialized=true;
 329                         }
 330
 331                         if(this._fadeOut.status() == "playing"){
 332                                 this._fadeOut.stop();
 333                         }
 334
 335                         this._modalconnects.push(dojo.connect(window, "onscroll", this, "layout"));
 336                         this._modalconnects.push(dojo.connect(dojo.doc.documentElement, "onkeypress", this, "_onKey"));
 337
 338                         dojo.style(this.domNode, "opacity", 0);
 339                         this.domNode.style.visibility="";
 340                         this.open = true;
 341                         this._loadCheck(); // lazy load trigger
 342
 343                         this._position();
 344
 345                         this._fadeIn.play();
 346
 347                         this._savedFocus = dijit.getFocus(this);
 348
 349                         // find focusable Items each time dialog is shown since if dialog contains a widget the
 350                         // first focusable items can change
 351                         this._getFocusItems(this.domNode);
 352
 353                         // set timeout to allow the browser to render dialog
 354                         setTimeout(dojo.hitch(this, function(){
 355                                 dijit.focus(this._firstFocusItem);
 356                         }), 50);
 357                 },
 358
 359                 hide: function(){
 360                         // summary: Hide the dialog
 361
 362                         // if we haven't been initialized yet then we aren't showing and we can just return
 363                         if(!this._alreadyInitialized){
 364                                 return;
 365                         }
 366
 367                         if(this._fadeIn.status() == "playing"){
 368                                 this._fadeIn.stop();
 369                         }
 370                         this._fadeOut.play();
 371
 372                         if (this._scrollConnected){
 373                                 this._scrollConnected = false;
 374                         }
 375                         dojo.forEach(this._modalconnects, dojo.disconnect);
 376                         this._modalconnects = [];
 377                         if(this.refocus){
 378                                 this.connect(this._fadeOut,"onEnd",dojo.hitch(dijit,"focus",this._savedFocus));
 379                         }
 380                         this.open = false;
 381                 },
 382
 383                 layout: function() {
 384                         // summary: position the Dialog and the underlay
 385                         if(this.domNode.style.visibility != "hidden"){
 386                                 this._underlay.layout();
 387                                 this._position();
 388                         }
 389                 },
 390
 391                 destroy: function(){
 392                         dojo.forEach(this._modalconnects, dojo.disconnect);
 393                         if(this.refocus && this.open){
 394                                 var fo = this._savedFocus;
 395                                 setTimeout(dojo.hitch(dijit,"focus",fo),25);
 396                         }
 397                         this.inherited(arguments);
 398                 }
 399         }
 400 );
 401
 402 dojo.declare(
 403         "dijit.TooltipDialog",
 404         [dijit.layout.ContentPane, dijit._Templated, dijit.form._FormMixin, dijit._DialogMixin],
 405         {
 406                 // summary:
 407                 //              Pops up a dialog that appears like a Tooltip
 408                 //
 409                 // title: String
 410                 //              Description of tooltip dialog (required for a11Y)
 411                 title: "",
 412
 413                 // doLayout: Boolean
 414                 //              Don't change this parameter from the default value.
 415                 //              This ContentPane parameter doesn't make sense for TooltipDialog, since TooltipDialog
 416                 //              is never a child of a layout container, nor can you specify the size of
 417                 //              TooltipDialog in order to control the size of an inner widget.
 418                 doLayout: false,
 419
 420                 // _firstFocusItem: DomNode
 421                 //              The pointer to the first focusable node in the dialog
 422                 _firstFocusItem:null,
 423
 424                 // _lastFocusItem: DomNode
 425                 //              The domNode that had focus before we took it.
 426                 _lastFocusItem: null,
 427
 428                 templateString: null,
 429                 templateString:"<div class=\"dijitTooltipDialog\" waiRole=\"presentation\">\n\t<div class=\"dijitTooltipContainer\" waiRole=\"presentation\">\n\t\t<div class =\"dijitTooltipContents dijitTooltipFocusNode\" dojoAttachPoint=\"containerNode\" tabindex=\"-1\" waiRole=\"dialog\"></div>\n\t</div>\n\t<div class=\"dijitTooltipConnector\" waiRole=\"presenation\"></div>\n</div>\n",
 430
 431                 postCreate: function(){
 432                         this.inherited(arguments);
 433                         this.connect(this.containerNode, "onkeypress", "_onKey");
 434                         this.containerNode.title = this.title;
 435                 },
 436
 437                 orient: function(/*DomNode*/ node, /*String*/ aroundCorner, /*String*/ corner){
 438                         // summary: configure widget to be displayed in given position relative to the button
 439                         this.domNode.className="dijitTooltipDialog " +" dijitTooltipAB"+(corner.charAt(1)=='L'?"Left":"Right")+" dijitTooltip"+(corner.charAt(0)=='T' ? "Below" : "Above");
 440                 },
 441
 442                 onOpen: function(/*Object*/ pos){
 443                         // summary: called when dialog is displayed
 444
 445                         this._getFocusItems(this.containerNode);
 446                         this.orient(this.domNode,pos.aroundCorner, pos.corner);
 447                         this._loadCheck(); // lazy load trigger
 448                         dijit.focus(this._firstFocusItem);
 449                 },
 450
 451                 _onKey: function(/*Event*/ evt){
 452                         // summary: keep keyboard focus in dialog; close dialog on escape key
 453                         var node = evt.target;
 454                         if (evt.keyCode == dojo.keys.TAB){
 455                                         this._getFocusItems(this.containerNode);
 456                         }
 457                         var singleFocusItem = (this._firstFocusItem == this._lastFocusItem);
 458                         if(evt.keyCode == dojo.keys.ESCAPE){
 459                                 this.onCancel();
 460                         }else if(node == this._firstFocusItem && evt.shiftKey && evt.keyCode == dojo.keys.TAB){
 461                                 if(!singleFocusItem){
 462                                         dijit.focus(this._lastFocusItem); // send focus to last item in dialog
 463                                 }
 464                                 dojo.stopEvent(evt);
 465                         }else if(node == this._lastFocusItem && evt.keyCode == dojo.keys.TAB && !evt.shiftKey){
 466                                 if(!singleFocusItem){
 467                                         dijit.focus(this._firstFocusItem); // send focus to first item in dialog
 468                                 }
 469                                 dojo.stopEvent(evt);
 470                         }else if(evt.keyCode == dojo.keys.TAB){
 471                                 // we want the browser's default tab handling to move focus
 472                                 // but we don't want the tab to propagate upwards
 473                                 evt.stopPropagation();
 474                         }
 475                 }
 476         }
 477 );
 478
 479
 480 }