add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / slider / Slider.js

/**\r
 * Utility class used by Ext.field.Slider.\r
 * @private\r
 */\r
Ext.define('Ext.slider.Slider', {\r
    extend: 'Ext.Container',\r
    xtype: 'slider',\r
\r
    requires: [\r
        'Ext.slider.Thumb',\r
        'Ext.fx.easing.EaseOut'\r
    ],\r
\r
    /**\r
    * @event change\r
    * Fires when the value changes\r
    * @param {Ext.slider.Slider} this\r
    * @param {Ext.slider.Thumb} thumb The thumb being changed\r
    * @param {Number} newValue The new value\r
    * @param {Number} oldValue The old value\r
    */\r
\r
    /**\r
    * @event dragstart\r
    * Fires when the slider thumb starts a drag\r
    * @param {Ext.slider.Slider} this\r
    * @param {Ext.slider.Thumb} thumb The thumb being dragged\r
    * @param {Array} value The start value\r
    * @param {Ext.EventObject} e\r
    */\r
\r
    /**\r
    * @event drag\r
    * Fires when the slider thumb starts a drag\r
    * @param {Ext.slider.Slider} this\r
    * @param {Ext.slider.Thumb} thumb The thumb being dragged\r
    * @param {Ext.EventObject} e\r
    */\r
\r
    /**\r
    * @event dragend\r
    * Fires when the slider thumb starts a drag\r
    * @param {Ext.slider.Slider} this\r
    * @param {Ext.slider.Thumb} thumb The thumb being dragged\r
    * @param {Array} value The end value\r
    * @param {Ext.EventObject} e\r
    */\r
    config: {\r
        baseCls: 'x-slider',\r
\r
        /**\r
         * @cfg {Object} thumbConfig The config object to factory {@link Ext.slider.Thumb} instances\r
         * @accessor\r
         */\r
        thumbConfig: {\r
            draggable: {\r
                translatable: {\r
                    easingX: {\r
                        duration: 300,\r
                        type: 'ease-out'\r
                    }\r
                }\r
            }\r
        },\r
\r
        /**\r
         * @cfg {Number} increment The increment by which to snap each thumb when its value changes. Any thumb movement\r
         * will be snapped to the nearest value that is a multiple of the increment (e.g. if increment is 10 and the user\r
         * tries to move the thumb to 67, it will be snapped to 70 instead)\r
         * @accessor\r
         */\r
        increment : 1,\r
\r
        /**\r
         * @cfg {Number/Number[]} value The value(s) of this slider's thumbs. If you pass\r
         * a number, it will assume you have just 1 thumb.\r
         * @accessor\r
         */\r
        value: 0,\r
\r
        /**\r
         * @cfg {Number} minValue The lowest value any thumb on this slider can be set to.\r
         * @accessor\r
         */\r
        minValue: 0,\r
\r
        /**\r
         * @cfg {Number} maxValue The highest value any thumb on this slider can be set to.\r
         * @accessor\r
         */\r
        maxValue: 100,\r
\r
        /**\r
         * @cfg {Boolean} allowThumbsOverlapping Whether or not to allow multiple thumbs to overlap each other.\r
         * Setting this to true guarantees the ability to select every possible value in between {@link #minValue}\r
         * and {@link #maxValue} that satisfies {@link #increment}\r
         * @accessor\r
         */\r
        allowThumbsOverlapping: false,\r
\r
        /**\r
         * @cfg {Boolean/Object} animation\r
         * The animation to use when moving the slider. Possible properties are:\r
         *\r
         * - duration\r
         * - easingX\r
         * - easingY\r
         *\r
         * @accessor\r
         */\r
        animation: true,\r
\r
        /**\r
         * Will make this field read only, meaning it cannot be changed with used interaction.\r
         * @cfg {Boolean} readOnly\r
         * @accessor\r
         */\r
        readOnly: false\r
    },\r
\r
    /**\r
     * @cfg {Number/Number[]} values Alias to {@link #value}\r
     */\r
\r
    elementWidth: 0,\r
\r
    offsetValueRatio: 0,\r
\r
    activeThumb: null,\r
\r
    constructor: function(config) {\r
        config = config || {};\r
\r
        if (config.hasOwnProperty('values')) {\r
            config.value = config.values;\r
        }\r
\r
        this.callParent([config]);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    initialize: function() {\r
        var element = this.element,\r
            thumb;\r
\r
        this.callParent();\r
\r
        element.on({\r
            scope: this,\r
            tap: 'onTap',\r
            resize: 'onResize'\r
        });\r
\r
        this.on({\r
            scope: this,\r
            delegate: '> thumb',\r
            tap: 'onTap',\r
            beforedragstart: 'onThumbBeforeDragStart',\r
            dragstart: 'onThumbDragStart',\r
            drag: 'onThumbDrag',\r
            dragend: 'onThumbDragEnd'\r
        });\r
\r
        thumb = this.getThumb(0);\r
        if (thumb) {\r
            thumb.on('resize', 'onThumbResize', this);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    factoryThumb: function() {\r
        return Ext.factory(this.getThumbConfig(), Ext.slider.Thumb);\r
    },\r
\r
    /**\r
     * Returns the Thumb instances bound to this Slider\r
     * @return {Ext.slider.Thumb[]} The thumb instances\r
     */\r
    getThumbs: function() {\r
        return this.innerItems;\r
    },\r
\r
    /**\r
     * Returns the Thumb instance bound to this Slider\r
     * @param {Number} [index=0] The index of Thumb to return.\r
     * @return {Ext.slider.Thumb} The thumb instance\r
     */\r
    getThumb: function(index) {\r
        if (typeof index != 'number') {\r
            index = 0;\r
        }\r
\r
        return this.innerItems[index];\r
    },\r
\r
    refreshOffsetValueRatio: function() {\r
        var me = this,\r
            valueRange = me.getMaxValue() - me.getMinValue(),\r
            trackWidth = me.elementWidth - me.thumbWidth;\r
\r
        me.offsetValueRatio = valueRange === 0 ? 0 : trackWidth / valueRange;\r
    },\r
\r
    onThumbResize: function(){\r
        var thumb = this.getThumb(0);\r
        if (thumb) {\r
            this.thumbWidth = thumb.getElementWidth();\r
        }\r
        this.refresh();\r
    },\r
\r
    onResize: function(element, info) {\r
        this.elementWidth = info.width;\r
        this.refresh();\r
    },\r
\r
    refresh: function() {\r
        this.refreshing = true;\r
        this.refreshValue();\r
        this.refreshing = false;\r
    },\r
\r
    setActiveThumb: function(thumb) {\r
        var oldActiveThumb = this.activeThumb;\r
\r
        if (oldActiveThumb && oldActiveThumb !== thumb) {\r
            oldActiveThumb.setZIndex(null);\r
        }\r
\r
        this.activeThumb = thumb;\r
        thumb.setZIndex(2);\r
\r
        return this;\r
    },\r
\r
    onThumbBeforeDragStart: function(thumb, e) {\r
        if (this.offsetValueRatio === 0 || e.absDeltaX <= e.absDeltaY || this.getReadOnly()) {\r
            return false;\r
        }\r
    },\r
\r
    onThumbDragStart: function(thumb, e) {\r
        var me = this;\r
\r
        me.refreshAllThumbConstraints();\r
\r
        e.stopPropagation();\r
\r
        if (me.getAllowThumbsOverlapping()) {\r
            me.setActiveThumb(thumb);\r
        }\r
\r
        me.dragStartValue = me.getValue()[me.getThumbIndex(thumb)];\r
        me.fireEvent('dragstart', me, thumb, me.dragStartValue, e);\r
    },\r
\r
    onThumbDrag: function(thumb, e, offsetX) {\r
        var me = this,\r
            index = me.getThumbIndex(thumb),\r
            offsetValueRatio = me.offsetValueRatio,\r
            constrainedValue = me.constrainValue(me.getMinValue() + offsetX / offsetValueRatio);\r
\r
        e.stopPropagation();\r
\r
        me.setIndexValue(index, constrainedValue);\r
\r
        me.fireEvent('drag', me, thumb, me.getValue(), e);\r
\r
        return false;\r
    },\r
\r
    setIndexValue: function(index, value, animation) {\r
        var me = this,\r
            thumb = me.getThumb(index),\r
            values = me.getValue(),\r
            minValue = me.getMinValue(),\r
            offsetValueRatio = me.offsetValueRatio,\r
            increment = me.getIncrement(),\r
            draggable = thumb.getDraggable();\r
\r
        draggable.setOffset((value - minValue) * offsetValueRatio, null, animation);\r
\r
        values[index] = minValue + Math.round((draggable.offset.x / offsetValueRatio) / increment) * increment;\r
    },\r
\r
    onThumbDragEnd: function(thumb, e) {\r
        var me = this,\r
            index = me.getThumbIndex(thumb),\r
            newValue = me.getValue()[index],\r
            oldValue = me.dragStartValue;\r
\r
        me.snapThumbPosition(thumb, newValue);\r
        me.fireEvent('dragend', me, thumb, me.getValue(), e);\r
        if (oldValue !== newValue) {\r
            me.fireEvent('change', me, thumb, newValue, oldValue);\r
        }\r
    },\r
\r
    getThumbIndex: function(thumb) {\r
        return this.getThumbs().indexOf(thumb);\r
    },\r
\r
    refreshThumbConstraints: function(thumb) {\r
        var allowThumbsOverlapping = this.getAllowThumbsOverlapping(),\r
            offsetX = thumb.getDraggable().getOffset().x,\r
            thumbs = this.getThumbs(),\r
            index = this.getThumbIndex(thumb),\r
            previousThumb = thumbs[index - 1],\r
            nextThumb = thumbs[index + 1],\r
            thumbWidth = this.thumbWidth;\r
\r
        if (previousThumb) {\r
            previousThumb.getDraggable().addExtraConstraint({\r
                max: {\r
                    x: offsetX - ((allowThumbsOverlapping) ? 0 : thumbWidth)\r
                }\r
            });\r
        }\r
\r
        if (nextThumb) {\r
            nextThumb.getDraggable().addExtraConstraint({\r
                min: {\r
                    x: offsetX + ((allowThumbsOverlapping) ? 0 : thumbWidth)\r
                }\r
            });\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onTap: function(e) {\r
        var me = this,\r
            element = me.element,\r
            minDistance = Infinity,\r
            i, absDistance, testValue, closestIndex, oldValue, thumb,\r
            ln, values, value, offset, elementX, targetElement, touchPointX;\r
\r
        if (me.offsetValueRatio === 0 || me.isDisabled() || me.getReadOnly()) {\r
            return;\r
        }\r
\r
        targetElement = Ext.get(e.target);\r
\r
        if (!targetElement || (Ext.browser.engineName == 'WebKit' && targetElement.hasCls('x-thumb'))) {\r
            return;\r
        }\r
\r
        touchPointX = e.touch.point.x;\r
        elementX = element.getX();\r
        offset = touchPointX - elementX - (me.thumbWidth / 2);\r
        value = me.constrainValue(me.getMinValue() + offset / me.offsetValueRatio);\r
        values = me.getValue();\r
        ln = values.length;\r
\r
        if (ln === 1) {\r
            closestIndex = 0;\r
        } else {\r
            for (i = 0; i < ln; i++) {\r
                testValue = values[i];\r
                absDistance = Math.abs(testValue - value);\r
\r
                if (absDistance < minDistance) {\r
                    minDistance = absDistance;\r
                    closestIndex = i;\r
                }\r
            }\r
        }\r
\r
        oldValue = values[closestIndex];\r
        thumb = me.getThumb(closestIndex);\r
\r
        me.setIndexValue(closestIndex, value, me.getAnimation());\r
        me.refreshThumbConstraints(thumb);\r
\r
        if (oldValue !== value) {\r
            me.fireEvent('change', me, thumb, value, oldValue);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateThumbs: function(newThumbs) {\r
        this.add(newThumbs);\r
    },\r
\r
    applyValue: function(value, oldValue) {\r
        var values = Ext.Array.from(value || 0),\r
            filteredValues = [],\r
            previousFilteredValue = this.getMinValue(),\r
            filteredValue, i, ln;\r
\r
        for (i = 0,ln = values.length; i < ln; i++) {\r
            filteredValue = this.constrainValue(values[i]);\r
\r
            if (filteredValue < previousFilteredValue) {\r
                //<debug>\r
                Ext.Logger.warn("Invalid values of '"+Ext.encode(values)+"', values at smaller indexes must " +\r
                    "be smaller than or equal to values at greater indexes");\r
                //</debug>\r
                filteredValue = previousFilteredValue;\r
            }\r
\r
            filteredValues.push(filteredValue);\r
\r
            previousFilteredValue = filteredValue;\r
        }\r
\r
        if (!this.refreshing && oldValue) {\r
            if (Ext.Array.equals(value, oldValue)) {\r
                filteredValues = undefined;\r
            }\r
        }\r
\r
        return filteredValues;\r
    },\r
\r
    /**\r
     * Updates the sliders thumbs with their new value(s)\r
     */\r
    updateValue: function(newValue, oldValue) {\r
        var me = this,\r
            thumbs = me.getThumbs(),\r
            len = newValue.length,\r
            i;\r
\r
        me.setThumbsCount(len);\r
\r
        for (i = 0; i < len; i++) {\r
            me.snapThumbPosition(thumbs[i], newValue[i]);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    refreshValue: function() {\r
        this.refreshOffsetValueRatio();\r
\r
        this.setValue(this.getValue());\r
    },\r
\r
    /**\r
     * @private\r
     * Takes a desired value of a thumb and returns the nearest snap value. e.g if minValue = 0, maxValue = 100, increment = 10 and we\r
     * pass a value of 67 here, the returned value will be 70. The returned number is constrained within {@link #minValue} and {@link #maxValue},\r
     * so in the above example 68 would be returned if {@link #maxValue} was set to 68.\r
     * @param {Number} value The value to snap\r
     * @return {Number} The snapped value\r
     */\r
    constrainValue: function(value) {\r
        var me = this,\r
            minValue  = me.getMinValue(),\r
            maxValue  = me.getMaxValue(),\r
            increment = me.getIncrement(),\r
            remainder;\r
\r
        value = parseFloat(value);\r
\r
        if (isNaN(value)) {\r
            value = minValue;\r
        }\r
\r
        remainder = (value - minValue) % increment;\r
        value -= remainder;\r
\r
        if (Math.abs(remainder) >= (increment / 2)) {\r
            value += (remainder > 0) ? increment : -increment;\r
        }\r
\r
        value = Math.max(minValue, value);\r
        value = Math.min(maxValue, value);\r
\r
        return value;\r
    },\r
\r
    setThumbsCount: function(count) {\r
        var thumbs = this.getThumbs(),\r
            thumbsCount = thumbs.length,\r
            i, ln, thumb;\r
\r
        if (thumbsCount > count) {\r
            for (i = 0,ln = thumbsCount - count; i < ln; i++) {\r
                thumb = thumbs[thumbs.length - 1];\r
                thumb.destroy();\r
            }\r
        }\r
        else if (thumbsCount < count) {\r
            for (i = 0,ln = count - thumbsCount; i < ln; i++) {\r
                this.add(this.factoryThumb());\r
            }\r
        }\r
\r
        return this;\r
    },\r
\r
    /**\r
     * Convenience method. Calls {@link #setValue}.\r
     */\r
    setValues: function(value) {\r
        this.setValue(value);\r
    },\r
\r
    /**\r
     * Convenience method. Calls {@link #getValue}.\r
     * @return {Object}\r
     */\r
    getValues: function() {\r
        return this.getValue();\r
    },\r
\r
    /**\r
     * Sets the {@link #increment} configuration.\r
     * @param {Number} increment\r
     * @return {Number}\r
     */\r
    applyIncrement: function(increment) {\r
        if (increment === 0) {\r
            increment = 1;\r
        }\r
\r
        return Math.abs(increment);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateAllowThumbsOverlapping: function(newValue, oldValue) {\r
        if (typeof oldValue != 'undefined') {\r
            this.refreshValue();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateMinValue: function(newValue, oldValue) {\r
        if (typeof oldValue != 'undefined') {\r
            this.refreshValue();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateMaxValue: function(newValue, oldValue) {\r
        if (typeof oldValue != 'undefined') {\r
            this.refreshValue();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateIncrement: function(newValue, oldValue) {\r
        if (typeof oldValue != 'undefined') {\r
            this.refreshValue();\r
        }\r
    },\r
\r
    updateDisabled: function(disabled) {\r
        this.callParent(arguments);\r
\r
        var items = this.getItems().items,\r
            ln = items.length,\r
            i;\r
\r
        for (i = 0; i < ln; i++) {\r
            items[i].setDisabled(disabled);\r
        }\r
    },\r
\r
    privates: {\r
        refreshAllThumbConstraints: function() {\r
            var thumbs = this.getThumbs(),\r
                len = thumbs.length,\r
                i;\r
\r
            for (i = 0; i < len; i++) {\r
                this.refreshThumbConstraints(thumbs[i]);\r
            }\r
        },\r
\r
        snapThumbPosition: function(thumb, value) {\r
            var ratio = this.offsetValueRatio,\r
                offset;\r
\r
            if (isFinite(ratio)) {\r
                offset = Ext.Number.correctFloat((value - this.getMinValue()) * ratio)\r
                thumb.getDraggable().setExtraConstraint(null).setOffset(offset);\r
            }\r
        }\r
    }\r
});\r