layout-debug.js

很棒的在线教学系统

                    box = [this.get('height'), this.get('width')];


                var nh = (box[0] - hd[0] - ft[0]) - (this._gutter.top + this._gutter.bottom),
                    nw = box[1] - (this._gutter.left + this._gutter.right),
                    wrapH = (nh + (hd[0] + ft[0]));

                switch (this.get('position')) {
                    case 'top':
                    case 'bottom':
                        this._setWidth(this._clip, nw);
                        this._setHeight(this._clip, this.get('collapseSize'));
                        Dom.setStyle(this._clip, 'left', (this._lastLeft + this._gutter.left) + 'px');
                        if (this.get('position') == 'bottom') {
                            Dom.setStyle(this._clip, 'top', ((this._lastTop + this._lastHeight) - (this.get('collapseSize') - this._gutter.top)) + 'px');
                        } else {
                            Dom.setStyle(this._clip, 'top', this.get('top') + this._gutter.top + 'px');
                        }
                        break;
                    case 'left':
                    case 'right':
                        this._setWidth(this._clip, this.get('collapseSize'));
                        this._setHeight(this._clip, wrapH);
                        Dom.setStyle(this._clip, 'top', (this.get('top') + this._gutter.top) + 'px');
                        if (this.get('position') == 'right') {
                            Dom.setStyle(this._clip, 'left', (((this._lastLeft + this._lastWidth) - this.get('collapseSize')) - this._gutter.left) + 'px');
                        } else {
                            Dom.setStyle(this._clip, 'left', (this.get('left') + this._gutter.left) + 'px');
                        }
                        break;
                }

                Dom.setStyle(this._clip, 'display', 'block');
                this.setStyle('display', 'none');
            } else {
                //Hide
                Dom.setStyle(this._clip, 'display', 'none');
            }
        },
        /**
        * @method getSizes
        * @description Get a reference to the internal sizes object for this unit
        * @return {Object} An object of the sizes used for calculations
        */
        getSizes: function() {
            return this._sizes;
        },
        /**
        * @method toggle
        * @description Toggles the Unit, replacing it with a clipped version.
        * @return {<a href="YAHOO.widget.LayoutUnit.html">YAHOO.widget.LayoutUnit</a>} The LayoutUnit instance
        */
        toggle: function() {
            if (this._collapsed) {
                this.expand();
            } else {
                this.collapse();
            }
            return this;
        },
        /**
        * @method expand
        * @description Expand the Unit if it is collapsed.
        * @return {<a href="YAHOO.widget.LayoutUnit.html">YAHOO.widget.LayoutUnit</a>} The LayoutUnit instance
        */
        expand: function() {
            if (!this._collapsed) {
                return this;
            }
            var retVal = this.fireEvent('beforeExpand');
            if (retVal === false) {
                return this;
            }

            this._collapsing = true;
            this.setStyle('zIndex', this.get('parent')._zIndex + 1);

            if (this._anim) {
                this.setStyle('display', 'none');
                var attr = {}, s;

                switch (this.get('position')) {
                    case 'left':
                    case 'right':
                        this.set('width', this._lastWidth, true);
                        this.setStyle('width', this._lastWidth + 'px');
                        this.get('parent').resize(false);
                        s = this.get('parent').getSizes()[this.get('position')];
                        this.set('height', s.h, true);
                        var left = s.l;
                        attr = {
                            left: {
                                to: left
                            }
                        };
                        if (this.get('position') == 'left') {
                            attr.left.from = (left - s.w);
                            this.setStyle('left', (left - s.w) + 'px');
                        }
                        break;
                    case 'top':
                    case 'bottom':
                        this.set('height', this._lastHeight, true);
                        this.setStyle('height', this._lastHeight + 'px');
                        this.get('parent').resize(false);
                        s = this.get('parent').getSizes()[this.get('position')];
                        this.set('width', s.w, true);
                        var top = s.t;
                        attr = {
                            top: {
                                to: top
                            }
                        };
                        if (this.get('position') == 'top') {
                            this.setStyle('top',  (top - s.h) + 'px');
                            attr.top.from = (top - s.h);
                        }
                        break;
                }

                this._anim.attributes = attr;
                var exStart = function() {
                    this.setStyle('display', 'block');
                    this.resize(true);
                    this._anim.onStart.unsubscribe(exStart, this, true);
                };
                var expand = function() {
                    this._collapsing = false;
                    this.setStyle('zIndex', this.get('parent')._zIndex);
                    this.set('width', this._lastWidth);
                    this.set('height', this._lastHeight);
                    this._collapsed = false;
                    this.resize();
                    this.set('scroll', this._lastScroll);
                    if (this._lastScrollTop > 0) {
                        this.body.scrollTop = this._lastScrollTop;
                    }
                    this._anim.onComplete.unsubscribe(expand, this, true);
                    this.fireEvent('expand');
                };
                this._anim.onStart.subscribe(exStart, this, true);
                this._anim.onComplete.subscribe(expand, this, true);
                this._anim.animate();
                this._toggleClip();
            } else {
                this._collapsing = false;
                this._toggleClip();
                this._collapsed = false;
                this.setStyle('zIndex', this.get('parent')._zIndex);
                this.setStyle('display', 'block');
                this.set('width', this._lastWidth);
                this.set('height', this._lastHeight);
                this.resize();
                this.set('scroll', this._lastScroll);
                if (this._lastScrollTop > 0) {
                    this.body.scrollTop = this._lastScrollTop;
                }
                this.fireEvent('expand');
            }
            return this;
        },
        /**
        * @method collapse
        * @description Collapse the Unit if it is not collapsed.
        * @return {<a href="YAHOO.widget.LayoutUnit.html">YAHOO.widget.LayoutUnit</a>} The LayoutUnit instance
        */
        collapse: function() {
            if (this._collapsed) {
                return this;
            }
            var retValue = this.fireEvent('beforeCollapse');
            if (retValue === false) {
                return this;
            }
            if (!this._clip) {
                this._createClip();
            }
            this._collapsing = true;
            var w = this.get('width'),
                h = this.get('height'),
                attr = {};
            this._lastWidth = w;
            this._lastHeight = h;
            this._lastScroll = this.get('scroll');
            this._lastScrollTop = this.body.scrollTop;            
            this.set('scroll', false, true);
            this._lastLeft = parseInt(this.get('element').style.left, 10);
            this._lastTop = parseInt(this.get('element').style.top, 10);
            if (isNaN(this._lastTop)) {
                this._lastTop = 0;
                this.set('top', 0);
            }
            if (isNaN(this._lastLeft)) {
                this._lastLeft = 0;
                this.set('left', 0);
            }
            this.setStyle('zIndex', this.get('parent')._zIndex + 1);
            var pos = this.get('position');

            switch (pos) {
                case 'top':
                case 'bottom':
                    this.set('height', (this.get('collapseSize') + (this._gutter.top + this._gutter.bottom)));
                    attr = {
                        top: {
                            to: (this.get('top') - h)
                        }
                    };
                    if (pos == 'bottom') {
                        attr.top.to = (this.get('top') + h);
                    }
                    break;
                case 'left':
                case 'right':
                    this.set('width', (this.get('collapseSize') + (this._gutter.left + this._gutter.right)));
                    attr = {
                        left: {
                            to: -(this._lastWidth)
                        }
                    };
                    if (pos == 'right') {
                        attr.left = {
                            to: (this.get('left') + w)
                        };
                    }
                    break;
            }
            if (this._anim) {
                this._anim.attributes = attr;
                var collapse = function() {
                    this._collapsing = false;
                    this._toggleClip();
                    this.setStyle('zIndex', this.get('parent')._zIndex);
                    this._collapsed = true;
                    this.get('parent').resize();
                    this._anim.onComplete.unsubscribe(collapse, this, true);
                    this.fireEvent('collapse');
                };
                this._anim.onComplete.subscribe(collapse, this, true);
                this._anim.animate();
            } else {
                this._collapsing = false;
                this.setStyle('display', 'none');
                this._toggleClip();
                this.setStyle('zIndex', this.get('parent')._zIndex);
                this.get('parent').resize();
                this._collapsed = true;
                this.fireEvent('collapse');
            }
            return this;
        },
        /**
        * @method close
        * @description Close the unit, removing it from the parent Layout.
        * @return {<a href="YAHOO.widget.Layout.html">YAHOO.widget.Layout</a>} The parent Layout instance
        */
        close: function() {
            this.setStyle('display', 'none');
            this.get('parent').removeUnit(this);
            this.fireEvent('close');
            if (this._clip) {
                this._clip.parentNode.removeChild(this._clip);
                this._clip = null;
            }
            return this.get('parent');
        },
		/**
        * @property loadHandler
        * @description Callback method for the YUI Connection Manager used for load the body using AJAX
        * @type Object
        */
		loadHandler: {
            success: function(o) {
				this.body.innerHTML = o.responseText;
				this.resize (true);
            },
            failure: function(o) {
            }
        },
		/**
        * @property dataConnection
        * @description YUI Connection Manager handler
        * @type Object
        */
		dataConnection: null,
		/**
        * @private
        * @property _loading
        * @description During the loading process this variable will be true
        * @type Number
        */
        _loading: false,
		/**
        * @method loadContent
        * @description Loading the content of the unit using the connection manager
        * @return {object} YUI Connection Manager handler
        */
        loadContent: function() {
			// load dynamic content unless already loading or loaded and caching
			if (YAHOO.util.Connect && this.get('dataSrc') && !this._loading && !this.get('dataLoaded')) {
		        this._loading = true; 
		        Dom.addClass(this.body, this.LOADING_CLASSNAME);
				this.dataConnection = YAHOO.util.Connect.asyncRequest(
		            this.get('loadMethod'),
		            this.get('dataSrc'), 
		            {
		                success: function(o) {
		                    this.loadHandler.success.call(this, o);
		                    this.set('dataLoaded', true);
		                    this.dataConnection = null;
		                    Dom.removeClass(this.body, this.LOADING_CLASSNAME);
							this._loading = false;
							this.fireEvent('load');
		                },
		                failure: function(o) {
		                    this.loadHandler.failure.call(this, o);
		                    this.dataConnection = null;
		                    Dom.removeClass(this.body, this.LOADING_CLASSNAME);
		                    this._loading = false;
							this.fireEvent('loadError', { error: o });
		                },
		                scope: this,
		                timeout: this.get('dataTimeout')
		            }
		        );
				return this.dataConnection;
	        }
			return false;
        },
        /**
        * @private
        * @method init
        * @description The initalization method inherited from Element.
        */
        init: function(p_oElement, p_oAttributes) {
            YAHOO.log('init', 'info', 'LayoutUnit');
            this._gutter = {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            };
            this._sizes = {
                wrap: {
                    h: 0,
                    w: 0
                },
                header: {
                    h: 0,
                    w: 0
                },
                body: {
                    h: 0,
                    w: 0
                },
                footer: {