_ContentPaneResizeMixin.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  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.layout._ContentPaneResizeMixin"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dijit.layout._ContentPaneResizeMixin"] = true;
  8. dojo.provide("dijit.layout._ContentPaneResizeMixin");
  9. dojo.require("dijit._Contained");
  10. dojo.require("dijit.layout._LayoutWidget");
  11. dojo.declare("dijit.layout._ContentPaneResizeMixin", null, {
  12. // summary:
  13. // Resize() functionality of ContentPane. If there's a single layout widget
  14. // child then it will call resize() with the same dimensions as the ContentPane.
  15. // Otherwise just calls resize on each child.
  16. //
  17. // Also implements basic startup() functionality, where starting the parent
  18. // will start the children
  19. // doLayout: Boolean
  20. // - false - don't adjust size of children
  21. // - true - if there is a single visible child widget, set it's size to
  22. // however big the ContentPane is
  23. doLayout: true,
  24. // isContainer: [protected] Boolean
  25. // Indicates that this widget acts as a "parent" to the descendant widgets.
  26. // When the parent is started it will call startup() on the child widgets.
  27. // See also `isLayoutContainer`.
  28. isContainer: true,
  29. // isLayoutContainer: [protected] Boolean
  30. // Indicates that this widget will call resize() on it's child widgets
  31. // when they become visible.
  32. isLayoutContainer: true,
  33. _startChildren: function(){
  34. // summary:
  35. // Call startup() on all children including non _Widget ones like dojo.dnd.Source objects
  36. // This starts all the widgets
  37. dojo.forEach(this.getChildren(), function(child){
  38. child.startup();
  39. child._started = true;
  40. });
  41. },
  42. startup: function(){
  43. // summary:
  44. // See `dijit.layout._LayoutWidget.startup` for description.
  45. // Although ContentPane doesn't extend _LayoutWidget, it does implement
  46. // the same API.
  47. if(this._started){ return; }
  48. var parent = dijit._Contained.prototype.getParent.call(this);
  49. this._childOfLayoutWidget = parent && parent.isLayoutContainer;
  50. // I need to call resize() on my child/children (when I become visible), unless
  51. // I'm the child of a layout widget in which case my parent will call resize() on me and I'll do it then.
  52. this._needLayout = !this._childOfLayoutWidget;
  53. this.inherited(arguments);
  54. this._startChildren();
  55. if(this._isShown()){
  56. this._onShow();
  57. }
  58. if(!this._childOfLayoutWidget){
  59. // If my parent isn't a layout container, since my style *may be* width=height=100%
  60. // or something similar (either set directly or via a CSS class),
  61. // monitor when my size changes so that I can re-layout.
  62. // For browsers where I can't directly monitor when my size changes,
  63. // monitor when the viewport changes size, which *may* indicate a size change for me.
  64. this.connect(dojo.isIE ? this.domNode : dojo.global, 'onresize', function(){
  65. // Using function(){} closure to ensure no arguments to resize.
  66. this._needLayout = !this._childOfLayoutWidget;
  67. this.resize();
  68. });
  69. }
  70. },
  71. _checkIfSingleChild: function(){
  72. // summary:
  73. // Test if we have exactly one visible widget as a child,
  74. // and if so assume that we are a container for that widget,
  75. // and should propagate startup() and resize() calls to it.
  76. // Skips over things like data stores since they aren't visible.
  77. var childNodes = dojo.query("> *", this.containerNode).filter(function(node){
  78. return node.tagName !== "SCRIPT"; // or a regexp for hidden elements like script|area|map|etc..
  79. }),
  80. childWidgetNodes = childNodes.filter(function(node){
  81. return dojo.hasAttr(node, "data-dojo-type") || dojo.hasAttr(node, "dojoType") || dojo.hasAttr(node, "widgetId");
  82. }),
  83. candidateWidgets = dojo.filter(childWidgetNodes.map(dijit.byNode), function(widget){
  84. return widget && widget.domNode && widget.resize;
  85. });
  86. if(
  87. // all child nodes are widgets
  88. childNodes.length == childWidgetNodes.length &&
  89. // all but one are invisible (like dojo.data)
  90. candidateWidgets.length == 1
  91. ){
  92. this._singleChild = candidateWidgets[0];
  93. }else{
  94. delete this._singleChild;
  95. }
  96. // So we can set overflow: hidden to avoid a safari bug w/scrollbars showing up (#9449)
  97. dojo.toggleClass(this.containerNode, this.baseClass + "SingleChild", !!this._singleChild);
  98. },
  99. resize: function(changeSize, resultSize){
  100. // summary:
  101. // See `dijit.layout._LayoutWidget.resize` for description.
  102. // Although ContentPane doesn't extend _LayoutWidget, it does implement
  103. // the same API.
  104. // For the TabContainer --> BorderContainer --> ContentPane case, _onShow() is
  105. // never called, so resize() is our trigger to do the initial href download (see [20099]).
  106. // However, don't load href for closed TitlePanes.
  107. if(!this._wasShown && this.open !== false){
  108. this._onShow();
  109. }
  110. this._resizeCalled = true;
  111. this._scheduleLayout(changeSize, resultSize);
  112. },
  113. _scheduleLayout: function(changeSize, resultSize){
  114. // summary:
  115. // Resize myself, and call resize() on each of my child layout widgets, either now
  116. // (if I'm currently visible) or when I become visible
  117. if(this._isShown()){
  118. this._layout(changeSize, resultSize);
  119. }else{
  120. this._needLayout = true;
  121. this._changeSize = changeSize;
  122. this._resultSize = resultSize;
  123. }
  124. },
  125. _layout: function(changeSize, resultSize){
  126. // summary:
  127. // Resize myself according to optional changeSize/resultSize parameters, like a layout widget.
  128. // Also, since I am a Container widget, each of my children expects me to
  129. // call resize() or layout() on them.
  130. //
  131. // Should be called on initialization and also whenever we get new content
  132. // (from an href, or from set('content', ...))... but deferred until
  133. // the ContentPane is visible
  134. // Set margin box size, unless it wasn't specified, in which case use current size.
  135. if(changeSize){
  136. dojo.marginBox(this.domNode, changeSize);
  137. }
  138. // Compute content box size of containerNode in case we [later] need to size our single child.
  139. var cn = this.containerNode;
  140. if(cn === this.domNode){
  141. // If changeSize or resultSize was passed to this method and this.containerNode ==
  142. // this.domNode then we can compute the content-box size without querying the node,
  143. // which is more reliable (similar to LayoutWidget.resize) (see for example #9449).
  144. var mb = resultSize || {};
  145. dojo.mixin(mb, changeSize || {}); // changeSize overrides resultSize
  146. if(!("h" in mb) || !("w" in mb)){
  147. mb = dojo.mixin(dojo.marginBox(cn), mb); // just use dojo.marginBox() to fill in missing values
  148. }
  149. this._contentBox = dijit.layout.marginBox2contentBox(cn, mb);
  150. }else{
  151. this._contentBox = dojo.contentBox(cn);
  152. }
  153. this._layoutChildren();
  154. delete this._needLayout;
  155. },
  156. _layoutChildren: function(){
  157. // Call _checkIfSingleChild() again in case app has manually mucked w/the content
  158. // of the ContentPane (rather than changing it through the set("content", ...) API.
  159. if(this.doLayout){
  160. this._checkIfSingleChild();
  161. }
  162. if(this._singleChild && this._singleChild.resize){
  163. var cb = this._contentBox || dojo.contentBox(this.containerNode);
  164. // note: if widget has padding this._contentBox will have l and t set,
  165. // but don't pass them to resize() or it will doubly-offset the child
  166. this._singleChild.resize({w: cb.w, h: cb.h});
  167. }else{
  168. // All my child widgets are independently sized (rather than matching my size),
  169. // but I still need to call resize() on each child to make it layout.
  170. dojo.forEach(this.getChildren(), function(widget){
  171. if(widget.resize){
  172. widget.resize();
  173. }
  174. });
  175. }
  176. },
  177. _isShown: function(){
  178. // summary:
  179. // Returns true if the content is currently shown.
  180. // description:
  181. // If I am a child of a layout widget then it actually returns true if I've ever been visible,
  182. // not whether I'm currently visible, since that's much faster than tracing up the DOM/widget
  183. // tree every call, and at least solves the performance problem on page load by deferring loading
  184. // hidden ContentPanes until they are first shown
  185. if(this._childOfLayoutWidget){
  186. // If we are TitlePane, etc - we return that only *IF* we've been resized
  187. if(this._resizeCalled && "open" in this){
  188. return this.open;
  189. }
  190. return this._resizeCalled;
  191. }else if("open" in this){
  192. return this.open; // for TitlePane, etc.
  193. }else{
  194. var node = this.domNode, parent = this.domNode.parentNode;
  195. return (node.style.display != 'none') && (node.style.visibility != 'hidden') && !dojo.hasClass(node, "dijitHidden") &&
  196. parent && parent.style && (parent.style.display != 'none');
  197. }
  198. },
  199. _onShow: function(){
  200. // summary:
  201. // Called when the ContentPane is made visible
  202. // description:
  203. // For a plain ContentPane, this is called on initialization, from startup().
  204. // If the ContentPane is a hidden pane of a TabContainer etc., then it's
  205. // called whenever the pane is made visible.
  206. //
  207. // Does layout/resize of child widget(s)
  208. // Need to keep track of whether ContentPane has been shown (which is different than
  209. // whether or not it's currently visible).
  210. this._wasShown = true;
  211. if(this._needLayout){
  212. // If a layout has been scheduled for when we become visible, do it now
  213. this._layout(this._changeSize, this._resultSize);
  214. }
  215. this.inherited(arguments);
  216. }
  217. });
  218. }