/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as
published by the Free Software Foundation and appearing in the file LICENSE included in the
packaging of this file.
Please review the following information to ensure the GNU General Public License version 3.0
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/**
* @class Ext.slider.Thumb
* @private
* Represents a single thumb element on a Slider. This would not usually be created manually and would instead
* be created internally by an {@link Ext.slider.Multi Multi slider}.
*/
Ext.define('Ext.slider.Thumb', {
requires: ['Ext.dd.DragTracker', 'Ext.util.Format'],
/**
* @private
* @property {Number} topThumbZIndex
* The number used internally to set the z index of the top thumb (see promoteThumb for details)
*/
topZIndex: 10000,
/**
* @cfg {Ext.slider.MultiSlider} slider (required)
* The Slider to render to.
*/
/**
* Creates new slider thumb.
* @param {Object} [config] Config object.
*/
constructor: function(config) {
var me = this;
/**
* @property {Ext.slider.MultiSlider} slider
* The slider this thumb is contained within
*/
Ext.apply(me, config || {}, {
cls: Ext.baseCSSPrefix + 'slider-thumb',
/**
* @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings
*/
constrain: false
});
me.callParent([config]);
},
/**
* Renders the thumb into a slider
*/
render: function() {
var me = this;
me.el = me.slider.innerEl.insertFirst(me.getElConfig());
me.onRender();
},
onRender: function() {
if (this.disabled) {
this.disable();
}
this.initEvents();
},
getElConfig: function() {
var me = this,
slider = me.slider,
style = {};
style[slider.vertical ? 'bottom' : slider.horizontalProp] = slider.calculateThumbPosition(slider.normalizeValue(me.value)) + '%';
return {
style: style,
id : this.id,
cls : this.cls
};
},
/**
* @private
* move the thumb
*/
move: function(v, animate) {
var me = this,
el = me.el,
slider = me.slider,
styleProp = slider.vertical ? 'bottom' : slider.horizontalProp,
to,
from;
v += '%';
if (!animate) {
el.dom.style[styleProp] = v;
} else {
to = {};
to[styleProp] = v;
if (!Ext.supports.GetPositionPercentage) {
from = {};
from[styleProp] = el.dom.style[styleProp];
}
new Ext.fx.Anim({
target: el,
duration: 350,
from: from,
to: to
});
}
},
/**
* @private
* Bring thumb dom element to front.
*/
bringToFront: function() {
this.el.setStyle('zIndex', this.topZIndex);
},
/**
* @private
* Send thumb dom element to back.
*/
sendToBack: function() {
this.el.setStyle('zIndex', '');
},
/**
* Enables the thumb if it is currently disabled
*/
enable: function() {
var me = this;
me.disabled = false;
if (me.el) {
me.el.removeCls(me.slider.disabledCls);
}
},
/**
* Disables the thumb if it is currently enabled
*/
disable: function() {
var me = this;
me.disabled = true;
if (me.el) {
me.el.addCls(me.slider.disabledCls);
}
},
/**
* Sets up an Ext.dd.DragTracker for this thumb
*/
initEvents: function() {
var me = this,
el = me.el;
me.tracker = new Ext.dd.DragTracker({
onBeforeStart: Ext.Function.bind(me.onBeforeDragStart, me),
onStart : Ext.Function.bind(me.onDragStart, me),
onDrag : Ext.Function.bind(me.onDrag, me),
onEnd : Ext.Function.bind(me.onDragEnd, me),
tolerance : 3,
autoStart : 300,
overCls : Ext.baseCSSPrefix + 'slider-thumb-over'
});
me.tracker.initEl(el);
},
/**
* @private
* This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled,
* this returns false to disable the DragTracker too.
* @return {Boolean} False if the slider is currently disabled
*/
onBeforeDragStart : function(e) {
if (this.disabled) {
return false;
} else {
this.slider.promoteThumb(this);
return true;
}
},
/**
* @private
* This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class
* to the thumb and fires the 'dragstart' event
*/
onDragStart: function(e){
var me = this,
slider = me.slider;
slider.onDragStart(me, e);
me.el.addCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
me.dragging = me.slider.dragging = true;
me.dragStartValue = me.value;
slider.fireEvent('dragstart', slider, e, me);
},
/**
* @private
* This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time
* the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag
*/
onDrag: function(e) {
var me = this,
slider = me.slider,
index = me.index,
newValue = me.getValueFromTracker(),
above,
below;
// If dragged out of range, value will be undefined
if (newValue !== undefined) {
if (me.constrain) {
above = slider.thumbs[index + 1];
below = slider.thumbs[index - 1];
if (below !== undefined && newValue <= below.value) {
newValue = below.value;
}
if (above !== undefined && newValue >= above.value) {
newValue = above.value;
}
}
slider.setValue(index, newValue, false);
slider.fireEvent('drag', slider, e, me);
}
},
getValueFromTracker: function() {
var slider = this.slider,
trackPoint = slider.getTrackpoint(this.tracker.getXY());
// If dragged out of range, value will be undefined
if (trackPoint !== undefined) {
return slider.reversePixelValue(trackPoint);
}
},
/**
* @private
* This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and
* fires the 'changecomplete' event with the new value
*/
onDragEnd: function(e) {
var me = this,
slider = me.slider,
value = me.value;
slider.onDragEnd(me, e);
me.el.removeCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
me.dragging = slider.dragging = false;
slider.fireEvent('dragend', slider, e);
if (me.dragStartValue != value) {
slider.fireEvent('changecomplete', slider, value, me);
}
},
destroy: function() {
Ext.destroy(this.tracker);
}
});
|
Download
