diff --git a/Gruntfile.js b/Gruntfile.js index e45eaaaec..ec9a69b2c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -226,7 +226,7 @@ module.exports = function (grunt) { }, bi_sliderJs: { src: [ - 'src/addons/slider/slider/**/*.js' + 'src/addons/slider/singleslider/**/*.js' ], dest: 'bi/slider.js' }, diff --git a/bi/slider.js b/bi/slider.js index e69de29bb..04ba397d9 100644 --- a/bi/slider.js +++ b/bi/slider.js @@ -0,0 +1,556 @@ +/** + * 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: "widget-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" + }); + }, + _init: function () { + BI.SingleSlider.superclass._init.apply(this, arguments); + + var self = this; + 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); + self.label.setValue(v); + self.value = 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.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()); + self.value = v; + var percent = self._getPercentByValue(v); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setAllPosition(significantPercent); + 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 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; + 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);/** + * 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); \ No newline at end of file