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"});
added
removed
var/httpd/htdocs/yui/2.7.0/build/layout/layout-debug.js
