/** * 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 * @inheritdoc */ draggable: { direction: 'horizontal', translatable: { // use cssposition instead of csstransform so that themes can use transform // scale to style the pressed state of the thumb (material) translationMethod: 'cssposition' } }, touchAction: { panX: false }, slider: null, /** * @cfg {Boolean/String} * True to add a "fill" color to the track for this thumb, or a valid CSS color * to use for the fill. When a fill color is used is extends from the left * edge of the thumb to the previous thumb, or to the left edge of the track if * this thumb is the left-most thumb. */ fillTrack: null, /** * @cfg {String} * A CSS class for styling the track fill element. Assumes {@link #fillTrack} has * been set to `true`, otherwise the fill element will be invisible. */ fillCls: null }, // 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' } } } }, template: [{ reference: 'iconElement', classList: [ Ext.baseCSSPrefix + 'icon-el', Ext.baseCSSPrefix + 'font-icon' ] }], elementWidth: 0, pressingCls: Ext.baseCSSPrefix + 'pressing', fillCls: Ext.baseCSSPrefix + 'fill-el', sizerCls: Ext.baseCSSPrefix + 'thumb-sizer', constructor: function(config) { // Since the thumbs are absolutely positioned, the slider component cannot shrink // wrap to their height. The sizer element is a 0-width element that ensures // the slider is at least as high as the largest thumb. // This has to be created early so the ui updater can access it this.sizerElement = Ext.Element.create({ cls: this.sizerCls }); this.callParent([config]); }, initialize: function() { var me = this, element = me.element, draggable, fillElement; me.callParent(); draggable = me.getDraggable(); draggable.onBefore({ beforedragstart: 'onBeforeDragStart', dragstart: 'onDragStart', drag: 'onDrag', dragend: 'onDragEnd', scope: me }); draggable.getTranslatable().on({ animationstart: 'onAnimationStart', animationend: 'onAnimationEnd', scope: me }); element.on('resize', 'onElementResize', me); element.addClsOnClick(me.pressingCls, me.shouldAddPressingCls, me); fillElement = me.fillElement = Ext.Element.create({ cls: me.fillCls }); fillElement.setVisibilityMode(1); // VISIBILITY me.getDraggable().getTranslatable().on('translate', 'onTranslate', me); }, updateFillTrack: function(fillTrack) { var fillElement = this.fillElement; if (fillTrack === false) { fillElement.hide(); } else { fillElement.show(); fillElement.setStyle('background-color', (typeof fillTrack === 'string') ? fillTrack : ''); } }, updateFillCls: function(fillCls, oldFillCls) { var fillElement = this.fillElement; if (oldFillCls) { fillElement.removeCls(oldFillCls); } if (fillCls) { fillElement.addCls(fillCls); } }, shouldAddPressingCls: function() { return !this.isDisabled(); }, onAnimationStart: function(translatable, x, y) { this.getSlider().onThumbAnimationStart(this, x, y); }, onAnimationEnd: function(translatable, x, y) { this.getSlider().onThumbAnimationEnd(this, x, y); }, onBeforeDragStart: function(draggable, e, x, y) { if (this.isDisabled()) { return false; } this.getSlider().onThumbBeforeDragStart(this, e, x, y); }, onDragStart: function(draggable, e, x, y) { this.getSlider().onThumbDragStart(this, e, x, y); }, onDrag: function(draggable, e, x, y) { if (this.isDisabled()) { return false; } this.getSlider().onThumbDrag(this, e, x, y); }, onDragEnd: function(draggable, e, x, y) { if (this.isDisabled()) { return false; } this.getSlider().onThumbDragEnd(this, e, x, y); }, onTranslate: function(translatable, x, y) { this.getSlider().syncFill(this, x); }, onElementResize: function(element, info) { this.elementWidth = info.width; }, getElementWidth: function() { return this.elementWidth; }, updateUi: function(ui, oldUi) { var me = this, sizerCls = me.sizerCls, sizerElement = me.sizerElement; if (oldUi) { sizerElement.removeCls(oldUi, sizerCls) } if (ui) { sizerElement.addCls(ui, sizerCls); } me.callParent([ui, oldUi]); }, destroy: function() { Ext.destroyMembers(this, 'fillElement', 'sizerElement'); this.callParent(); }});