add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / carousel / Carousel.js

/**\r
 * Carousels, like [tabs](#!/guide/tabs), are a great way to allow the user to swipe through multiple full-screen pages.\r
 * A Carousel shows only one of its pages at a time but allows you to swipe through with your finger.\r
 *\r
 * Carousels can be oriented either horizontally or vertically and are easy to configure - they just work like any other\r
 * Container. Here's how to set up a simple horizontal Carousel:\r
 *\r
 *     @example\r
 *     Ext.create('Ext.Carousel', {\r
 *         fullscreen: true,\r
 *\r
 *         defaults: {\r
 *             styleHtmlContent: true\r
 *         },\r
 *\r
 *         items: [\r
 *             {\r
 *                 html : 'Item 1',\r
 *                 style: 'background-color: #5E99CC'\r
 *             },\r
 *             {\r
 *                 html : 'Item 2',\r
 *                 style: 'background-color: #759E60'\r
 *             },\r
 *             {\r
 *                 html : 'Item 3'\r
 *             }\r
 *         ]\r
 *     });\r
 *\r
 * We can also make Carousels orient themselves vertically:\r
 *\r
 *     @example preview\r
 *     Ext.create('Ext.Carousel', {\r
 *         fullscreen: true,\r
 *         direction: 'vertical',\r
 *\r
 *         defaults: {\r
 *             styleHtmlContent: true\r
 *         },\r
 *\r
 *         items: [\r
 *             {\r
 *                 html : 'Item 1',\r
 *                 style: 'background-color: #759E60'\r
 *             },\r
 *             {\r
 *                 html : 'Item 2',\r
 *                 style: 'background-color: #5E99CC'\r
 *             }\r
 *         ]\r
 *     });\r
 *\r
 * ### Common Configurations\r
 * * {@link #ui} defines the style of the carousel\r
 * * {@link #direction} defines the direction of the carousel\r
 * * {@link #indicator} defines if the indicator show be shown\r
 *\r
 * ### Useful Methods\r
 * * {@link #next} moves to the next card\r
 * * {@link #previous} moves to the previous card\r
 * * {@link #setActiveItem} moves to the passed card\r
 */\r
