diff --git a/Gruntfile.js b/Gruntfile.js index fb64bb0154..b48c5834d6 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -83,7 +83,7 @@ module.exports = function (grunt) { }, sliderJs: { src: [ - 'src/addons/sliders/singleslider/**/*.js' + 'src/addons/sliders/js/**/*.js' ], dest: 'dist/sliders.js' }, @@ -236,7 +236,7 @@ module.exports = function (grunt) { }, bi_sliderJs: { src: [ - 'src/addons/sliders/singleslider/**/*.js' + 'src/addons/sliders/js/**/*.js' ], dest: 'bi/sliders.js' }, @@ -275,7 +275,14 @@ module.exports = function (grunt) { }, less: { - main: { + sliders: { + expand: true, + cwd: 'src/addons/sliders/less', + src: ['**/*.less'], + dest: 'src/addons/sliders/css/', + ext: '.css' + }, + demo: { expand: true, cwd: 'demo/less', src: ['**/*.less'], diff --git a/bi/case.js b/bi/case.js index 4aec4380f5..43f6ea19cb 100644 --- a/bi/case.js +++ b/bi/case.js @@ -12276,10 +12276,10 @@ BI.DisplayTree = BI.inherit(BI.TreeView, { nodes = BI.DisplayTree.superclass._dealWidthNodes.apply(this, arguments); var self = this, o = this.options; BI.each(nodes, function (i, node) { - if (node.count > 0) { - node.text = node.value + "(" + BI.i18nText("BI-Basic_Altogether") + node.count + BI.i18nText("BI-Basic_Count") + ")"; - } else { - node.text = node.value; + if (node.text == null) { + if (node.count > 0) { + node.text = node.value + "(" + BI.i18nText("BI-Basic_Altogether") + node.count + BI.i18nText("BI-Basic_Count") + ")"; + } } }); return nodes; diff --git a/bi/sliders.css b/bi/sliders.css index 8766c102db..03f096bafb 100644 --- a/bi/sliders.css +++ b/bi/sliders.css @@ -1,3 +1,29 @@ +.bi-interval-slider-label { + min-height: 50px; +} + +.bi-interval-slider { + min-height: 70px; +} +.bi-single-slider-label { + min-height: 50px; +} + +.bi-single-slider-normal { + min-height: 30px; +} +.bi-single-slider { + min-height: 50px; +} +.bi-single-slider-button .slider-button { + cursor: ew-resize; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; +} .bi-single-slider-button .slider-button { cursor: ew-resize; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); @@ -19,3 +45,15 @@ -moz-border-radius: 3px; border-radius: 3px; } +.bi-slider-track .gray-track { + background-color: rgba(153, 153, 153, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.bi-slider-track .blue-track { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} diff --git a/bi/sliders.js b/bi/sliders.js index 9ad98714bd..460e5c3e88 100644 --- a/bi/sliders.js +++ b/bi/sliders.js @@ -1,4 +1,1144 @@ /** + * Created by zcf on 2016/9/26. + */ +BI.IntervalSlider = BI.inherit(BI.Widget, { + _constant: { + EDITOR_WIDTH: 58, + EDITOR_R_GAP: 60, + EDITOR_HEIGHT: 30, + HEIGHT: 28, + 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, + height: c.HEIGHT, + 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, + height: c.HEIGHT, + 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.sliderOne.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)); + self._setLabelOnePosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + v = self._assertValue(v); + self.labelOne.setValue(v); + self.valueOne = v; + self._setBlueTrack(); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderOnePosition(significantPercent); + self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); + } + }); + + this.sliderTwo = BI.createWidget({ + type: "bi.single_slider_button" + }); + this.sliderTwo.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)); + self._setLabelTwoPosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + v = self._assertValue(v); + self.labelTwo.setValue(v); + self.valueTwo = v; + self._setBlueTrack(); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderTwoPosition(significantPercent); + self.fireEvent(BI.IntervalSlider.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%" + }, + this._createLabelWrapper(), + this._createSliderWrapper() + ] + }) + }, + + _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) { + if (enable) { + this.sliderOne.element.draggable("enable"); + this.sliderTwo.element.draggable("enable") + } else { + this.sliderOne.element.draggable("disable"); + this.sliderTwo.element.draggable("disable") + } + }, + + _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.sliderOne.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)); + self._setLabelOnePosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + v = self._assertValue(v); + v = o.digit === false ? v : v.toFixed(o.digit); + self.labelOne.setText(v + o.unit); + self.valueOne = v; + self._setBlueTrack(); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderOnePosition(significantPercent); + self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE); + } + }); + + this.sliderTwo = BI.createWidget({ + type: "bi.single_slider_button" + }); + this.sliderTwo.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)); + self._setLabelTwoPosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + v = self._assertValue(v); + v = o.digit === false ? v : v.toFixed(o.digit); + self.labelTwo.setText(v + o.unit); + self.valueTwo = v; + self._setBlueTrack(); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderTwoPosition(significantPercent); + self.fireEvent(BI.IntervalSliderLabel.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: 13, + left: 0, + width: "100%" + }, + this._createLabelWrapper(), + this._createSliderWrapper() + ] + }) + }, + + _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: 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) { + if (enable) { + this.sliderOne.element.draggable("enable"); + this.sliderTwo.element.draggable("enable") + } else { + this.sliderOne.element.draggable("disable"); + this.sliderTwo.element.draggable("disable") + } + }, + + _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); + 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 () { + 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._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.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, { @@ -46,14 +1186,13 @@ BI.SingleSlider = BI.inherit(BI.Widget, { _defaultConfig: function () { return BI.extend(BI.SingleSlider.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-single-slider bi-slider-track", - digit: "" + digit: false }); }, _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 = ""; @@ -83,7 +1222,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { self._setBlueTrack(significantPercent); self._setLabelPosition(significantPercent); var v = self._getValueByPercent(significantPercent); - v = digitExist ? v.toFixed(o.digit) : v; + v = o.digit === false ? v : v.toFixed(o.digit); self.label.setValue(v); self.value = v; self.fireEvent(BI.SingleSlider.EVENT_CHANGE); @@ -121,7 +1260,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { var significantPercent = BI.parseFloat(percent.toFixed(1)); self._setAllPosition(significantPercent); var v = self._getValueByPercent(significantPercent); - v = digitExist ? v.toFixed(o.digit) : v; + v = o.digit === false ? v : v.toFixed(o.digit); self.label.setValue(v); self.value = v; self.fireEvent(BI.SingleSlider.EVENT_CHANGE); @@ -129,7 +1268,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { }); this.label = BI.createWidget({ type: "bi.sign_editor", - cls: "slider-editor-button bi-border", + cls: "slider-editor-button", errorText: "", height: c.HEIGHT, width: c.EDITOR_WIDTH - 2, @@ -141,12 +1280,16 @@ BI.SingleSlider = BI.inherit(BI.Widget, { 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); - v = digitExist ? v.toFixed(o.digit) : v; this.setValue(v); self.value = v; self.fireEvent(BI.SingleSlider.EVENT_CHANGE); @@ -169,12 +1312,12 @@ BI.SingleSlider = BI.inherit(BI.Widget, { hgap: 7, height: c.TRACK_HEIGHT }, - top: 33, + top: 23, left: 0, width: "100%" }, { el: sliderVertical, - top: 30, + top: 20, left: 0, width: "100%" }, { @@ -270,17 +1413,16 @@ BI.SingleSlider = BI.inherit(BI.Widget, { 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; + v = BI.parseFloat(v); + v = o.digit === false ? v : v.toFixed(o.digit); + if ((!isNaN(v))) { + if (this._checkValidation(v)) { + this.value = v; } - if (value > this.max) { + if (v > this.max) { this.value = this.max; } - if (value < this.min) { + if (v < this.min) { this.value = this.min; } } @@ -326,8 +1468,8 @@ BI.shortcut("bi.single_slider", BI.SingleSlider);/** BI.SingleSliderLabel = BI.inherit(BI.Widget, { _constant: { EDITOR_WIDTH: 90, - EDITOR_HEIGHT: 30, - HEIGHT: 28, + EDITOR_HEIGHT: 20, + HEIGHT: 20, SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH: 30, SLIDER_HEIGHT: 30, @@ -335,7 +1477,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, { }, _defaultConfig: function () { return BI.extend(BI.SingleSliderLabel.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-single-slider bi-slider-track", + baseCls: "bi-single-slider-label bi-slider-track", digit: "", unit: "" }); @@ -442,12 +1584,12 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, { hgap: 7, height: c.TRACK_HEIGHT }, - top: 33, + top: 13, left: 0, width: "100%" }, { el: sliderVertical, - top: 30, + top: 10, left: 0, width: "100%" }, { @@ -460,7 +1602,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, { rgap: c.EDITOR_WIDTH, height: c.EDITOR_HEIGHT }, - top: 10, + top: 0, left: 0, width: "100%" }] @@ -600,8 +1742,6 @@ BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel);/** BI.SingleSliderNormal = BI.inherit(BI.Widget, { _constant: { - EDITOR_WIDTH: 90, - EDITOR_HEIGHT: 30, HEIGHT: 28, SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH: 30, @@ -610,12 +1750,12 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, { }, props: { - baseCls: "bi-single-button bi-button-track", + baseCls: "bi-single-slider-normal bi-slider-track", minMax: { min: 0, max: 100 }, - color: "#3f8ce8" + // color: "#3f8ce8" }, render: function () { @@ -718,7 +1858,9 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, { cls: "blue-track", height: 6 }); - this.blueTrack.element.css({"background-color": this.options.color}); + if (this.options.color) { + this.blueTrack.element.css({"background-color": this.options.color}); + } return { type: "bi.absolute", diff --git a/demo/js/config/addons.js b/demo/js/config/addons.js index b02a590474..90168da0fe 100644 --- a/demo/js/config/addons.js +++ b/demo/js/config/addons.js @@ -12,10 +12,8 @@ Demo.ADDONS_CONFIG = [{ }, { pId: 6, id: 602, - text: "sliders" -}, { - pId: 602, - text: "bi.single_slider" + text: "滚动sliders", + value: "demo.slider" }, { id: 100000, text: "小demo", diff --git a/demo/js/config/widget.js b/demo/js/config/widget.js index 11adecc486..8aaa5458ad 100644 --- a/demo/js/config/widget.js +++ b/demo/js/config/widget.js @@ -252,14 +252,6 @@ Demo.WIDGET_CONFIG = [{ pId: 419, text: "bi.file_manager", value: "demo.file_manager" -}, { - pId: 4, - id: 421, - text: "滚动调节" -}, { - pId: 421, - text: "bi.slider", - value: "demo.slider" }, { pId: 4, text: '时间间隔', diff --git a/demo/js/widget/slider/demo.slider.js b/demo/js/widget/slider/demo.slider.js index d049db3fa0..7cb0bfb074 100644 --- a/demo/js/widget/slider/demo.slider.js +++ b/demo/js/widget/slider/demo.slider.js @@ -16,7 +16,8 @@ Demo.Slider = BI.inherit(BI.Widget, { type: "bi.single_slider", digit: 0, width: 300, - height: 50 + height: 50, + cls: "layout-bg-white" }); singleSlider.setMinAndMax({ @@ -32,10 +33,11 @@ Demo.Slider = BI.inherit(BI.Widget, { var singleSliderLabel = BI.createWidget({ type: "bi.single_slider_label", - height: 30, + height: 50, width: 300, digit: 0, - unit: "个" + unit: "个", + cls: "layout-bg-white" }); singleSliderLabel.setMinAndMax({ min: 0, @@ -47,7 +49,8 @@ Demo.Slider = BI.inherit(BI.Widget, { var normalSingleSlider = BI.createWidget({ type: "bi.single_slider_normal", height: 30, - width: 300 + width: 300, + cls: "layout-bg-white" }); normalSingleSlider.setMinAndMax({ min: 0, @@ -56,35 +59,68 @@ Demo.Slider = BI.inherit(BI.Widget, { normalSingleSlider.setValue(10); normalSingleSlider.populate(); + + var intervalSlider = BI.createWidget({ + type: "bi.interval_slider", + width: 300, + cls: "layout-bg-white" + }); + intervalSlider.setMinAndMax({ + min: 0, + max: 120 + }); + intervalSlider.setValue({ + min: 10, + max: 120 + }); + intervalSlider.populate(); + + var intervalSliderLabel = BI.createWidget({ + type: "bi.interval_slider_label", + width: 300, + cls: "layout-bg-white" + }); + intervalSliderLabel.setMinAndMax({ + min: 0, + max: 120 + }); + intervalSliderLabel.setValue({ + min: 10, + max: 120 + }); + intervalSliderLabel.populate(); + + BI.createWidget({ - type: "bi.vtape", + type: "bi.vertical", element: this, items: [{ - el: { - type: "bi.center_adapt", - items: [{ - el: singleSlider - }] - }, - height: 200 + type: "bi.center_adapt", + items: [{ + el: singleSlider + }] + }, { + type: "bi.center_adapt", + items: [{ + el: normalSingleSlider + }] + }, { + type: "bi.center_adapt", + items: [{ + el: singleSliderLabel + }] }, { - el: { - type: "bi.center_adapt", - items: [{ - el: normalSingleSlider - }] - }, - height: 200 + type: "bi.center_adapt", + items: [{ + el: intervalSlider + }] }, { - el: { - type: "bi.center_adapt", - items: [{ - el: singleSliderLabel - }] - }, - height: 200 + type: "bi.center_adapt", + items: [{ + el: intervalSliderLabel + }] }], - hgap: 20 + vgap: 20 }); } }); diff --git a/dist/bundle.js b/dist/bundle.js index 9fec5c6df5..fc3de750de 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -77949,10 +77949,10 @@ BI.DisplayTree = BI.inherit(BI.TreeView, { nodes = BI.DisplayTree.superclass._dealWidthNodes.apply(this, arguments); var self = this, o = this.options; BI.each(nodes, function (i, node) { - if (node.count > 0) { - node.text = node.value + "(" + BI.i18nText("BI-Basic_Altogether") + node.count + BI.i18nText("BI-Basic_Count") + ")"; - } else { - node.text = node.value; + if (node.text == null) { + if (node.count > 0) { + node.text = node.value + "(" + BI.i18nText("BI-Basic_Altogether") + node.count + BI.i18nText("BI-Basic_Count") + ")"; + } } }); return nodes; diff --git a/dist/case.js b/dist/case.js index 996b843c83..c94b92470d 100644 --- a/dist/case.js +++ b/dist/case.js @@ -12276,10 +12276,10 @@ BI.DisplayTree = BI.inherit(BI.TreeView, { nodes = BI.DisplayTree.superclass._dealWidthNodes.apply(this, arguments); var self = this, o = this.options; BI.each(nodes, function (i, node) { - if (node.count > 0) { - node.text = node.value + "(" + BI.i18nText("BI-Basic_Altogether") + node.count + BI.i18nText("BI-Basic_Count") + ")"; - } else { - node.text = node.value; + if (node.text == null) { + if (node.count > 0) { + node.text = node.value + "(" + BI.i18nText("BI-Basic_Altogether") + node.count + BI.i18nText("BI-Basic_Count") + ")"; + } } }); return nodes; diff --git a/dist/demo.js b/dist/demo.js index 97301635b7..093ee94786 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -3049,10 +3049,8 @@ BI.shortcut("demo.value_chooser_pane", Demo.ValueChooserPane);Demo.ADDONS_CONFIG }, { pId: 6, id: 602, - text: "sliders" -}, { - pId: 602, - text: "bi.single_slider" + text: "滚动sliders", + value: "demo.slider" }, { id: 100000, text: "小demo", @@ -3868,14 +3866,6 @@ Demo.COMPONENT_CONFIG = [{ pId: 419, text: "bi.file_manager", value: "demo.file_manager" -}, { - pId: 4, - id: 421, - text: "滚动调节" -}, { - pId: 421, - text: "bi.slider", - value: "demo.slider" }, { pId: 4, text: '时间间隔', @@ -8564,7 +8554,8 @@ Demo.Slider = BI.inherit(BI.Widget, { type: "bi.single_slider", digit: 0, width: 300, - height: 50 + height: 50, + cls: "layout-bg-white" }); singleSlider.setMinAndMax({ @@ -8580,10 +8571,11 @@ Demo.Slider = BI.inherit(BI.Widget, { var singleSliderLabel = BI.createWidget({ type: "bi.single_slider_label", - height: 30, + height: 50, width: 300, digit: 0, - unit: "个" + unit: "个", + cls: "layout-bg-white" }); singleSliderLabel.setMinAndMax({ min: 0, @@ -8595,7 +8587,8 @@ Demo.Slider = BI.inherit(BI.Widget, { var normalSingleSlider = BI.createWidget({ type: "bi.single_slider_normal", height: 30, - width: 300 + width: 300, + cls: "layout-bg-white" }); normalSingleSlider.setMinAndMax({ min: 0, @@ -8604,35 +8597,68 @@ Demo.Slider = BI.inherit(BI.Widget, { normalSingleSlider.setValue(10); normalSingleSlider.populate(); + + var intervalSlider = BI.createWidget({ + type: "bi.interval_slider", + width: 300, + cls: "layout-bg-white" + }); + intervalSlider.setMinAndMax({ + min: 0, + max: 120 + }); + intervalSlider.setValue({ + min: 10, + max: 120 + }); + intervalSlider.populate(); + + var intervalSliderLabel = BI.createWidget({ + type: "bi.interval_slider_label", + width: 300, + cls: "layout-bg-white" + }); + intervalSliderLabel.setMinAndMax({ + min: 0, + max: 120 + }); + intervalSliderLabel.setValue({ + min: 10, + max: 120 + }); + intervalSliderLabel.populate(); + + BI.createWidget({ - type: "bi.vtape", + type: "bi.vertical", element: this, items: [{ - el: { - type: "bi.center_adapt", - items: [{ - el: singleSlider - }] - }, - height: 200 + type: "bi.center_adapt", + items: [{ + el: singleSlider + }] }, { - el: { - type: "bi.center_adapt", - items: [{ - el: normalSingleSlider - }] - }, - height: 200 + type: "bi.center_adapt", + items: [{ + el: normalSingleSlider + }] }, { - el: { - type: "bi.center_adapt", - items: [{ - el: singleSliderLabel - }] - }, - height: 200 + type: "bi.center_adapt", + items: [{ + el: singleSliderLabel + }] + }, { + type: "bi.center_adapt", + items: [{ + el: intervalSlider + }] + }, { + type: "bi.center_adapt", + items: [{ + el: intervalSliderLabel + }] }], - hgap: 20 + vgap: 20 }); } }); diff --git a/dist/sliders.css b/dist/sliders.css index 8766c102db..03f096bafb 100644 --- a/dist/sliders.css +++ b/dist/sliders.css @@ -1,3 +1,29 @@ +.bi-interval-slider-label { + min-height: 50px; +} + +.bi-interval-slider { + min-height: 70px; +} +.bi-single-slider-label { + min-height: 50px; +} + +.bi-single-slider-normal { + min-height: 30px; +} +.bi-single-slider { + min-height: 50px; +} +.bi-single-slider-button .slider-button { + cursor: ew-resize; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; +} .bi-single-slider-button .slider-button { cursor: ew-resize; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); @@ -19,3 +45,15 @@ -moz-border-radius: 3px; border-radius: 3px; } +.bi-slider-track .gray-track { + background-color: rgba(153, 153, 153, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.bi-slider-track .blue-track { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} diff --git a/dist/sliders.js b/dist/sliders.js index 9ad98714bd..460e5c3e88 100644 --- a/dist/sliders.js +++ b/dist/sliders.js @@ -1,4 +1,1144 @@ /** + * Created by zcf on 2016/9/26. + */ +BI.IntervalSlider = BI.inherit(BI.Widget, { + _constant: { + EDITOR_WIDTH: 58, + EDITOR_R_GAP: 60, + EDITOR_HEIGHT: 30, + HEIGHT: 28, + 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, + height: c.HEIGHT, + 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, + height: c.HEIGHT, + 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.sliderOne.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)); + self._setLabelOnePosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + v = self._assertValue(v); + self.labelOne.setValue(v); + self.valueOne = v; + self._setBlueTrack(); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderOnePosition(significantPercent); + self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); + } + }); + + this.sliderTwo = BI.createWidget({ + type: "bi.single_slider_button" + }); + this.sliderTwo.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)); + self._setLabelTwoPosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + v = self._assertValue(v); + self.labelTwo.setValue(v); + self.valueTwo = v; + self._setBlueTrack(); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderTwoPosition(significantPercent); + self.fireEvent(BI.IntervalSlider.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%" + }, + this._createLabelWrapper(), + this._createSliderWrapper() + ] + }) + }, + + _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) { + if (enable) { + this.sliderOne.element.draggable("enable"); + this.sliderTwo.element.draggable("enable") + } else { + this.sliderOne.element.draggable("disable"); + this.sliderTwo.element.draggable("disable") + } + }, + + _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.sliderOne.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)); + self._setLabelOnePosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + v = self._assertValue(v); + v = o.digit === false ? v : v.toFixed(o.digit); + self.labelOne.setText(v + o.unit); + self.valueOne = v; + self._setBlueTrack(); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderOnePosition(significantPercent); + self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE); + } + }); + + this.sliderTwo = BI.createWidget({ + type: "bi.single_slider_button" + }); + this.sliderTwo.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)); + self._setLabelTwoPosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + v = self._assertValue(v); + v = o.digit === false ? v : v.toFixed(o.digit); + self.labelTwo.setText(v + o.unit); + self.valueTwo = v; + self._setBlueTrack(); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderTwoPosition(significantPercent); + self.fireEvent(BI.IntervalSliderLabel.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: 13, + left: 0, + width: "100%" + }, + this._createLabelWrapper(), + this._createSliderWrapper() + ] + }) + }, + + _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: 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) { + if (enable) { + this.sliderOne.element.draggable("enable"); + this.sliderTwo.element.draggable("enable") + } else { + this.sliderOne.element.draggable("disable"); + this.sliderTwo.element.draggable("disable") + } + }, + + _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); + 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 () { + 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._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.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, { @@ -46,14 +1186,13 @@ BI.SingleSlider = BI.inherit(BI.Widget, { _defaultConfig: function () { return BI.extend(BI.SingleSlider.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-single-slider bi-slider-track", - digit: "" + digit: false }); }, _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 = ""; @@ -83,7 +1222,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { self._setBlueTrack(significantPercent); self._setLabelPosition(significantPercent); var v = self._getValueByPercent(significantPercent); - v = digitExist ? v.toFixed(o.digit) : v; + v = o.digit === false ? v : v.toFixed(o.digit); self.label.setValue(v); self.value = v; self.fireEvent(BI.SingleSlider.EVENT_CHANGE); @@ -121,7 +1260,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { var significantPercent = BI.parseFloat(percent.toFixed(1)); self._setAllPosition(significantPercent); var v = self._getValueByPercent(significantPercent); - v = digitExist ? v.toFixed(o.digit) : v; + v = o.digit === false ? v : v.toFixed(o.digit); self.label.setValue(v); self.value = v; self.fireEvent(BI.SingleSlider.EVENT_CHANGE); @@ -129,7 +1268,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { }); this.label = BI.createWidget({ type: "bi.sign_editor", - cls: "slider-editor-button bi-border", + cls: "slider-editor-button", errorText: "", height: c.HEIGHT, width: c.EDITOR_WIDTH - 2, @@ -141,12 +1280,16 @@ BI.SingleSlider = BI.inherit(BI.Widget, { 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); - v = digitExist ? v.toFixed(o.digit) : v; this.setValue(v); self.value = v; self.fireEvent(BI.SingleSlider.EVENT_CHANGE); @@ -169,12 +1312,12 @@ BI.SingleSlider = BI.inherit(BI.Widget, { hgap: 7, height: c.TRACK_HEIGHT }, - top: 33, + top: 23, left: 0, width: "100%" }, { el: sliderVertical, - top: 30, + top: 20, left: 0, width: "100%" }, { @@ -270,17 +1413,16 @@ BI.SingleSlider = BI.inherit(BI.Widget, { 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; + v = BI.parseFloat(v); + v = o.digit === false ? v : v.toFixed(o.digit); + if ((!isNaN(v))) { + if (this._checkValidation(v)) { + this.value = v; } - if (value > this.max) { + if (v > this.max) { this.value = this.max; } - if (value < this.min) { + if (v < this.min) { this.value = this.min; } } @@ -326,8 +1468,8 @@ BI.shortcut("bi.single_slider", BI.SingleSlider);/** BI.SingleSliderLabel = BI.inherit(BI.Widget, { _constant: { EDITOR_WIDTH: 90, - EDITOR_HEIGHT: 30, - HEIGHT: 28, + EDITOR_HEIGHT: 20, + HEIGHT: 20, SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH: 30, SLIDER_HEIGHT: 30, @@ -335,7 +1477,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, { }, _defaultConfig: function () { return BI.extend(BI.SingleSliderLabel.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-single-slider bi-slider-track", + baseCls: "bi-single-slider-label bi-slider-track", digit: "", unit: "" }); @@ -442,12 +1584,12 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, { hgap: 7, height: c.TRACK_HEIGHT }, - top: 33, + top: 13, left: 0, width: "100%" }, { el: sliderVertical, - top: 30, + top: 10, left: 0, width: "100%" }, { @@ -460,7 +1602,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, { rgap: c.EDITOR_WIDTH, height: c.EDITOR_HEIGHT }, - top: 10, + top: 0, left: 0, width: "100%" }] @@ -600,8 +1742,6 @@ BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel);/** BI.SingleSliderNormal = BI.inherit(BI.Widget, { _constant: { - EDITOR_WIDTH: 90, - EDITOR_HEIGHT: 30, HEIGHT: 28, SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH: 30, @@ -610,12 +1750,12 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, { }, props: { - baseCls: "bi-single-button bi-button-track", + baseCls: "bi-single-slider-normal bi-slider-track", minMax: { min: 0, max: 100 }, - color: "#3f8ce8" + // color: "#3f8ce8" }, render: function () { @@ -718,7 +1858,9 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, { cls: "blue-track", height: 6 }); - this.blueTrack.element.css({"background-color": this.options.color}); + if (this.options.color) { + this.blueTrack.element.css({"background-color": this.options.color}); + } return { type: "bi.absolute", diff --git a/src/addons/sliders/css/intervalslider/intervalslider.css b/src/addons/sliders/css/intervalslider/intervalslider.css new file mode 100644 index 0000000000..18bcc2934f --- /dev/null +++ b/src/addons/sliders/css/intervalslider/intervalslider.css @@ -0,0 +1,7 @@ +.bi-interval-slider-label { + min-height: 50px; +} + +.bi-interval-slider { + min-height: 70px; +} diff --git a/src/addons/sliders/css/singleslider/singlelider.css b/src/addons/sliders/css/singleslider/singlelider.css new file mode 100644 index 0000000000..89c22bab6a --- /dev/null +++ b/src/addons/sliders/css/singleslider/singlelider.css @@ -0,0 +1,7 @@ +.bi-single-slider-label { + min-height: 50px; +} + +.bi-single-slider-normal { + min-height: 30px; +} diff --git a/src/addons/sliders/css/singleslider/singleslider.css b/src/addons/sliders/css/singleslider/singleslider.css new file mode 100644 index 0000000000..35dad715e9 --- /dev/null +++ b/src/addons/sliders/css/singleslider/singleslider.css @@ -0,0 +1,3 @@ +.bi-single-slider { + min-height: 50px; +} diff --git a/src/addons/sliders/css/singleslider/slider/widget.css b/src/addons/sliders/css/singleslider/slider/widget.css new file mode 100644 index 0000000000..14a3812ebe --- /dev/null +++ b/src/addons/sliders/css/singleslider/slider/widget.css @@ -0,0 +1,9 @@ +.bi-single-slider-button .slider-button { + cursor: ew-resize; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; +} diff --git a/src/addons/sliders/css/singleslider/track/widget.css b/src/addons/sliders/css/singleslider/track/widget.css new file mode 100644 index 0000000000..895db146a3 --- /dev/null +++ b/src/addons/sliders/css/singleslider/track/widget.css @@ -0,0 +1,12 @@ +.bi-slider-track .gray-track { + background-color: rgba(153, 153, 153, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.bi-slider-track .blue-track { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} diff --git a/src/addons/sliders/js/intervalslider/intervalslider.js b/src/addons/sliders/js/intervalslider/intervalslider.js new file mode 100644 index 0000000000..ef6c980ae2 --- /dev/null +++ b/src/addons/sliders/js/intervalslider/intervalslider.js @@ -0,0 +1,484 @@ +/** + * Created by zcf on 2016/9/26. + */ +BI.IntervalSlider = BI.inherit(BI.Widget, { + _constant: { + EDITOR_WIDTH: 58, + EDITOR_R_GAP: 60, + EDITOR_HEIGHT: 30, + HEIGHT: 28, + 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, + height: c.HEIGHT, + 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, + height: c.HEIGHT, + 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.sliderOne.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)); + self._setLabelOnePosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + v = self._assertValue(v); + self.labelOne.setValue(v); + self.valueOne = v; + self._setBlueTrack(); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderOnePosition(significantPercent); + self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); + } + }); + + this.sliderTwo = BI.createWidget({ + type: "bi.single_slider_button" + }); + this.sliderTwo.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)); + self._setLabelTwoPosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + v = self._assertValue(v); + self.labelTwo.setValue(v); + self.valueTwo = v; + self._setBlueTrack(); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderTwoPosition(significantPercent); + self.fireEvent(BI.IntervalSlider.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%" + }, + this._createLabelWrapper(), + this._createSliderWrapper() + ] + }) + }, + + _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) { + if (enable) { + this.sliderOne.element.draggable("enable"); + this.sliderTwo.element.draggable("enable") + } else { + this.sliderOne.element.draggable("disable"); + this.sliderTwo.element.draggable("disable") + } + }, + + _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); \ No newline at end of file diff --git a/src/addons/sliders/js/intervalslider/intervalslider.label.js b/src/addons/sliders/js/intervalslider/intervalslider.label.js new file mode 100644 index 0000000000..3b639e9ede --- /dev/null +++ b/src/addons/sliders/js/intervalslider/intervalslider.label.js @@ -0,0 +1,437 @@ +/** + * 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.sliderOne.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)); + self._setLabelOnePosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + v = self._assertValue(v); + v = o.digit === false ? v : v.toFixed(o.digit); + self.labelOne.setText(v + o.unit); + self.valueOne = v; + self._setBlueTrack(); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderOnePosition(significantPercent); + self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE); + } + }); + + this.sliderTwo = BI.createWidget({ + type: "bi.single_slider_button" + }); + this.sliderTwo.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)); + self._setLabelTwoPosition(significantPercent); + var v = self._getValueByPercent(significantPercent); + v = self._assertValue(v); + v = o.digit === false ? v : v.toFixed(o.digit); + self.labelTwo.setText(v + o.unit); + self.valueTwo = v; + self._setBlueTrack(); + }, + stop: function (e, ui) { + var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); + var significantPercent = BI.parseFloat(percent.toFixed(1)); + self._setSliderTwoPosition(significantPercent); + self.fireEvent(BI.IntervalSliderLabel.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: 13, + left: 0, + width: "100%" + }, + this._createLabelWrapper(), + this._createSliderWrapper() + ] + }) + }, + + _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: 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) { + if (enable) { + this.sliderOne.element.draggable("enable"); + this.sliderTwo.element.draggable("enable") + } else { + this.sliderOne.element.draggable("disable"); + this.sliderTwo.element.draggable("disable") + } + }, + + _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); + 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 () { + 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._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.IntervalSliderLabel.EVENT_CHANGE = "EVENT_CHANGE"; +BI.shortcut("bi.interval_slider_label", BI.IntervalSliderLabel); \ No newline at end of file diff --git a/src/addons/sliders/js/intervalslider/model.accuratecalculation.js b/src/addons/sliders/js/intervalslider/model.accuratecalculation.js new file mode 100644 index 0000000000..6d50ad5f3f --- /dev/null +++ b/src/addons/sliders/js/intervalslider/model.accuratecalculation.js @@ -0,0 +1,222 @@ +/** + * 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); + } +}); \ No newline at end of file diff --git a/src/addons/sliders/singleslider/button/iconbutton.slider.js b/src/addons/sliders/js/singleslider/button/iconbutton.slider.js similarity index 100% rename from src/addons/sliders/singleslider/button/iconbutton.slider.js rename to src/addons/sliders/js/singleslider/button/iconbutton.slider.js diff --git a/src/addons/sliders/singleslider/singleslider.js b/src/addons/sliders/js/singleslider/singleslider.js similarity index 92% rename from src/addons/sliders/singleslider/singleslider.js rename to src/addons/sliders/js/singleslider/singleslider.js index 8dfbc19de7..e54245d078 100644 --- a/src/addons/sliders/singleslider/singleslider.js +++ b/src/addons/sliders/js/singleslider/singleslider.js @@ -14,14 +14,13 @@ BI.SingleSlider = BI.inherit(BI.Widget, { _defaultConfig: function () { return BI.extend(BI.SingleSlider.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-single-slider bi-slider-track", - digit: "" + digit: false }); }, _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 = ""; @@ -51,7 +50,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { self._setBlueTrack(significantPercent); self._setLabelPosition(significantPercent); var v = self._getValueByPercent(significantPercent); - v = digitExist ? v.toFixed(o.digit) : v; + v = o.digit === false ? v : v.toFixed(o.digit); self.label.setValue(v); self.value = v; self.fireEvent(BI.SingleSlider.EVENT_CHANGE); @@ -89,7 +88,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { var significantPercent = BI.parseFloat(percent.toFixed(1)); self._setAllPosition(significantPercent); var v = self._getValueByPercent(significantPercent); - v = digitExist ? v.toFixed(o.digit) : v; + v = o.digit === false ? v : v.toFixed(o.digit); self.label.setValue(v); self.value = v; self.fireEvent(BI.SingleSlider.EVENT_CHANGE); @@ -97,7 +96,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, { }); this.label = BI.createWidget({ type: "bi.sign_editor", - cls: "slider-editor-button bi-border", + cls: "slider-editor-button", errorText: "", height: c.HEIGHT, width: c.EDITOR_WIDTH - 2, @@ -109,12 +108,16 @@ BI.SingleSlider = BI.inherit(BI.Widget, { 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); - v = digitExist ? v.toFixed(o.digit) : v; this.setValue(v); self.value = v; self.fireEvent(BI.SingleSlider.EVENT_CHANGE); @@ -137,12 +140,12 @@ BI.SingleSlider = BI.inherit(BI.Widget, { hgap: 7, height: c.TRACK_HEIGHT }, - top: 33, + top: 23, left: 0, width: "100%" }, { el: sliderVertical, - top: 30, + top: 20, left: 0, width: "100%" }, { @@ -238,17 +241,16 @@ BI.SingleSlider = BI.inherit(BI.Widget, { 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; + v = BI.parseFloat(v); + v = o.digit === false ? v : v.toFixed(o.digit); + if ((!isNaN(v))) { + if (this._checkValidation(v)) { + this.value = v; } - if (value > this.max) { + if (v > this.max) { this.value = this.max; } - if (value < this.min) { + if (v < this.min) { this.value = this.min; } } diff --git a/src/addons/sliders/singleslider/singleslider.label.js b/src/addons/sliders/js/singleslider/singleslider.label.js similarity index 97% rename from src/addons/sliders/singleslider/singleslider.label.js rename to src/addons/sliders/js/singleslider/singleslider.label.js index 472cb1a66d..53b79eec64 100644 --- a/src/addons/sliders/singleslider/singleslider.label.js +++ b/src/addons/sliders/js/singleslider/singleslider.label.js @@ -4,8 +4,8 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, { _constant: { EDITOR_WIDTH: 90, - EDITOR_HEIGHT: 30, - HEIGHT: 28, + EDITOR_HEIGHT: 20, + HEIGHT: 20, SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH: 30, SLIDER_HEIGHT: 30, @@ -13,7 +13,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, { }, _defaultConfig: function () { return BI.extend(BI.SingleSliderLabel.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-single-slider bi-slider-track", + baseCls: "bi-single-slider-label bi-slider-track", digit: "", unit: "" }); @@ -120,12 +120,12 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, { hgap: 7, height: c.TRACK_HEIGHT }, - top: 33, + top: 13, left: 0, width: "100%" }, { el: sliderVertical, - top: 30, + top: 10, left: 0, width: "100%" }, { @@ -138,7 +138,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, { rgap: c.EDITOR_WIDTH, height: c.EDITOR_HEIGHT }, - top: 10, + top: 0, left: 0, width: "100%" }] diff --git a/src/addons/sliders/singleslider/singleslider.normal.js b/src/addons/sliders/js/singleslider/singleslider.normal.js similarity index 96% rename from src/addons/sliders/singleslider/singleslider.normal.js rename to src/addons/sliders/js/singleslider/singleslider.normal.js index 769089f77d..f5dc3b8bcc 100644 --- a/src/addons/sliders/singleslider/singleslider.normal.js +++ b/src/addons/sliders/js/singleslider/singleslider.normal.js @@ -5,8 +5,6 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, { _constant: { - EDITOR_WIDTH: 90, - EDITOR_HEIGHT: 30, HEIGHT: 28, SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH: 30, @@ -15,12 +13,12 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, { }, props: { - baseCls: "bi-single-button bi-button-track", + baseCls: "bi-single-slider-normal bi-slider-track", minMax: { min: 0, max: 100 }, - color: "#3f8ce8" + // color: "#3f8ce8" }, render: function () { @@ -123,7 +121,9 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, { cls: "blue-track", height: 6 }); - this.blueTrack.element.css({"background-color": this.options.color}); + if (this.options.color) { + this.blueTrack.element.css({"background-color": this.options.color}); + } return { type: "bi.absolute", diff --git a/src/addons/sliders/less/intervalslider/intervalslider.label.less b/src/addons/sliders/less/intervalslider/intervalslider.label.less new file mode 100644 index 0000000000..fa4882c009 --- /dev/null +++ b/src/addons/sliders/less/intervalslider/intervalslider.label.less @@ -0,0 +1,3 @@ +.bi-interval-slider-label { + min-height: 50px; +} \ No newline at end of file diff --git a/src/addons/sliders/less/intervalslider/intervalslider.less b/src/addons/sliders/less/intervalslider/intervalslider.less new file mode 100644 index 0000000000..c7645f75f9 --- /dev/null +++ b/src/addons/sliders/less/intervalslider/intervalslider.less @@ -0,0 +1,3 @@ +.bi-interval-slider { + min-height: 70px; +} \ No newline at end of file diff --git a/src/addons/sliders/less/singleslider/singlelider.label.less b/src/addons/sliders/less/singleslider/singlelider.label.less new file mode 100644 index 0000000000..2654372937 --- /dev/null +++ b/src/addons/sliders/less/singleslider/singlelider.label.less @@ -0,0 +1,3 @@ +.bi-single-slider-label { + min-height: 50px; +} \ No newline at end of file diff --git a/src/addons/sliders/less/singleslider/singlelider.normal.less b/src/addons/sliders/less/singleslider/singlelider.normal.less new file mode 100644 index 0000000000..8a7e4a6553 --- /dev/null +++ b/src/addons/sliders/less/singleslider/singlelider.normal.less @@ -0,0 +1,3 @@ +.bi-single-slider-normal { + min-height: 30px; +} \ No newline at end of file diff --git a/src/addons/sliders/less/singleslider/singleslider.less b/src/addons/sliders/less/singleslider/singleslider.less index 45a8785bbf..9274d028b9 100644 --- a/src/addons/sliders/less/singleslider/singleslider.less +++ b/src/addons/sliders/less/singleslider/singleslider.less @@ -1,6 +1,3 @@ -@import "../../../../less/bibase"; - .bi-single-slider { - & .slider-editor-button { - } -} + min-height: 50px; +} \ No newline at end of file diff --git a/src/case/tree/tree.display.js b/src/case/tree/tree.display.js index 030a9041d7..41cf91acf4 100644 --- a/src/case/tree/tree.display.js +++ b/src/case/tree/tree.display.js @@ -48,10 +48,10 @@ BI.DisplayTree = BI.inherit(BI.TreeView, { nodes = BI.DisplayTree.superclass._dealWidthNodes.apply(this, arguments); var self = this, o = this.options; BI.each(nodes, function (i, node) { - if (node.count > 0) { - node.text = node.value + "(" + BI.i18nText("BI-Basic_Altogether") + node.count + BI.i18nText("BI-Basic_Count") + ")"; - } else { - node.text = node.value; + if (node.text == null) { + if (node.count > 0) { + node.text = node.value + "(" + BI.i18nText("BI-Basic_Altogether") + node.count + BI.i18nText("BI-Basic_Count") + ")"; + } } }); return nodes;