DialogUnderlay.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dijit.DialogUnderlay"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dijit.DialogUnderlay"] = true;
  8. dojo.provide("dijit.DialogUnderlay");
  9. dojo.require("dojo.window");
  10. dojo.require("dijit._Widget");
  11. dojo.require("dijit._Templated");
  12. dojo.declare(
  13. "dijit.DialogUnderlay",
  14. [dijit._Widget, dijit._Templated],
  15. {
  16. // summary:
  17. // The component that blocks the screen behind a `dijit.Dialog`
  18. //
  19. // description:
  20. // A component used to block input behind a `dijit.Dialog`. Only a single
  21. // instance of this widget is created by `dijit.Dialog`, and saved as
  22. // a reference to be shared between all Dialogs as `dijit._underlay`
  23. //
  24. // The underlay itself can be styled based on and id:
  25. // | #myDialog_underlay { background-color:red; }
  26. //
  27. // In the case of `dijit.Dialog`, this id is based on the id of the Dialog,
  28. // suffixed with _underlay.
  29. // Template has two divs; outer div is used for fade-in/fade-out, and also to hold background iframe.
  30. // Inner div has opacity specified in CSS file.
  31. templateString: "<div class='dijitDialogUnderlayWrapper'><div class='dijitDialogUnderlay' dojoAttachPoint='node'></div></div>",
  32. // Parameters on creation or updatable later
  33. // dialogId: String
  34. // Id of the dialog.... DialogUnderlay's id is based on this id
  35. dialogId: "",
  36. // class: String
  37. // This class name is used on the DialogUnderlay node, in addition to dijitDialogUnderlay
  38. "class": "",
  39. attributeMap: { id: "domNode" },
  40. _setDialogIdAttr: function(id){
  41. dojo.attr(this.node, "id", id + "_underlay");
  42. this._set("dialogId", id);
  43. },
  44. _setClassAttr: function(clazz){
  45. this.node.className = "dijitDialogUnderlay " + clazz;
  46. this._set("class", clazz);
  47. },
  48. postCreate: function(){
  49. // summary:
  50. // Append the underlay to the body
  51. dojo.body().appendChild(this.domNode);
  52. },
  53. layout: function(){
  54. // summary:
  55. // Sets the background to the size of the viewport
  56. //
  57. // description:
  58. // Sets the background to the size of the viewport (rather than the size
  59. // of the document) since we need to cover the whole browser window, even
  60. // if the document is only a few lines long.
  61. // tags:
  62. // private
  63. var is = this.node.style,
  64. os = this.domNode.style;
  65. // hide the background temporarily, so that the background itself isn't
  66. // causing scrollbars to appear (might happen when user shrinks browser
  67. // window and then we are called to resize)
  68. os.display = "none";
  69. // then resize and show
  70. var viewport = dojo.window.getBox();
  71. os.top = viewport.t + "px";
  72. os.left = viewport.l + "px";
  73. is.width = viewport.w + "px";
  74. is.height = viewport.h + "px";
  75. os.display = "block";
  76. },
  77. show: function(){
  78. // summary:
  79. // Show the dialog underlay
  80. this.domNode.style.display = "block";
  81. this.layout();
  82. this.bgIframe = new dijit.BackgroundIframe(this.domNode);
  83. },
  84. hide: function(){
  85. // summary:
  86. // Hides the dialog underlay
  87. this.bgIframe.destroy();
  88. delete this.bgIframe;
  89. this.domNode.style.display = "none";
  90. }
  91. }
  92. );
  93. }