|
|
|
|
/**
|
|
|
|
|
* Created by zcf on 2016/9/26.
|
|
|
|
|
*/
|
|
|
|
|
BI.IntervalSlider = BI.inherit(BI.Widget, {
|
|
|
|
|
_constant: {
|
|
|
|
|
EDITOR_WIDTH: 58,
|
|
|
|
|
EDITOR_R_GAP: 60,
|
|
|
|
|
EDITOR_HEIGHT: 30,
|
|
|
|
|
SLIDER_WIDTH_HALF: 15,
|
|
|
|
|
SLIDER_WIDTH: 30,
|
|
|
|
|
SLIDER_HEIGHT: 30,
|
|
|
|
|
TRACK_HEIGHT: 24
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_defaultConfig: function () {
|
|
|
|
|
return BI.extend(BI.IntervalSlider.superclass._defaultConfig.apply(this, arguments), {
|
|
|
|
|
baseCls: "bi-interval-slider bi-slider-track"
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_init: function () {
|
|
|
|
|
BI.IntervalSlider.superclass._init.apply(this, arguments);
|
|
|
|
|
|
|
|
|
|
var self = this;
|
|
|
|
|
var c = this._constant;
|
|
|
|
|
this.enable = false;
|
|
|
|
|
this.valueOne = "";
|
|
|
|
|
this.valueTwo = "";
|
|
|
|
|
this.calculation = new BI.AccurateCalculationModel();
|
|
|
|
|
|
|
|
|
|
// this.backgroundTrack = BI.createWidget({
|
|
|
|
|
// type: "bi.layout",
|
|
|
|
|
// cls: "background-track",
|
|
|
|
|
// height: c.TRACK_HEIGHT
|
|
|
|
|
// });
|
|
|
|
|
this.grayTrack = BI.createWidget({
|
|
|
|
|
type: "bi.layout",
|
|
|
|
|
cls: "gray-track",
|
|
|
|
|
height: 6
|
|
|
|
|
});
|
|
|
|
|
this.blueTrack = BI.createWidget({
|
|
|
|
|
type: "bi.layout",
|
|
|
|
|
cls: "blue-track bi-high-light-background",
|
|
|
|
|
height: 6
|
|
|
|
|
});
|
|
|
|
|
this.track = this._createTrackWrapper();
|
|
|
|
|
|
|
|
|
|
this.labelOne = BI.createWidget({
|
|
|
|
|
type: "bi.sign_editor",
|
|
|
|
|
cls: "slider-editor-button",
|
|
|
|
|
errorText: "",
|
|
|
|
|
allowBlank: false,
|
|
|
|
|
width: c.EDITOR_WIDTH,
|
|
|
|
|
validationChecker: function (v) {
|
|
|
|
|
return self._checkValidation(v);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.labelOne.element.hover(function () {
|
|
|
|
|
self.labelOne.element.removeClass("bi-border").addClass("bi-border");
|
|
|
|
|
}, function () {
|
|
|
|
|
self.labelOne.element.removeClass("bi-border");
|
|
|
|
|
});
|
|
|
|
|
this.labelOne.on(BI.Editor.EVENT_CONFIRM, function () {
|
|
|
|
|
var v = BI.parseFloat(this.getValue());
|
|
|
|
|
self.valueOne = v;
|
|
|
|
|
var percent = self._getPercentByValue(v);
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));//分成1000份
|
|
|
|
|
self._setLabelOnePosition(significantPercent);
|
|
|
|
|
self._setSliderOnePosition(significantPercent);
|
|
|
|
|
self._setBlueTrack();
|
|
|
|
|
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.labelTwo = BI.createWidget({
|
|
|
|
|
type: "bi.sign_editor",
|
|
|
|
|
cls: "slider-editor-button",
|
|
|
|
|
errorText: "",
|
|
|
|
|
allowBlank: false,
|
|
|
|
|
width: c.EDITOR_WIDTH,
|
|
|
|
|
validationChecker: function (v) {
|
|
|
|
|
return self._checkValidation(v);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.labelTwo.element.hover(function () {
|
|
|
|
|
self.labelTwo.element.removeClass("bi-border").addClass("bi-border");
|
|
|
|
|
}, function () {
|
|
|
|
|
self.labelTwo.element.removeClass("bi-border");
|
|
|
|
|
});
|
|
|
|
|
this.labelTwo.on(BI.Editor.EVENT_CONFIRM, function () {
|
|
|
|
|
var v = BI.parseFloat(this.getValue());
|
|
|
|
|
self.valueTwo = v;
|
|
|
|
|
var percent = self._getPercentByValue(v);
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
self._setLabelTwoPosition(significantPercent);
|
|
|
|
|
self._setSliderTwoPosition(significantPercent);
|
|
|
|
|
self._setBlueTrack();
|
|
|
|
|
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.sliderOne = BI.createWidget({
|
|
|
|
|
type: "bi.single_slider_button"
|
|
|
|
|
});
|
|
|
|
|
this.sliderTwo = BI.createWidget({
|
|
|
|
|
type: "bi.single_slider_button"
|
|
|
|
|
});
|
|
|
|
|
this._draggable(this.sliderOne, true);
|
|
|
|
|
this._draggable(this.sliderTwo, false);
|
|
|
|
|
this._setVisible(false);
|
|
|
|
|
|
|
|
|
|
BI.createWidget({
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
element: this,
|
|
|
|
|
items: [{
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.track,
|
|
|
|
|
width: "100%",
|
|
|
|
|
height: c.TRACK_HEIGHT
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
hgap: 7,
|
|
|
|
|
height: c.TRACK_HEIGHT
|
|
|
|
|
},
|
|
|
|
|
top: 23,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
},
|
|
|
|
|
this._createLabelWrapper(),
|
|
|
|
|
this._createSliderWrapper()
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_rePosBySizeAfterMove: function (size, isLeft) {
|
|
|
|
|
var percent = size * 100 / (this._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
var v = this._getValueByPercent(significantPercent);
|
|
|
|
|
v = this._assertValue(v);
|
|
|
|
|
if(isLeft){
|
|
|
|
|
this._setLabelOnePosition(significantPercent);
|
|
|
|
|
this._setSliderOnePosition(significantPercent);
|
|
|
|
|
this.labelOne.setValue(v);
|
|
|
|
|
this.valueOne = v;
|
|
|
|
|
}else{
|
|
|
|
|
this._setLabelTwoPosition(significantPercent);
|
|
|
|
|
this._setSliderTwoPosition(significantPercent);
|
|
|
|
|
this.labelTwo.setValue(v);
|
|
|
|
|
this.valueTwo = v;
|
|
|
|
|
}
|
|
|
|
|
this._setBlueTrack();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_rePosBySizeAfterStop: function (size, isLeft) {
|
|
|
|
|
var percent = size * 100 / (this._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_draggable: function (widget, isLeft) {
|
|
|
|
|
var self = this, o = this.options;
|
|
|
|
|
var startDrag = false;
|
|
|
|
|
var size = 0, offset = 0, defaultSize = 0;
|
|
|
|
|
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
|
|
|
|
|
if (mouseMoveTracker.isDragging()) {
|
|
|
|
|
startDrag = true;
|
|
|
|
|
offset += deltaX;
|
|
|
|
|
size = optimizeSize(defaultSize + offset);
|
|
|
|
|
widget.element.addClass("dragging");
|
|
|
|
|
self._rePosBySizeAfterMove(size, isLeft);
|
|
|
|
|
}
|
|
|
|
|
}, function () {
|
|
|
|
|
if (startDrag === true) {
|
|
|
|
|
size = optimizeSize(size);
|
|
|
|
|
self._rePosBySizeAfterStop(size, isLeft);
|
|
|
|
|
size = 0;
|
|
|
|
|
offset = 0;
|
|
|
|
|
defaultSize = size;
|
|
|
|
|
startDrag = false;
|
|
|
|
|
}
|
|
|
|
|
widget.element.removeClass("dragging");
|
|
|
|
|
mouseMoveTracker.releaseMouseMoves();
|
|
|
|
|
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
|
|
|
|
|
}, document);
|
|
|
|
|
widget.element.on("mousedown", function (event) {
|
|
|
|
|
if(!widget.isEnabled()){
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
defaultSize = this.offsetLeft;
|
|
|
|
|
optimizeSize(defaultSize);
|
|
|
|
|
mouseMoveTracker.captureMouseMoves(event);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function optimizeSize(s) {
|
|
|
|
|
return BI.clamp(s, 0, o.width);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_createLabelWrapper: function () {
|
|
|
|
|
var c = this._constant;
|
|
|
|
|
return {
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.labelOne,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: "0%"
|
|
|
|
|
}]
|
|
|
|
|
}, {
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.labelTwo,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: "100%"
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
rgap: c.EDITOR_R_GAP,
|
|
|
|
|
height: 70
|
|
|
|
|
},
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_createSliderWrapper: function () {
|
|
|
|
|
var c = this._constant;
|
|
|
|
|
return {
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.sliderOne,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: "0%"
|
|
|
|
|
}]
|
|
|
|
|
}, {
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.sliderTwo,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: "100%"
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
hgap: c.SLIDER_WIDTH_HALF,
|
|
|
|
|
height: c.SLIDER_HEIGHT
|
|
|
|
|
},
|
|
|
|
|
top: 20,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_createTrackWrapper: function () {
|
|
|
|
|
return BI.createWidget({
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.grayTrack,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: this.blueTrack,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "0%"
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
hgap: 8,
|
|
|
|
|
height: 8
|
|
|
|
|
},
|
|
|
|
|
top: 8,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_checkValidation: function (v) {
|
|
|
|
|
return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_checkOverlap: function () {
|
|
|
|
|
var labelOneLeft = this.labelOne.element[0].offsetLeft;
|
|
|
|
|
var labelTwoLeft = this.labelTwo.element[0].offsetLeft;
|
|
|
|
|
if (labelOneLeft <= labelTwoLeft) {
|
|
|
|
|
if ((labelTwoLeft - labelOneLeft) < 90) {
|
|
|
|
|
this.labelTwo.element.css({"top": 40});
|
|
|
|
|
} else {
|
|
|
|
|
this.labelTwo.element.css({"top": 0});
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if ((labelOneLeft - labelTwoLeft) < 90) {
|
|
|
|
|
this.labelTwo.element.css({"top": 40});
|
|
|
|
|
} else {
|
|
|
|
|
this.labelTwo.element.css({"top": 0});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setLabelOnePosition: function (percent) {
|
|
|
|
|
this.labelOne.element.css({"left": percent + "%"});
|
|
|
|
|
this._checkOverlap();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setLabelTwoPosition: function (percent) {
|
|
|
|
|
this.labelTwo.element.css({"left": percent + "%"});
|
|
|
|
|
this._checkOverlap();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setSliderOnePosition: function (percent) {
|
|
|
|
|
this.sliderOne.element.css({"left": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setSliderTwoPosition: function (percent) {
|
|
|
|
|
this.sliderTwo.element.css({"left": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setBlueTrackLeft: function (percent) {
|
|
|
|
|
this.blueTrack.element.css({"left": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setBlueTrackWidth: function (percent) {
|
|
|
|
|
this.blueTrack.element.css({"width": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setBlueTrack: function () {
|
|
|
|
|
var percentOne = this._getPercentByValue(this.labelOne.getValue());
|
|
|
|
|
var percentTwo = this._getPercentByValue(this.labelTwo.getValue());
|
|
|
|
|
if (percentOne <= percentTwo) {
|
|
|
|
|
this._setBlueTrackLeft(percentOne);
|
|
|
|
|
this._setBlueTrackWidth(percentTwo - percentOne);
|
|
|
|
|
} else {
|
|
|
|
|
this._setBlueTrackLeft(percentTwo);
|
|
|
|
|
this._setBlueTrackWidth(percentOne - percentTwo);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setAllPosition: function (one, two) {
|
|
|
|
|
this._setSliderOnePosition(one);
|
|
|
|
|
this._setLabelOnePosition(one);
|
|
|
|
|
this._setSliderTwoPosition(two);
|
|
|
|
|
this._setLabelTwoPosition(two);
|
|
|
|
|
this._setBlueTrack();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setVisible: function (visible) {
|
|
|
|
|
this.sliderOne.setVisible(visible);
|
|
|
|
|
this.sliderTwo.setVisible(visible);
|
|
|
|
|
this.labelOne.setVisible(visible);
|
|
|
|
|
this.labelTwo.setVisible(visible);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setErrorText: function () {
|
|
|
|
|
var errorText = BI.i18nText("BI-Please_Enter") + this.min + "-" + this.max + BI.i18nText("BI-Basic_De") + BI.i18nText("BI-Basic_Number");
|
|
|
|
|
this.labelOne.setErrorText(errorText);
|
|
|
|
|
this.labelTwo.setErrorText(errorText);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getGrayTrackLength: function () {
|
|
|
|
|
return this.grayTrack.element[0].scrollWidth
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
//其中取max-min后保留4为有效数字后的值的小数位数为最终value的精度
|
|
|
|
|
_getValueByPercent: function (percent) {//return (((max-min)*percent)/100+min)
|
|
|
|
|
var sub = this.calculation.accurateSubtraction(this.max, this.min);
|
|
|
|
|
var mul = this.calculation.accurateMultiplication(sub, percent);
|
|
|
|
|
var div = this.calculation.accurateDivisionTenExponent(mul, 2);
|
|
|
|
|
if(this.precision < 0){
|
|
|
|
|
var value = BI.parseFloat(this.calculation.accurateAddition(div, this.min));
|
|
|
|
|
var reduceValue = Math.round(this.calculation.accurateDivisionTenExponent(value, -this.precision));
|
|
|
|
|
return this.calculation.accurateMultiplication(reduceValue, Math.pow(10, -this.precision));
|
|
|
|
|
}else{
|
|
|
|
|
return BI.parseFloat(this.calculation.accurateAddition(div, this.min).toFixed(this.precision));
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getPercentByValue: function (v) {
|
|
|
|
|
return (v - this.min) * 100 / (this.max - this.min);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setDraggableEnable: function (enable) {
|
|
|
|
|
this.sliderOne.setEnable(enable);
|
|
|
|
|
this.sliderTwo.setEnable(enable);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getPrecision: function () {
|
|
|
|
|
//计算每一份值的精度(最大值和最小值的差值保留4为有效数字后的精度)
|
|
|
|
|
//如果差值的整数位数大于4,toPrecision(4)得到的是科学计数法123456 => 1.235e+5
|
|
|
|
|
//返回非负值: 保留的小数位数
|
|
|
|
|
//返回负值: 保留的10^n精度中的n
|
|
|
|
|
var sub = this.calculation.accurateSubtraction(this.max, this.min);
|
|
|
|
|
var pre = sub.toPrecision(4);
|
|
|
|
|
//科学计数法
|
|
|
|
|
var eIndex = pre.indexOf("e");
|
|
|
|
|
var arr = [];
|
|
|
|
|
if(eIndex > -1){
|
|
|
|
|
arr = pre.split("e");
|
|
|
|
|
var decimalPartLength = BI.size(arr[0].split(".")[1]);
|
|
|
|
|
var sciencePartLength = BI.parseInt(arr[1].substring(1));
|
|
|
|
|
return decimalPartLength - sciencePartLength;
|
|
|
|
|
}else{
|
|
|
|
|
arr = pre.split(".");
|
|
|
|
|
return arr.length > 1 ? arr[1].length : 0;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_assertValue: function (value) {
|
|
|
|
|
if(value <= this.min){
|
|
|
|
|
return this.min
|
|
|
|
|
}
|
|
|
|
|
if(value >= this.max){
|
|
|
|
|
return this.max;
|
|
|
|
|
}
|
|
|
|
|
return value;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getValue: function () {
|
|
|
|
|
if (this.valueOne <= this.valueTwo) {
|
|
|
|
|
return {min: this.valueOne, max: this.valueTwo}
|
|
|
|
|
} else {
|
|
|
|
|
return {min: this.valueTwo, max: this.valueOne}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setMinAndMax: function (v) {
|
|
|
|
|
var minNumber = BI.parseFloat(v.min);
|
|
|
|
|
var maxNumber = BI.parseFloat(v.max);
|
|
|
|
|
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber >= minNumber )) {
|
|
|
|
|
this.min = minNumber;
|
|
|
|
|
this.max = maxNumber;
|
|
|
|
|
this.valueOne = minNumber;
|
|
|
|
|
this.valueTwo = maxNumber;
|
|
|
|
|
this.precision = this._getPrecision();
|
|
|
|
|
this._setDraggableEnable(true);
|
|
|
|
|
}
|
|
|
|
|
if (maxNumber === minNumber) {
|
|
|
|
|
this._setDraggableEnable(false);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setValue: function (v) {
|
|
|
|
|
var valueOne = BI.parseFloat(v.min);
|
|
|
|
|
var valueTwo = BI.parseFloat(v.max);
|
|
|
|
|
if (!isNaN(valueOne) && !isNaN(valueTwo)) {
|
|
|
|
|
if (this._checkValidation(valueOne)) {
|
|
|
|
|
this.valueOne = valueOne;
|
|
|
|
|
}
|
|
|
|
|
if (this._checkValidation(valueTwo)) {
|
|
|
|
|
this.valueTwo = valueTwo;
|
|
|
|
|
}
|
|
|
|
|
if (valueOne < this.min) {
|
|
|
|
|
this.valueOne = this.min;
|
|
|
|
|
}
|
|
|
|
|
if (valueTwo > this.max) {
|
|
|
|
|
this.valueTwo = this.max;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
reset: function () {
|
|
|
|
|
this._setVisible(false);
|
|
|
|
|
this.enable = false;
|
|
|
|
|
this.valueOne = "";
|
|
|
|
|
this.valueTwo = "";
|
|
|
|
|
this.min = NaN;
|
|
|
|
|
this.max = NaN;
|
|
|
|
|
this._setBlueTrackWidth(0);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
populate: function () {
|
|
|
|
|
if (!isNaN(this.min) && !isNaN(this.max)) {
|
|
|
|
|
this.enable = true;
|
|
|
|
|
this._setVisible(true);
|
|
|
|
|
this._setErrorText();
|
|
|
|
|
if ((BI.isNumeric(this.valueOne) || BI.isNotEmptyString(this.valueOne)) && (BI.isNumeric(this.valueTwo) || BI.isNotEmptyString(this.valueTwo))) {
|
|
|
|
|
this.labelOne.setValue(this.valueOne);
|
|
|
|
|
this.labelTwo.setValue(this.valueTwo);
|
|
|
|
|
this._setAllPosition(this._getPercentByValue(this.valueOne), this._getPercentByValue(this.valueTwo));
|
|
|
|
|
} else {
|
|
|
|
|
this.labelOne.setValue(this.min);
|
|
|
|
|
this.labelTwo.setValue(this.max);
|
|
|
|
|
this._setAllPosition(0, 100)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
BI.IntervalSlider.EVENT_CHANGE = "EVENT_CHANGE";
|
|
|
|
|
BI.shortcut("bi.interval_slider", BI.IntervalSlider);/**
|
|
|
|
|
* Created by zcf on 2016/9/26.
|
|
|
|
|
*/
|
|
|
|
|
BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
|
|
|
|
|
_constant: {
|
|
|
|
|
EDITOR_WIDTH: 58,
|
|
|
|
|
EDITOR_R_GAP: 60,
|
|
|
|
|
EDITOR_HEIGHT: 20,
|
|
|
|
|
HEIGHT: 20,
|
|
|
|
|
SLIDER_WIDTH_HALF: 15,
|
|
|
|
|
SLIDER_WIDTH: 30,
|
|
|
|
|
SLIDER_HEIGHT: 30,
|
|
|
|
|
TRACK_HEIGHT: 24
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_defaultConfig: function () {
|
|
|
|
|
return BI.extend(BI.IntervalSliderLabel.superclass._defaultConfig.apply(this, arguments), {
|
|
|
|
|
baseCls: "bi-interval-slider-label bi-slider-track",
|
|
|
|
|
digit: false,
|
|
|
|
|
unit: ""
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_init: function () {
|
|
|
|
|
BI.IntervalSliderLabel.superclass._init.apply(this, arguments);
|
|
|
|
|
|
|
|
|
|
var self = this, o = this.options;
|
|
|
|
|
var c = this._constant;
|
|
|
|
|
this.enable = false;
|
|
|
|
|
this.valueOne = "";
|
|
|
|
|
this.valueTwo = "";
|
|
|
|
|
this.calculation = new BI.AccurateCalculationModel();
|
|
|
|
|
|
|
|
|
|
this.grayTrack = BI.createWidget({
|
|
|
|
|
type: "bi.layout",
|
|
|
|
|
cls: "gray-track",
|
|
|
|
|
height: 6
|
|
|
|
|
});
|
|
|
|
|
this.blueTrack = BI.createWidget({
|
|
|
|
|
type: "bi.layout",
|
|
|
|
|
cls: "blue-track bi-high-light-background",
|
|
|
|
|
height: 6
|
|
|
|
|
});
|
|
|
|
|
this.track = this._createTrackWrapper();
|
|
|
|
|
|
|
|
|
|
this.labelOne = BI.createWidget({
|
|
|
|
|
type: "bi.label",
|
|
|
|
|
height: c.HEIGHT,
|
|
|
|
|
width: c.EDITOR_WIDTH
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.labelTwo = BI.createWidget({
|
|
|
|
|
type: "bi.label",
|
|
|
|
|
height: c.HEIGHT,
|
|
|
|
|
width: c.EDITOR_WIDTH
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.sliderOne = BI.createWidget({
|
|
|
|
|
type: "bi.single_slider_button"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.sliderTwo = BI.createWidget({
|
|
|
|
|
type: "bi.single_slider_button"
|
|
|
|
|
});
|
|
|
|
|
this._draggable(this.sliderOne, true);
|
|
|
|
|
this._draggable(this.sliderTwo, false);
|
|
|
|
|
this._setVisible(false);
|
|
|
|
|
|
|
|
|
|
BI.createWidget({
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
element: this,
|
|
|
|
|
items: [{
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.track,
|
|
|
|
|
width: "100%",
|
|
|
|
|
height: c.TRACK_HEIGHT
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
hgap: 7,
|
|
|
|
|
height: c.TRACK_HEIGHT
|
|
|
|
|
},
|
|
|
|
|
top: 13,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
},
|
|
|
|
|
this._createLabelWrapper(),
|
|
|
|
|
this._createSliderWrapper()
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_rePosBySizeAfterMove: function (size, isLeft) {
|
|
|
|
|
var percent = size * 100 / (this._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
var v = this._getValueByPercent(significantPercent);
|
|
|
|
|
v = this._assertValue(v);
|
|
|
|
|
if(isLeft){
|
|
|
|
|
this._setLabelOnePosition(significantPercent);
|
|
|
|
|
this._setSliderOnePosition(significantPercent);
|
|
|
|
|
this.labelOne.setValue(v);
|
|
|
|
|
this.valueOne = v;
|
|
|
|
|
}else{
|
|
|
|
|
this._setLabelTwoPosition(significantPercent);
|
|
|
|
|
this._setSliderTwoPosition(significantPercent);
|
|
|
|
|
this.labelTwo.setValue(v);
|
|
|
|
|
this.valueTwo = v;
|
|
|
|
|
}
|
|
|
|
|
this._setBlueTrack();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_rePosBySizeAfterStop: function (size, isLeft) {
|
|
|
|
|
var percent = size * 100 / (this._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_draggable: function (widget, isLeft) {
|
|
|
|
|
var self = this, o = this.options;
|
|
|
|
|
var startDrag = false;
|
|
|
|
|
var size = 0, offset = 0, defaultSize = 0;
|
|
|
|
|
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
|
|
|
|
|
if (mouseMoveTracker.isDragging()) {
|
|
|
|
|
startDrag = true;
|
|
|
|
|
offset += deltaX;
|
|
|
|
|
size = optimizeSize(defaultSize + offset);
|
|
|
|
|
widget.element.addClass("dragging");
|
|
|
|
|
self._rePosBySizeAfterMove(size, isLeft);
|
|
|
|
|
}
|
|
|
|
|
}, function () {
|
|
|
|
|
if (startDrag === true) {
|
|
|
|
|
size = optimizeSize(size);
|
|
|
|
|
self._rePosBySizeAfterStop(size, isLeft);
|
|
|
|
|
size = 0;
|
|
|
|
|
offset = 0;
|
|
|
|
|
defaultSize = size;
|
|
|
|
|
startDrag = false;
|
|
|
|
|
}
|
|
|
|
|
widget.element.removeClass("dragging");
|
|
|
|
|
mouseMoveTracker.releaseMouseMoves();
|
|
|
|
|
self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
|
|
|
|
|
}, document);
|
|
|
|
|
widget.element.on("mousedown", function (event) {
|
|
|
|
|
if(!widget.isEnabled()){
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
defaultSize = this.offsetLeft;
|
|
|
|
|
optimizeSize(defaultSize);
|
|
|
|
|
mouseMoveTracker.captureMouseMoves(event);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function optimizeSize(s) {
|
|
|
|
|
return BI.clamp(s, 0, o.width);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_createLabelWrapper: function () {
|
|
|
|
|
var c = this._constant;
|
|
|
|
|
return {
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.labelOne,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: "0%"
|
|
|
|
|
}]
|
|
|
|
|
}, {
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.labelTwo,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: "100%"
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
rgap: c.EDITOR_R_GAP,
|
|
|
|
|
height: 50
|
|
|
|
|
},
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_createSliderWrapper: function () {
|
|
|
|
|
var c = this._constant;
|
|
|
|
|
return {
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.sliderOne,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: "0%"
|
|
|
|
|
}]
|
|
|
|
|
}, {
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.sliderTwo,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: "100%"
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
hgap: c.SLIDER_WIDTH_HALF,
|
|
|
|
|
height: c.SLIDER_HEIGHT
|
|
|
|
|
},
|
|
|
|
|
top: 10,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_createTrackWrapper: function () {
|
|
|
|
|
return BI.createWidget({
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.grayTrack,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: this.blueTrack,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "0%"
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
hgap: 8,
|
|
|
|
|
height: 8
|
|
|
|
|
},
|
|
|
|
|
top: 8,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_checkValidation: function (v) {
|
|
|
|
|
return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_checkOverlap: function () {
|
|
|
|
|
var labelOneLeft = this.labelOne.element[0].offsetLeft;
|
|
|
|
|
var labelTwoLeft = this.labelTwo.element[0].offsetLeft;
|
|
|
|
|
if (labelOneLeft <= labelTwoLeft) {
|
|
|
|
|
if ((labelTwoLeft - labelOneLeft) < 90) {
|
|
|
|
|
this.labelTwo.element.css({"top": 30});
|
|
|
|
|
} else {
|
|
|
|
|
this.labelTwo.element.css({"top": 0});
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if ((labelOneLeft - labelTwoLeft) < 90) {
|
|
|
|
|
this.labelTwo.element.css({"top": 30});
|
|
|
|
|
} else {
|
|
|
|
|
this.labelTwo.element.css({"top": 0});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setLabelOnePosition: function (percent) {
|
|
|
|
|
this.labelOne.element.css({"left": percent + "%"});
|
|
|
|
|
this._checkOverlap();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setLabelTwoPosition: function (percent) {
|
|
|
|
|
this.labelTwo.element.css({"left": percent + "%"});
|
|
|
|
|
this._checkOverlap();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setSliderOnePosition: function (percent) {
|
|
|
|
|
this.sliderOne.element.css({"left": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setSliderTwoPosition: function (percent) {
|
|
|
|
|
this.sliderTwo.element.css({"left": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setBlueTrackLeft: function (percent) {
|
|
|
|
|
this.blueTrack.element.css({"left": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setBlueTrackWidth: function (percent) {
|
|
|
|
|
this.blueTrack.element.css({"width": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setBlueTrack: function () {
|
|
|
|
|
var percentOne = this._getPercentByValue(this.labelOne.getValue());
|
|
|
|
|
var percentTwo = this._getPercentByValue(this.labelTwo.getValue());
|
|
|
|
|
if (percentOne <= percentTwo) {
|
|
|
|
|
this._setBlueTrackLeft(percentOne);
|
|
|
|
|
this._setBlueTrackWidth(percentTwo - percentOne);
|
|
|
|
|
} else {
|
|
|
|
|
this._setBlueTrackLeft(percentTwo);
|
|
|
|
|
this._setBlueTrackWidth(percentOne - percentTwo);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setAllPosition: function (one, two) {
|
|
|
|
|
this._setSliderOnePosition(one);
|
|
|
|
|
this._setLabelOnePosition(one);
|
|
|
|
|
this._setSliderTwoPosition(two);
|
|
|
|
|
this._setLabelTwoPosition(two);
|
|
|
|
|
this._setBlueTrack();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setVisible: function (visible) {
|
|
|
|
|
this.sliderOne.setVisible(visible);
|
|
|
|
|
this.sliderTwo.setVisible(visible);
|
|
|
|
|
this.labelOne.setVisible(visible);
|
|
|
|
|
this.labelTwo.setVisible(visible);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getGrayTrackLength: function () {
|
|
|
|
|
return this.grayTrack.element[0].scrollWidth
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
//其中取max-min后保留4为有效数字后的值的小数位数为最终value的精度
|
|
|
|
|
_getValueByPercent: function (percent) {//return (((max-min)*percent)/100+min)
|
|
|
|
|
var sub = this.calculation.accurateSubtraction(this.max, this.min);
|
|
|
|
|
var mul = this.calculation.accurateMultiplication(sub, percent);
|
|
|
|
|
var div = this.calculation.accurateDivisionTenExponent(mul, 2);
|
|
|
|
|
if (this.precision < 0) {
|
|
|
|
|
var value = BI.parseFloat(this.calculation.accurateAddition(div, this.min));
|
|
|
|
|
var reduceValue = Math.round(this.calculation.accurateDivisionTenExponent(value, -this.precision));
|
|
|
|
|
return this.calculation.accurateMultiplication(reduceValue, Math.pow(10, -this.precision));
|
|
|
|
|
} else {
|
|
|
|
|
return BI.parseFloat(this.calculation.accurateAddition(div, this.min).toFixed(this.precision));
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getPercentByValue: function (v) {
|
|
|
|
|
return (v - this.min) * 100 / (this.max - this.min);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setDraggableEnable: function (enable) {
|
|
|
|
|
this.sliderOne.setEnable(enable);
|
|
|
|
|
this.sliderTwo.setEnable(enable);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getPrecision: function () {
|
|
|
|
|
//计算每一份值的精度(最大值和最小值的差值保留4为有效数字后的精度)
|
|
|
|
|
//如果差值的整数位数大于4,toPrecision(4)得到的是科学计数法123456 => 1.235e+5
|
|
|
|
|
//返回非负值: 保留的小数位数
|
|
|
|
|
//返回负值: 保留的10^n精度中的n
|
|
|
|
|
var sub = this.calculation.accurateSubtraction(this.max, this.min);
|
|
|
|
|
var pre = sub.toPrecision(4);
|
|
|
|
|
//科学计数法
|
|
|
|
|
var eIndex = pre.indexOf("e");
|
|
|
|
|
var arr = [];
|
|
|
|
|
if (eIndex > -1) {
|
|
|
|
|
arr = pre.split("e");
|
|
|
|
|
var decimalPartLength = BI.size(arr[0].split(".")[1]);
|
|
|
|
|
var sciencePartLength = BI.parseInt(arr[1].substring(1));
|
|
|
|
|
return decimalPartLength - sciencePartLength;
|
|
|
|
|
} else {
|
|
|
|
|
arr = pre.split(".");
|
|
|
|
|
return arr.length > 1 ? arr[1].length : 0;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_assertValue: function (value) {
|
|
|
|
|
if (value <= this.min) {
|
|
|
|
|
return this.min
|
|
|
|
|
}
|
|
|
|
|
if (value >= this.max) {
|
|
|
|
|
return this.max;
|
|
|
|
|
}
|
|
|
|
|
return value;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getValue: function () {
|
|
|
|
|
if (this.valueOne <= this.valueTwo) {
|
|
|
|
|
return {min: this.valueOne, max: this.valueTwo}
|
|
|
|
|
} else {
|
|
|
|
|
return {min: this.valueTwo, max: this.valueOne}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setMinAndMax: function (v) {
|
|
|
|
|
var minNumber = BI.parseFloat(v.min);
|
|
|
|
|
var maxNumber = BI.parseFloat(v.max);
|
|
|
|
|
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber >= minNumber )) {
|
|
|
|
|
this.min = minNumber;
|
|
|
|
|
this.max = maxNumber;
|
|
|
|
|
this.valueOne = minNumber;
|
|
|
|
|
this.valueTwo = maxNumber;
|
|
|
|
|
this.precision = this._getPrecision();
|
|
|
|
|
this._setDraggableEnable(true);
|
|
|
|
|
}
|
|
|
|
|
if (maxNumber === minNumber) {
|
|
|
|
|
this._setDraggableEnable(false);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setValue: function (v) {
|
|
|
|
|
var o = this.options;
|
|
|
|
|
var valueOne = BI.parseFloat(v.min);
|
|
|
|
|
var valueTwo = BI.parseFloat(v.max);
|
|
|
|
|
valueOne = o.digit === false ? valueOne : valueOne.toFixed(o.digit);
|
|
|
|
|
if (!isNaN(valueOne) && !isNaN(valueTwo)) {
|
|
|
|
|
if (this._checkValidation(valueOne)) {
|
|
|
|
|
this.valueOne = valueOne;
|
|
|
|
|
}
|
|
|
|
|
if (this._checkValidation(valueTwo)) {
|
|
|
|
|
this.valueTwo = valueTwo;
|
|
|
|
|
}
|
|
|
|
|
if (valueOne < this.min) {
|
|
|
|
|
this.valueOne = this.min;
|
|
|
|
|
}
|
|
|
|
|
if (valueTwo > this.max) {
|
|
|
|
|
this.valueTwo = this.max;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
reset: function () {
|
|
|
|
|
this._setVisible(false);
|
|
|
|
|
this.enable = false;
|
|
|
|
|
this.valueOne = "";
|
|
|
|
|
this.valueTwo = "";
|
|
|
|
|
this.min = NaN;
|
|
|
|
|
this.max = NaN;
|
|
|
|
|
this._setBlueTrackWidth(0);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
populate: function () {
|
|
|
|
|
var o = this.options;
|
|
|
|
|
if (!isNaN(this.min) && !isNaN(this.max)) {
|
|
|
|
|
this.enable = true;
|
|
|
|
|
this._setVisible(true);
|
|
|
|
|
if ((BI.isNumeric(this.valueOne) || BI.isNotEmptyString(this.valueOne)) && (BI.isNumeric(this.valueTwo) || BI.isNotEmptyString(this.valueTwo))) {
|
|
|
|
|
this.labelOne.setValue(this.valueOne);
|
|
|
|
|
this.labelTwo.setValue(this.valueTwo);
|
|
|
|
|
this.labelOne.setText(this.valueOne + o.unit);
|
|
|
|
|
this.labelTwo.setText(this.valueTwo + o.unit);
|
|
|
|
|
this._setAllPosition(this._getPercentByValue(this.valueOne), this._getPercentByValue(this.valueTwo));
|
|
|
|
|
} else {
|
|
|
|
|
this.labelOne.setValue(this.min);
|
|
|
|
|
this.labelTwo.setValue(this.max);
|
|
|
|
|
this.labelOne.setText(this.min + o.unit);
|
|
|
|
|
this.labelTwo.setText(this.max + o.unit);
|
|
|
|
|
this._setAllPosition(0, 100)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
BI.IntervalSliderLabel.EVENT_CHANGE = "EVENT_CHANGE";
|
|
|
|
|
BI.shortcut("bi.interval_slider_label", BI.IntervalSliderLabel);/**
|
|
|
|
|
* Created by zcf on 2017/3/1.
|
|
|
|
|
* 万恶的IEEE-754
|
|
|
|
|
* 使用字符串精确计算含小数加法、减法、乘法和10的指数倍除法，支持负数
|
|
|
|
|
*/
|
|
|
|
|
BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
|
|
|
|
|
_defaultConfig: function () {
|
|
|
|
|
return BI.extend(BI.AccurateCalculationModel.superclass._defaultConfig.apply(this, arguments), {
|
|
|
|
|
baseCls: ""
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_init: function () {
|
|
|
|
|
BI.AccurateCalculationModel.superclass._init.apply(this, arguments);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getMagnitude: function (n) {
|
|
|
|
|
var magnitude = "1";
|
|
|
|
|
for (var i = 0; i < n; i++) {
|
|
|
|
|
magnitude += "0";
|
|
|
|
|
}
|
|
|
|
|
return BI.parseInt(magnitude);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_formatDecimal: function (stringNumber1, stringNumber2) {
|
|
|
|
|
if (stringNumber1.numDecimalLength === stringNumber2.numDecimalLength) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var magnitudeDiff = stringNumber1.numDecimalLength - stringNumber2.numDecimalLength;
|
|
|
|
|
if (magnitudeDiff > 0) {
|
|
|
|
|
var needAddZero = stringNumber2
|
|
|
|
|
} else {
|
|
|
|
|
var needAddZero = stringNumber1;
|
|
|
|
|
magnitudeDiff = (0 - magnitudeDiff);
|
|
|
|
|
}
|
|
|
|
|
for (var i = 0; i < magnitudeDiff; i++) {
|
|
|
|
|
if (needAddZero.numDecimal === "0" && i === 0) {
|
|
|
|
|
continue
|
|
|
|
|
}
|
|
|
|
|
needAddZero.numDecimal += "0"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_stringNumberFactory: function (num) {
|
|
|
|
|
var strNum = num.toString();
|
|
|
|
|
var numStrArray = strNum.split(".");
|
|
|
|
|
var numInteger = numStrArray[0];
|
|
|
|
|
if (numStrArray.length === 1) {
|
|
|
|
|
var numDecimal = "0";
|
|
|
|
|
var numDecimalLength = 0;
|
|
|
|
|
} else {
|
|
|
|
|
var numDecimal = numStrArray[1];
|
|
|
|
|
var numDecimalLength = numStrArray[1].length;
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
"numInteger": numInteger,
|
|
|
|
|
"numDecimal": numDecimal,
|
|
|
|
|
"numDecimalLength": numDecimalLength
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_accurateSubtraction: function (num1, num2) {//num1-num2 && num1>num2
|
|
|
|
|
var stringNumber1 = this._stringNumberFactory(num1);
|
|
|
|
|
var stringNumber2 = this._stringNumberFactory(num2);
|
|
|
|
|
//整数部分计算
|
|
|
|
|
var integerResult = BI.parseInt(stringNumber1.numInteger) - BI.parseInt(stringNumber2.numInteger);
|
|
|
|
|
//小数部分
|
|
|
|
|
this._formatDecimal(stringNumber1, stringNumber2);
|
|
|
|
|
var decimalMaxLength = getDecimalMaxLength(stringNumber1, stringNumber2);
|
|
|
|
|
|
|
|
|
|
if (BI.parseInt(stringNumber1.numDecimal) >= BI.parseInt(stringNumber2.numDecimal)) {
|
|
|
|
|
var decimalResultTemp = (BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString();
|
|
|
|
|
var decimalResult = addZero(decimalResultTemp, decimalMaxLength);
|
|
|
|
|
} else {//否则借位
|
|
|
|
|
integerResult--;
|
|
|
|
|
var borrow = this._getMagnitude(decimalMaxLength);
|
|
|
|
|
var decimalResultTemp = (borrow + BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString();
|
|
|
|
|
var decimalResult = addZero(decimalResultTemp, decimalMaxLength);
|
|
|
|
|
}
|
|
|
|
|
var result = integerResult + "." + decimalResult;
|
|
|
|
|
return BI.parseFloat(result);
|
|
|
|
|
|
|
|
|
|
function getDecimalMaxLength(num1, num2) {
|
|
|
|
|
if (num1.numDecimal.length >= num2.numDecimal.length) {
|
|
|
|
|
return num1.numDecimal.length
|
|
|
|
|
}
|
|
|
|
|
return num2.numDecimal.length
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function addZero(resultTemp, length) {
|
|
|
|
|
var diff = length - resultTemp.length;
|
|
|
|
|
for (var i = 0; i < diff; i++) {
|
|
|
|
|
resultTemp = "0" + resultTemp;
|
|
|
|
|
}
|
|
|
|
|
return resultTemp
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_accurateAddition: function (num1, num2) {//加法结合律
|
|
|
|
|
var stringNumber1 = this._stringNumberFactory(num1);
|
|
|
|
|
var stringNumber2 = this._stringNumberFactory(num2);
|
|
|
|
|
//整数部分计算
|
|
|
|
|
var integerResult = BI.parseInt(stringNumber1.numInteger) + BI.parseInt(stringNumber2.numInteger);
|
|
|
|
|
//小数部分
|
|
|
|
|
this._formatDecimal(stringNumber1, stringNumber2);
|
|
|
|
|
|
|
|
|
|
var decimalResult = (BI.parseInt(stringNumber1.numDecimal) + BI.parseInt(stringNumber2.numDecimal)).toString();
|
|
|
|
|
|
|
|
|
|
if (decimalResult !== "0") {
|
|
|
|
|
if (decimalResult.length <= stringNumber1.numDecimal.length) {
|
|
|
|
|
decimalResult = addZero(decimalResult, stringNumber1.numDecimal.length)
|
|
|
|
|
} else {
|
|
|
|
|
integerResult++;//进一
|
|
|
|
|
decimalResult = decimalResult.slice(1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
var result = integerResult + "." + decimalResult;
|
|
|
|
|
return BI.parseFloat(result);
|
|
|
|
|
|
|
|
|
|
function addZero(resultTemp, length) {
|
|
|
|
|
var diff = length - resultTemp.length;
|
|
|
|
|
for (var i = 0; i < diff; i++) {
|
|
|
|
|
resultTemp = "0" + resultTemp;
|
|
|
|
|
}
|
|
|
|
|
return resultTemp
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_accurateMultiplication: function (num1, num2) {//乘法分配律
|
|
|
|
|
var stringNumber1 = this._stringNumberFactory(num1);
|
|
|
|
|
var stringNumber2 = this._stringNumberFactory(num2);
|
|
|
|
|
//整数部分计算
|
|
|
|
|
var integerResult = BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numInteger);
|
|
|
|
|
//num1的小数和num2的整数
|
|
|
|
|
var dec1Int2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numInteger), stringNumber1.numDecimalLength);
|
|
|
|
|
//num1的整数和num2的小数
|
|
|
|
|
var int1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numDecimal), stringNumber2.numDecimalLength);
|
|
|
|
|
//小数*小数
|
|
|
|
|
var dec1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numDecimal), (stringNumber1.numDecimalLength + stringNumber2.numDecimalLength));
|
|
|
|
|
|
|
|
|
|
return this._accurateAddition(this._accurateAddition(this._accurateAddition(integerResult, dec1Int2), int1dec2), dec1dec2);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_accurateDivisionTenExponent: function (num, n) {// num/10^n && n>0
|
|
|
|
|
var stringNumber = this._stringNumberFactory(num);
|
|
|
|
|
if (stringNumber.numInteger.length > n) {
|
|
|
|
|
var integerResult = stringNumber.numInteger.slice(0, (stringNumber.numInteger.length - n));
|
|
|
|
|
var partDecimalResult = stringNumber.numInteger.slice(-n);
|
|
|
|
|
} else {
|
|
|
|
|
var integerResult = "0";
|
|
|
|
|
var partDecimalResult = addZero(stringNumber.numInteger, n);
|
|
|
|
|
}
|
|
|
|
|
var result = integerResult + "." + partDecimalResult + stringNumber.numDecimal;
|
|
|
|
|
return BI.parseFloat(result);
|
|
|
|
|
|
|
|
|
|
function addZero(resultTemp, length) {
|
|
|
|
|
var diff = length - resultTemp.length;
|
|
|
|
|
for (var i = 0; i < diff; i++) {
|
|
|
|
|
resultTemp = "0" + resultTemp;
|
|
|
|
|
}
|
|
|
|
|
return resultTemp
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
accurateSubtraction: function (num1, num2) {
|
|
|
|
|
if (num1 >= 0 && num2 >= 0) {
|
|
|
|
|
if (num1 >= num2) {
|
|
|
|
|
return this._accurateSubtraction(num1, num2)
|
|
|
|
|
}
|
|
|
|
|
return -this._accurateSubtraction(num2, num1)
|
|
|
|
|
}
|
|
|
|
|
if (num1 >= 0 && num2 < 0) {
|
|
|
|
|
return this._accurateAddition(num1, -num2)
|
|
|
|
|
}
|
|
|
|
|
if (num1 < 0 && num2 >= 0) {
|
|
|
|
|
return -this._accurateAddition(-num1, num2)
|
|
|
|
|
}
|
|
|
|
|
if (num1 < 0 && num2 < 0) {
|
|
|
|
|
if (num1 >= num2) {
|
|
|
|
|
return this._accurateSubtraction(-num2, -num1)
|
|
|
|
|
}
|
|
|
|
|
return this._accurateSubtraction(-num1, -num2)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
accurateAddition: function (num1, num2) {
|
|
|
|
|
if (num1 >= 0 && num2 >= 0) {
|
|
|
|
|
return this._accurateAddition(num1, num2)
|
|
|
|
|
}
|
|
|
|
|
if (num1 >= 0 && num2 < 0) {
|
|
|
|
|
return this.accurateSubtraction(num1, -num2)
|
|
|
|
|
}
|
|
|
|
|
if (num1 < 0 && num2 >= 0) {
|
|
|
|
|
return this.accurateSubtraction(num2, -num1)
|
|
|
|
|
}
|
|
|
|
|
if (num1 < 0 && num2 < 0) {
|
|
|
|
|
return -this._accurateAddition(-num1, -num2)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
accurateMultiplication: function (num1, num2) {
|
|
|
|
|
if (num1 >= 0 && num2 >= 0) {
|
|
|
|
|
return this._accurateMultiplication(num1, num2)
|
|
|
|
|
}
|
|
|
|
|
if (num1 >= 0 && num2 < 0) {
|
|
|
|
|
return -this._accurateMultiplication(num1, -num2)
|
|
|
|
|
}
|
|
|
|
|
if (num1 < 0 && num2 >= 0) {
|
|
|
|
|
return -this._accurateMultiplication(-num1, num2)
|
|
|
|
|
}
|
|
|
|
|
if (num1 < 0 && num2 < 0) {
|
|
|
|
|
return this._accurateMultiplication(-num1, -num2)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
accurateDivisionTenExponent: function (num1, n) {
|
|
|
|
|
if (num1 >= 0) {
|
|
|
|
|
return this._accurateDivisionTenExponent(num1, n);
|
|
|
|
|
}
|
|
|
|
|
return -this._accurateDivisionTenExponent(-num1, n);
|
|
|
|
|
}
|
|
|
|
|
});/**
|
|
|
|
|
* Created by zcf on 2016/9/22.
|
|
|
|
|
*/
|
|
|
|
|
BI.SliderIconButton = BI.inherit(BI.Widget, {
|
|
|
|
|
_defaultConfig: function () {
|
|
|
|
|
return BI.extend(BI.SliderIconButton.superclass._defaultConfig.apply(this, arguments), {
|
|
|
|
|
baseCls: "bi-single-slider-button"
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
_init: function () {
|
|
|
|
|
BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments));
|
|
|
|
|
this.slider = BI.createWidget({
|
|
|
|
|
type: "bi.icon_button",
|
|
|
|
|
cls: "slider-icon slider-button",
|
|
|
|
|
iconWidth: 14,
|
|
|
|
|
iconHeight: 14,
|
|
|
|
|
height: 14,
|
|
|
|
|
width: 14
|
|
|
|
|
});
|
|
|
|
|
BI.createWidget({
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
element: this,
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.slider,
|
|
|
|
|
top: 7,
|
|
|
|
|
left: -7
|
|
|
|
|
}],
|
|
|
|
|
width: 0,
|
|
|
|
|
height: 14
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
BI.shortcut("bi.single_slider_button", BI.SliderIconButton);/**
|
|
|
|
|
* Created by zcf on 2016/9/22.
|
|
|
|
|
*/
|
|
|
|
|
BI.SingleSlider = BI.inherit(BI.Widget, {
|
|
|
|
|
_constant: {
|
|
|
|
|
EDITOR_WIDTH: 90,
|
|
|
|
|
EDITOR_HEIGHT: 30,
|
|
|
|
|
SLIDER_WIDTH_HALF: 15,
|
|
|
|
|
SLIDER_WIDTH: 30,
|
|
|
|
|
SLIDER_HEIGHT: 30,
|
|
|
|
|
TRACK_HEIGHT: 24
|
|
|
|
|
},
|
|
|
|
|
_defaultConfig: function () {
|
|
|
|
|
return BI.extend(BI.SingleSlider.superclass._defaultConfig.apply(this, arguments), {
|
|
|
|
|
baseCls: "bi-single-slider bi-slider-track",
|
|
|
|
|
digit: false
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
_init: function () {
|
|
|
|
|
BI.SingleSlider.superclass._init.apply(this, arguments);
|
|
|
|
|
|
|
|
|
|
var self = this, o = this.options;
|
|
|
|
|
var c = this._constant;
|
|
|
|
|
this.enable = false;
|
|
|
|
|
this.value = "";
|
|
|
|
|
|
|
|
|
|
this.grayTrack = BI.createWidget({
|
|
|
|
|
type: "bi.layout",
|
|
|
|
|
cls: "gray-track",
|
|
|
|
|
height: 6
|
|
|
|
|
});
|
|
|
|
|
this.blueTrack = BI.createWidget({
|
|
|
|
|
type: "bi.layout",
|
|
|
|
|
cls: "blue-track bi-high-light-background",
|
|
|
|
|
height: 6
|
|
|
|
|
});
|
|
|
|
|
this.track = this._createTrackWrapper();
|
|
|
|
|
|
|
|
|
|
this.slider = BI.createWidget({
|
|
|
|
|
type: "bi.single_slider_button"
|
|
|
|
|
});
|
|
|
|
|
this._draggable(this.slider);
|
|
|
|
|
var sliderVertical = BI.createWidget({
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [this.slider]
|
|
|
|
|
}],
|
|
|
|
|
hgap: c.SLIDER_WIDTH_HALF,
|
|
|
|
|
height: c.SLIDER_HEIGHT
|
|
|
|
|
});
|
|
|
|
|
sliderVertical.element.click(function (e) {
|
|
|
|
|
if (self.enable) {
|
|
|
|
|
var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
|
|
|
|
|
var trackLength = self.track.element[0].scrollWidth;
|
|
|
|
|
var percent = 0;
|
|
|
|
|
if (offset < 0) {
|
|
|
|
|
percent = 0
|
|
|
|
|
}
|
|
|
|
|
if (offset > 0 && offset < (trackLength - c.SLIDER_WIDTH)) {
|
|
|
|
|
percent = offset * 100 / self._getGrayTrackLength();
|
|
|
|
|
}
|
|
|
|
|
if (offset > (trackLength - c.SLIDER_WIDTH)) {
|
|
|
|
|
percent = 100
|
|
|
|
|
}
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
self._setAllPosition(significantPercent);
|
|
|
|
|
var v = self._getValueByPercent(significantPercent);
|
|
|
|
|
v = o.digit === false ? v : v.toFixed(o.digit);
|
|
|
|
|
self.label.setValue(v);
|
|
|
|
|
self.value = v;
|
|
|
|
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.label = BI.createWidget({
|
|
|
|
|
type: "bi.sign_editor",
|
|
|
|
|
cls: "slider-editor-button",
|
|
|
|
|
errorText: "",
|
|
|
|
|
width: c.EDITOR_WIDTH - 2,
|
|
|
|
|
allowBlank: false,
|
|
|
|
|
validationChecker: function (v) {
|
|
|
|
|
return self._checkValidation(v);
|
|
|
|
|
},
|
|
|
|
|
quitChecker: function (v) {
|
|
|
|
|
return self._checkValidation(v);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.label.element.hover(function () {
|
|
|
|
|
self.label.element.removeClass("bi-border").addClass("bi-border");
|
|
|
|
|
}, function () {
|
|
|
|
|
self.label.element.removeClass("bi-border");
|
|
|
|
|
});
|
|
|
|
|
this.label.on(BI.SignEditor.EVENT_CONFIRM, function () {
|
|
|
|
|
var v = BI.parseFloat(this.getValue());
|
|
|
|
|
var percent = self._getPercentByValue(v);
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
self._setAllPosition(significantPercent);
|
|
|
|
|
this.setValue(v);
|
|
|
|
|
self.value = v;
|
|
|
|
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
|
|
|
|
|
});
|
|
|
|
|
this._setVisible(false);
|
|
|
|
|
BI.createWidget({
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
element: this,
|
|
|
|
|
items: [{
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.track,
|
|
|
|
|
width: "100%",
|
|
|
|
|
height: c.TRACK_HEIGHT
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
hgap: 7,
|
|
|
|
|
height: c.TRACK_HEIGHT
|
|
|
|
|
},
|
|
|
|
|
top: 23,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: sliderVertical,
|
|
|
|
|
top: 20,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [this.label]
|
|
|
|
|
}],
|
|
|
|
|
rgap: c.EDITOR_WIDTH,
|
|
|
|
|
height: c.EDITOR_HEIGHT
|
|
|
|
|
},
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_draggable: function (widget) {
|
|
|
|
|
var self = this, o = this.options;
|
|
|
|
|
var startDrag = false;
|
|
|
|
|
var size = 0, offset = 0, defaultSize = 0;
|
|
|
|
|
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
|
|
|
|
|
if (mouseMoveTracker.isDragging()) {
|
|
|
|
|
startDrag = true;
|
|
|
|
|
offset += deltaX;
|
|
|
|
|
size = optimizeSize(defaultSize + offset);
|
|
|
|
|
widget.element.addClass("dragging");
|
|
|
|
|
var percent = size * 100 / (self._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
|
|
|
|
|
self._setBlueTrack(significantPercent);
|
|
|
|
|
self._setLabelPosition(significantPercent);
|
|
|
|
|
self._setSliderPosition(significantPercent);
|
|
|
|
|
var v = self._getValueByPercent(significantPercent);
|
|
|
|
|
v = o.digit === false ? v : v.toFixed(o.digit);
|
|
|
|
|
self.label.setValue(v);
|
|
|
|
|
self.value = v;
|
|
|
|
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
|
|
|
|
|
}
|
|
|
|
|
}, function () {
|
|
|
|
|
if (startDrag === true) {
|
|
|
|
|
size = optimizeSize(size);
|
|
|
|
|
var percent = size * 100 / (self._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
self._setSliderPosition(significantPercent);
|
|
|
|
|
size = 0;
|
|
|
|
|
offset = 0;
|
|
|
|
|
defaultSize = size;
|
|
|
|
|
startDrag = false;
|
|
|
|
|
}
|
|
|
|
|
widget.element.removeClass("dragging");
|
|
|
|
|
mouseMoveTracker.releaseMouseMoves();
|
|
|
|
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
|
|
|
|
|
}, document);
|
|
|
|
|
widget.element.on("mousedown", function (event) {
|
|
|
|
|
if(!widget.isEnabled()){
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
defaultSize = this.offsetLeft;
|
|
|
|
|
optimizeSize(defaultSize);
|
|
|
|
|
mouseMoveTracker.captureMouseMoves(event);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function optimizeSize(s) {
|
|
|
|
|
return BI.clamp(s, 0, o.width);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_createTrackWrapper: function () {
|
|
|
|
|
return BI.createWidget({
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.grayTrack,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: this.blueTrack,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "0%"
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
hgap: 8,
|
|
|
|
|
height: 8
|
|
|
|
|
},
|
|
|
|
|
top: 8,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_checkValidation: function (v) {
|
|
|
|
|
return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setBlueTrack: function (percent) {
|
|
|
|
|
this.blueTrack.element.css({"width": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setLabelPosition: function (percent) {
|
|
|
|
|
this.label.element.css({"left": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setSliderPosition: function (percent) {
|
|
|
|
|
this.slider.element.css({"left": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setAllPosition: function (percent) {
|
|
|
|
|
this._setSliderPosition(percent);
|
|
|
|
|
this._setLabelPosition(percent);
|
|
|
|
|
this._setBlueTrack(percent);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setVisible: function (visible) {
|
|
|
|
|
this.slider.setVisible(visible);
|
|
|
|
|
this.label.setVisible(visible);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getGrayTrackLength: function () {
|
|
|
|
|
return this.grayTrack.element[0].scrollWidth
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getValueByPercent: function (percent) {
|
|
|
|
|
var thousandth = BI.parseInt(percent * 10);
|
|
|
|
|
return (((this.max - this.min) * thousandth) / 1000 + this.min);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getPercentByValue: function (v) {
|
|
|
|
|
return (v - this.min) * 100 / (this.max - this.min);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getValue: function () {
|
|
|
|
|
return this.value;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setValue: function (v) {
|
|
|
|
|
var o = this.options;
|
|
|
|
|
v = BI.parseFloat(v);
|
|
|
|
|
v = o.digit === false ? v : v.toFixed(o.digit);
|
|
|
|
|
if ((!isNaN(v))) {
|
|
|
|
|
if (this._checkValidation(v)) {
|
|
|
|
|
this.value = v;
|
|
|
|
|
}
|
|
|
|
|
if (v > this.max) {
|
|
|
|
|
this.value = this.max;
|
|
|
|
|
}
|
|
|
|
|
if (v < this.min) {
|
|
|
|
|
this.value = this.min;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setMinAndMax: function (v) {
|
|
|
|
|
var minNumber = BI.parseFloat(v.min);
|
|
|
|
|
var maxNumber = BI.parseFloat(v.max);
|
|
|
|
|
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
|
|
|
|
|
this.min = minNumber;
|
|
|
|
|
this.max = maxNumber;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
reset: function () {
|
|
|
|
|
this._setVisible(false);
|
|
|
|
|
this.enable = false;
|
|
|
|
|
this.value = "";
|
|
|
|
|
this.min = 0;
|
|
|
|
|
this.max = 0;
|
|
|
|
|
this._setBlueTrack(0);
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
populate: function () {
|
|
|
|
|
if (!isNaN(this.min) && !isNaN(this.max)) {
|
|
|
|
|
this._setVisible(true);
|
|
|
|
|
this.enable = true;
|
|
|
|
|
this.label.setErrorText(BI.i18nText("BI-Please_Enter") + this.min + "-" + this.max + BI.i18nText("BI-Basic_De") + BI.i18nText("BI-Basic_Number"));
|
|
|
|
|
if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
|
|
|
|
|
this.label.setValue(this.value);
|
|
|
|
|
this._setAllPosition(this._getPercentByValue(this.value));
|
|
|
|
|
} else {
|
|
|
|
|
this.label.setValue(this.max);
|
|
|
|
|
this._setAllPosition(100);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE";
|
|
|
|
|
BI.shortcut("bi.single_slider", BI.SingleSlider);/**
|
|
|
|
|
* Created by Urthur on 2017/9/12.
|
|
|
|
|
*/
|
|
|
|
|
BI.SingleSliderLabel = BI.inherit(BI.Widget, {
|
|
|
|
|
_constant: {
|
|
|
|
|
EDITOR_WIDTH: 90,
|
|
|
|
|
EDITOR_HEIGHT: 20,
|
|
|
|
|
HEIGHT: 20,
|
|
|
|
|
SLIDER_WIDTH_HALF: 15,
|
|
|
|
|
SLIDER_WIDTH: 30,
|
|
|
|
|
SLIDER_HEIGHT: 30,
|
|
|
|
|
TRACK_HEIGHT: 24
|
|
|
|
|
},
|
|
|
|
|
_defaultConfig: function () {
|
|
|
|
|
return BI.extend(BI.SingleSliderLabel.superclass._defaultConfig.apply(this, arguments), {
|
|
|
|
|
baseCls: "bi-single-slider-label bi-slider-track",
|
|
|
|
|
digit: false,
|
|
|
|
|
unit: ""
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
_init: function () {
|
|
|
|
|
BI.SingleSliderLabel.superclass._init.apply(this, arguments);
|
|
|
|
|
|
|
|
|
|
var self = this, o = this.options;
|
|
|
|
|
var c = this._constant;
|
|
|
|
|
this.enable = false;
|
|
|
|
|
this.value = "";
|
|
|
|
|
|
|
|
|
|
this.grayTrack = BI.createWidget({
|
|
|
|
|
type: "bi.layout",
|
|
|
|
|
cls: "gray-track",
|
|
|
|
|
height: 6
|
|
|
|
|
});
|
|
|
|
|
this.blueTrack = BI.createWidget({
|
|
|
|
|
type: "bi.layout",
|
|
|
|
|
cls: "blue-track bi-high-light-background",
|
|
|
|
|
height: 6
|
|
|
|
|
});
|
|
|
|
|
this.track = this._createTrackWrapper();
|
|
|
|
|
|
|
|
|
|
this.slider = BI.createWidget({
|
|
|
|
|
type: "bi.single_slider_button"
|
|
|
|
|
});
|
|
|
|
|
this._draggable(this.slider);
|
|
|
|
|
var sliderVertical = BI.createWidget({
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [this.slider]
|
|
|
|
|
}],
|
|
|
|
|
hgap: c.SLIDER_WIDTH_HALF,
|
|
|
|
|
height: c.SLIDER_HEIGHT
|
|
|
|
|
});
|
|
|
|
|
sliderVertical.element.click(function (e) {
|
|
|
|
|
if (self.enable) {
|
|
|
|
|
var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
|
|
|
|
|
var trackLength = self.track.element[0].scrollWidth;
|
|
|
|
|
var percent = 0;
|
|
|
|
|
if (offset < 0) {
|
|
|
|
|
percent = 0
|
|
|
|
|
}
|
|
|
|
|
if (offset > 0 && offset < (trackLength - c.SLIDER_WIDTH)) {
|
|
|
|
|
percent = offset * 100 / self._getGrayTrackLength();
|
|
|
|
|
}
|
|
|
|
|
if (offset > (trackLength - c.SLIDER_WIDTH)) {
|
|
|
|
|
percent = 100
|
|
|
|
|
}
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
self._setAllPosition(significantPercent);
|
|
|
|
|
var v = self._getValueByPercent(significantPercent);
|
|
|
|
|
v = o.digit === false ? v : v.toFixed(o.digit);
|
|
|
|
|
self.label.setText(v + o.unit);
|
|
|
|
|
self.value = v;
|
|
|
|
|
self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.label = BI.createWidget({
|
|
|
|
|
type: "bi.label",
|
|
|
|
|
height: c.HEIGHT,
|
|
|
|
|
width: c.EDITOR_WIDTH - 2
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this._setVisible(false);
|
|
|
|
|
BI.createWidget({
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
element: this,
|
|
|
|
|
items: [{
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.track,
|
|
|
|
|
width: "100%",
|
|
|
|
|
height: c.TRACK_HEIGHT
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
hgap: 7,
|
|
|
|
|
height: c.TRACK_HEIGHT
|
|
|
|
|
},
|
|
|
|
|
top: 13,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: sliderVertical,
|
|
|
|
|
top: 10,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [this.label]
|
|
|
|
|
}],
|
|
|
|
|
rgap: c.EDITOR_WIDTH,
|
|
|
|
|
height: c.EDITOR_HEIGHT
|
|
|
|
|
},
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_draggable: function (widget) {
|
|
|
|
|
var self = this, o = this.options;
|
|
|
|
|
var startDrag = false;
|
|
|
|
|
var size = 0, offset = 0, defaultSize = 0;
|
|
|
|
|
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
|
|
|
|
|
if (mouseMoveTracker.isDragging()) {
|
|
|
|
|
startDrag = true;
|
|
|
|
|
offset += deltaX;
|
|
|
|
|
size = optimizeSize(defaultSize + offset);
|
|
|
|
|
widget.element.addClass("dragging");
|
|
|
|
|
var percent = size * 100 / (self._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
|
|
|
|
|
self._setBlueTrack(significantPercent);
|
|
|
|
|
self._setLabelPosition(significantPercent);
|
|
|
|
|
self._setSliderPosition(significantPercent);
|
|
|
|
|
var v = self._getValueByPercent(significantPercent);
|
|
|
|
|
v = o.digit === false ? v : v.toFixed(o.digit);
|
|
|
|
|
self.label.setValue(v);
|
|
|
|
|
self.value = v;
|
|
|
|
|
self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
|
|
|
|
|
}
|
|
|
|
|
}, function () {
|
|
|
|
|
if (startDrag === true) {
|
|
|
|
|
size = optimizeSize(size);
|
|
|
|
|
var percent = size * 100 / (self._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
self._setSliderPosition(significantPercent);
|
|
|
|
|
size = 0;
|
|
|
|
|
offset = 0;
|
|
|
|
|
defaultSize = size;
|
|
|
|
|
startDrag = false;
|
|
|
|
|
}
|
|
|
|
|
widget.element.removeClass("dragging");
|
|
|
|
|
mouseMoveTracker.releaseMouseMoves();
|
|
|
|
|
self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
|
|
|
|
|
}, document);
|
|
|
|
|
widget.element.on("mousedown", function (event) {
|
|
|
|
|
if(!widget.isEnabled()){
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
defaultSize = this.offsetLeft;
|
|
|
|
|
optimizeSize(defaultSize);
|
|
|
|
|
mouseMoveTracker.captureMouseMoves(event);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function optimizeSize(s) {
|
|
|
|
|
return BI.clamp(s, 0, o.width);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_createTrackWrapper: function () {
|
|
|
|
|
return BI.createWidget({
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.grayTrack,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: this.blueTrack,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "0%"
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
hgap: 8,
|
|
|
|
|
height: 8
|
|
|
|
|
},
|
|
|
|
|
top: 8,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_checkValidation: function (v) {
|
|
|
|
|
return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setBlueTrack: function (percent) {
|
|
|
|
|
this.blueTrack.element.css({"width": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setLabelPosition: function (percent) {
|
|
|
|
|
this.label.element.css({"left": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setSliderPosition: function (percent) {
|
|
|
|
|
this.slider.element.css({"left": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setAllPosition: function (percent) {
|
|
|
|
|
this._setSliderPosition(percent);
|
|
|
|
|
this._setLabelPosition(percent);
|
|
|
|
|
this._setBlueTrack(percent);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setVisible: function (visible) {
|
|
|
|
|
this.slider.setVisible(visible);
|
|
|
|
|
this.label.setVisible(visible);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getGrayTrackLength: function () {
|
|
|
|
|
return this.grayTrack.element[0].scrollWidth
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getValueByPercent: function (percent) {
|
|
|
|
|
var thousandth = BI.parseInt(percent * 10);
|
|
|
|
|
return (((this.max - this.min) * thousandth) / 1000 + this.min);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getPercentByValue: function (v) {
|
|
|
|
|
return (v - this.min) * 100 / (this.max - this.min);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getValue: function () {
|
|
|
|
|
return this.value;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setValue: function (v) {
|
|
|
|
|
var o = this.options;
|
|
|
|
|
v = BI.parseFloat(v);
|
|
|
|
|
v = o.digit === false ? v : v.toFixed(o.digit);
|
|
|
|
|
if ((!isNaN(v))) {
|
|
|
|
|
if (this._checkValidation(v)) {
|
|
|
|
|
this.value = v;
|
|
|
|
|
}
|
|
|
|
|
if (v > this.max) {
|
|
|
|
|
this.value = this.max;
|
|
|
|
|
}
|
|
|
|
|
if (v < this.min) {
|
|
|
|
|
this.value = this.min;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setMinAndMax: function (v) {
|
|
|
|
|
var minNumber = BI.parseFloat(v.min);
|
|
|
|
|
var maxNumber = BI.parseFloat(v.max);
|
|
|
|
|
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
|
|
|
|
|
this.min = minNumber;
|
|
|
|
|
this.max = maxNumber;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
reset: function () {
|
|
|
|
|
this._setVisible(false);
|
|
|
|
|
this.enable = false;
|
|
|
|
|
this.value = "";
|
|
|
|
|
this.min = 0;
|
|
|
|
|
this.max = 0;
|
|
|
|
|
this._setBlueTrack(0);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
populate: function () {
|
|
|
|
|
var o = this.options;
|
|
|
|
|
if (!isNaN(this.min) && !isNaN(this.max)) {
|
|
|
|
|
this._setVisible(true);
|
|
|
|
|
this.enable = true;
|
|
|
|
|
if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
|
|
|
|
|
this.label.setValue(this.value + o.unit);
|
|
|
|
|
this._setAllPosition(this._getPercentByValue(this.value));
|
|
|
|
|
} else {
|
|
|
|
|
this.label.setValue(this.max + o.unit);
|
|
|
|
|
this._setAllPosition(100);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
BI.SingleSliderLabel.EVENT_CHANGE = "EVENT_CHANGE";
|
|
|
|
|
BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel);/**
|
|
|
|
|
* normal single slider
|
|
|
|
|
* Created by Young on 2017/6/21.
|
|
|
|
|
*/
|
|
|
|
|
BI.SingleSliderNormal = BI.inherit(BI.Widget, {
|
|
|
|
|
|
|
|
|
|
_constant: {
|
|
|
|
|
HEIGHT: 28,
|
|
|
|
|
SLIDER_WIDTH_HALF: 15,
|
|
|
|
|
SLIDER_WIDTH: 30,
|
|
|
|
|
SLIDER_HEIGHT: 30,
|
|
|
|
|
TRACK_HEIGHT: 24
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
props: {
|
|
|
|
|
baseCls: "bi-single-slider-normal bi-slider-track",
|
|
|
|
|
minMax: {
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 100
|
|
|
|
|
},
|
|
|
|
|
// color: "#3f8ce8"
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
render: function () {
|
|
|
|
|
var self = this;
|
|
|
|
|
var c = this._constant;
|
|
|
|
|
var track = this._createTrack();
|
|
|
|
|
this.slider = BI.createWidget({
|
|
|
|
|
type: "bi.single_slider_button"
|
|
|
|
|
});
|
|
|
|
|
this._draggable(this.slider);
|
|
|
|
|
|
|
|
|
|
var sliderVertical = BI.createWidget({
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [this.slider]
|
|
|
|
|
}],
|
|
|
|
|
hgap: c.SLIDER_WIDTH_HALF,
|
|
|
|
|
height: c.SLIDER_HEIGHT
|
|
|
|
|
});
|
|
|
|
|
sliderVertical.element.click(function (e) {
|
|
|
|
|
if (self.enable) {
|
|
|
|
|
var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
|
|
|
|
|
var trackLength = self.track.element[0].scrollWidth;
|
|
|
|
|
var percent = 0;
|
|
|
|
|
if (offset < 0) {
|
|
|
|
|
percent = 0
|
|
|
|
|
}
|
|
|
|
|
if (offset > 0 && offset < (trackLength - c.SLIDER_WIDTH)) {
|
|
|
|
|
percent = offset * 100 / self._getGrayTrackLength();
|
|
|
|
|
}
|
|
|
|
|
if (offset > (trackLength - c.SLIDER_WIDTH)) {
|
|
|
|
|
percent = 100
|
|
|
|
|
}
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
self._setAllPosition(significantPercent);
|
|
|
|
|
var v = self._getValueByPercent(significantPercent);
|
|
|
|
|
self.value = v;
|
|
|
|
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
element: this,
|
|
|
|
|
items: [{
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: track,
|
|
|
|
|
width: "100%",
|
|
|
|
|
height: c.TRACK_HEIGHT
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
hgap: 7,
|
|
|
|
|
height: c.TRACK_HEIGHT
|
|
|
|
|
},
|
|
|
|
|
top: 3,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: sliderVertical,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_draggable: function (widget) {
|
|
|
|
|
var self = this, o = this.options;
|
|
|
|
|
var startDrag = false;
|
|
|
|
|
var size = 0, offset = 0, defaultSize = 0;
|
|
|
|
|
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
|
|
|
|
|
if (mouseMoveTracker.isDragging()) {
|
|
|
|
|
startDrag = true;
|
|
|
|
|
offset += deltaX;
|
|
|
|
|
size = optimizeSize(defaultSize + offset);
|
|
|
|
|
widget.element.addClass("dragging");
|
|
|
|
|
var percent = size * 100 / (self._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
|
|
|
|
|
self._setBlueTrack(significantPercent);
|
|
|
|
|
self._setSliderPosition(significantPercent);
|
|
|
|
|
var v = self._getValueByPercent(significantPercent);
|
|
|
|
|
v = o.digit === false ? v : v.toFixed(o.digit);
|
|
|
|
|
self.value = v;
|
|
|
|
|
self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
|
|
|
|
|
}
|
|
|
|
|
}, function () {
|
|
|
|
|
if (startDrag === true) {
|
|
|
|
|
size = optimizeSize(size);
|
|
|
|
|
var percent = size * 100 / (self._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
self._setSliderPosition(significantPercent);
|
|
|
|
|
size = 0;
|
|
|
|
|
offset = 0;
|
|
|
|
|
defaultSize = size;
|
|
|
|
|
startDrag = false;
|
|
|
|
|
}
|
|
|
|
|
widget.element.removeClass("dragging");
|
|
|
|
|
mouseMoveTracker.releaseMouseMoves();
|
|
|
|
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
|
|
|
|
|
}, document);
|
|
|
|
|
widget.element.on("mousedown", function (event) {
|
|
|
|
|
if(!widget.isEnabled()){
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
defaultSize = this.offsetLeft;
|
|
|
|
|
optimizeSize(defaultSize);
|
|
|
|
|
mouseMoveTracker.captureMouseMoves(event);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function optimizeSize(s) {
|
|
|
|
|
return BI.clamp(s, 0, o.width);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_createTrack: function () {
|
|
|
|
|
var self = this;
|
|
|
|
|
var c = this._constant;
|
|
|
|
|
this.grayTrack = BI.createWidget({
|
|
|
|
|
type: "bi.layout",
|
|
|
|
|
cls: "gray-track",
|
|
|
|
|
height: 6
|
|
|
|
|
});
|
|
|
|
|
this.blueTrack = BI.createWidget({
|
|
|
|
|
type: "bi.layout",
|
|
|
|
|
cls: "blue-track bi-high-light-background",
|
|
|
|
|
height: 6
|
|
|
|
|
});
|
|
|
|
|
if (this.options.color) {
|
|
|
|
|
this.blueTrack.element.css({"background-color": this.options.color});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [{
|
|
|
|
|
el: this.grayTrack,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: this.blueTrack,
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "0%"
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
hgap: 8,
|
|
|
|
|
height: 8
|
|
|
|
|
},
|
|
|
|
|
top: 8,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}],
|
|
|
|
|
ref: function (ref) {
|
|
|
|
|
self.track = ref;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_checkValidation: function (v) {
|
|
|
|
|
return !(BI.isNull(v) || v < this.min || v > this.max)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setBlueTrack: function (percent) {
|
|
|
|
|
this.blueTrack.element.css({"width": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setSliderPosition: function (percent) {
|
|
|
|
|
this.slider.element.css({"left": percent + "%"});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setAllPosition: function (percent) {
|
|
|
|
|
this._setSliderPosition(percent);
|
|
|
|
|
this._setBlueTrack(percent);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_setVisible: function (visible) {
|
|
|
|
|
this.slider.setVisible(visible);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getGrayTrackLength: function () {
|
|
|
|
|
return this.grayTrack.element[0].scrollWidth
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getValueByPercent: function (percent) {
|
|
|
|
|
var thousandth = BI.parseInt(percent * 10);
|
|
|
|
|
return (((this.max - this.min) * thousandth) / 1000 + this.min);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_getPercentByValue: function (v) {
|
|
|
|
|
return (v - this.min) * 100 / (this.max - this.min);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getValue: function () {
|
|
|
|
|
return this.value;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setValue: function (v) {
|
|
|
|
|
var value = BI.parseFloat(v);
|
|
|
|
|
if ((!isNaN(value))) {
|
|
|
|
|
if (this._checkValidation(value)) {
|
|
|
|
|
this.value = value;
|
|
|
|
|
}
|
|
|
|
|
if (value > this.max) {
|
|
|
|
|
this.value = this.max;
|
|
|
|
|
}
|
|
|
|
|
if (value < this.min) {
|
|
|
|
|
this.value = this.min;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setMinAndMax: function (v) {
|
|
|
|
|
var minNumber = BI.parseFloat(v.min);
|
|
|
|
|
var maxNumber = BI.parseFloat(v.max);
|
|
|
|
|
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
|
|
|
|
|
this.min = minNumber;
|
|
|
|
|
this.max = maxNumber;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
reset: function () {
|
|
|
|
|
this._setVisible(false);
|
|
|
|
|
this.enable = false;
|
|
|
|
|
this.value = "";
|
|
|
|
|
this.min = 0;
|
|
|
|
|
this.max = 0;
|
|
|
|
|
this._setBlueTrack(0);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
populate: function () {
|
|
|
|
|
if (!isNaN(this.min) && !isNaN(this.max)) {
|
|
|
|
|
this._setVisible(true);
|
|
|
|
|
this.enable = true;
|
|
|
|
|
if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
|
|
|
|
|
this._setAllPosition(this._getPercentByValue(this.value));
|
|
|
|
|
} else {
|
|
|
|
|
this._setAllPosition(100);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
BI.SingleSliderNormal.EVENT_DRAG = "EVENT_DRAG";
|
|
|
|
|
BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);
|
