carousel-beta-debug.js

这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。

            size     = 0,
            vertical = false;

        if (this._itemsTable.numItems === 0) {
            return 0;
        }

        if (typeof which == "undefined") {
            if (this._itemsTable.size > 0) {
                return this._itemsTable.size;
            }
        }

        if (JS.isUndefined(this._itemsTable.items[0])) {
            return 0;
        }

        child = Dom.get(this._itemsTable.items[0].id);

        if (typeof which == "undefined") {
            vertical = this.get("isVertical");
        } else {
            vertical = which == "height";
        }

        if (vertical) {
            size = getStyle(child, "height");
        } else {
            size = getStyle(child, "width");
        }

        if (typeof which == "undefined") {
            this._itemsTable.size = size; // save the size for later
        }

        return size;
    }

    /**
     * Return the scrolling offset size given the number of elements to
     * scroll.
     *
     * @method getScrollOffset
     * @param delta {Number} The delta number of elements to scroll by.
     * @private
     */
    function getScrollOffset(delta) {
        var itemSize = 0,
            size     = 0;

        itemSize = getCarouselItemSize.call(this);
        size     = itemSize * delta;

        // XXX: really, when the orientation is vertical, the scrolling
        // is not exactly the number of elements into element size.
        if (this.get("isVertical")) {
            size -= delta;
        }

        return size;
    }

    /**
     * The load the required set of items that are needed for display.
     *
     * @method loadItems
     * @private
     */
    function loadItems() {
        var first      = this.get("firstVisible"),
            last       = 0,
            numItems   = this.get("numItems"),
            numVisible = this.get("numVisible"),
            reveal     = this.get("revealAmount");

        last = first + numVisible - 1 + (reveal ? 1 : 0);
        last = last > numItems - 1 ? numItems - 1 : last;

        if (!this.getItem(first) || !this.getItem(last)) {
            this.fireEvent(loadItemsEvent, {
                    ev: loadItemsEvent,
                    first: first, last: last,
                    num: last - first
            });
        }
    }

    /**
     * Scroll the Carousel by a page backward.
     *
     * @method scrollPageBackward
     * @param {Event} ev The event object
     * @param {Object} obj The context object
     * @private
     */
    function scrollPageBackward(ev, obj) {
        obj.scrollPageBackward();
        Event.preventDefault(ev);
    }

    /**
     * Scroll the Carousel by a page forward.
     *
     * @method scrollPageForward
     * @param {Event} ev The event object
     * @param {Object} obj The context object
     * @private
     */
    function scrollPageForward(ev, obj) {
        obj.scrollPageForward();
        Event.preventDefault(ev);
    }

    /**
     * Set the selected item.
     *
     * @method setItemSelection
     * @param {Number} newposition The index of the new position
     * @param {Number} oldposition The index of the previous position
     * @private
     */
     function setItemSelection(newposition, oldposition) {
        var backwards,
            cssClass   = this.CLASSES,
            el,
            firstItem  = this._firstItem,
            isCircular = this.get("isCircular"),
            numItems   = this.get("numItems"),
            numVisible = this.get("numVisible"),
            position   = oldposition,
            sentinel   = firstItem + numVisible - 1;

        backwards = numVisible > 1 && !isCircular && position > newposition;

        if (position >= 0 && position < numItems) {
            if (!JS.isUndefined(this._itemsTable.items[position])) {
                el = Dom.get(this._itemsTable.items[position].id);
                if (el) {
                    Dom.removeClass(el, cssClass.SELECTED_ITEM);
                }
            }
        }

        if (JS.isNumber(newposition)) {
            newposition = parseInt(newposition, 10);
            newposition = JS.isNumber(newposition) ? newposition : 0;
        } else {
            newposition = firstItem;
        }

        if (JS.isUndefined(this._itemsTable.items[newposition])) {
            this.scrollTo(newposition); // still loading the item
        }

        if (!JS.isUndefined(this._itemsTable.items[newposition])) {
            el = Dom.get(this._itemsTable.items[newposition].id);
            if (el) {
                Dom.addClass(el, cssClass.SELECTED_ITEM);
            }
        }

        if (newposition < firstItem || newposition > sentinel) {
            // out of focus
            if (backwards) {
                this.scrollTo(firstItem - numVisible, true);
            } else {
                this.scrollTo(newposition);
            }
        }
    }

    /**
     * Fire custom events for enabling/disabling navigation elements.
     *
     * @method syncNavigation
     * @private
     */
    function syncNavigation() {
        var attach   = false,
            cssClass = this.CLASSES,
            i,
            navigation,
            sentinel;

        navigation = this.get("navigation");
        sentinel   = this._firstItem + this.get("numVisible");

        if (navigation.prev) {
            if (this._firstItem === 0) {
                if (!this.get("isCircular")) {
                    Event.removeListener(navigation.prev, "click",
                            scrollPageBackward);
                    Dom.addClass(navigation.prev, cssClass.FIRST_NAV_DISABLED);
                    for (i = 0; i < this._navBtns.prev.length; i++) {
                        this._navBtns.prev[i].setAttribute("disabled", "true");
                    }
                    this._prevEnabled = false;
                } else {
                    attach = !this._prevEnabled;
                }
            } else {
                attach = !this._prevEnabled;
            }

            if (attach) {
                Event.on(navigation.prev, "click", scrollPageBackward, this);
                Dom.removeClass(navigation.prev, cssClass.FIRST_NAV_DISABLED);
                for (i = 0; i < this._navBtns.prev.length; i++) {
                    this._navBtns.prev[i].removeAttribute("disabled");
                }
                this._prevEnabled = true;
            }
        }

        attach = false;
        if (navigation.next) {
            if (sentinel >= this.get("numItems")) {
                if (!this.get("isCircular")) {
                    Event.removeListener(navigation.next, "click",
                            scrollPageForward);
                    Dom.addClass(navigation.next, cssClass.DISABLED);
                    for (i = 0; i < this._navBtns.next.length; i++) {
                        this._navBtns.next[i].setAttribute("disabled", "true");
                    }
                    this._nextEnabled = false;
                } else {
                    attach = !this._nextEnabled;
                }
            } else {
                attach = !this._nextEnabled;
            }

            if (attach) {
                Event.on(navigation.next, "click", scrollPageForward, this);
                Dom.removeClass(navigation.next, cssClass.DISABLED);
                for (i = 0; i < this._navBtns.next.length; i++) {
                    this._navBtns.next[i].removeAttribute("disabled");
                }
                this._nextEnabled = true;
            }
        }

        this.fireEvent(navigationStateChangeEvent,
                { next: this._nextEnabled, prev: this._prevEnabled });
    }

    /**
     * Fire custom events for synchronizing the DOM.
     *
     * @method syncUI
     * @param {Object} o The item that needs to be added or removed
     * @private
     */
    function syncUI(o) {
        var el, i, item, num, oel, pos, sibling;

        if (!JS.isObject(o)) {
            return;
        }

        switch (o.ev) {
        case itemAddedEvent:
            pos  = JS.isUndefined(o.pos) ? this._itemsTable.numItems-1 : o.pos;
            if (!JS.isUndefined(this._itemsTable.items[pos])) {
                item = this._itemsTable.items[pos];
                if (item && !JS.isUndefined(item.id)) {
                    oel  = Dom.get(item.id);
                }
            }
            if (!oel) {
                el = this._createCarouselItem({
                        className : item.className,
                        content   : item.item,
                        id        : item.id
                });
                if (JS.isUndefined(o.pos)) {
                    if (!JS.isUndefined(this._itemsTable.loading[pos])) {
                        oel = this._itemsTable.loading[pos];
                    }
                    if (oel) {
                        this._carouselEl.replaceChild(el, oel);
                    } else {
                        this._carouselEl.appendChild(el);
                    }
                } else {
                    if (!JS.isUndefined(this._itemsTable.items[o.pos + 1])) {
                        sibling = Dom.get(this._itemsTable.items[o.pos + 1].id);
                    }
                    if (sibling) {
                        this._carouselEl.insertBefore(el, sibling);
                    } else {
                        YAHOO.log("Unable to find sibling","error",WidgetName);
                    }
                }
            } else {
                if (JS.isUndefined(o.pos)) {
                    if (!Dom.isAncestor(this._carouselEl, oel)) {
                        this._carouselEl.appendChild(oel);
                    }
                } else {
                    if (!Dom.isAncestor(this._carouselEl, oel)) {
                        if (!JS.isUndefined(this._itemsTable.items[o.pos+1])) {
                            this._carouselEl.insertBefore(oel, Dom.get(
                                    this._itemsTable.items[o.pos+1].id));
                        }
                    }
                }
            }

            if (this._recomputeSize) {
                this._setClipContainerSize();
            }
            break;
        case itemRemovedEvent:
            num  = this.get("numItems");
            item = o.item;
            pos  = o.pos;

            if (item && (el = Dom.get(item.id))) {
                if (el && Dom.isAncestor(this._carouselEl, el)) {
                    Event.purgeElement(el, true);
                    this._carouselEl.removeChild(el);
                }

                if (this.get("selectedItem") == pos) {
                    pos = pos >= num ? num - 1 : pos;
                    this.set("selectedItem", pos);
                }
            } else {
                YAHOO.log("Unable to find item", "warn", WidgetName);
            }
            break;
        case loadItemsEvent:
            for (i = o.first; i <= o.last; i++) {
                el = this._createCarouselItem({
                        content : this.CONFIG.ITEM_LOADING,
                        id      : Dom.generateId()
                });
                if (el) {
                    if (!JS.isUndefined(this._itemsTable.items[o.last + 1])) {
                        sibling = Dom.get(this._itemsTable.items[o.last+1].id);
                        if (sibling) {
                            this._carouselEl.insertBefore(el, sibling);
                        } else {
                            YAHOO.log("Unable to find sibling", "error",
                                    WidgetName);
                        }
                    } else {
                        this._carouselEl.appendChild(el);
                    }
                }
                this._itemsTable.loading[i] = el;
            }
            break;
        }
    }

    /*
     * Static members and methods of the Carousel component
     */

    /**
     * Return the appropriate Carousel object based on the id associated with
     * the Carousel element or false if none match.
     * @method getById
     * @public
     * @static
     */
    Carousel.getById = function (id) {
        return instances[id] ? instances[id] : false;
    };

    YAHOO.extend(Carousel, YAHOO.util.Element, {

        /*
         * Internal variables used within the Carousel component
         */

        /**
         * The Carousel element.
         *
         * @property _carouselEl
         * @private
         */
        _carouselEl: null,

        /**
         * The Carousel clipping container element.
         *
         * @property _clipEl
         * @private
         */
        _clipEl: null,

        /**
         * The current first index of the Carousel.
         *
         * @property _firstItem
         * @private
         */
        _firstItem: 0,

        /**
         * Is the animation still in progress?
         *
         * @property _isAnimationInProgress