carousel-beta.js

来自「这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。」· JavaScript 代码 · 共 2,061 行 · 第 1/5 页

         *
         * @method getItem
         * @param index {Number} The index of the item to be returned
         * @return {Object} Return the item at index or null if not found
         * @public
         */
        getItem: function (index) {
            if (index < 0 || index >= this.get("numItems")) {
                return null;
            }

            if (this._itemsTable.numItems > index) {
                if (!JS.isUndefined(this._itemsTable.items[index])) {
                    return this._itemsTable.items[index];
                }
            }

            return null;
        },

        /**
         * Return all items as an array.
         *
         * @method getItems
         * @return {Array} Return all items in the Carousel
         * @public
         */
        getItems: function (index) {
            return this._itemsTable.items;
        },

        /**
         * Return the position of the Carousel item that has the id "id", or -1
         * if the id is not found.
         *
         * @method getItemPositionById
         * @param index {Number} The index of the item to be returned
         * @public
         */
        getItemPositionById: function (id) {
            var i = 0, n = this._itemsTable.numItems;

            while (i < n) {
                if (!JS.isUndefined(this._itemsTable.items[i])) {
                    if (this._itemsTable.items[i].id == id) {
                        return i;
                    }
                }
                i++;
            }

            return -1;
        },

        /**
         * Remove an item at index from the Carousel.
         *
         * @method removeItem
         * @public
         * @param index {Number} The position to where in the list (starts from
         * zero).
         * @return {Boolean} Return true on success, false otherwise
         */
        removeItem: function (index) {
            var item, num = this.get("numItems");

            if (index < 0 || index >= num) {
                return false;
            }

            item = this._itemsTable.items.splice(index, 1);
            if (item && item.length == 1) {
                this.set("numItems", num - 1);

                this.fireEvent(itemRemovedEvent,
                        { item: item[0], pos: index, ev: itemRemovedEvent });
                return true;
            }

            return false;
        },

        /**
         * Render the Carousel.
         *
         * @method render
         * @public
         * @param appendTo {HTMLElement | String} The element to which the
         * Carousel should be appended prior to rendering.
         * @return {Boolean} Status of the operation
         */
        render: function (appendTo) {
            var config = this.CONFIG,
                cssClass = this.CLASSES,
                size;

            this.addClass(cssClass.CAROUSEL);

            if (!this._clipEl) {
                this._clipEl = this._createCarouselClip();
                this._clipEl.appendChild(this._carouselEl);
            }

            if (appendTo) {
                this.appendChild(this._clipEl);
                this.appendTo(appendTo);
                this._setClipContainerSize();
            } else {
                if (!Dom.inDocument(this.get("element"))) {
                    return false;
                }
                this.appendChild(this._clipEl);
            }

            if (this.get("isVertical")) {
                size = getCarouselItemSize.call(this);
                size = size < config.MIN_WIDTH ? config.MIN_WIDTH : size;
                this.setStyle("width",  size + "px");
                this.addClass(cssClass.VERTICAL);
            } else {
                this.addClass(cssClass.HORIZONTAL);
            }

            if (this.get("numItems") < 1) {
                return false;
            }

            // Make sure at least one item is selected
            this.set("selectedItem", this.get("firstVisible"));

            this.fireEvent(renderEvent);

            // By now, the navigation would have been rendered, so calculate
            // the container height now.
            this._setContainerSize();

            return true;
        },

        /**
         * Scroll the Carousel by an item backward.
         *
         * @method scrollBackward
         * @public
         */
        scrollBackward: function () {
            this.scrollTo(this._firstItem - this.get("scrollIncrement"));
        },

        /**
         * Scroll the Carousel by an item forward.
         *
         * @method scrollForward
         * @public
         */
        scrollForward: function () {
            this.scrollTo(this._firstItem + this.get("scrollIncrement"));
        },

        /**
         * Scroll the Carousel by a page backward.
         *
         * @method scrollPageBackward
         * @public
         */
        scrollPageBackward: function () {
            this.scrollTo(this._firstItem - this.get("numVisible"));
        },

        /**
         * Scroll the Carousel by a page forward.
         *
         * @method scrollPageForward
         * @public
         */
        scrollPageForward: function () {
            this.scrollTo(this._firstItem + this.get("numVisible"));
        },

        /**
         * Scroll the Carousel to make the item the first visible item.
         *
         * @method scrollTo
         * @public
         * @param item Number The index of the element to position at.
         * @param dontSelect Boolean True if select should be avoided
         */
        scrollTo: function (item, dontSelect) {
            var anim,
                animate,
                animAttrs,
                animCfg    = this.get("animation"),
                isCircular = this.get("isCircular"),
                delta,
                direction,
                firstItem  = this._firstItem,
                newPage,
                numItems   = this.get("numItems"),
                numPerPage = this.get("numVisible"),
                offset,
                page       = this.get("currentPage"),
                rv,
                sentinel,
                which;

            if (item == firstItem) {
                return;         // nothing to do!
            }

            if (this._isAnimationInProgress) {
                return;         // let it take its own sweet time to complete
            }

            if (item < 0) {
                if (isCircular) {
                    item = numItems + item;
                } else {
                    return;
                }
            } else if (item > numItems - 1) {
                if (this.get("isCircular")) {
                    item = numItems - item;
                } else {
                    return;
                }
            }

            direction = (this._firstItem > item) ? "backward" : "forward";

            sentinel  = firstItem + numPerPage;
            sentinel  = (sentinel > numItems - 1) ? numItems - 1 : sentinel;
            rv = this.fireEvent(beforeScrollEvent,
                    { dir: direction, first: firstItem, last: sentinel });
            if (rv === false) { // scrolling is prevented
                return;
            }

            this.fireEvent(beforePageChangeEvent, { page: page });

            delta = firstItem - item; // yes, the delta is reverse
            this._firstItem = item;
            this.set("firstVisible", item);


            loadItems.call(this); // do we have all the items to display?

            sentinel  = item + numPerPage;
            sentinel  = (sentinel > numItems - 1) ? numItems - 1 : sentinel;

            which     = this.get("isVertical") ? "top" : "left";
            offset    = getScrollOffset.call(this, delta);

            animate   = animCfg.speed > 0;

            if (animate) {
                this._isAnimationInProgress = true;
                if (this.get("isVertical")) {
                    animAttrs = { points: { by: [0, offset] } };
                } else {
                    animAttrs = { points: { by: [offset, 0] } };
                }
                anim = new YAHOO.util.Motion(this._carouselEl, animAttrs,
                        animCfg.speed, animCfg.effect);
                anim.onComplete.subscribe(function (ev) {
                    var first = this.get("firstVisible");

                    this._isAnimationInProgress = false;
                    this.fireEvent(afterScrollEvent,
                            { first: first, last: sentinel });
                }, null, this);
                anim.animate();
                anim = null;
            } else {
                offset += getStyle(this._carouselEl, which);
                Dom.setStyle(this._carouselEl, which, offset + "px");
            }

            newPage = parseInt(this._firstItem / numPerPage, 10);
            if (newPage != page) {
                this.setAttributeConfig("currentPage", { value: newPage });
                this.fireEvent(pageChangeEvent, newPage);
            }

            if (!dontSelect) {
                if (this.get("selectOnScroll")) {
                    if (item != this._selectedItem) { // out of sync
                        this.set("selectedItem", this._getSelectedItem(item));
                    }
                }
            }

            delete this._autoPlayTimer;
            if (this.get("autoPlay") > 0) {
                this.startAutoPlay();
            }

            if (!animate) {
                this.fireEvent(afterScrollEvent,
                        { first: item, last: sentinel });
            }
        },

        /**
         * Display the Carousel.
         *
         * @method show
         * @public
         */
        show: function () {
            var cssClass = this.CLASSES;

            if (this.fireEvent(beforeShowEvent) !== false) {
                this.addClass(cssClass.VISIBLE);
                this.fireEvent(showEvent);
            }
        },

        /**
         * Start auto-playing the Carousel.
         *
         * @method startAutoPlay
         * @public
         */
        startAutoPlay: function () {
            var self  = this,
                timer = this.get("autoPlay");

            if (timer > 0) {
                if (!JS.isUndefined(this._autoPlayTimer)) {
                    return;
                }
                this.fireEvent(startAutoPlayEvent);
                this._autoPlayTimer = setTimeout(function () {
                    autoScroll.call(self); }, timer);
            }
        },

        /**
         * Stop auto-playing the Carousel.
         *
         * @method stopAutoPlay
         * @public
         */
        stopAutoPlay: function () {
            if (!JS.isUndefined(this._autoPlayTimer)) {
                clearTimeout(this._autoPlayTimer);
                delete this._autoPlayTimer;
                this.set("autoPlay", 0);
                this.fireEvent(stopAutoPlayEvent);
            }
        },

        /**
         * Return the string representation of the Carousel.
         *
         * @method toString
         * @public
         * @return {String}
         */
        toString: function () {
            return WidgetName + (this.get ? " (#" + this.get("id") + ")" : "");
        },

        /*
         * Protected methods of the Carousel component
         */

        /**
         * Create the Carousel.
         *
         * @method createCarousel
         * @param elId {String} The id of the element to be created
         * @protected
         */
        _createCarousel: function (elId) {
            var cssClass = this.CLASSES;

            var el = createElement("DIV", {
                    className : cssClass.CAROUSEL,
                    id        : elId
            });

            if (!this._carouselEl) {
                this._carouselEl = createElement(this.CONFIG.TAG_NAME,
                        { className: cssClass.CAROUSEL_EL });
            }

            return el;
        },

        /**
         * Create the Carousel clip container.
         *
         * @method createCarouselClip
         * @protected
         */
        _createCarouselClip: function () {
            var el = createElement("DIV", { className: this.CLASSES.CONTENT });
            this._setClipContainerSize(el);

            return el;
        },

        /**
         * Create the Carousel item.
         *
         * @method createCarouselItem
         * @param obj {Object} The attributes of the element to be created