2 Copyright (c) 2009, Yahoo! Inc. All rights reserved.
3 Code licensed under the BSD License:
4 http://developer.yahoo.net/yui/license.txt
8 * @description <p>Provides a fixed layout containing, top, bottom, left, right and center layout units. It can be applied to either the body or an element.</p>
9 * @namespace YAHOO.widget
10 * @requires yahoo, dom, element, event
14 var Dom = YAHOO.util.Dom,
15 Event = YAHOO.util.Event,
21 * @extends YAHOO.util.Element
22 * @description <p>Provides a fixed layout containing, top, bottom, left, right and center layout units. It can be applied to either the body or an element.</p>
23 * @param {String/HTMLElement} el The element to make contain a layout.
24 * @param {Object} attrs Object liternal containing configuration parameters.
27 var Layout = function(el, config) {
28 YAHOO.log('Creating the Layout Object', 'info', 'Layout');
29 if (Lang.isObject(el) && !el.tagName) {
33 if (Lang.isString(el)) {
44 attributes: config || {}
47 Layout.superclass.constructor.call(this, oConfig.element, oConfig.attributes);
53 * @property _instances
54 * @description Internal hash table for all layout instances
57 Layout._instances = {};
60 * @method getLayoutById
61 * @description Get's a layout object by the HTML id of the element associated with the Layout object.
62 * @return {Object} The Layout Object
64 Layout.getLayoutById = function(id) {
65 if (Layout._instances[id]) {
66 return Layout._instances[id];
71 YAHOO.extend(Layout, YAHOO.util.Element, {
74 * @description A modified version of the YAHOO.env.ua object
79 b.standardsMode = false;
86 * @description An object literal that contains a list of units in the layout
93 * @description Set to true when the layout is rendered
100 * @description The zIndex to set all LayoutUnits to
107 * @description A collection of the current sizes of all usable LayoutUnits to be used for calculations
113 * @method _setBodySize
114 * @param {Boolean} set If set to false, it will NOT set the size, just perform the calculations (used for collapsing units)
115 * @description Used to set the body size of the layout, sets the height and width of the parent container
117 _setBodySize: function(set) {
119 set = ((set === false) ? false : true);
122 h = Dom.getClientHeight();
123 w = Dom.getClientWidth();
125 h = parseInt(this.getStyle('height'), 10);
126 w = parseInt(this.getStyle('width'), 10);
128 w = this.get('element').clientWidth;
131 h = this.get('element').clientHeight;
134 if (this.get('minWidth')) {
135 if (w < this.get('minWidth')) {
136 w = this.get('minWidth');
139 if (this.get('minHeight')) {
140 if (h < this.get('minHeight')) {
141 h = this.get('minHeight');
145 Dom.setStyle(this._doc, 'height', h + 'px');
146 Dom.setStyle(this._doc, 'width', w + 'px');
148 this._sizes.doc = { h: h, w: w };
149 YAHOO.log('Setting Body height and width: (' + h + ',' + w + ')', 'info', 'Layout');
155 * @param {Boolean} set If set to false, it will NOT set the size, just perform the calculations (used for collapsing units)
156 * @description Used to set the size and position of the left, right, top and bottom units
158 _setSides: function(set) {
159 YAHOO.log('Setting side units', 'info', 'Layout');
160 var h1 = ((this._units.top) ? this._units.top.get('height') : 0),
161 h2 = ((this._units.bottom) ? this._units.bottom.get('height') : 0),
162 h = this._sizes.doc.h,
163 w = this._sizes.doc.w;
164 set = ((set === false) ? false : true);
167 h: h1, w: ((this._units.top) ? w : 0),
170 this._sizes.bottom = {
171 h: h2, w: ((this._units.bottom) ? w : 0)
174 var newH = (h - (h1 + h2));
177 h: newH, w: ((this._units.left) ? this._units.left.get('width') : 0)
179 this._sizes.right = {
180 h: newH, w: ((this._units.right) ? this._units.right.get('width') : 0),
181 l: ((this._units.right) ? (w - this._units.right.get('width')) : 0),
182 t: ((this._units.top) ? this._sizes.top.h : 0)
185 if (this._units.right && set) {
186 this._units.right.set('top', this._sizes.right.t);
187 if (!this._units.right._collapsing) {
188 this._units.right.set('left', this._sizes.right.l);
190 this._units.right.set('height', this._sizes.right.h, true);
192 if (this._units.left) {
193 this._sizes.left.l = 0;
194 if (this._units.top) {
195 this._sizes.left.t = this._sizes.top.h;
197 this._sizes.left.t = 0;
200 this._units.left.set('top', this._sizes.left.t);
201 this._units.left.set('height', this._sizes.left.h, true);
202 this._units.left.set('left', 0);
205 if (this._units.bottom) {
206 this._sizes.bottom.t = this._sizes.top.h + this._sizes.left.h;
208 this._units.bottom.set('top', this._sizes.bottom.t);
209 this._units.bottom.set('width', this._sizes.bottom.w, true);
212 if (this._units.top) {
214 this._units.top.set('width', this._sizes.top.w, true);
217 YAHOO.log('Setting sizes: (' + Lang.dump(this._sizes) + ')', 'info', 'Layout');
218 this._setCenter(set);
223 * @param {Boolean} set If set to false, it will NOT set the size, just perform the calculations (used for collapsing units)
224 * @description Used to set the size and position of the center unit
226 _setCenter: function(set) {
227 set = ((set === false) ? false : true);
228 var h = this._sizes.left.h;
229 var w = (this._sizes.doc.w - (this._sizes.left.w + this._sizes.right.w));
231 this._units.center.set('height', h, true);
232 this._units.center.set('width', w, true);
233 this._units.center.set('top', this._sizes.top.h);
234 this._units.center.set('left', this._sizes.left.w);
236 this._sizes.center = { h: h, w: w, t: this._sizes.top.h, l: this._sizes.left.w };
237 YAHOO.log('Setting Center size to: (' + h + ', ' + w + ')', 'info', 'Layout');
241 * @description Get a reference to the internal Layout Unit sizes object used to build the layout wireframe
242 * @return {Object} An object of the layout unit sizes
244 getSizes: function() {
248 * @method getUnitById
249 * @param {String} id The HTML element id of the unit
250 * @description Get the LayoutUnit by it's HTML id
251 * @return {<a href="YAHOO.widget.LayoutUnit.html">YAHOO.widget.LayoutUnit</a>} The LayoutUnit instance
253 getUnitById: function(id) {
254 return YAHOO.widget.LayoutUnit.getLayoutUnitById(id);
257 * @method getUnitByPosition
258 * @param {String} pos The position of the unit in this layout
259 * @description Get the LayoutUnit by it's position in this layout
260 * @return {<a href="YAHOO.widget.LayoutUnit.html">YAHOO.widget.LayoutUnit</a>} The LayoutUnit instance
262 getUnitByPosition: function(pos) {
264 pos = pos.toLowerCase();
265 if (this._units[pos]) {
266 return this._units[pos];
274 * @param {Object} unit The LayoutUnit that you want to remove
275 * @description Remove the unit from this layout and resize the layout.
277 removeUnit: function(unit) {
278 delete this._units[unit.get('position')];
283 * @param {Object} cfg The config for the LayoutUnit that you want to add
284 * @description Add a unit to this layout and if the layout is rendered, resize the layout.
285 * @return {<a href="YAHOO.widget.LayoutUnit.html">YAHOO.widget.LayoutUnit</a>} The LayoutUnit instance
287 addUnit: function(cfg) {
289 YAHOO.log('No position property passed', 'error', 'Layout');
292 if (this._units[cfg.position]) {
293 YAHOO.log('Position already exists', 'error', 'Layout');
296 YAHOO.log('Adding Unit at position: ' + cfg.position, 'info', 'Layout');
301 if (Dom.get(cfg.id)) {
302 element = Dom.get(cfg.id);
308 element = cfg.element;
312 el = document.createElement('div');
313 var id = Dom.generateId();
318 element = document.createElement('div');
320 Dom.addClass(element, 'yui-layout-wrap');
321 if (this.browser.ie && !this.browser.standardsMode) {
323 element.style.zoom = 1;
327 el.insertBefore(element, el.firstChild);
329 el.appendChild(element);
331 this._doc.appendChild(el);
333 var h = false, w = false;
336 h = parseInt(cfg.height, 10);
339 w = parseInt(cfg.width, 10);
342 YAHOO.lang.augmentObject(unitConfig, cfg); // break obj ref
344 unitConfig.parent = this;
345 unitConfig.wrap = element;
346 unitConfig.height = h;
347 unitConfig.width = w;
349 var unit = new YAHOO.widget.LayoutUnit(el, unitConfig);
351 unit.on('heightChange', this.resize, this, true);
352 unit.on('widthChange', this.resize, this, true);
353 unit.on('gutterChange', this.resize, this, true);
354 this._units[cfg.position] = unit;
356 if (this._rendered) {
364 * @method _createUnits
365 * @description Private method to create units from the config that was passed in.
367 _createUnits: function() {
368 var units = this.get('units');
369 for (var i in units) {
370 if (Lang.hasOwnProperty(units, i)) {
371 this.addUnit(units[i]);
377 * @param {Boolean} set If set to false, it will NOT set the size, just perform the calculations (used for collapsing units)
378 * @description Starts the chain of resize routines that will resize all the units.
379 * @return {<a href="YAHOO.widget.Layout.html">YAHOO.widget.Layout</a>} The Layout instance
381 resize: function(set) {
382 set = ((set === false) ? false : true);
384 var retVal = this.fireEvent('beforeResize');
385 if (retVal === false) {
388 if (this.browser.ie) {
390 Dom.removeClass(document.documentElement, 'yui-layout');
391 Dom.addClass(document.documentElement, 'yui-layout');
393 this.removeClass('yui-layout');
394 this.addClass('yui-layout');
398 this._setBodySize(set);
400 this.fireEvent('resize', { target: this, sizes: this._sizes });
406 * @method _setupBodyElements
407 * @description Sets up the main doc element when using the body as the main element.
409 _setupBodyElements: function() {
410 this._doc = Dom.get('layout-doc');
412 this._doc = document.createElement('div');
413 this._doc.id = 'layout-doc';
414 if (document.body.firstChild) {
415 document.body.insertBefore(this._doc, document.body.firstChild);
417 document.body.appendChild(this._doc);
422 Event.on(window, 'resize', this.resize, this, true);
423 Dom.addClass(this._doc, 'yui-layout-doc');
427 * @method _setupElements
428 * @description Sets up the main doc element when not using the body as the main element.
430 _setupElements: function() {
431 this._doc = this.getElementsByClassName('yui-layout-doc')[0];
433 this._doc = document.createElement('div');
434 this.get('element').appendChild(this._doc);
438 Dom.addClass(this._doc, 'yui-layout-doc');
443 * @description Flag to determine if we are using the body as the root element.
450 * @description Reference to the root element
457 * @description The Layout class' initialization method
459 init: function(p_oElement, p_oAttributes) {
460 YAHOO.log('init', 'info', 'Layout');
464 Layout.superclass.init.call(this, p_oElement, p_oAttributes);
466 if (this.get('parent')) {
467 this._zIndex = this.get('parent')._zIndex + 10;
474 if (!Lang.isString(id)) {
475 id = Dom.generateId(id);
477 Layout._instances[id] = this;
481 * @description This method starts the render process, applying classnames and creating elements
482 * @return {<a href="YAHOO.widget.Layout.html">YAHOO.widget.Layout</a>} The Layout instance
485 YAHOO.log('Render', 'info', 'Layout');
487 var el = this.get('element');
488 if (el && el.tagName && (el.tagName.toLowerCase() == 'body')) {
490 Dom.addClass(document.body, 'yui-layout');
491 if (Dom.hasClass(document.body, 'yui-skin-sam')) {
492 //Move the class up so we can have a css chain
493 Dom.addClass(document.documentElement, 'yui-skin-sam');
494 Dom.removeClass(document.body, 'yui-skin-sam');
496 this._setupBodyElements();
498 this._isBody = false;
499 this.addClass('yui-layout');
500 this._setupElements();
503 this._rendered = true;
504 this.fireEvent('render');
511 * @description Stamps the root node with a secure classname for ease of use. Also sets the this.browser.standardsMode variable.
514 if (document.compatMode == 'CSS1Compat') {
515 this.browser.standardsMode = true;
517 if (window.location.href.toLowerCase().indexOf("https") === 0) {
518 Dom.addClass(document.documentElement, 'secure');
519 this.browser.secure = true;
524 * @method initAttributes
525 * @description Processes the config
527 initAttributes: function(attr) {
528 Layout.superclass.initAttributes.call(this, attr);
531 * @description An array of config definitions for the LayoutUnits to add to this layout
534 this.setAttributeConfig('units', {
536 validator: YAHOO.lang.isArray,
537 value: attr.units || []
541 * @attribute minHeight
542 * @description The minimum height in pixels
545 this.setAttributeConfig('minHeight', {
546 value: attr.minHeight || false,
547 validator: YAHOO.lang.isNumber
551 * @attribute minWidth
552 * @description The minimum width in pixels
555 this.setAttributeConfig('minWidth', {
556 value: attr.minWidth || false,
557 validator: YAHOO.lang.isNumber
562 * @description The height in pixels
565 this.setAttributeConfig('height', {
566 value: attr.height || false,
567 validator: YAHOO.lang.isNumber,
568 method: function(h) {
569 this.setStyle('height', h + 'px');
575 * @description The width in pixels
578 this.setAttributeConfig('width', {
579 value: attr.width || false,
580 validator: YAHOO.lang.isNumber,
581 method: function(w) {
582 this.setStyle('width', w + 'px');
588 * @description If this layout is to be used as a child of another Layout instance, this config will bind the resize events together.
589 * @type Object YAHOO.widget.Layout
591 this.setAttributeConfig('parent', {
593 value: attr.parent || false,
594 method: function(p) {
596 p.on('resize', this.resize, this, true);
603 * @description Removes this layout from the page and destroys all units that it contains. This will destroy all data inside the layout and it's children.
605 destroy: function() {
606 var par = this.get('parent');
608 par.removeListener('resize', this.resize, this, true);
610 Event.removeListener(window, 'resize', this.resize, this, true);
612 this.unsubscribeAll();
613 for (var u in this._units) {
614 if (Lang.hasOwnProperty(this._units, u)) {
615 if (this._units[u]) {
616 this._units[u].destroy(true);
621 Event.purgeElement(this.get('element'));
622 this.get('parentNode').removeChild(this.get('element'));
624 delete YAHOO.widget.Layout._instances[this.get('id')];
625 //Brutal Object Destroy
626 for (var i in this) {
627 if (Lang.hasOwnProperty(this, i)) {
639 * @description Returns a string representing the Layout.
642 toString: function() {
644 return 'Layout #' + this.get('id');
651 * @description Fired when this.resize is called
652 * @type YAHOO.util.CustomEvent
656 * @description Fired when the Resize Utility for a Unit fires it's startResize Event.
657 * @type YAHOO.util.CustomEvent
660 * @event beforeResize
661 * @description Fires at the beginning of the resize method. If you return false, the resize is cancelled.
662 * @type YAHOO.util.CustomEvent
666 * @description Fired after the render method completes.
667 * @type YAHOO.util.CustomEvent
670 YAHOO.widget.Layout = Layout;
673 * @description <p>Provides a fixed position unit containing a header, body and footer for use with a YAHOO.widget.Layout instance.</p>
674 * @namespace YAHOO.widget
675 * @requires yahoo, dom, element, event, layout
676 * @optional animation, dragdrop, selector
679 var Dom = YAHOO.util.Dom,
680 Sel = YAHOO.util.Selector,
681 Event = YAHOO.util.Event,
687 * @extends YAHOO.util.Element
688 * @description <p>Provides a fixed position unit containing a header, body and footer for use with a YAHOO.widget.Layout instance.</p>
689 * @param {String/HTMLElement} el The element to make a unit.
690 * @param {Object} attrs Object liternal containing configuration parameters.
693 var LayoutUnit = function(el, config) {
697 attributes: config || {}
700 LayoutUnit.superclass.constructor.call(this, oConfig.element, oConfig.attributes);
706 * @property _instances
707 * @description Internal hash table for all layout unit instances
710 LayoutUnit._instances = {};
713 * @method getLayoutUnitById
714 * @description Get's a layout unit object by the HTML id of the element associated with the Layout Unit object.
715 * @return {Object} The Layout Object
717 LayoutUnit.getLayoutUnitById = function(id) {
718 if (LayoutUnit._instances[id]) {
719 return LayoutUnit._instances[id];
724 YAHOO.extend(LayoutUnit, YAHOO.util.Element, {
726 * @property STR_CLOSE
727 * @description String used for close button title
730 STR_CLOSE: 'Click to close this pane.',
732 * @property STR_COLLAPSE
733 * @description String used for collapse button title
736 STR_COLLAPSE: 'Click to collapse this pane.',
738 * @property STR_EXPAND
739 * @description String used for expand button title
742 STR_EXPAND: 'Click to expand this pane.',
744 * The class name applied to dynamic tabs while loading.
745 * @property LOADING_CLASSNAME
747 * @default "disabled"
749 LOADING_CLASSNAME: 'loading',
752 * @description A modified version of the YAHOO.env.ua object
759 * @description A collection of the current sizes of the contents of this Layout Unit
766 * @description A reference to the Animation instance used by this LayouUnit
767 * @type YAHOO.util.Anim
773 * @description A reference to the Resize instance used by this LayoutUnit
774 * @type YAHOO.util.Resize
780 * @description A reference to the clip element used when collapsing the unit
787 * @description A simple hash table used to store the gutter to apply to the Unit
793 * @description A reference to the HTML element used for the Header
799 * @description A reference to the HTML element used for the body
805 * @description A reference to the HTML element used for the footer
811 * @property _collapsed
812 * @description Flag to determine if the unit is collapsed or not.
818 * @property _collapsing
819 * @description A flag set while the unit is being collapsed, used so we don't fire events while animating the size
825 * @property _lastWidth
826 * @description A holder for the last known width of the unit
832 * @property _lastHeight
833 * @description A holder for the last known height of the unit
840 * @description A holder for the last known top of the unit
846 * @property _lastLeft
847 * @description A holder for the last known left of the unit
853 * @property _lastScroll
854 * @description A holder for the last known scroll state of the unit
860 * @property _lastCenetrScroll
861 * @description A holder for the last known scroll state of the center unit
864 _lastCenterScroll: null,
867 * @property _lastScrollTop
868 * @description A holder for the last known scrollTop state of the unit
871 _lastScrollTop: null,
874 * @description Resize either the unit or it's clipped state, also updating the box inside
875 * @param {Boolean} force This will force full calculations even when the unit is collapsed
876 * @return {<a href="YAHOO.widget.LayoutUnit.html">YAHOO.widget.LayoutUnit</a>} The LayoutUnit instance
878 resize: function(force) {
879 YAHOO.log('Resize', 'info', 'LayoutUnit');
880 var retVal = this.fireEvent('beforeResize');
881 if (retVal === false) {
884 if (!this._collapsing || (force === true)) {
885 var scroll = this.get('scroll');
886 this.set('scroll', false);
889 var hd = this._getBoxSize(this.header),
890 ft = this._getBoxSize(this.footer),
891 box = [this.get('height'), this.get('width')];
893 var nh = (box[0] - hd[0] - ft[0]) - (this._gutter.top + this._gutter.bottom),
894 nw = box[1] - (this._gutter.left + this._gutter.right);
896 var wrapH = (nh + (hd[0] + ft[0])),
899 if (this._collapsed && !this._collapsing) {
900 this._setHeight(this._clip, wrapH);
901 this._setWidth(this._clip, wrapW);
902 Dom.setStyle(this._clip, 'top', this.get('top') + this._gutter.top + 'px');
903 Dom.setStyle(this._clip, 'left', this.get('left') + this._gutter.left + 'px');
904 } else if (!this._collapsed || (this._collapsed && this._collapsing)) {
905 wrapH = this._setHeight(this.get('wrap'), wrapH);
906 wrapW = this._setWidth(this.get('wrap'), wrapW);
907 this._sizes.wrap.h = wrapH;
908 this._sizes.wrap.w = wrapW;
910 Dom.setStyle(this.get('wrap'), 'top', this._gutter.top + 'px');
911 Dom.setStyle(this.get('wrap'), 'left', this._gutter.left + 'px');
913 this._sizes.header.w = this._setWidth(this.header, wrapW);
914 this._sizes.header.h = hd[0];
916 this._sizes.footer.w = this._setWidth(this.footer, wrapW);
917 this._sizes.footer.h = ft[0];
919 Dom.setStyle(this.footer, 'bottom', '0px');
921 this._sizes.body.h = this._setHeight(this.body, (wrapH - (hd[0] + ft[0])));
922 this._sizes.body.w =this._setWidth(this.body, wrapW);
923 Dom.setStyle(this.body, 'top', hd[0] + 'px');
925 this.set('scroll', scroll);
926 this.fireEvent('resize');
934 * @description Sets the width of the element based on the border size of the element.
935 * @param {HTMLElement} el The HTMLElement to have it's width set
936 * @param {Number} w The width that you want it the element set to
937 * @return {Number} The new width, fixed for borders and IE QuirksMode
939 _setWidth: function(el, w) {
941 var b = this._getBorderSizes(el);
942 w = (w - (b[1] + b[3]));
943 w = this._fixQuirks(el, w, 'w');
947 Dom.setStyle(el, 'width', w + 'px');
954 * @description Sets the height of the element based on the border size of the element.
955 * @param {HTMLElement} el The HTMLElement to have it's height set
956 * @param {Number} h The height that you want it the element set to
957 * @return {Number} The new height, fixed for borders and IE QuirksMode
959 _setHeight: function(el, h) {
961 var b = this._getBorderSizes(el);
962 h = (h - (b[0] + b[2]));
963 h = this._fixQuirks(el, h, 'h');
967 Dom.setStyle(el, 'height', h + 'px');
974 * @description Fixes the box calculations for IE in QuirksMode
975 * @param {HTMLElement} el The HTMLElement to set the dimension on
976 * @param {Number} dim The number of the dimension to fix
977 * @param {String} side The dimension (h or w) to fix. Defaults to h
978 * @return {Number} The fixed dimension
980 _fixQuirks: function(el, dim, side) {
986 if (this.browser.ie && !this.browser.standardsMode) {
987 //Internet Explorer - Quirks Mode
988 var b = this._getBorderSizes(el),
989 bp = this._getBorderSizes(el.parentNode);
990 if ((b[i1] === 0) && (b[i2] === 0)) { //No Borders, check parent
991 if ((bp[i1] !== 0) && (bp[i2] !== 0)) { //Parent has Borders
992 dim = (dim - (bp[i1] + bp[i2]));
995 if ((bp[i1] === 0) && (bp[i2] === 0)) {
996 dim = (dim + (b[i1] + b[i2]));
1004 * @method _getBoxSize
1005 * @description Get's the elements clientHeight and clientWidth plus the size of the borders
1006 * @param {HTMLElement} el The HTMLElement to get the size of
1007 * @return {Array} An array of height and width
1009 _getBoxSize: function(el) {
1012 if (this.browser.ie && !this.browser.standardsMode) {
1015 var b = this._getBorderSizes(el);
1016 size[0] = el.clientHeight + (b[0] + b[2]);
1017 size[1] = el.clientWidth + (b[1] + b[3]);
1023 * @method _getBorderSizes
1024 * @description Get the CSS border size of the element passed.
1025 * @param {HTMLElement} el The element to get the border size of
1026 * @return {Array} An array of the top, right, bottom, left borders.
1028 _getBorderSizes: function(el) {
1030 el = el || this.get('element');
1031 if (this.browser.ie && !this.browser.standardsMode) {
1034 s[0] = parseInt(Dom.getStyle(el, 'borderTopWidth'), 10);
1035 s[1] = parseInt(Dom.getStyle(el, 'borderRightWidth'), 10);
1036 s[2] = parseInt(Dom.getStyle(el, 'borderBottomWidth'), 10);
1037 s[3] = parseInt(Dom.getStyle(el, 'borderLeftWidth'), 10);
1039 //IE will return NaN on these if they are set to auto, we'll set them to 0
1040 for (var i = 0; i < s.length; i++) {
1049 * @method _createClip
1050 * @description Create the clip element used when the Unit is collapsed
1052 _createClip: function() {
1054 this._clip = document.createElement('div');
1055 this._clip.className = 'yui-layout-clip yui-layout-clip-' + this.get('position');
1056 this._clip.innerHTML = '<div class="collapse"></div>';
1057 var c = this._clip.firstChild;
1058 c.title = this.STR_EXPAND;
1059 Event.on(c, 'click', this.expand, this, true);
1060 this.get('element').parentNode.appendChild(this._clip);
1065 * @method _toggleClip
1066 * @description Toggle th current state of the Clip element and set it's height, width and position
1068 _toggleClip: function() {
1069 if (!this._collapsed) {
1071 var hd = this._getBoxSize(this.header),
1072 ft = this._getBoxSize(this.footer),
1073 box = [this.get('height'), this.get('width')];
1076 var nh = (box[0] - hd[0] - ft[0]) - (this._gutter.top + this._gutter.bottom),
1077 nw = box[1] - (this._gutter.left + this._gutter.right),
1078 wrapH = (nh + (hd[0] + ft[0]));
1080 switch (this.get('position')) {
1083 this._setWidth(this._clip, nw);
1084 this._setHeight(this._clip, this.get('collapseSize'));
1085 Dom.setStyle(this._clip, 'left', (this._lastLeft + this._gutter.left) + 'px');
1086 if (this.get('position') == 'bottom') {
1087 Dom.setStyle(this._clip, 'top', ((this._lastTop + this._lastHeight) - (this.get('collapseSize') - this._gutter.top)) + 'px');
1089 Dom.setStyle(this._clip, 'top', this.get('top') + this._gutter.top + 'px');
1094 this._setWidth(this._clip, this.get('collapseSize'));
1095 this._setHeight(this._clip, wrapH);
1096 Dom.setStyle(this._clip, 'top', (this.get('top') + this._gutter.top) + 'px');
1097 if (this.get('position') == 'right') {
1098 Dom.setStyle(this._clip, 'left', (((this._lastLeft + this._lastWidth) - this.get('collapseSize')) - this._gutter.left) + 'px');
1100 Dom.setStyle(this._clip, 'left', (this.get('left') + this._gutter.left) + 'px');
1105 Dom.setStyle(this._clip, 'display', 'block');
1106 this.setStyle('display', 'none');
1109 Dom.setStyle(this._clip, 'display', 'none');
1114 * @description Get a reference to the internal sizes object for this unit
1115 * @return {Object} An object of the sizes used for calculations
1117 getSizes: function() {
1122 * @description Toggles the Unit, replacing it with a clipped version.
1123 * @return {<a href="YAHOO.widget.LayoutUnit.html">YAHOO.widget.LayoutUnit</a>} The LayoutUnit instance
1125 toggle: function() {
1126 if (this._collapsed) {
1135 * @description Expand the Unit if it is collapsed.
1136 * @return {<a href="YAHOO.widget.LayoutUnit.html">YAHOO.widget.LayoutUnit</a>} The LayoutUnit instance
1138 expand: function() {
1139 if (!this._collapsed) {
1142 var retVal = this.fireEvent('beforeExpand');
1143 if (retVal === false) {
1147 this._collapsing = true;
1148 this.setStyle('zIndex', this.get('parent')._zIndex + 1);
1151 this.setStyle('display', 'none');
1154 switch (this.get('position')) {
1157 this.set('width', this._lastWidth, true);
1158 this.setStyle('width', this._lastWidth + 'px');
1159 this.get('parent').resize(false);
1160 s = this.get('parent').getSizes()[this.get('position')];
1161 this.set('height', s.h, true);
1168 if (this.get('position') == 'left') {
1169 attr.left.from = (left - s.w);
1170 this.setStyle('left', (left - s.w) + 'px');
1175 this.set('height', this._lastHeight, true);
1176 this.setStyle('height', this._lastHeight + 'px');
1177 this.get('parent').resize(false);
1178 s = this.get('parent').getSizes()[this.get('position')];
1179 this.set('width', s.w, true);
1186 if (this.get('position') == 'top') {
1187 this.setStyle('top', (top - s.h) + 'px');
1188 attr.top.from = (top - s.h);
1193 this._anim.attributes = attr;
1194 var exStart = function() {
1195 this.setStyle('display', 'block');
1197 this._anim.onStart.unsubscribe(exStart, this, true);
1199 var expand = function() {
1200 this._collapsing = false;
1201 this.setStyle('zIndex', this.get('parent')._zIndex);
1202 this.set('width', this._lastWidth);
1203 this.set('height', this._lastHeight);
1204 this._collapsed = false;
1206 this.set('scroll', this._lastScroll);
1207 if (this._lastScrollTop > 0) {
1208 this.body.scrollTop = this._lastScrollTop;
1210 this._anim.onComplete.unsubscribe(expand, this, true);
1211 this.fireEvent('expand');
1213 this._anim.onStart.subscribe(exStart, this, true);
1214 this._anim.onComplete.subscribe(expand, this, true);
1215 this._anim.animate();
1218 this._collapsing = false;
1220 this._collapsed = false;
1221 this.setStyle('zIndex', this.get('parent')._zIndex);
1222 this.setStyle('display', 'block');
1223 this.set('width', this._lastWidth);
1224 this.set('height', this._lastHeight);
1226 this.set('scroll', this._lastScroll);
1227 if (this._lastScrollTop > 0) {
1228 this.body.scrollTop = this._lastScrollTop;
1230 this.fireEvent('expand');
1236 * @description Collapse the Unit if it is not collapsed.
1237 * @return {<a href="YAHOO.widget.LayoutUnit.html">YAHOO.widget.LayoutUnit</a>} The LayoutUnit instance
1239 collapse: function() {
1240 if (this._collapsed) {
1243 var retValue = this.fireEvent('beforeCollapse');
1244 if (retValue === false) {
1250 this._collapsing = true;
1251 var w = this.get('width'),
1252 h = this.get('height'),
1254 this._lastWidth = w;
1255 this._lastHeight = h;
1256 this._lastScroll = this.get('scroll');
1257 this._lastScrollTop = this.body.scrollTop;
1258 this.set('scroll', false, true);
1259 this._lastLeft = parseInt(this.get('element').style.left, 10);
1260 this._lastTop = parseInt(this.get('element').style.top, 10);
1261 if (isNaN(this._lastTop)) {
1265 if (isNaN(this._lastLeft)) {
1267 this.set('left', 0);
1269 this.setStyle('zIndex', this.get('parent')._zIndex + 1);
1270 var pos = this.get('position');
1275 this.set('height', (this.get('collapseSize') + (this._gutter.top + this._gutter.bottom)));
1278 to: (this.get('top') - h)
1281 if (pos == 'bottom') {
1282 attr.top.to = (this.get('top') + h);
1287 this.set('width', (this.get('collapseSize') + (this._gutter.left + this._gutter.right)));
1290 to: -(this._lastWidth)
1293 if (pos == 'right') {
1295 to: (this.get('left') + w)
1301 this._anim.attributes = attr;
1302 var collapse = function() {
1303 this._collapsing = false;
1305 this.setStyle('zIndex', this.get('parent')._zIndex);
1306 this._collapsed = true;
1307 this.get('parent').resize();
1308 this._anim.onComplete.unsubscribe(collapse, this, true);
1309 this.fireEvent('collapse');
1311 this._anim.onComplete.subscribe(collapse, this, true);
1312 this._anim.animate();
1314 this._collapsing = false;
1315 this.setStyle('display', 'none');
1317 this.setStyle('zIndex', this.get('parent')._zIndex);
1318 this.get('parent').resize();
1319 this._collapsed = true;
1320 this.fireEvent('collapse');
1326 * @description Close the unit, removing it from the parent Layout.
1327 * @return {<a href="YAHOO.widget.Layout.html">YAHOO.widget.Layout</a>} The parent Layout instance
1330 this.setStyle('display', 'none');
1331 this.get('parent').removeUnit(this);
1332 this.fireEvent('close');
1334 this._clip.parentNode.removeChild(this._clip);
1337 return this.get('parent');
1340 * @property loadHandler
1341 * @description Callback method for the YUI Connection Manager used for load the body using AJAX
1345 success: function(o) {
1346 this.body.innerHTML = o.responseText;
1349 failure: function(o) {
1353 * @property dataConnection
1354 * @description YUI Connection Manager handler
1357 dataConnection: null,
1360 * @property _loading
1361 * @description During the loading process this variable will be true
1366 * @method loadContent
1367 * @description Loading the content of the unit using the connection manager
1368 * @return {object} YUI Connection Manager handler
1370 loadContent: function() {
1371 // load dynamic content unless already loading or loaded and caching
1372 if (YAHOO.util.Connect && this.get('dataSrc') && !this._loading && !this.get('dataLoaded')) {
1373 this._loading = true;
1374 Dom.addClass(this.body, this.LOADING_CLASSNAME);
1375 this.dataConnection = YAHOO.util.Connect.asyncRequest(
1376 this.get('loadMethod'),
1377 this.get('dataSrc'),
1379 success: function(o) {
1380 this.loadHandler.success.call(this, o);
1381 this.set('dataLoaded', true);
1382 this.dataConnection = null;
1383 Dom.removeClass(this.body, this.LOADING_CLASSNAME);
1384 this._loading = false;
1385 this.fireEvent('load');
1387 failure: function(o) {
1388 this.loadHandler.failure.call(this, o);
1389 this.dataConnection = null;
1390 Dom.removeClass(this.body, this.LOADING_CLASSNAME);
1391 this._loading = false;
1392 this.fireEvent('loadError', { error: o });
1395 timeout: this.get('dataTimeout')
1398 return this.dataConnection;
1405 * @description The initalization method inherited from Element.
1407 init: function(p_oElement, p_oAttributes) {
1408 YAHOO.log('init', 'info', 'LayoutUnit');
1434 LayoutUnit.superclass.init.call(this, p_oElement, p_oAttributes);
1436 this.browser = this.get('parent').browser;
1438 var id = p_oElement;
1439 if (!Lang.isString(id)) {
1440 id = Dom.generateId(id);
1442 LayoutUnit._instances[id] = this;
1444 this.setStyle('position', 'absolute');
1446 this.addClass('yui-layout-unit');
1447 this.addClass('yui-layout-unit-' + this.get('position'));
1450 var header = this.getElementsByClassName('yui-layout-hd', 'div')[0];
1452 this.header = header;
1454 var body = this.getElementsByClassName('yui-layout-bd', 'div')[0];
1458 var footer = this.getElementsByClassName('yui-layout-ft', 'div')[0];
1460 this.footer = footer;
1463 this.on('contentChange', this.resize, this, true);
1464 this._lastScrollTop = 0;
1466 this.set('animate', this.get('animate'));
1470 * @method initAttributes
1471 * @description Processes the config
1473 initAttributes: function(attr) {
1474 LayoutUnit.superclass.initAttributes.call(this, attr);
1479 * @description A reference to the wrap element
1482 this.setAttributeConfig('wrap', {
1483 value: attr.wrap || null,
1484 method: function(w) {
1486 var id = Dom.generateId(w);
1487 LayoutUnit._instances[id] = this;
1493 * @description Set this option to true if you want the LayoutUnit to fix the first layer of YUI CSS Grids (margins)
1496 this.setAttributeConfig('grids', {
1497 value: attr.grids || false
1502 * @description The current top positioning of the Unit
1505 this.setAttributeConfig('top', {
1506 value: attr.top || 0,
1507 validator: Lang.isNumber,
1508 method: function(t) {
1509 if (!this._collapsing) {
1510 this.setStyle('top', t + 'px');
1517 * @description The current left position of the Unit
1520 this.setAttributeConfig('left', {
1521 value: attr.left || 0,
1522 validator: Lang.isNumber,
1523 method: function(l) {
1524 if (!this._collapsing) {
1525 this.setStyle('left', l + 'px');
1531 * @attribute minWidth
1532 * @description The minWidth parameter passed to the Resize Utility
1535 this.setAttributeConfig('minWidth', {
1536 value: attr.minWidth || false,
1537 validator: YAHOO.lang.isNumber
1541 * @attribute maxWidth
1542 * @description The maxWidth parameter passed to the Resize Utility
1545 this.setAttributeConfig('maxWidth', {
1546 value: attr.maxWidth || false,
1547 validator: YAHOO.lang.isNumber
1551 * @attribute minHeight
1552 * @description The minHeight parameter passed to the Resize Utility
1555 this.setAttributeConfig('minHeight', {
1556 value: attr.minHeight || false,
1557 validator: YAHOO.lang.isNumber
1561 * @attribute maxHeight
1562 * @description The maxHeight parameter passed to the Resize Utility
1565 this.setAttributeConfig('maxHeight', {
1566 value: attr.maxHeight || false,
1567 validator: YAHOO.lang.isNumber
1572 * @description The height of the Unit
1575 this.setAttributeConfig('height', {
1577 validator: Lang.isNumber,
1578 method: function(h) {
1579 if (!this._collapsing) {
1583 this.setStyle('height', h + 'px');
1590 * @description The width of the Unit
1593 this.setAttributeConfig('width', {
1595 validator: Lang.isNumber,
1596 method: function(w) {
1597 if (!this._collapsing) {
1601 this.setStyle('width', w + 'px');
1607 * @description The CSS zIndex to give to the unit, so you can have overlapping elements such as menus in a unit.
1610 this.setAttributeConfig('zIndex', {
1611 value: attr.zIndex || false,
1612 method: function(z) {
1613 this.setStyle('zIndex', z);
1617 * @attribute position
1618 * @description The position (top, right, bottom, left or center) of the Unit in the Layout
1621 this.setAttributeConfig('position', {
1622 value: attr.position
1626 * @description The gutter that we should apply to the parent Layout around this Unit. Supports standard CSS markup: (2 4 0 5) or (2) or (2 5)
1629 this.setAttributeConfig('gutter', {
1630 value: attr.gutter || 0,
1631 validator: YAHOO.lang.isString,
1632 method: function(gutter) {
1633 var p = gutter.split(' ');
1635 this._gutter.top = parseInt(p[0], 10);
1637 this._gutter.right = parseInt(p[1], 10);
1639 this._gutter.right = this._gutter.top;
1642 this._gutter.bottom = parseInt(p[2], 10);
1644 this._gutter.bottom = this._gutter.top;
1647 this._gutter.left = parseInt(p[3], 10);
1649 this._gutter.left = this._gutter.right;
1651 this._gutter.left = this._gutter.top;
1658 * @description The parent Layout that we are assigned to
1659 * @type {Object} YAHOO.widget.Layout
1661 this.setAttributeConfig('parent', {
1663 value: attr.parent || false,
1664 method: function(p) {
1666 p.on('resize', this.resize, this, true);
1672 * @attribute collapseSize
1673 * @description The pixel size of the Clip that we will collapse to
1676 this.setAttributeConfig('collapseSize', {
1677 value: attr.collapseSize || 25,
1678 validator: YAHOO.lang.isNumber
1681 * @attribute duration
1682 * @description The duration to give the Animation Utility when animating the opening and closing of Units
1684 this.setAttributeConfig('duration', {
1685 value: attr.duration || 0.5
1689 * @description The Animation Easing to apply to the Animation instance for this unit.
1691 this.setAttributeConfig('easing', {
1692 value: attr.easing || ((YAHOO.util && YAHOO.util.Easing) ? YAHOO.util.Easing.BounceIn : 'false')
1695 * @attribute animate
1696 * @description Use animation to collapse/expand the unit
1699 this.setAttributeConfig('animate', {
1700 value: ((attr.animate === false) ? false : true),
1701 validator: function() {
1703 if (YAHOO.util.Anim) {
1708 method: function(anim) {
1710 this._anim = new YAHOO.util.Anim(this.get('element'), {}, this.get('duration'), this.get('easing'));
1718 * @description The text to use as the Header of the Unit
1720 this.setAttributeConfig('header', {
1721 value: attr.header || false,
1722 method: function(txt) {
1723 if (txt === false) {
1726 Dom.addClass(this.body, 'yui-layout-bd-nohd');
1727 this.header.parentNode.removeChild(this.header);
1732 var header = this.getElementsByClassName('yui-layout-hd', 'div')[0];
1734 header = this._createHeader();
1736 this.header = header;
1738 var h = this.header.getElementsByTagName('h2')[0];
1740 h = document.createElement('h2');
1741 this.header.appendChild(h);
1745 Dom.removeClass(this.body, 'yui-layout-bd-nohd');
1748 this.fireEvent('contentChange', { target: 'header' });
1753 * @description Use the proxy config setting for the Resize Utility
1756 this.setAttributeConfig('proxy', {
1758 value: ((attr.proxy === false) ? false : true)
1762 * @description The content for the body. If we find an element in the page with an id that matches the passed option we will move that element into the body of this unit.
1764 this.setAttributeConfig('body', {
1765 value: attr.body || false,
1766 method: function(content) {
1768 var body = this.getElementsByClassName('yui-layout-bd', 'div')[0];
1772 body = document.createElement('div');
1773 body.className = 'yui-layout-bd';
1775 this.get('wrap').appendChild(body);
1779 Dom.addClass(this.body, 'yui-layout-bd-nohd');
1781 Dom.addClass(this.body, 'yui-layout-bd-noft');
1785 if (Lang.isString(content)) {
1786 el = Dom.get(content);
1787 } else if (content && content.tagName) {
1791 var id = Dom.generateId(el);
1792 LayoutUnit._instances[id] = this;
1793 this.body.appendChild(el);
1795 this.body.innerHTML = content;
1800 this.fireEvent('contentChange', { target: 'body' });
1806 * @description The content for the footer. If we find an element in the page with an id that matches the passed option we will move that element into the footer of this unit.
1808 this.setAttributeConfig('footer', {
1809 value: attr.footer || false,
1810 method: function(content) {
1811 if (content === false) {
1814 Dom.addClass(this.body, 'yui-layout-bd-noft');
1815 this.footer.parentNode.removeChild(this.footer);
1820 var ft = this.getElementsByClassName('yui-layout-ft', 'div')[0];
1822 ft = document.createElement('div');
1823 ft.className = 'yui-layout-ft';
1825 this.get('wrap').appendChild(ft);
1831 if (Lang.isString(content)) {
1832 el = Dom.get(content);
1833 } else if (content && content.tagName) {
1837 this.footer.appendChild(el);
1839 this.footer.innerHTML = content;
1841 Dom.removeClass(this.body, 'yui-layout-bd-noft');
1843 this.fireEvent('contentChange', { target: 'footer' });
1848 * @description Adds a close icon to the unit
1850 this.setAttributeConfig('close', {
1851 value: attr.close || false,
1852 method: function(close) {
1853 //Position Center doesn't get this
1854 if (this.get('position') == 'center') {
1855 YAHOO.log('Position center unit cannot have close', 'error', 'LayoutUnit');
1859 this._createHeader();
1861 var c = Dom.getElementsByClassName('close', 'div', this.header)[0];
1863 //Force some header text if there isn't any
1864 if (!this.get('header')) {
1865 this.set('header', ' ');
1868 c = document.createElement('div');
1869 c.className = 'close';
1870 this.header.appendChild(c);
1871 Event.on(c, 'click', this.close, this, true);
1873 c.title = this.STR_CLOSE;
1875 Event.purgeElement(c);
1876 c.parentNode.removeChild(c);
1878 this._configs.close.value = close;
1879 this.set('collapse', this.get('collapse')); //Reset so we get the right classnames
1884 * @attribute collapse
1885 * @description Adds a collapse icon to the unit
1887 this.setAttributeConfig('collapse', {
1888 value: attr.collapse || false,
1889 method: function(collapse) {
1890 //Position Center doesn't get this
1891 if (this.get('position') == 'center') {
1892 YAHOO.log('Position center unit cannot have collapse', 'error', 'LayoutUnit');
1896 this._createHeader();
1898 var c = Dom.getElementsByClassName('collapse', 'div', this.header)[0];
1900 //Force some header text if there isn't any
1901 if (!this.get('header')) {
1902 this.set('header', ' ');
1905 c = document.createElement('div');
1906 this.header.appendChild(c);
1907 Event.on(c, 'click', this.collapse, this, true);
1909 c.title = this.STR_COLLAPSE;
1910 c.className = 'collapse' + ((this.get('close')) ? ' collapse-close' : '');
1912 Event.purgeElement(c);
1913 c.parentNode.removeChild(c);
1919 * @description Adds a class to the unit to allow for overflow: auto (yui-layout-scroll), default is overflow: hidden (yui-layout-noscroll). If true scroll bars will be placed on the element when the content exceeds the given area, false will put overflow hidden to hide the content. Passing null will render the content as usual overflow.
1920 * @type Boolean/Null
1923 this.setAttributeConfig('scroll', {
1924 value: (((attr.scroll === true) || (attr.scroll === false) || (attr.scroll === null)) ? attr.scroll : false),
1925 method: function(scroll) {
1926 if ((scroll === false) && !this._collapsed) { //Removing scroll bar
1928 if (this.body.scrollTop > 0) {
1929 this._lastScrollTop = this.body.scrollTop;
1934 if (scroll === true) {
1935 this.addClass('yui-layout-scroll');
1936 this.removeClass('yui-layout-noscroll');
1937 if (this._lastScrollTop > 0) {
1939 this.body.scrollTop = this._lastScrollTop;
1942 } else if (scroll === false) {
1943 this.removeClass('yui-layout-scroll');
1944 this.addClass('yui-layout-noscroll');
1945 } else if (scroll === null) {
1946 this.removeClass('yui-layout-scroll');
1947 this.removeClass('yui-layout-noscroll');
1953 * @description Config option to pass to the Resize Utility
1955 this.setAttributeConfig('hover', {
1957 value: attr.hover || false,
1958 validator: YAHOO.lang.isBoolean
1961 * @attribute useShim
1962 * @description Config option to pass to the Resize Utility
1964 this.setAttributeConfig('useShim', {
1965 value: attr.useShim || false,
1966 validator: YAHOO.lang.isBoolean,
1967 method: function(u) {
1969 this._resize.set('useShim', u);
1975 * @description Should a Resize instance be added to this unit
1978 this.setAttributeConfig('resize', {
1979 value: attr.resize || false,
1980 validator: function(r) {
1981 if (YAHOO.util && YAHOO.util.Resize) {
1986 method: function(resize) {
1987 if (resize && !this._resize) {
1988 //Position Center doesn't get this
1989 if (this.get('position') == 'center') {
1990 YAHOO.log('Position center unit cannot have resize', 'error', 'LayoutUnit');
1993 var handle = false; //To catch center
1994 switch (this.get('position')) {
2009 this.setStyle('position', 'absolute'); //Make sure Resize get's a position
2012 this._resize = new YAHOO.util.Resize(this.get('element'), {
2013 proxy: this.get('proxy'),
2014 hover: this.get('hover'),
2018 minWidth: this.get('minWidth'),
2019 maxWidth: this.get('maxWidth'),
2020 minHeight: this.get('minHeight'),
2021 maxHeight: this.get('maxHeight'),
2022 height: this.get('height'),
2023 width: this.get('width'),
2025 useShim: this.get('useShim'),
2029 this._resize._handles[handle].innerHTML = '<div class="yui-layout-resize-knob"></div>';
2031 if (this.get('proxy')) {
2032 var proxy = this._resize.getProxyEl();
2033 proxy.innerHTML = '<div class="yui-layout-handle-' + handle + '"></div>';
2035 this._resize.on('startResize', function(ev) {
2036 this._lastScroll = this.get('scroll');
2037 this.set('scroll', false);
2038 if (this.get('parent')) {
2039 this.get('parent').fireEvent('startResize');
2040 var c = this.get('parent').getUnitByPosition('center');
2041 this._lastCenterScroll = c.get('scroll');
2042 c.addClass(this._resize.CSS_RESIZING);
2043 c.set('scroll', false);
2045 this.fireEvent('startResize');
2047 this._resize.on('resize', function(ev) {
2048 this.set('height', ev.height);
2049 this.set('width', ev.width);
2051 this._resize.on('endResize', function(ev) {
2052 this.set('scroll', this._lastScroll);
2053 if (this.get('parent')) {
2054 var c = this.get('parent').getUnitByPosition('center');
2055 c.set('scroll', this._lastCenterScroll);
2056 c.removeClass(this._resize.CSS_RESIZING);
2059 this.fireEvent('endResize');
2064 this._resize.destroy();
2070 * The unit data source, used for loading content dynamically.
2071 * @attribute dataSrc
2074 this.setAttributeConfig('dataSrc', {
2078 * The method to use for the data request.
2079 * @attribute loadMethod
2083 this.setAttributeConfig('loadMethod', {
2084 value: attr.loadMethod || 'GET',
2085 validator: YAHOO.lang.isString
2088 * Whether or not any data has been loaded from the server.
2089 * @attribute dataLoaded
2092 this.setAttributeConfig('dataLoaded', {
2094 validator: YAHOO.lang.isBoolean,
2098 * Number if milliseconds before aborting and calling failure handler.
2099 * @attribute dataTimeout
2103 this.setAttributeConfig('dataTimeout', {
2104 value: attr.dataTimeout || null,
2105 validator: YAHOO.lang.isNumber
2110 * @method _cleanGrids
2111 * @description This method attempts to clean up the first level of the YUI CSS Grids, YAHOO.util.Selector is required for this operation.
2113 _cleanGrids: function() {
2114 if (this.get('grids')) {
2115 var b = Sel.query('div.yui-b', this.body, true);
2117 Dom.removeClass(b, 'yui-b');
2119 Event.onAvailable('yui-main', function() {
2120 Dom.setStyle(Sel.query('#yui-main'), 'margin-left', '0');
2121 Dom.setStyle(Sel.query('#yui-main'), 'margin-right', '0');
2127 * @method _createHeader
2128 * @description Creates the HTMLElement for the header
2129 * @return {HTMLElement} The new HTMLElement
2131 _createHeader: function() {
2132 var header = document.createElement('div');
2133 header.className = 'yui-layout-hd';
2134 if (this.get('firstChild')) {
2135 this.get('wrap').insertBefore(header, this.get('wrap').firstChild);
2137 this.get('wrap').appendChild(header);
2139 this.header = header;
2144 * @param {Boolean} force Don't report to the parent, because we are being called from the parent.
2145 * @description Removes this unit from the parent and cleans up after itself.
2146 * @return {<a href="YAHOO.widget.Layout.html">YAHOO.widget.Layout</a>} The parent Layout instance
2148 destroy: function(force) {
2150 this._resize.destroy();
2152 var par = this.get('parent');
2154 this.setStyle('display', 'none');
2156 this._clip.parentNode.removeChild(this._clip);
2161 par.removeUnit(this);
2165 par.removeListener('resize', this.resize, this, true);
2167 this.unsubscribeAll();
2168 Event.purgeElement(this.get('element'));
2169 this.get('parentNode').removeChild(this.get('element'));
2171 delete YAHOO.widget.LayoutUnit._instances[this.get('id')];
2172 //Brutal Object Destroy
2173 for (var i in this) {
2174 if (Lang.hasOwnProperty(this, i)) {
2184 * @description Returns a string representing the LayoutUnit.
2187 toString: function() {
2189 return 'LayoutUnit #' + this.get('id') + ' (' + this.get('position') + ')';
2191 return 'LayoutUnit';
2195 * @description Fired when this.resize is called
2196 * @type YAHOO.util.CustomEvent
2199 * @event startResize
2200 * @description Fired when the Resize Utility fires it's startResize Event.
2201 * @type YAHOO.util.CustomEvent
2205 * @description Fired when the Resize Utility fires it's endResize Event.
2206 * @type YAHOO.util.CustomEvent
2209 * @event beforeResize
2210 * @description Fired at the beginning of the resize method. If you return false, the resize is cancelled.
2211 * @type YAHOO.util.CustomEvent
2214 * @event contentChange
2215 * @description Fired when the content in the header, body or footer is changed via the API
2216 * @type YAHOO.util.CustomEvent
2220 * @description Fired when the unit is closed
2221 * @type YAHOO.util.CustomEvent
2224 * @event beforeCollapse
2225 * @description Fired before the unit is collapsed. If you return false, the collapse is cancelled.
2226 * @type YAHOO.util.CustomEvent
2230 * @description Fired when the unit is collapsed
2231 * @type YAHOO.util.CustomEvent
2235 * @description Fired when the unit is exanded
2236 * @type YAHOO.util.CustomEvent
2239 * @event beforeExpand
2240 * @description Fired before the unit is exanded. If you return false, the collapse is cancelled.
2241 * @type YAHOO.util.CustomEvent
2245 * @description Fired when data is loaded via the dataSrc config.
2246 * @type YAHOO.util.CustomEvent
2250 * @description Fired when an error occurs loading data via the dataSrc config. Error message is passed as argument to this event.
2251 * @type YAHOO.util.CustomEvent
2255 YAHOO.widget.LayoutUnit = LayoutUnit;
2257 YAHOO.register("layout", YAHOO.widget.Layout, {version: "2.7.0", build: "1799"});