DialogUnderlay.js.uncompressed.js 3.1 KB

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