add extjs 6.0.1 sources

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

/**\r
 * @private\r
 * Utility class used by Ext.slider.Slider - should never need to be used directly.\r
 */\r
Ext.define('Ext.slider.Thumb', {\r
    extend: 'Ext.Component',\r
    xtype : 'thumb',\r
\r
    config: {\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        baseCls: Ext.baseCSSPrefix + 'thumb',\r
\r
        /**\r
         * @cfg {String} pressedCls\r
         * The CSS class to add to the Slider when it is pressed.\r
         * @accessor\r
         */\r
        pressedCls: Ext.baseCSSPrefix + 'thumb-pressing',\r
\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        draggable: {\r
            direction: 'horizontal'\r
        }\r
    },\r
\r
    // Strange issue where the thumbs translation value is not being set when it is not visible. Happens when the thumb \r
    // is contained within a modal panel.\r
    platformConfig: {\r
        ie10: {\r
            draggable: {\r
                translatable: {\r
                    translationMethod: 'csstransform'\r
                }\r
            }\r
        }\r
    },\r
\r
    elementWidth: 0,\r
\r
    initialize: function() {\r
        var me = this;\r
        \r
        me.callParent();\r
\r
        me.getDraggable().onBefore({\r
            beforedragstart: 'onBeforeDragStart',\r
            dragstart: 'onDragStart',\r
            drag: 'onDrag',\r
            dragend: 'onDragEnd',\r
            scope: this\r
        });\r
\r
        me.getDraggable().on({\r
            touchstart: 'onPress',\r
            touchend: 'onRelease',\r
            scope: me\r
        });\r
\r
        me.element.on('resize', 'onElementResize', me);\r
    },\r
\r
\r
    /**\r
     * @private\r
     */\r
    updatePressedCls: function(pressedCls, oldPressedCls) {\r
        var element = this.element;\r
\r
        if (element.hasCls(oldPressedCls)) {\r
            element.replaceCls(oldPressedCls, pressedCls);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onPress: function() {\r
        var me = this,\r
            element = me.element,\r
            pressedCls = me.getPressedCls();\r
\r
        if (!me.getDisabled()) {\r
            element.addCls(pressedCls);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onRelease: function(e) {\r
        this.fireAction('release', [this, e], 'doRelease');\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    doRelease: function(me, e) {\r
        if (!me.getDisabled()) {\r
            me.element.removeCls(me.getPressedCls());\r
        }\r
    },\r
\r
    onBeforeDragStart: function(draggable, e, x, y) {\r
        if (this.isDisabled()) {\r
            return false;\r
        }\r
\r
        return this.fireEvent('beforedragstart', this, e, x, y);\r
    },\r
\r
    onDragStart: function(draggable, e, x, y) {\r
        this.fireEvent('dragstart', this, e, x, y);\r
    },\r
\r
    onDrag: function(draggable, e, x, y) {\r
        if (this.isDisabled()) {\r
            return false;\r
        }\r
\r
        this.fireEvent('drag', this, e, x, y);\r
    },\r
\r
    onDragEnd: function(draggable, e, x, y) {\r
        if (this.isDisabled()) {\r
            return false;\r
        }\r
\r
        this.fireEvent('dragend', this, e, x, y);\r
    },\r
\r
    onElementResize: function(element, info) {\r
        this.elementWidth = info.width;\r
    },\r
\r
    getElementWidth: function() {\r
        return this.elementWidth;\r
    }\r
});\r