|
|
|
|
/**
|
|
|
|
|
* 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,
|
|
|
|
|
HEIGHT: 28,
|
|
|
|
|
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: ""
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
_init: function () {
|
|
|
|
|
BI.SingleSlider.superclass._init.apply(this, arguments);
|
|
|
|
|
|
|
|
|
|
var self = this, o = this.options;
|
|
|
|
|
var digitExist = (o.digit === "") ? false : true;
|
|
|
|
|
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.slider.element.draggable({
|
|
|
|
|
axis: "x",
|
|
|
|
|
containment: this.grayTrack.element,
|
|
|
|
|
scroll: false,
|
|
|
|
|
drag: function (e, ui) {
|
|
|
|
|
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
|
|
|
|
|
self._setBlueTrack(significantPercent);
|
|
|
|
|
self._setLabelPosition(significantPercent);
|
|
|
|
|
var v = self._getValueByPercent(significantPercent);
|
|
|
|
|
v = digitExist ? v.toFixed(o.digit) : v;
|
|
|
|
|
self.label.setValue(v);
|
|
|
|
|
self.value = v;
|
|
|
|
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
|
|
|
|
|
},
|
|
|
|
|
stop: function (e, ui) {
|
|
|
|
|
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
self._setSliderPosition(significantPercent);
|
|
|
|
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
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 = digitExist ? v.toFixed(o.digit) : v;
|
|
|
|
|
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 bi-border",
|
|
|
|
|
errorText: "",
|
|
|
|
|
height: c.HEIGHT,
|
|
|
|
|
width: c.EDITOR_WIDTH - 2,
|
|
|
|
|
allowBlank: false,
|
|
|
|
|
validationChecker: function (v) {
|
|
|
|
|
return self._checkValidation(v);
|
|
|
|
|
},
|
|
|
|
|
quitChecker: function (v) {
|
|
|
|
|
return self._checkValidation(v);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
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);
|
|
|
|
|
v = digitExist ? v.toFixed(o.digit) : v;
|
|
|
|
|
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: 33,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: sliderVertical,
|
|
|
|
|
top: 30,
|
|
|
|
|
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%"
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_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;
|
|
|
|
|
var digitExist = (o.digit === "") ? false : true;
|
|
|
|
|
var value = BI.parseFloat(v);
|
|
|
|
|
value = digitExist ? value.toFixed(o.digit) : value;
|
|
|
|
|
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;
|
|
|
|
|
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: 30,
|
|
|
|
|
HEIGHT: 28,
|
|
|
|
|
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 bi-slider-track",
|
|
|
|
|
digit: "",
|
|
|
|
|
unit: ""
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
_init: function () {
|
|
|
|
|
BI.SingleSliderLabel.superclass._init.apply(this, arguments);
|
|
|
|
|
|
|
|
|
|
var self = this, o = this.options;
|
|
|
|
|
var digitExist = (o.digit === "") ? false : true;
|
|
|
|
|
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.slider.element.draggable({
|
|
|
|
|
axis: "x",
|
|
|
|
|
containment: this.grayTrack.element,
|
|
|
|
|
scroll: false,
|
|
|
|
|
drag: function (e, ui) {
|
|
|
|
|
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
|
|
|
|
|
self._setBlueTrack(significantPercent);
|
|
|
|
|
self._setLabelPosition(significantPercent);
|
|
|
|
|
var v = self._getValueByPercent(significantPercent);
|
|
|
|
|
v = digitExist ? v.toFixed(o.digit) : v;
|
|
|
|
|
self.label.setText(v + o.unit);
|
|
|
|
|
self.value = v;
|
|
|
|
|
self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
|
|
|
|
|
},
|
|
|
|
|
stop: function (e, ui) {
|
|
|
|
|
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
self._setSliderPosition(significantPercent);
|
|
|
|
|
self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
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 = digitExist ? v.toFixed(o.digit) : v;
|
|
|
|
|
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: 33,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: sliderVertical,
|
|
|
|
|
top: 30,
|
|
|
|
|
left: 0,
|
|
|
|
|
width: "100%"
|
|
|
|
|
}, {
|
|
|
|
|
el: {
|
|
|
|
|
type: "bi.vertical",
|
|
|
|
|
items: [{
|
|
|
|
|
type: "bi.absolute",
|
|
|
|
|
items: [this.label]
|
|
|
|
|
}],
|
|
|
|
|
rgap: c.EDITOR_WIDTH,
|
|
|
|
|
height: c.EDITOR_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)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_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;
|
|
|
|
|
var digitExist = (o.digit === "") ? false : true;
|
|
|
|
|
var value = BI.parseFloat(v);
|
|
|
|
|
value = digitExist ? value.toFixed(o.digit) : value;
|
|
|
|
|
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 () {
|
|
|
|
|
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: {
|
|
|
|
|
EDITOR_WIDTH: 90,
|
|
|
|
|
EDITOR_HEIGHT: 30,
|
|
|
|
|
HEIGHT: 28,
|
|
|
|
|
SLIDER_WIDTH_HALF: 15,
|
|
|
|
|
SLIDER_WIDTH: 30,
|
|
|
|
|
SLIDER_HEIGHT: 30,
|
|
|
|
|
TRACK_HEIGHT: 24
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
props: {
|
|
|
|
|
baseCls: "bi-single-button bi-button-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.slider.element.draggable({
|
|
|
|
|
axis: "x",
|
|
|
|
|
containment: this.grayTrack.element,
|
|
|
|
|
scroll: false,
|
|
|
|
|
drag: function (e, ui) {
|
|
|
|
|
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
|
|
|
|
|
self._setBlueTrack(significantPercent);
|
|
|
|
|
var v = self._getValueByPercent(significantPercent);
|
|
|
|
|
self.value = v;
|
|
|
|
|
self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
|
|
|
|
|
},
|
|
|
|
|
stop: function (e, ui) {
|
|
|
|
|
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
|
|
|
|
|
var significantPercent = BI.parseFloat(percent.toFixed(1));
|
|
|
|
|
self._setSliderPosition(significantPercent);
|
|
|
|
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
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%"
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_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",
|
|
|
|
|
height: 6
|
|
|
|
|
});
|
|
|
|
|
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);
|