Ext.define('Ext.carousel.Carousel', {\r
    extend: 'Ext.Container',\r
\r
    alternateClassName: 'Ext.Carousel',\r
\r
    xtype: 'carousel',\r
\r
    requires: [\r
        'Ext.fx.easing.EaseOut',\r
        'Ext.carousel.Item',\r
        'Ext.carousel.Indicator',\r
        'Ext.util.TranslatableGroup'\r
    ],\r
\r
    config: {\r
        /**\r
         * @cfg layout\r
         * Hide layout config in Carousel. It only causes confusion.\r
         * @accessor\r
         * @private\r
         */\r
\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        baseCls: 'x-carousel',\r
\r
        /**\r
         * @cfg {String} direction\r
         * The direction of the Carousel, either 'horizontal' or 'vertical'.\r
         * @accessor\r
         */\r
        direction: 'horizontal',\r
\r
        directionLock: false,\r
\r
        animation: {\r
            duration: 250,\r
            easing: {\r
                type: 'ease-out'\r
            }\r
        },\r
\r
        /**\r
         * @cfg draggable\r
         * @hide\r
         */\r
\r
        /**\r
         * @cfg {Boolean} indicator\r
         * Provides an indicator while toggling between child items to let the user\r
         * know where they are in the card stack.\r
         * @accessor\r
         */\r
        indicator: true,\r
\r
        /**\r
         * @cfg {String} ui\r
         * Style options for Carousel. Default is 'dark'. 'light' is also available.\r
         * @accessor\r
         */\r
        ui: 'dark',\r
\r
        itemConfig: {},\r
\r
        bufferSize: 1,\r
\r
        itemLength: null\r
    },\r
\r
    itemLength: 0,\r
\r
    offset: 0,\r
\r
    flickStartOffset: 0,\r
\r
    flickStartTime: 0,\r
\r
    dragDirection: 0,\r
\r
    count: 0,\r
\r
    painted: false,\r
\r
    activeIndex: -1,\r
\r
    beforeInitialize: function() {\r
        var me = this;\r
\r
        me.element.on({\r
            resize: 'onSizeChange',\r
            dragstart: 'onDragStart',\r
            drag: 'onDrag',\r
            dragend: 'onDragEnd',\r
            scope: me\r
        });\r
\r
        me.carouselItems = [];\r
\r
        me.orderedCarouselItems = [];\r
\r
        me.inactiveCarouselItems = [];\r
\r
        me.hiddenTranslation = 0;\r
    },\r
\r
    updateBufferSize: function(size) {\r
        var ItemClass = Ext.carousel.Item,\r
            total = size * 2 + 1,\r
            isRendered = this.isRendered(),\r
            innerElement = this.innerElement,\r
            items = this.carouselItems,\r
            ln = items.length,\r
            itemConfig = this.getItemConfig(),\r
            itemLength = this.getItemLength(),\r
            direction = this.getDirection(),\r
            setterName = direction === 'horizontal' ? 'setWidth' : 'setHeight',\r
            i, item;\r
\r
        for (i = ln; i < total; i++) {\r
            item = Ext.factory(itemConfig, ItemClass);\r
\r
            if (itemLength) {\r
                item[setterName].call(item, itemLength);\r
            }\r
            item.setLayoutSizeFlags(this.LAYOUT_BOTH);\r
            items.push(item);\r
            innerElement.append(item.renderElement);\r
\r
            if (isRendered && item.setRendered(true)) {\r
                item.fireEvent('renderedchange', this, item, true);\r
            }\r
        }\r
\r
        this.getTranslatable().setActiveIndex(size);\r
    },\r
\r
    setRendered: function(rendered) {\r
        var wasRendered = this.rendered;\r
\r
        if (rendered !== wasRendered) {\r
            this.rendered = rendered;\r
\r
            var items = this.items.items,\r
                carouselItems = this.carouselItems,\r
                i, ln, item;\r
\r
            for (i = 0,ln = items.length; i < ln; i++) {\r
                item = items[i];\r
\r
                if (!item.isInnerItem()) {\r
                    item.setRendered(rendered);\r
                }\r
            }\r
\r
            for (i = 0,ln = carouselItems.length; i < ln; i++) {\r
                carouselItems[i].setRendered(rendered);\r
            }\r
\r
            return true;\r
        }\r
\r
        return false;\r
    },\r
\r
    onSizeChange: function() {\r
        this.refreshSizing();\r
        this.refreshCarouselItems();\r
        this.refreshActiveItem();\r
    },\r
\r
    onItemAdd: function(item, index) {\r
        this.callParent(arguments);\r
\r
        var innerIndex = this.getInnerItems().indexOf(item),\r
            indicator = this.getIndicator();\r
\r
        if (indicator && item.isInnerItem()) {\r
            indicator.addIndicator();\r
        }\r
\r
        if (innerIndex <= this.getActiveIndex()) {\r
            this.refreshActiveIndex();\r
        }\r
\r
        if (this.isIndexDirty(innerIndex) && !this.isItemsInitializing) {\r
            this.refreshActiveItem();\r
        }\r
    },\r
\r
    doItemLayoutAdd: function(item) {\r
        if (item.isInnerItem()) {\r
            return;\r
        }\r
\r
        this.callParent(arguments);\r
    },\r
\r
    onItemRemove: function(item, index) {\r
        this.callParent(arguments);\r
\r
        var innerIndex = this.getInnerItems().indexOf(item),\r
            indicator = this.getIndicator(),\r
            carouselItems = this.carouselItems,\r
            i, ln, carouselItem;\r
\r
        if (item.isInnerItem() && indicator) {\r
            indicator.removeIndicator();\r
        }\r
\r
        if (innerIndex <= this.getActiveIndex()) {\r
            this.refreshActiveIndex();\r
        }\r
\r
        if (this.isIndexDirty(innerIndex)) {\r
            for (i = 0,ln = carouselItems.length; i < ln; i++) {\r
                carouselItem = carouselItems[i];\r
\r
                if (carouselItem.getComponent() === item) {\r
                    carouselItem.setComponent(null);\r
                }\r
            }\r
\r
            this.refreshActiveItem();\r
        }\r
    },\r
\r
    doItemLayoutRemove: function(item) {\r
        if (item.isInnerItem()) {\r
            return;\r
        }\r
\r
        this.callParent(arguments);\r
    },\r
\r
    onInnerItemMove: function(item, toIndex, fromIndex) {\r
        if ((this.isIndexDirty(toIndex) || this.isIndexDirty(fromIndex))) {\r
            this.refreshActiveItem();\r
        }\r
    },\r
\r
    doItemLayoutMove: function(item) {\r
        if (item.isInnerItem()) {\r
            return;\r
        }\r
\r
        this.callParent(arguments);\r
    },\r
\r
    isIndexDirty: function(index) {\r
        var activeIndex = this.getActiveIndex(),\r
            bufferSize = this.getBufferSize();\r
\r
        return (index >= activeIndex - bufferSize && index <= activeIndex + bufferSize);\r
    },\r
\r
    getTranslatable: function() {\r
        var me = this,\r
            translatable = me.translatable;\r
\r
        if (!translatable) {\r
            me.translatable = translatable = new Ext.util.TranslatableGroup();\r
            translatable.setItems(me.orderedCarouselItems);\r
            translatable.on('animationend', 'onAnimationEnd', me);\r
        }\r
\r
        return translatable;\r
    },\r
\r
    onDragStart: function(e) {\r
        var direction = this.getDirection(),\r
            absDeltaX = e.absDeltaX,\r
            absDeltaY = e.absDeltaY,\r
            directionLock = this.getDirectionLock();\r
\r
        this.isDragging = true;\r
\r
        if (directionLock) {\r
            if ((direction === 'horizontal' && absDeltaX > absDeltaY) ||\r
                (direction === 'vertical' && absDeltaY > absDeltaX)) {\r
                e.stopPropagation();\r
            }\r
            else {\r
                this.isDragging = false;\r
                return;\r
            }\r
        }\r
\r
        this.getTranslatable().stopAnimation();\r
\r
        this.dragStartOffset = this.offset;\r
        this.dragDirection = 0;\r
    },\r
\r
    onDrag: function(e) {\r
        if (!this.isDragging) {\r
            return;\r
        }\r
\r
        var startOffset = this.dragStartOffset,\r
            direction = this.getDirection(),\r
            delta = direction === 'horizontal' ? e.deltaX : e.deltaY,\r
            lastOffset = this.offset,\r
            flickStartTime = this.flickStartTime,\r
            dragDirection = this.dragDirection,\r
            now = Ext.Date.now(),\r
            currentActiveIndex = this.getActiveIndex(),\r
            maxIndex = this.getMaxItemIndex(),\r
            lastDragDirection = dragDirection,\r
            offset;\r
\r
        if ((currentActiveIndex === 0 && delta > 0) || (currentActiveIndex === maxIndex && delta < 0)) {\r
            delta *= 0.5;\r
        }\r
\r
        offset = startOffset + delta;\r
\r
        if (offset > lastOffset) {\r
            dragDirection = 1;\r
        }\r
        else if (offset < lastOffset) {\r
            dragDirection = -1;\r
        }\r
\r
        if (dragDirection !== lastDragDirection || (now - flickStartTime) > 300) {\r
            this.flickStartOffset = lastOffset;\r
            this.flickStartTime = now;\r
        }\r
\r
        this.dragDirection = dragDirection;\r
\r
        this.setOffset(offset);\r
    },\r
\r
    onDragEnd: function(e) {\r
        if (!this.isDragging) {\r
            return;\r
        }\r
\r
        this.onDrag(e);\r
\r
        this.isDragging = false;\r
\r
        var now = Ext.Date.now(),\r
            itemLength = this.itemLength,\r
            threshold = itemLength / 2,\r
            offset = this.offset,\r
            activeIndex = this.getActiveIndex(),\r
            maxIndex = this.getMaxItemIndex(),\r
            animationDirection = 0,\r
            flickDistance = offset - this.flickStartOffset,\r
            flickDuration = now - this.flickStartTime,\r
            indicator = this.getIndicator(),\r
            velocity;\r
\r
        if (flickDuration > 0 && Math.abs(flickDistance) >= 10) {\r
            velocity = flickDistance / flickDuration;\r
\r
            if (Math.abs(velocity) >= 1) {\r
                if (velocity < 0 && activeIndex < maxIndex) {\r
                    animationDirection = -1;\r
                }\r
                else if (velocity > 0 && activeIndex > 0) {\r
                    animationDirection = 1;\r
                }\r
            }\r
        }\r
\r
        if (animationDirection === 0) {\r
            if (activeIndex < maxIndex && offset < -threshold) {\r
                animationDirection = -1;\r
            }\r
            else if (activeIndex > 0 && offset > threshold) {\r
                animationDirection = 1;\r
            }\r
        }\r
\r
        if (indicator) {\r
            indicator.setActiveIndex(activeIndex - animationDirection);\r
        }\r
\r
        this.animationDirection = animationDirection;\r
\r
        this.setOffsetAnimated(animationDirection * itemLength);\r
    },\r
\r
    applyAnimation: function(animation) {\r
        animation.easing = Ext.factory(animation.easing, Ext.fx.easing.EaseOut);\r
\r
        return animation;\r
    },\r
\r
    updateDirection: function(direction) {\r
        var indicator = this.getIndicator();\r
\r
        this.currentAxis = (direction === 'horizontal') ? 'x' : 'y';\r
\r
        if (indicator) {\r
            indicator.setDirection(direction);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * @chainable\r
     */\r
    setOffset: function(offset) {\r
        this.offset = offset;\r
\r
        if (Ext.isNumber(this.itemOffset)) {\r
            this.getTranslatable().translateAxis(this.currentAxis, offset + this.itemOffset);\r
        }\r
\r
        return this;\r
    },\r
\r
    /**\r
     * @private\r
     * @return {Ext.carousel.Carousel} this\r
     * @chainable\r
     */\r
    setOffsetAnimated: function(offset) {\r
        var indicator = this.getIndicator();\r
\r
        if (indicator) {\r
            indicator.setActiveIndex(this.getActiveIndex() - this.animationDirection);\r
        }\r
\r
        this.offset = offset;\r
\r
        this.getTranslatable().translateAxis(this.currentAxis, offset + this.itemOffset, this.getAnimation());\r
\r
        return this;\r
    },\r
\r
    onAnimationEnd: function(translatable) {\r
        var currentActiveIndex = this.getActiveIndex(),\r
            animationDirection = this.animationDirection,\r
            axis = this.currentAxis,\r
            currentOffset = translatable[axis],\r
            itemLength = this.itemLength,\r
            offset;\r
\r
        if (animationDirection === -1) {\r
            offset = itemLength + currentOffset;\r
        }\r
        else if (animationDirection === 1) {\r
            offset = currentOffset - itemLength;\r
        }\r
        else {\r
            offset = currentOffset;\r
        }\r
\r
        offset -= this.itemOffset;\r
        this.offset = offset;\r
        this.setActiveItem(currentActiveIndex - animationDirection);\r
    },\r
\r
    refresh: function() {\r
        this.refreshSizing();\r
        this.refreshActiveItem();\r
    },\r
\r
    refreshSizing: function() {\r
        var element = this.element,\r
            itemLength = this.getItemLength(),\r
            translatableItemLength = {\r
                x: 0,\r
                y: 0\r
            },\r
            itemOffset, containerSize;\r
\r
        if (this.getDirection() === 'horizontal') {\r
            containerSize = element.getWidth();\r
        }\r
        else {\r
            containerSize = element.getHeight();\r
        }\r
\r
        this.hiddenTranslation = -containerSize;\r
\r
        if (itemLength === null) {\r
            itemLength = containerSize;\r
            itemOffset = 0;\r
        }\r
        else {\r
            itemOffset = (containerSize - itemLength) / 2;\r
        }\r
\r
        this.itemLength = itemLength;\r
        this.itemOffset = itemOffset;\r
        translatableItemLength[this.currentAxis] = itemLength;\r
        this.getTranslatable().setItemLength(translatableItemLength);\r
    },\r
\r
    refreshOffset: function() {\r
        this.setOffset(this.offset);\r
    },\r
\r
    refreshActiveItem: function() {\r
        this.updateActiveItem(this.getActiveItem());\r
    },\r
\r
    /**\r
     * Returns the index of the currently active card.\r
     * @return {Number} The index of the currently active card.\r
     */\r
    getActiveIndex: function() {\r
        return this.activeIndex;\r
    },\r
\r
    refreshActiveIndex: function() {\r
        this.activeIndex = this.getInnerItemIndex(this.getActiveItem());\r
    },\r
\r
    refreshCarouselItems: function() {\r
        var items = this.carouselItems,\r
            i, ln, item;\r
\r
        for (i = 0,ln = items.length; i < ln; i++) {\r
            item = items[i];\r
            item.getTranslatable().refresh();\r
        }\r
\r
        this.refreshInactiveCarouselItems();\r
    },\r
\r
    refreshInactiveCarouselItems: function() {\r
        var items = this.inactiveCarouselItems,\r
            hiddenTranslation = this.hiddenTranslation,\r
            axis = this.currentAxis,\r
            i, ln, item;\r
\r
        for (i = 0,ln = items.length; i < ln; i++) {\r
            item = items[i];\r
            item.translateAxis(axis, hiddenTranslation);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * @return {Number}\r
     */\r
    getMaxItemIndex: function() {\r
        return this.innerItems.length - 1;\r
    },\r
\r
    /**\r
     * @private\r
     * @return {Number}\r
     */\r
    getInnerItemIndex: function(item) {\r
        return this.innerItems.indexOf(item);\r
    },\r
\r
    /**\r
     * @private\r
     * @return {Object}\r
     */\r
    getInnerItemAt: function(index) {\r
        return this.innerItems[index];\r
    },\r
\r
    /**\r
     * @private\r
     * @return {Object}\r
     */\r
    applyActiveItem: function() {\r
        var activeItem = this.callParent(arguments),\r
            activeIndex;\r
\r
        if (activeItem) {\r
            activeIndex = this.getInnerItemIndex(activeItem);\r
\r
            if (activeIndex !== -1) {\r
                this.activeIndex = activeIndex;\r
                return activeItem;\r
            }\r
        }\r
    },\r
\r
    updateActiveItem: function(activeItem) {\r
        var activeIndex = this.getActiveIndex(),\r
            maxIndex = this.getMaxItemIndex(),\r
            indicator = this.getIndicator(),\r
            bufferSize = this.getBufferSize(),\r
            carouselItems = this.carouselItems.slice(),\r
            orderedCarouselItems = this.orderedCarouselItems,\r
            visibleIndexes = {},\r
            visibleItems = {},\r
            visibleItem, component, id, i, index, ln, carouselItem;\r
\r
        if (carouselItems.length === 0) {\r
            return;\r
        }\r
\r
        this.callParent(arguments);\r
\r
        orderedCarouselItems.length = 0;\r
\r
        if (activeItem) {\r
            id = activeItem.getId();\r
            visibleItems[id] = activeItem;\r
            visibleIndexes[id] = bufferSize;\r
\r
            if (activeIndex > 0) {\r
                for (i = 1; i <= bufferSize; i++) {\r
                    index = activeIndex - i;\r
                    if (index >= 0) {\r
                        visibleItem = this.getInnerItemAt(index);\r
                        id = visibleItem.getId();\r
                        visibleItems[id] = visibleItem;\r
                        visibleIndexes[id] = bufferSize - i;\r
                    }\r
                    else {\r
                        break;\r
                    }\r
                }\r
            }\r
\r
            if (activeIndex < maxIndex) {\r
                for (i = 1; i <= bufferSize; i++) {\r
                    index = activeIndex + i;\r
                    if (index <= maxIndex) {\r
                        visibleItem = this.getInnerItemAt(index);\r
                        id = visibleItem.getId();\r
                        visibleItems[id] = visibleItem;\r
                        visibleIndexes[id] = bufferSize + i;\r
                    }\r
                    else {\r
                        break;\r
                    }\r
                }\r
            }\r
\r
            for (i = 0,ln = carouselItems.length; i < ln; i++) {\r
                carouselItem = carouselItems[i];\r
                component = carouselItem.getComponent();\r
\r
                if (component) {\r
                    id = component.getId();\r
\r
                    if (visibleIndexes.hasOwnProperty(id)) {\r
                        carouselItems.splice(i, 1);\r
                        i--;\r
                        ln--;\r
                        delete visibleItems[id];\r
                        orderedCarouselItems[visibleIndexes[id]] = carouselItem;\r
                    }\r
                }\r
            }\r
\r
            for (id in visibleItems) {\r
                if (visibleItems.hasOwnProperty(id)) {\r
                    visibleItem = visibleItems[id];\r
                    carouselItem = carouselItems.pop();\r
                    carouselItem.setComponent(visibleItem);\r
                    orderedCarouselItems[visibleIndexes[id]] = carouselItem;\r
                }\r
            }\r
        }\r
\r
        this.inactiveCarouselItems.length = 0;\r
        this.inactiveCarouselItems = carouselItems;\r
        this.refreshOffset();\r
        this.refreshInactiveCarouselItems();\r
\r
        if (indicator) {\r
            indicator.setActiveIndex(activeIndex);\r
        }\r
    },\r
\r
    /**\r
     * Switches to the next card.\r
     * @return {Ext.carousel.Carousel} this\r
     * @chainable\r
     */\r
    next: function() {\r
        this.setOffset(0);\r
\r
        if (this.activeIndex === this.getMaxItemIndex()) {\r
            return this;\r
        }\r
\r
        this.animationDirection = -1;\r
        this.setOffsetAnimated(-this.itemLength);\r
        return this;\r
    },\r
\r
    /**\r
     * Switches to the previous card.\r
     * @return {Ext.carousel.Carousel} this\r
     * @chainable\r
     */\r
    previous: function() {\r
        this.setOffset(0);\r
\r
        if (this.activeIndex === 0) {\r
            return this;\r
        }\r
\r
        this.animationDirection = 1;\r
        this.setOffsetAnimated(this.itemLength);\r
        return this;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    applyIndicator: function(indicator, currentIndicator) {\r
        return Ext.factory(indicator, Ext.carousel.Indicator, currentIndicator);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateIndicator: function(indicator) {\r
        if (indicator) {\r
            this.insertFirst(indicator);\r
\r
            indicator.setUi(this.getUi());\r
            indicator.on({\r
                next: 'next',\r
                previous: 'previous',\r
                scope: this\r
            });\r
        }\r
    },\r
\r
    destroy: function() {\r
        var me = this,\r
            carouselItems = me.carouselItems.slice();\r
\r
        me.carouselItems.length = 0;\r
\r
        Ext.destroy(carouselItems, me.getIndicator(), me.translatable);\r
\r
        me.callParent();\r
        delete me.carouselItems;\r
    }\r
});\r