You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
311 lines
10 KiB
311 lines
10 KiB
/** |
|
* Created by Urthur on 2017/9/12. |
|
*/ |
|
BI.SingleSliderLabel = BI.inherit(BI.Single, { |
|
_constant: { |
|
EDITOR_WIDTH: 90, |
|
EDITOR_HEIGHT: 20, |
|
HEIGHT: 20, |
|
SLIDER_WIDTH_HALF: 15, |
|
SLIDER_WIDTH: 30, |
|
SLIDER_HEIGHT: 30, |
|
TRACK_HEIGHT: 24, |
|
TRACK_GAP_HALF: 7, |
|
TRACK_GAP: 14 |
|
}, |
|
_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 && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) { |
|
var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF; |
|
var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP; |
|
var percent = 0; |
|
if (offset < 0) { |
|
percent = 0; |
|
} |
|
if (offset > 0 && offset < trackLength) { |
|
percent = offset * 100 / self._getGrayTrackLength(); |
|
} |
|
if (offset >= trackLength) { |
|
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: c.TRACK_GAP_HALF, |
|
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.horizontal_auto", |
|
items: [this.label] |
|
}], |
|
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 + o.unit); |
|
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); |
|
}, window); |
|
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, self._getGrayTrackLength()); |
|
} |
|
}, |
|
|
|
_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); |
|
}, |
|
|
|
_setEnable: function (b) { |
|
BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]); |
|
if(b) { |
|
this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); |
|
} else { |
|
this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track"); |
|
} |
|
}, |
|
|
|
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); |