add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / layout / container / boxOverflow / Scroller.js

/**\r
 * @private\r
 */\r
Ext.define('Ext.layout.container.boxOverflow.Scroller', {\r
\r
    /* Begin Definitions */\r
\r
    extend: 'Ext.layout.container.boxOverflow.None',\r
    requires: ['Ext.util.ClickRepeater', 'Ext.Element'],\r
    alternateClassName: 'Ext.layout.boxOverflow.Scroller',\r
    alias: [\r
        'box.overflow.scroller',\r
        'box.overflow.Scroller' // capitalized for 4.x compat\r
    ],\r
    mixins: {\r
        observable: 'Ext.mixin.Observable'\r
    },\r
    \r
    /* End Definitions */\r
\r
    /**\r
     * @cfg {Boolean} animateScroll\r
     * True to animate the scrolling of items within the layout (ignored if enableScroll is false)\r
     */\r
    animateScroll: false,\r
\r
    /**\r
     * @cfg {Number} scrollIncrement\r
     * The number of pixels to scroll by on scroller click\r
     */\r
    scrollIncrement: 20,\r
\r
    /**\r
     * @cfg {Number} wheelIncrement\r
     * The number of pixels to increment on mouse wheel scrolling.\r
     */\r
    wheelIncrement: 10,\r
\r
    /**\r
     * @cfg {Number} scrollRepeatInterval\r
     * Number of milliseconds between each scroll while a scroller button is held down\r
     */\r
    scrollRepeatInterval: 60,\r
\r
    /**\r
     * @cfg {Number} scrollDuration\r
     * Number of milliseconds that each scroll animation lasts\r
     */\r
    scrollDuration: 400,\r
\r
    /**\r
     * @private\r
     */\r
    scrollerCls: Ext.baseCSSPrefix + 'box-scroller',\r
    beforeSuffix: '-before-scroller',\r
    afterSuffix: '-after-scroller',\r
\r
    /**\r
     * @event scroll\r
     * @param {Ext.layout.container.boxOverflow.Scroller} scroller The layout scroller\r
     * @param {Number} newPosition The new position of the scroller\r
     * @param {Boolean/Object} animate If animating or not. If true, it will be a animation configuration, else it will be false\r
     */\r
\r
    constructor: function(config) {\r
        var me = this;\r
\r
        me.mixins.observable.constructor.call(me, config);\r
\r
        me.scrollPosition = 0;\r
        me.scrollSize = 0;\r
    },\r
\r
    getPrefixConfig: function() {\r
        return {\r
            role: 'presentation',\r
            id: this.layout.owner.id + this.beforeSuffix,\r
            cls: this.createScrollerCls('beforeX'),\r
            style: 'display:none'\r
        };\r
    },\r
\r
    getSuffixConfig: function() {\r
        return {\r
            role: 'presentation',\r
            id : this.layout.owner.id + this.afterSuffix,\r
            cls: this.createScrollerCls('afterX'),\r
            style: 'display:none'\r
        };\r
    },\r
\r
    createScrollerCls: function(xName) {\r
        var me = this,\r
            layout = me.layout,\r
            owner = layout.owner,\r
            type = me.getOwnerType(owner),\r
            scrollerCls = me.scrollerCls,\r
            cls =\r
                scrollerCls + ' ' +\r
                scrollerCls + '-' + layout.names[xName] + ' ' +\r
                scrollerCls + '-' + type + ' ' +\r
                scrollerCls + '-' + type + '-' + owner.ui;\r
\r
        if (owner.plain) {\r
            // Add plain class for components that need separate "plain" styling (e.g. tab bar)\r
            cls += ' ' + scrollerCls + '-plain';\r
        }\r
\r
        return cls;\r
    },\r
\r
    getOverflowCls: function(direction) {\r
        return this.scrollerCls + '-body-' + direction;\r
    },\r
\r
    beginLayout: function (ownerContext) {\r
        ownerContext.innerCtScrollPos = this.getScrollPosition();\r
\r
        this.callParent(arguments);\r
    },\r
\r
    finishedLayout: function(ownerContext) {\r
        var me = this,\r
            plan = ownerContext.state.boxPlan,\r
            layout = me.layout,\r
            names = layout.names,\r
            scrollPos = Math.min(me.getMaxScrollPosition(), ownerContext.innerCtScrollPos),\r
            lastProps;\r
\r
        // If there is overflow...\r
        if (plan && plan.tooNarrow) {\r
            lastProps = ownerContext.childItems[ownerContext.childItems.length - 1].props;\r
\r
            // capture this before callParent since it calls handle/clearOverflow:\r
            me.scrollSize = lastProps[names.x] + lastProps[names.width];\r
            me.updateScrollButtons();\r
\r
            // Restore pre layout scroll position\r
            layout.innerCt[names.setScrollLeft](scrollPos);\r
        }\r
\r
        me.callParent([ownerContext]);\r
    },\r
\r
    handleOverflow: function(ownerContext) {\r
        var me = this,\r
            names = me.layout.names,\r
            getWidth = names.getWidth,\r
            parallelMargins = names.parallelMargins,\r
            scrollerWidth, targetPaddingWidth, beforeScroller, afterScroller;\r
\r
        me.showScrollers();\r
\r
        beforeScroller = me.getBeforeScroller();\r
        afterScroller = me.getAfterScroller();\r
        \r
        scrollerWidth = beforeScroller[getWidth]() + afterScroller[getWidth]() +\r
            beforeScroller.getMargin(parallelMargins) + afterScroller.getMargin(parallelMargins);\r
        \r
        targetPaddingWidth = ownerContext.targetContext.getPaddingInfo()[names.width];\r
        \r
        return {\r
            reservedSpace: Math.max(scrollerWidth - targetPaddingWidth, 0)\r
        };\r
    },\r
\r
    /**\r
     * @private\r
     * Returns a reference to the "before" scroller element.  Creates click handlers on\r
     * the first call.\r
     */\r
    getBeforeScroller: function() {\r
        var me = this;\r
\r
        return  me._beforeScroller || (me._beforeScroller =\r
            me.createScroller(me.beforeSuffix, 'beforeRepeater', 'scrollLeft'));\r
    },\r
\r
    /**\r
     * @private\r
     * Returns a reference to the "after" scroller element.  Creates click handlers on\r
     * the first call.\r
     */\r
    getAfterScroller: function() {\r
        var me = this;\r
\r
        return me._afterScroller || (me._afterScroller =\r
            me.createScroller(me.afterSuffix, 'afterRepeater', 'scrollRight'));\r
    },\r
\r
    createScroller: function(suffix, repeaterName, scrollHandler) {\r
        var me = this,\r
            owner = me.layout.owner,\r
            scrollerCls = me.scrollerCls,\r
            scrollerEl;\r
\r
        scrollerEl = owner.el.getById(owner.id + suffix);\r
\r
        scrollerEl.addClsOnOver(scrollerCls + '-hover');\r
        scrollerEl.addClsOnClick(scrollerCls + '-pressed');\r
\r
        scrollerEl.setVisibilityMode(Ext.Element.DISPLAY);\r
\r
        me[repeaterName] = new Ext.util.ClickRepeater(scrollerEl, {\r
            interval: me.scrollRepeatInterval,\r
            handler: scrollHandler,\r
            scope: me\r
        });\r
\r
        return scrollerEl;\r
    },\r
\r
    /**\r
     * @private\r
     * Sets up an listener to scroll on the layout's innerCt mousewheel event\r
     */\r
    createWheelListener: function() {\r
        var me = this;\r
        me.wheelListener = me.layout.innerCt.on('mousewheel', me.onMouseWheel, me, {destroyable: true});\r
    },\r
\r
    onMouseWheel: function(e) {\r
        e.stopEvent();\r
        this.scrollBy(this.getWheelDelta(e) * this.wheelIncrement * -1, false);\r
    },\r
\r
    getWheelDelta: function (e) {\r
        return e.getWheelDelta();\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    clearOverflow: function () {\r
        this.hideScrollers();\r
    },\r
\r
    /**\r
     * @private\r
     * Shows the scroller elements. Creates the scrollers first if they are not already present.\r
     */\r
    showScrollers: function() {\r
        var me = this;\r
\r
        if (!me.wheelListener) {\r
            me.createWheelListener();\r
        }\r
        me.getBeforeScroller().show();\r
        me.getAfterScroller().show();\r
        me.layout.owner.addClsWithUI(me.layout.direction === 'vertical' ? 'vertical-scroller' : 'scroller');\r
        // TODO - this may invalidates data in the ContextItem's styleCache\r
    },\r
\r
    /**\r
     * @private\r
     * Hides the scroller elements.\r
     */\r
    hideScrollers: function() {\r
        var me = this,\r
            beforeScroller = me.getBeforeScroller(),\r
            afterScroller = me.getAfterScroller();\r
\r
        if (beforeScroller) {\r
            beforeScroller.hide();\r
            afterScroller.hide();\r
            me.layout.owner.removeClsWithUI(me.layout.direction === 'vertical' ? 'vertical-scroller' : 'scroller');\r
            // TODO - this may invalidates data in the ContextItem's styleCache\r
        }\r
    },\r
\r
    destroy: function() {\r
        Ext.destroyMembers(this, 'beforeRepeater', 'afterRepeater', '_beforeScroller', '_afterScroller', 'wheelListener');\r
        this.callParent();\r
    },\r
\r
    /**\r
     * @private\r
     * Scrolls left or right by the number of pixels specified\r
     * @param {Number} delta Number of pixels to scroll to the right by. Use a negative number to scroll left\r
     */\r
    scrollBy: function(delta, animate) {\r
        this.scrollTo(this.getScrollPosition() + delta, animate);\r
    },\r
\r
    /**\r
     * @private\r
     * @return {Object} Object passed to scrollTo when scrolling\r
     */\r
    getScrollAnim: function() {\r
        return {\r
            duration: this.scrollDuration, \r
            callback: this.updateScrollButtons, \r
            scope   : this\r
        };\r
    },\r
\r
    /**\r
     * @private\r
     * Enables or disables each scroller button based on the current scroll position\r
     */\r
    updateScrollButtons: function() {\r
        var me = this,\r
            beforeScroller = me.getBeforeScroller(),\r
            afterScroller = me.getAfterScroller(),\r
            disabledCls;\r
\r
        if (!beforeScroller || !afterScroller) {\r
            return;\r
        }\r
\r
        disabledCls = me.scrollerCls + '-disabled';\r
\r
        beforeScroller[me.atExtremeBefore()  ? 'addCls' : 'removeCls'](disabledCls);\r
        afterScroller[me.atExtremeAfter() ? 'addCls' : 'removeCls'](disabledCls);\r
        me.scrolling = false;\r
    },\r
\r
    /**\r
     * @private\r
     * Scrolls to the left by the configured amount\r
     */\r
    scrollLeft: function() {\r
        this.scrollBy(-this.scrollIncrement, false);\r
    },\r
\r
    /**\r
     * @private\r
     * Scrolls to the right by the configured amount\r
     */\r
    scrollRight: function() {\r
        this.scrollBy(this.scrollIncrement, false);\r
    },\r
\r
    /**\r
     * Returns the current scroll position of the innerCt element\r
     * @return {Number} The current scroll position\r
     */\r
    getScrollPosition: function(){\r
        var me = this,\r
            layout = me.layout,\r
            result;\r
\r
        // Until we actually scroll, the scroll[Top|Left] is stored as zero to avoid DOM\r
        // hits, after that it's NaN.\r
        if (isNaN(me.scrollPosition)) {\r
            result = layout.innerCt[layout.names.getScrollLeft]();\r
        } else {\r
            result = me.scrollPosition;\r
        }\r
        return result;\r
    },\r
\r
    /**\r
     * @private\r
     * Returns the maximum value we can scrollTo\r
     * @return {Number} The max scroll value\r
     */\r
    getMaxScrollPosition: function() {\r
        var me = this,\r
            layout = me.layout,\r
            maxScrollPos = me.scrollSize - layout.innerCt.lastBox[layout.names.width];\r
\r
        return (maxScrollPos < 0) ? 0 : maxScrollPos;\r
    },\r
\r
    /**\r
     * @private\r
     * Returns true if the innerCt scroll is already at its left-most point\r
     * @return {Boolean} True if already at furthest left point\r
     */\r
    atExtremeBefore: function() {\r
        return !this.getScrollPosition();\r
    },\r
\r
    /**\r
     * @private\r
     * Returns true if the innerCt scroll is already at its right-most point\r
     * @return {Boolean} True if already at furthest right point\r
     */\r
    atExtremeAfter: function() {\r
        return this.getScrollPosition() >= this.getMaxScrollPosition();\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    setVertical: function() {\r
        var me = this,\r
            beforeScroller = me.getBeforeScroller(),\r
            afterScroller = me.getAfterScroller(),\r
            names = me.layout.names,\r
            scrollerCls = me.scrollerCls;\r
\r
        beforeScroller.removeCls(scrollerCls + '-' + names.beforeY);\r
        afterScroller.removeCls(scrollerCls + '-' + names.afterY);\r
\r
        beforeScroller.addCls(scrollerCls + '-' + names.beforeX);\r
        afterScroller.addCls(scrollerCls + '-' + names.afterX);\r
\r
        this.callParent();\r
    },\r
\r
    /**\r
     * @private\r
     * Scrolls to the given position. Performs bounds checking.\r
     * @param {Number} position The position to scroll to. This is constrained.\r
     * @param {Boolean} animate True to animate. If undefined, falls back to value of this.animateScroll\r
     */\r
    scrollTo: function(position, animate) {\r
        var me = this,\r
            layout = me.layout,\r
            names = layout.names,\r
            oldPosition = me.getScrollPosition(),\r
            newPosition = Ext.Number.constrain(position, 0, me.getMaxScrollPosition());\r
\r
        if (newPosition !== oldPosition && !me.scrolling) {\r
            me.scrollPosition = NaN;\r
            if (animate === undefined) {\r
                animate = me.animateScroll;\r
            }\r
\r
            layout.innerCt[names.scrollTo](names.beforeScrollX, newPosition, animate ? me.getScrollAnim() : false);\r
            if (animate) {\r
                me.scrolling = true;\r
            } else {\r
                me.updateScrollButtons();\r
            }\r
            me.fireEvent('scroll', me, newPosition, animate ? me.getScrollAnim() : false);\r
        }\r
    },\r
\r
    /**\r
     * Scrolls to the given component.\r
     * @param {String/Number/Ext.Component} item The item to scroll to. Can be a numerical index, component id \r
     * or a reference to the component itself.\r
     * @param {Boolean} animate True to animate the scrolling\r
     */\r
    scrollToItem: function(item, animate) {\r
        var me = this,\r
            layout = me.layout,\r
            owner = layout.owner,\r
            names = layout.names,\r
            innerCt = layout.innerCt,\r
            visibility,\r
            box,\r
            newPos;\r
\r
        item = me.getItem(item);\r
        if (item !== undefined) {\r
            if (item === owner.items.first()) {\r
                newPos = 0;\r
            } else if (item === owner.items.last()) {\r
                newPos = me.getMaxScrollPosition();\r
            } else {\r
                visibility = me.getItemVisibility(item);\r
                if (!visibility.fullyVisible) {\r
                    box = item.getBox(false, true);\r
                    newPos = box[names.x];\r
                    if (visibility.hiddenEnd) {\r
                        newPos -= (innerCt[names.getWidth]() - box[names.width]);\r
                    }\r
                }\r
            }\r
            if (newPos !== undefined) {\r
                me.scrollTo(newPos, animate);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * For a given item in the container, return an object with information on whether the item is visible\r
     * with the current innerCt scroll value.\r
     * @param {Ext.Component} item The item\r
     * @return {Object} Values for fullyVisible, hiddenStart and hiddenEnd\r
     */\r
    getItemVisibility: function(item) {\r
        var me          = this,\r
            box         = me.getItem(item).getBox(true, true),\r
            layout      = me.layout,\r
            names       = layout.names,\r
            itemStart   = box[names.x],\r
            itemEnd     = itemStart + box[names.width],\r
            scrollStart = me.getScrollPosition(),\r
            scrollEnd   = scrollStart + layout.innerCt[names.getWidth]();\r
\r
        return {\r
            hiddenStart : itemStart < scrollStart,\r
            hiddenEnd   : itemEnd > scrollEnd,\r
            fullyVisible: itemStart >= scrollStart && itemEnd <= scrollEnd\r
        };\r
    }\r
});\r