lib/dijit/layout/_LayoutWidget.js.uncompressed.js

   1 define("dijit/layout/_LayoutWidget", [
   2         "dojo/_base/lang", // lang.mixin
   3         "../_Widget",
   4         "../_Container",
   5         "../_Contained",
   6         "../Viewport",
   7         "dojo/_base/declare", // declare
   8         "dojo/dom-class", // domClass.add domClass.remove
   9         "dojo/dom-geometry", // domGeometry.marginBox
  10         "dojo/dom-style" // domStyle.getComputedStyle
  11 ], function(lang, _Widget, _Container, _Contained, Viewport,
  12         declare, domClass, domGeometry, domStyle){
  13
  14         // module:
  15         //              dijit/layout/_LayoutWidget
  16
  17
  18         return declare("dijit.layout._LayoutWidget", [_Widget, _Container, _Contained], {
  19                 // summary:
  20                 //              Base class for a _Container widget which is responsible for laying out its children.
  21                 //              Widgets which mixin this code must define layout() to manage placement and sizing of the children.
  22
  23                 // baseClass: [protected extension] String
  24                 //              This class name is applied to the widget's domNode
  25                 //              and also may be used to generate names for sub nodes,
  26                 //              for example dijitTabContainer-content.
  27                 baseClass: "dijitLayoutContainer",
  28
  29                 // isLayoutContainer: [protected] Boolean
  30                 //              Indicates that this widget is going to call resize() on its
  31                 //              children widgets, setting their size, when they become visible.
  32                 isLayoutContainer: true,
  33
  34                 buildRendering: function(){
  35                         this.inherited(arguments);
  36                         domClass.add(this.domNode, "dijitContainer");
  37                 },
  38
  39                 startup: function(){
  40                         // summary:
  41                         //              Called after all the widgets have been instantiated and their
  42                         //              dom nodes have been inserted somewhere under win.doc.body.
  43                         //
  44                         //              Widgets should override this method to do any initialization
  45                         //              dependent on other widgets existing, and then call
  46                         //              this superclass method to finish things off.
  47                         //
  48                         //              startup() in subclasses shouldn't do anything
  49                         //              size related because the size of the widget hasn't been set yet.
  50
  51                         if(this._started){ return; }
  52
  53                         // Need to call inherited first - so that child widgets get started
  54                         // up correctly
  55                         this.inherited(arguments);
  56
  57                         // If I am a not being controlled by a parent layout widget...
  58                         var parent = this.getParent && this.getParent();
  59                         if(!(parent && parent.isLayoutContainer)){
  60                                 // Do recursive sizing and layout of all my descendants
  61                                 // (passing in no argument to resize means that it has to glean the size itself)
  62                                 this.resize();
  63
  64                                 // Since my parent isn't a layout container, and my style *may be* width=height=100%
  65                                 // or something similar (either set directly or via a CSS class),
  66                                 // monitor when viewport size changes so that I can re-layout.
  67                                 this.own(Viewport.on("resize", lang.hitch(this, "resize")));
  68                         }
  69                 },
  70
  71                 resize: function(changeSize, resultSize){
  72                         // summary:
  73                         //              Call this to resize a widget, or after its size has changed.
  74                         // description:
  75                         //              ####Change size mode:
  76                         //
  77                         //              When changeSize is specified, changes the marginBox of this widget
  78                         //              and forces it to re-layout its contents accordingly.
  79                         //              changeSize may specify height, width, or both.
  80                         //
  81                         //              If resultSize is specified it indicates the size the widget will
  82                         //              become after changeSize has been applied.
  83                         //
  84                         //              ####Notification mode:
  85                         //
  86                         //              When changeSize is null, indicates that the caller has already changed
  87                         //              the size of the widget, or perhaps it changed because the browser
  88                         //              window was resized.  Tells widget to re-layout its contents accordingly.
  89                         //
  90                         //              If resultSize is also specified it indicates the size the widget has
  91                         //              become.
  92                         //
  93                         //              In either mode, this method also:
  94                         //
  95                         //              1. Sets this._borderBox and this._contentBox to the new size of
  96                         //                      the widget.  Queries the current domNode size if necessary.
  97                         //              2. Calls layout() to resize contents (and maybe adjust child widgets).
  98                         // changeSize: Object?
  99                         //              Sets the widget to this margin-box size and position.
 100                         //              May include any/all of the following properties:
 101                         //      |       {w: int, h: int, l: int, t: int}
 102                         // resultSize: Object?
 103                         //              The margin-box size of this widget after applying changeSize (if
 104                         //              changeSize is specified).  If caller knows this size and
 105                         //              passes it in, we don't need to query the browser to get the size.
 106                         //      |       {w: int, h: int}
 107
 108                         var node = this.domNode;
 109
 110                         // set margin box size, unless it wasn't specified, in which case use current size
 111                         if(changeSize){
 112                                 domGeometry.setMarginBox(node, changeSize);
 113                         }
 114
 115                         // If either height or width wasn't specified by the user, then query node for it.
 116                         // But note that setting the margin box and then immediately querying dimensions may return
 117                         // inaccurate results, so try not to depend on it.
 118                         var mb = resultSize || {};
 119                         lang.mixin(mb, changeSize || {});       // changeSize overrides resultSize
 120                         if( !("h" in mb) || !("w" in mb) ){
 121                                 mb = lang.mixin(domGeometry.getMarginBox(node), mb);    // just use domGeometry.marginBox() to fill in missing values
 122                         }
 123
 124                         // Compute and save the size of my border box and content box
 125                         // (w/out calling domGeometry.getContentBox() since that may fail if size was recently set)
 126                         var cs = domStyle.getComputedStyle(node);
 127                         var me = domGeometry.getMarginExtents(node, cs);
 128                         var be = domGeometry.getBorderExtents(node, cs);
 129                         var bb = (this._borderBox = {
 130                                 w: mb.w - (me.w + be.w),
 131                                 h: mb.h - (me.h + be.h)
 132                         });
 133                         var pe = domGeometry.getPadExtents(node, cs);
 134                         this._contentBox = {
 135                                 l: domStyle.toPixelValue(node, cs.paddingLeft),
 136                                 t: domStyle.toPixelValue(node, cs.paddingTop),
 137                                 w: bb.w - pe.w,
 138                                 h: bb.h - pe.h
 139                         };
 140
 141                         // Callback for widget to adjust size of its children
 142                         this.layout();
 143                 },
 144
 145                 layout: function(){
 146                         // summary:
 147                         //              Widgets override this method to size and position their contents/children.
 148                         //              When this is called this._contentBox is guaranteed to be set (see resize()).
 149                         //
 150                         //              This is called after startup(), and also when the widget's size has been
 151                         //              changed.
 152                         // tags:
 153                         //              protected extension
 154                 },
 155
 156                 _setupChild: function(/*dijit/_WidgetBase*/child){
 157                         // summary:
 158                         //              Common setup for initial children and children which are added after startup
 159                         // tags:
 160                         //              protected extension
 161
 162                         var cls = this.baseClass + "-child "
 163                                 + (child.baseClass ? this.baseClass + "-" + child.baseClass : "");
 164                         domClass.add(child.domNode, cls);
 165                 },
 166
 167                 addChild: function(/*dijit/_WidgetBase*/ child, /*Integer?*/ insertIndex){
 168                         // Overrides _Container.addChild() to call _setupChild()
 169                         this.inherited(arguments);
 170                         if(this._started){
 171                                 this._setupChild(child);
 172                         }
 173                 },
 174
 175                 removeChild: function(/*dijit/_WidgetBase*/ child){
 176                         // Overrides _Container.removeChild() to remove class added by _setupChild()
 177                         var cls = this.baseClass + "-child"
 178                                         + (child.baseClass ?
 179                                                 " " + this.baseClass + "-" + child.baseClass : "");
 180                         domClass.remove(child.domNode, cls);
 181
 182                         this.inherited(arguments);
 183                 }
 184         });
 185 });