diff --git a/bi/slider.js b/bi/slider.js index 4bcc063db..c2b2f9e5a 100644 --- a/bi/slider.js +++ b/bi/slider.js @@ -321,6 +321,279 @@ BI.SingleSlider = BI.inherit(BI.Widget, { }); 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. */ diff --git a/demo/js/widget/slider/demo.slider.js b/demo/js/widget/slider/demo.slider.js index fce9ad3b2..d049db3fa 100644 --- a/demo/js/widget/slider/demo.slider.js +++ b/demo/js/widget/slider/demo.slider.js @@ -30,19 +30,30 @@ Demo.Slider = BI.inherit(BI.Widget, { console.log(this.getValue()); }); + var singleSliderLabel = BI.createWidget({ + type: "bi.single_slider_label", + height: 30, + width: 300, + digit: 0, + unit: "个" + }); + singleSliderLabel.setMinAndMax({ + min: 0, + max: 100 + }); + singleSliderLabel.setValue(10); + singleSliderLabel.populate(); + var normalSingleSlider = BI.createWidget({ type: "bi.single_slider_normal", height: 30, width: 300 }); - normalSingleSlider.setMinAndMax({ min: 0, max: 100 }); - normalSingleSlider.setValue(10); - normalSingleSlider.populate(); BI.createWidget({ @@ -64,6 +75,14 @@ Demo.Slider = BI.inherit(BI.Widget, { }] }, height: 200 + }, { + el: { + type: "bi.center_adapt", + items: [{ + el: singleSliderLabel + }] + }, + height: 200 }], hgap: 20 }); diff --git a/dist/slider.js b/dist/slider.js index 4bcc063db..c2b2f9e5a 100644 --- a/dist/slider.js +++ b/dist/slider.js @@ -321,6 +321,279 @@ BI.SingleSlider = BI.inherit(BI.Widget, { }); 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. */ diff --git a/src/addons/slider/singleslider/singleslider.label.js b/src/addons/slider/singleslider/singleslider.label.js new file mode 100644 index 000000000..472cb1a66 --- /dev/null +++ b/src/addons/slider/singleslider/singleslider.label.js @@ -0,0 +1,274 @@ +/** + * 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); \ No newline at end of file