/**
|
@name Edo.controls.Slider
|
@class
|
@typeName slider
|
@description 拖拽调节器
|
@extend Edo.controls.Control
|
*/
|
Edo.controls.Slider = function(){
|
|
/**
|
@name Edo.controls.Slider#beforevaluechange
|
@event
|
@description 值改变前激发
|
@property {Number} value 当前新值
|
*/
|
/**
|
@name Edo.controls.Slider#valuechange
|
@event
|
@description 值改变事件
|
@property {Number} value 当前值
|
*/
|
Edo.controls.Slider.superclass.constructor.call(this);
|
|
|
};
|
Edo.controls.Slider.extend(Edo.controls.Control,{
|
/**
|
@name Edo.controls.Slider#valueField
|
@property
|
@default 'value'
|
*/
|
valueField: 'value',
|
/**
|
@name Edo.controls.Slider#defaultValue
|
@property
|
@type Number
|
@default 0
|
*/
|
defaultValue: 0,
|
/**
|
@name Edo.controls.Slider#value
|
@property
|
@type Number
|
@default 0
|
@description 值
|
*/
|
value: 0,
|
/**
|
@name Edo.controls.Slider#minValue
|
@property
|
@type Number
|
@description 最小值
|
*/
|
minValue: 0,
|
/**
|
@name Edo.controls.Slider#maxValue
|
@property
|
@type Number
|
@default 100
|
@description 最大值
|
*/
|
maxValue: 100,
|
//keyIncrement: 1,
|
/**
|
@name Edo.controls.Slider#increment
|
@property
|
@type Number
|
@default 0
|
@description 最小增加值
|
*/
|
increment: 0,
|
/**
|
@name Edo.controls.Slider#defaultWidth
|
@property
|
@default 100
|
*/
|
defaultWidth: 100,
|
/**
|
@name Edo.controls.Slider#defaultHeight
|
@property
|
@default 22
|
*/
|
defaultHeight: 22,
|
/**
|
@name Edo.controls.Slider#minHeight
|
@property
|
@default 22
|
*/
|
minHeight: 22,
|
/**
|
@name Edo.controls.Slider#minWidth
|
@property
|
@default 30
|
*/
|
minWidth: 30,
|
/**
|
@name Edo.controls.Slider#direction
|
@property
|
@type horizontal, vertical
|
@default horizontal
|
@description 横竖方位
|
*/
|
direction: 'horizontal', //vertical
|
|
thumbCls: 'e-slider-thumb',
|
thumbOverCls: 'e-slider-thumb-over',
|
thumbPressedClass: 'e-slider-thumb-pressed',
|
|
elCls: 'e-slider',
|
getInnerHtml: function(sb){
|
if(this.direction == 'vertical'){
|
this.elCls += ' e-slider-v';
|
}
|
sb[sb.length] = '<div class="e-slider-start"><div class="e-slider-end"><div class="e-slider-inner" style="';
|
if(this.direction == 'vertical') {
|
sb[sb.length] = 'height:';
|
sb[sb.length] = this.realHeight - 14;
|
sb[sb.length] = 'px;';
|
}
|
sb[sb.length] = '"><div class="';
|
sb[sb.length] = this.thumbCls;
|
sb[sb.length] = '"></div></div></div></div>';
|
},
|
createChildren: function(el){
|
Edo.controls.Slider.superclass.createChildren.call(this, el);
|
this.startEl = this.el.firstChild;
|
this.endEl = this.startEl.firstChild;
|
this.inner = this.endEl.lastChild;
|
this.thumb = this.inner.lastChild;
|
this.halfThumb = 15/2;
|
|
this.thumbDrag = new Edo.util.Drag({
|
//onStart: this.onThumbDragStart.bind(this),
|
onMove: this._onThumbDragMove.bind(this),
|
onStop: this._onThumbDragComplete.bind(this)
|
});
|
},
|
initEvents: function(){
|
if(!this.design){
|
this.on('mousedown', this._onMouseDown);
|
Edo.util.Dom.addClassOnClick(this.thumb, this.thumbPressedClass);
|
Edo.util.Dom.addClassOnOver(this.thumb, this.thumbOverCls);
|
}
|
Edo.controls.Slider.superclass.initEvents.call(this);
|
|
},
|
|
syncSize: function(){
|
//this.realWidth -= 7;
|
Edo.controls.Slider.superclass.syncSize.call(this);
|
|
if(this.mustSyncSize !== false){
|
if(this.direction == 'vertical'){
|
//this.inner.style.height = (this.realHeight - 14) + 'px';//偏移
|
//Edo.util.Dom.setHeight(this.el, this.realHeight);
|
}else{
|
//Edo.util.Dom.setWidth(this.el, this.realWidth);
|
}
|
}
|
//do value : 以后会发展成为一个模式set...
|
var v = this.normalizeValue(this.value);
|
if(!isNaN(v)){
|
this.value = v;
|
this.moveThumb(this.translateValue(this.value));
|
|
}
|
|
if(this.direction == 'vertical') {
|
this.inner.style.height = (this.realHeight - 14) + 'px';
|
}
|
},
|
_onMouseDown: function(e){
|
if(e.button == Edo.util.MouseButton.left){
|
this.ctBox = Edo.util.Dom.getBox(this.inner);
|
if(e.within(this.thumb)){
|
this.initXY = Edo.util.Dom.getXY(this.thumb);
|
this.xOffset = this.initXY[0] - e.xy[0];
|
this.yOffset = this.initXY[1] - e.xy[1];
|
|
this.thumbDrag.start(e);
|
|
this.fireEvent('slidestart', {
|
type: 'slidestart',
|
source: this,
|
xy: Edo.util.Dom.getXY(this.thumb)
|
});
|
}else{
|
//点击thumb之外
|
//var pos = (drag.now[index] + offset) - t;
|
var index = this.direction == 'horizontal' ? 0 : 1;
|
var t = this.direction == 'horizontal' ? this.ctBox.x : this.ctBox.y;
|
var pos = e.xy[index] - t;
|
this.anim = true;
|
this._setValue(Math.round(this.reverseValue(pos)));
|
this.anim = false;
|
}
|
}
|
},
|
// onThumbDragStart: function(e){
|
// this.fireEvent('slidestart', {
|
// type: 'slidestart',
|
// source: this,
|
// xy: [e.now[0]+this.xOffset, e.now[1]+this.yOffset]
|
// });
|
// },
|
_onThumbDragMove: function(drag){
|
var xy = this.initXY;
|
|
var index = this.direction == 'horizontal' ? 0 : 1;
|
var offset = this.direction == 'horizontal' ? this.xOffset : this.yOffset;
|
var t = this.direction == 'horizontal' ? this.ctBox.x : this.ctBox.y;
|
|
|
|
var pos = (drag.now[index] + offset) - t;
|
this._setValue(Math.round(this.reverseValue(pos)));
|
|
|
xy = drag.now;
|
xy[index] = t + this.translateValue(this.value);
|
this.fireEvent('slide', {
|
type: 'slide',
|
source: this,
|
xy: xy
|
});
|
},
|
_onThumbDragComplete: function(e){
|
this.fireEvent('slidecomplete', {
|
type: 'slidecomplete',
|
source: this,
|
xy: [e.now[0]+this.xOffset, e.now[1]+this.yOffset]
|
});
|
},
|
_setValue: function(v){
|
v = this.normalizeValue(v);
|
if(v !== this.value && this.fireEvent('beforevaluechange', {
|
type: 'beforevaluechange',
|
source: this,
|
value: v
|
}) !== false){
|
|
this.value = v;
|
if(this.el){
|
this.moveThumb(this.translateValue(v));
|
}
|
// this.fireEvent('valuechange', {
|
// type: 'valuechange',
|
// source: this,
|
// value: v
|
// });
|
|
this.changeProperty('value', this.value);
|
}
|
},
|
//将value转换为坐标
|
translateValue : function(v){
|
var ratio = this.getRatio();
|
return (v * ratio)-(this.minValue * ratio)-this.halfThumb;
|
},
|
//将坐标转换为值
|
reverseValue : function(pos){
|
var ratio = this.getRatio();
|
return (pos+this.halfThumb+(this.minValue * ratio))/ratio;
|
},
|
getRatio : function(){
|
var fn = this.direction == 'horizontal' ? 'getWidth' : 'getHeight';
|
var now = Edo.util.Dom[fn](this.inner);
|
|
var v = this.maxValue - this.minValue;
|
return v == 0 ? now : (now/v);
|
},
|
moveThumb: function(pos){
|
if(this.thumb){
|
var p = this.direction == 'horizontal' ? 'left' : 'top';
|
if(this.anim){
|
var o = {};
|
o[p] = pos;
|
new Edo.util.Fx.Style({
|
el: this.thumb,
|
duration: 300
|
}).start(o);
|
}else{
|
this.thumb.style[p] = pos + 'px';
|
}
|
}
|
},
|
//确保值的有效性
|
normalizeValue : function(v){
|
if(typeof v != 'number'){
|
v = parseInt(v);
|
}
|
if(isNaN(v)) v = this.minValue;
|
v = Math.round(v);
|
v = this.doSnap(v);//v = Edo_controls_Slider__doSnap.c(this, v); => v = AAA.c(this.v);
|
v = v.constrain(this.minValue, this.maxValue);
|
return v;
|
},
|
//根据increment增值,以及当前的value,得到一个新的有效value
|
doSnap : function(value){
|
if(!this.increment || this.increment == 1 || !value) {
|
return value;
|
}
|
var newValue = value, inc = this.increment;
|
var m = value % inc;
|
if(m > 0){
|
if(m > (inc/2)){
|
newValue = value + (inc-m);
|
}else{
|
newValue = value - m;
|
}
|
}
|
return newValue.constrain(this.minValue, this.maxValue);
|
},
|
destroy : function(){
|
Edo.util.Dom.clearEvent(this.thumb);
|
this.thumb = null;
|
|
Edo.controls.Slider.superclass.destroy.call(this);
|
}
|
|
});
|
Edo.controls.Slider.regType('slider');
|
|
/*
|
1.tick: 刻度
|
|
2.tip: 提示信息
|
*/
|
