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