add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / slider / Widget.js

/**\r
 * A Widget-based implementation of a slider.\r
 * @since 5.0.0\r
 */\r
Ext.define('Ext.slider.Widget', {\r
    extend: 'Ext.Widget',\r
    alias: 'widget.sliderwidget',\r
\r
    // Required to pull in the styles\r
    requires: [\r
        'Ext.slider.Multi'\r
    ], \r
\r
    cachedConfig: {\r
        /**\r
        * @cfg {Boolean} vertical\r
        * Orients the slider vertically rather than horizontally.\r
        */\r
        vertical: false\r
    },\r
\r
    config: {\r
        /**\r
         * @cfg {Boolean} clickToChange\r
         * Determines whether or not clicking on the Slider axis will change the slider.\r
         */\r
        clickToChange: true,\r
\r
        ui: 'widget',\r
\r
        /**\r
         * @cfg {Number/Number[]} value\r
         * One more values for the position of the slider's thumb(s).\r
         */\r
        value: 0,\r
        \r
        /**\r
         * @cfg {Number} minValue\r
         * The minimum value for any slider thumb.\r
         */\r
        minValue: 0,\r
        \r
        /**\r
         * @cfg {Number} maxValue\r
         * The maximum value for any slider thumb.\r
         */\r
        maxValue: 100,\r
\r
        /**\r
         * @cfg {Boolean} [publishOnComplete=true]\r
         * This controls when the value of the slider is published to the `ViewModel`. By\r
         * default this is done only when the thumb is released (the change is complete). To\r
         * cause this to happen on every change of the thumb position, specify `false`. This\r
         * setting is `true` by default for improved performance on slower devices (such as\r
         * older browsers or tablets).\r
         */\r
        publishOnComplete: true,\r
\r
        /**\r
         * @cfg {Object} twoWayBindable\r
         * This object is a map of config property names holding a `true` if changes to\r
         * that config should written back to its binding. Most commonly this is used to\r
         * indicate that the `value` config should be monitored and changes written back\r
         * to the bound value.\r
         */\r
        twoWayBindable: {\r
            value: 1\r
        }\r
    },\r
\r
    decimalPrecision: 0,\r
\r
    defaultBindProperty: 'value',\r
\r
    element: {\r
        reference: 'element',\r
        cls: Ext.baseCSSPrefix + 'slider',\r
        listeners: {\r
            mousedown: 'onMouseDown',\r
            dragstart: 'cancelDrag',\r
            drag: 'cancelDrag',\r
            dragend: 'cancelDrag'\r
        },\r
        children: [{\r
            reference: 'endEl',\r
            cls: Ext.baseCSSPrefix + 'slider-end',\r
            children: [{\r
                reference: 'innerEl',\r
                cls: Ext.baseCSSPrefix + 'slider-inner'\r
            }]\r
        }]\r
    },\r
\r
    thumbCls: Ext.baseCSSPrefix + 'slider-thumb',\r
\r
    horizontalProp: 'left',\r
\r
    // This property is set to false onMouseDown and deleted onMouseUp. It is used only\r
    // by applyValue when it passes the animate parameter to setThumbValue.\r
    animateOnSetValue: undefined,\r
\r
    applyValue: function(value) {\r
        var me = this,\r
            animate = me.animateOnSetValue,\r
            i, len;\r
\r
        if (Ext.isArray(value)) {\r
            value = Ext.Array.from(value);\r
            for (i = 0, len = value.length; i < len; ++i) {\r
                me.setThumbValue(i, value[i] = me.normalizeValue(value[i]), animate, true);\r
            }\r
        } else {\r
            value = me.normalizeValue(value);\r
            me.setThumbValue(0, value, animate, true);\r
        }\r
        return value;\r
    },\r
\r
    updateVertical: function(vertical, oldVertical) {\r
        this.element.removeCls(Ext.baseCSSPrefix + 'slider-' + (oldVertical ? 'vert' : 'horz'));\r
        this.element.addCls(   Ext.baseCSSPrefix + 'slider-' + (vertical    ? 'vert' : 'horz'));\r
    },\r
\r
    updateHeight: function(height, oldHeight) {\r
        this.callParent([height, oldHeight]);\r
        this.endEl.dom.style.height = this.innerEl.dom.style.height = '100%';\r
    },\r
\r
    cancelDrag: function(e) {\r
        // prevent the touch scroller from scrolling when the slider is being dragged\r
        e.stopPropagation();\r
    },\r
\r
    getThumb: function(ordinal) {\r
        var me = this,\r
            thumbConfig,\r
            result = (me.thumbs || (me.thumbs = []))[ordinal];\r
        \r
        if (!result) {\r
            thumbConfig = {\r
                cls: me.thumbCls,\r
                style: {}\r
            };\r
            thumbConfig['data-thumbIndex'] = ordinal;\r
            result = me.thumbs[ordinal] = me.innerEl.createChild(thumbConfig);\r
        }\r
        return result;\r
    },\r
\r
    getThumbPositionStyle: function() {\r
        return this.getVertical() ? 'bottom' : (this.rtl && Ext.rtl ? 'right' : 'left');\r
    },\r
\r
//    // TODO: RTL\r
//    getRenderTree: function() {\r
//        var me = this,\r
//            rtl = me.rtl;\r
//\r
//        if (rtl && Ext.rtl) {\r
//            me.baseCls += ' ' + (Ext.rtl.util.Renderable.prototype._rtlCls);\r
//            me.horizontalProp = 'right';\r
//        } else if (rtl === false) {\r
//            me.addCls(Ext.rtl.util.Renderable.prototype._ltrCls);\r
//        }\r
//\r
//        return me.callParent();\r
//    },\r
\r
    update: function() {\r
        var me = this,\r
            values = me.getValue(),\r
            len = values.length,\r
            i;\r
\r
        for (i = 0; i < len; i++) {\r
            this.thumbs[i].dom.style[me.getThumbPositionStyle()] = me.calculateThumbPosition(values[i]) + '%';\r
        }\r
    },\r
\r
    onMouseDown: function(e) {\r
        var me = this,\r
            thumb,\r
            trackPoint = e.getXY(),\r
            delta;\r
\r
        if (!me.disabled && e.button === 0) {\r
            // Stop any selection caused by mousedown + mousemove\r
            Ext.getDoc().on({\r
                scope: me,\r
                capture: true,\r
                selectstart: me.stopSelect\r
            });\r
\r
            thumb = e.getTarget('.' + me.thumbCls, null, true);\r
\r
            if (thumb) {\r
                me.animateOnSetValue = false;\r
\r
                me.promoteThumb(thumb);\r
                me.captureMouse(me.onMouseMove, me.onMouseUp, [thumb], 1);\r
                delta = me.pointerOffset = thumb.getXY();\r
\r
                // Work out the delta of the pointer from the dead centre of the thumb.\r
                // Slider.getTrackPoint positions the centre of the slider at the reported\r
                // pointer position, so we have to correct for that in getValueFromTracker.\r
                delta[0] += Math.floor(thumb.getWidth() / 2) - trackPoint[0];\r
                delta[1] += Math.floor(thumb.getHeight() / 2) - trackPoint[1];\r
            } else {\r
                if (me.getClickToChange()) {\r
                    trackPoint = me.getTrackpoint(trackPoint);\r
                    if (trackPoint != null) {\r
                        me.onClickChange(trackPoint);\r
                    }\r
                }\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Moves the thumb to the indicated position.\r
     * Only changes the value if the click was within this.clickRange.\r
     * @param {Number} trackPoint local pixel offset **from the origin** (left for horizontal and bottom for vertical) along the Slider's axis at which the click event occured.\r
     */\r
    onClickChange : function(trackPoint) {\r
        var me = this,\r
            thumb, index, value;\r
\r
        // How far along the track *from the origin* was the click.\r
        // If vertical, the origin is the bottom of the slider track.\r
\r
        //find the nearest thumb to the click event\r
        thumb = me.getNearest(trackPoint);\r
        index = parseInt(thumb.getAttribute('data-thumbIndex'), 10);\r
        value = Ext.util.Format.round(me.reversePixelValue(trackPoint), me.decimalPrecision);\r
        if (index) {\r
            me.setThumbValue(index, value, undefined, true);\r
        } else {\r
            me.setValue(value);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Returns the nearest thumb to a click event, along with its distance\r
     * @param {Number} trackPoint local pixel position along the Slider's axis to find the Thumb for\r
     * @return {Object} The closest thumb object and its distance from the click event\r
     */\r
    getNearest: function(trackPoint) {\r
        var me = this,\r
            clickValue = me.reversePixelValue(trackPoint),\r
            nearestDistance = me.getRange() + 5, //add a small fudge for the end of the slider\r
            nearest = null,\r
            thumbs = me.thumbs,\r
            i = 0,\r
            len = thumbs.length,\r
            thumb,\r
            value,\r
            dist;\r
\r
        for (; i < len; i++) {\r
            thumb = thumbs[i];\r
            value = me.reversePercentageValue(parseInt(thumb.dom.style[me.getThumbPositionStyle()], 10));\r
            dist  = Math.abs(value - clickValue);\r
\r
            if (Math.abs(dist) <= nearestDistance) {\r
                nearest = thumb;\r
                nearestDistance = dist;\r
            }\r
        }\r
        return nearest;\r
    },\r
\r
    /**\r
     * @private\r
     * Moves the given thumb above all other by increasing its z-index. This is called when as drag\r
     * any thumb, so that the thumb that was just dragged is always at the highest z-index. This is\r
     * required when the thumbs are stacked on top of each other at one of the ends of the slider's\r
     * range, which can result in the user not being able to move any of them.\r
     * @param {Ext.slider.Thumb} topThumb The thumb to move to the top\r
     */\r
    promoteThumb: function(topThumb) {\r
        var thumbs = this.thumbStack || (this.thumbStack = Ext.Array.slice(this.thumbs)),\r
            ln = thumbs.length,\r
            zIndex = 10000, i;\r
\r
        // Move topthumb to position zero\r
        if (thumbs[0] !== topThumb) {\r
            Ext.Array.remove(thumbs, topThumb);\r
            thumbs.unshift(topThumb);\r
        }\r
\r
        // Then shuffle the zIndices\r
        for (i = 0; i < ln; i++) {\r
            thumbs[i].el.setStyle('zIndex', zIndex);\r
            zIndex -= 1000;\r
        }\r
    },\r
\r
    doMouseMove: function (e, thumb, changeComplete) {\r
        var me = this,\r
            trackerXY = e.getXY(),\r
            newValue, thumbIndex, trackPoint;\r
\r
        trackerXY[0] += me.pointerOffset[0];\r
        trackerXY[1] += me.pointerOffset[1];\r
        trackPoint = me.getTrackpoint(trackerXY);\r
\r
        // If dragged out of range, value will be undefined\r
        if (trackPoint) {\r
            newValue = me.reversePixelValue(trackPoint);\r
            thumbIndex = parseInt(thumb.getAttribute('data-thumbIndex'), 10);\r
            if (thumbIndex || (!changeComplete && me.getPublishOnComplete())) {\r
                me.setThumbValue(thumbIndex, newValue, false, changeComplete);\r
            } else {\r
                me.setValue(newValue);\r
            }\r
        }\r
    },\r
\r
    onMouseMove: function(e, thumb) {\r
        this.doMouseMove(e, thumb, false);\r
    },\r
\r
    onMouseUp: function(e, thumb) {\r
        var me = this;\r
        \r
        me.doMouseMove(e, thumb, true);\r
        Ext.getDoc().un({\r
            scope: me,\r
            capture: true,\r
            selectstart: me.stopSelect\r
        });\r
        delete me.animateOnSetValue; // expose "undefined" on prototype\r
    },\r
\r
    stopSelect : function(e) {\r
        e.stopEvent();\r
        return false;\r
    },\r
\r
    /**\r
     * Programmatically sets the value of the Slider. Ensures that the value is constrained within the minValue and\r
     * maxValue.\r
     *\r
     * Setting a single value:\r
     *     // Set the second slider value, don't animate\r
     *     mySlider.setThumbValue(1, 50, false);\r
     *\r
     * Setting multiple values at once\r
     *     // Set 3 thumb values, animate\r
     *     mySlider.setThumbValue([20, 40, 60], true);\r
     *\r
     * @param {Number/Number[]} index Index of the thumb to move. Alternatively, it can be an array of values to set\r
     * for each thumb in the slider.\r
     * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)\r
     * @param {Boolean} [animate=true] Turn on or off animation\r
     * @return {Ext.slider.Multi} this\r
     */\r
    setThumbValue : function(index, value, animate, changeComplete) {\r
        var me = this,\r
            thumb, thumbValue, len, i, values;\r
\r
        if (Ext.isArray(index)) {\r
            values = index;\r
            animate = value;\r
\r
            for (i = 0, len = values.length; i < len; ++i) {\r
                me.setThumbValue(i, values[i], animate, changeComplete);\r
            }\r
            return me;\r
        }\r
\r
        thumb = me.getThumb(index);\r
        thumbValue = me.reversePercentageValue(parseInt(thumb.dom.style[me.getThumbPositionStyle()], 10));\r
\r
        // ensures value is contstrained and snapped\r
        value = me.normalizeValue(value);\r
\r
        if (value !== thumbValue && me.fireEvent('beforechange', me, value, thumbValue, thumb) !== false) {\r
            if (me.element.dom) {\r
                // TODO this only handles a single value; need a solution for exposing multiple values to aria.\r
                // Perhaps this should go on each thumb element rather than the outer element.\r
                me.element.set({\r
                    'aria-valuenow': value,\r
                    'aria-valuetext': value\r
                });\r
\r
                me.moveThumb(thumb, me.calculateThumbPosition(value), Ext.isDefined(animate) ? animate !== false : me.animate);\r
                me.fireEvent('change', me, value, thumb);\r
            }\r
        }\r
        return me;\r
    },\r
\r
    /**\r
     * Returns the current value of the slider\r
     * @param {Number} index The index of the thumb to return a value for\r
     * @return {Number/Number[]} The current value of the slider at the given index, or an array of all thumb values if\r
     * no index is given.\r
     */\r
    getValue : function(index) {\r
        var me = this,\r
            value;\r
\r
        if (Ext.isNumber(index)) {\r
            value = me.thumbs[index].dom.style[me.getThumbPositionStyle()];\r
            value = me.reversePercentageValue(parseInt(value, 10));\r
        } else {\r
            value = me.getValues();\r
            if (value.length === 1) {\r
                value = value[0];\r
            }\r
        }\r
\r
        return value;\r
    },\r
\r
    /**\r
     * Returns an array of values - one for the location of each thumb\r
     * @return {Number[]} The set of thumb values\r
     */\r
    getValues: function() {\r
        var me = this,\r
            values = [],\r
            i = 0,\r
            thumbs = me.thumbs,\r
            len = thumbs.length;\r
\r
        for (; i < len; i++) {\r
            values.push(me.reversePercentageValue(parseInt(me.thumbs[i].dom.style[me.getThumbPositionStyle()], 10)));\r
        }\r
        return values;\r
    },\r
\r
    /**\r
     * @private\r
     * move the thumb\r
     */\r
    moveThumb: function(thumb, v, animate) {\r
        var me = this,\r
            styleProp = me.getThumbPositionStyle(),\r
            to,\r
            from;\r
\r
        v += '%';\r
\r
        if (!animate) {\r
            thumb.dom.style[styleProp] = v;\r
        } else {\r
            to = {};\r
            to[styleProp] = v;\r
\r
            if (!Ext.supports.GetPositionPercentage) {\r
                from = {};\r
                from[styleProp] = thumb.dom.style[styleProp];\r
            }\r
\r
            new Ext.fx.Anim({ // jshint ignore:line\r
                target: thumb,\r
                duration: 350,\r
                from: from,\r
                to: to\r
            });\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Returns a snapped, constrained value when given a desired value\r
     * @param {Number} value Raw number value\r
     * @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values\r
     */\r
    normalizeValue : function(v) {\r
        var me = this,\r
            snapFn = me.zeroBasedSnapping ? 'snap' : 'snapInRange';\r
\r
        v = Ext.Number[snapFn](v, me.increment, me.minValue, me.maxValue);\r
        v = Ext.util.Format.round(v, me.decimalPrecision);\r
        v = Ext.Number.constrain(v, me.minValue, me.maxValue);\r
        return v;\r
    },\r
\r
    /**\r
     * @private\r
     * Given an `[x, y]` position within the slider's track (Points outside the slider's track are coerced to either the minimum or maximum value),\r
     * calculate how many pixels **from the slider origin** (left for horizontal Sliders and bottom for vertical Sliders) that point is.\r
     *\r
     * If the point is outside the range of the Slider's track, the return value is `undefined`\r
     * @param {Number[]} xy The point to calculate the track point for\r
     */\r
    getTrackpoint : function(xy) {\r
        var me = this,\r
            vertical = me.getVertical(),\r
            sliderTrack = me.innerEl,\r
            trackLength, result,\r
            positionProperty;\r
\r
        if (vertical) {\r
            positionProperty = 'top';\r
            trackLength = sliderTrack.getHeight();\r
        } else {\r
            positionProperty = 'left';\r
            trackLength = sliderTrack.getWidth();\r
        }\r
        xy = me.transformTrackPoints(sliderTrack.translatePoints(xy));\r
        result = Ext.Number.constrain(xy[positionProperty], 0, trackLength);\r
        return vertical ? trackLength - result : result;\r
    },\r
\r
    transformTrackPoints: Ext.identityFn,\r
\r
    /**\r
     * @private\r
     * Given a value within this Slider's range, calculates a Thumb's percentage CSS position to map that value.\r
     */\r
    calculateThumbPosition : function(v) {\r
        var me = this,\r
            pos = (v - me.getMinValue()) / me.getRange() * 100;\r
\r
        if (isNaN(pos)) {\r
            pos = 0;\r
        }\r
\r
        return pos;\r
    },\r
\r
    /**\r
     * @private\r
     * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,\r
     * the ratio is 2\r
     * @return {Number} The ratio of pixels to mapped values\r
     */\r
    getRatio : function() {\r
        var me = this,\r
            innerEl = me.innerEl,\r
            trackLength = me.getVertical() ? innerEl.getHeight() : innerEl.getWidth(),\r
            valueRange = me.getRange();\r
\r
        return valueRange === 0 ? trackLength : (trackLength / valueRange);\r
    },\r
\r
    getRange: function() {\r
        return this.getMaxValue() - this.getMinValue();\r
    },\r
\r
    /**\r
     * @private\r
     * Given a pixel location along the slider, returns the mapped slider value for that pixel.\r
     * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reversePixelValue(50)\r
     * returns 200\r
     * @param {Number} pos The position along the slider to return a mapped value for\r
     * @return {Number} The mapped value for the given position\r
     */\r
    reversePixelValue : function(pos) {\r
        return this.getMinValue() + (pos / this.getRatio());\r
    },\r
\r
    /**\r
     * @private\r
     * Given a Thumb's percentage position along the slider, returns the mapped slider value for that pixel.\r
     * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reversePercentageValue(25)\r
     * returns 200\r
     * @param {Number} pos The percentage along the slider track to return a mapped value for\r
     * @return {Number} The mapped value for the given position\r
     */\r
    reversePercentageValue : function(pos) {\r
        return this.getMinValue() + this.getRange() * (pos / 100);\r
    },\r
\r
    captureMouse: function(onMouseMove, onMouseUp, args, appendArgs) {\r
        var me = this,\r
            onMouseupWrap,\r
            listeners;\r
\r
        onMouseMove = onMouseMove && Ext.Function.bind(onMouseMove, me, args, appendArgs);\r
        onMouseUp   = onMouseUp   && Ext.Function.bind(onMouseUp,   me, args, appendArgs);\r
        onMouseupWrap = function() {\r
            Ext.getDoc().un(listeners);\r
            if (onMouseUp) {\r
                onMouseUp.apply(me, arguments);\r
            }\r
        };\r
        listeners = {\r
            mousemove: onMouseMove,\r
            mouseup: onMouseupWrap\r
        };\r
\r
        // Funnel mousemove events and the final mouseup event back into the gadget\r
        Ext.getDoc().on(listeners);\r
    }\r
});\r