caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update

es6
imp 7 years ago
parent
a2490b20f1
commit
efc8221cfa
2 changed files with 557 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      Gruntfile.js
  2. 556
      bi/slider.js

2
Gruntfile.js
Unescape View File

@ -226,7 +226,7 @@ module.exports = function (grunt) {
},
bi_sliderJs: {
src: [
'src/addons/slider/slider/**/*.js'
'src/addons/slider/singleslider/**/*.js'
],
dest: 'bi/slider.js'
},

556
bi/slider.js
Unescape View File

@ -0,0 +1,556 @@
/**
* Created by zcf on 2016/9/22.
*/
BI.SliderIconButton = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.SliderIconButton.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-single-slider-button"
});
},
_init: function () {
BI.extend(BI.SliderIconButton.superclass._init.apply(this, arguments));
this.slider = BI.createWidget({
type: "bi.icon_button",
cls: "widget-slider-icon slider-button",
iconWidth: 14,
iconHeight: 14,
height: 14,
width: 14
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: this.slider,
top: 7,
left: -7
}],
width: 0,
height: 14
});
}
});
BI.shortcut("bi.single_slider_button", BI.SliderIconButton);/**
* Created by zcf on 2016/9/22.
*/
BI.SingleSlider = BI.inherit(BI.Widget, {
_constant: {
EDITOR_WIDTH: 90,
EDITOR_HEIGHT: 30,
HEIGHT: 28,
SLIDER_WIDTH_HALF: 15,
SLIDER_WIDTH: 30,
SLIDER_HEIGHT: 30,
TRACK_HEIGHT: 24
},
_defaultConfig: function () {
return BI.extend(BI.SingleSlider.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-single-slider bi-slider-track"
});
},
_init: function () {
BI.SingleSlider.superclass._init.apply(this, arguments);
var self = this;
var c = this._constant;
this.enable = false;
this.value = "";
this.grayTrack = BI.createWidget({
type: "bi.layout",
cls: "gray-track",
height: 6
});
this.blueTrack = BI.createWidget({
type: "bi.layout",
cls: "blue-track bi-high-light-background",
height: 6
});
this.track = this._createTrackWrapper();
this.slider = BI.createWidget({
type: "bi.single_slider_button"
});
this.slider.element.draggable({
axis: "x",
containment: this.grayTrack.element,
scroll: false,
drag: function (e, ui) {
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
self._setBlueTrack(significantPercent);
self._setLabelPosition(significantPercent);
var v = self._getValueByPercent(significantPercent);
self.label.setValue(v);
self.value = v;
},
stop: function (e, ui) {
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
var significantPercent = BI.parseFloat(percent.toFixed(1));
self._setSliderPosition(significantPercent);
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
}
});
var sliderVertical = BI.createWidget({
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [this.slider]
}],
hgap: c.SLIDER_WIDTH_HALF,
height: c.SLIDER_HEIGHT
});
sliderVertical.element.click(function (e) {
if (self.enable) {
var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
var trackLength = self.track.element[0].scrollWidth;
var percent = 0;
if (offset < 0) {
percent = 0
}
if (offset > 0 && offset < (trackLength - c.SLIDER_WIDTH)) {
percent = offset * 100 / self._getGrayTrackLength();
}
if (offset > (trackLength - c.SLIDER_WIDTH)) {
percent = 100
}
var significantPercent = BI.parseFloat(percent.toFixed(1));
self._setAllPosition(significantPercent);
var v = self._getValueByPercent(significantPercent);
self.label.setValue(v);
self.value = v;
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
}
});
this.label = BI.createWidget({
type: "bi.sign_editor",
cls: "slider-editor-button bi-border",
errorText: "",
height: c.HEIGHT,
width: c.EDITOR_WIDTH - 2,
allowBlank: false,
validationChecker: function (v) {
return self._checkValidation(v);
},
quitChecker: function (v) {
return self._checkValidation(v);
}
});
this.label.on(BI.SignEditor.EVENT_CONFIRM, function () {
var v = BI.parseFloat(this.getValue());
self.value = v;
var percent = self._getPercentByValue(v);
var significantPercent = BI.parseFloat(percent.toFixed(1));
self._setAllPosition(significantPercent);
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
});
this._setVisible(false);
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: {
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [{
el: this.track,
width: "100%",
height: c.TRACK_HEIGHT
}]
}],
hgap: 7,
height: c.TRACK_HEIGHT
},
top: 33,
left: 0,
width: "100%"
}, {
el: sliderVertical,
top: 30,
left: 0,
width: "100%"
}, {
el: {
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [this.label]
}],
rgap: c.EDITOR_WIDTH,
height: c.EDITOR_HEIGHT
},
top: 0,
left: 0,
width: "100%"
}]
})
},
_createTrackWrapper: function () {
return BI.createWidget({
type: "bi.absolute",
items: [{
el: {
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [{
el: this.grayTrack,
top: 0,
left: 0,
width: "100%"
}, {
el: this.blueTrack,
top: 0,
left: 0,
width: "0%"
}]
}],
hgap: 8,
height: 8
},
top: 8,
left: 0,
width: "100%"
}]
})
},
_checkValidation: function (v) {
return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)
},
_setBlueTrack: function (percent) {
this.blueTrack.element.css({"width": percent + "%"});
},
_setLabelPosition: function (percent) {
this.label.element.css({"left": percent + "%"});
},
_setSliderPosition: function (percent) {
this.slider.element.css({"left": percent + "%"});
},
_setAllPosition: function (percent) {
this._setSliderPosition(percent);
this._setLabelPosition(percent);
this._setBlueTrack(percent);
},
_setVisible: function (visible) {
this.slider.setVisible(visible);
this.label.setVisible(visible);
},
_getGrayTrackLength: function () {
return this.grayTrack.element[0].scrollWidth
},
_getValueByPercent: function (percent) {
var thousandth = BI.parseInt(percent * 10);
return (((this.max - this.min) * thousandth) / 1000 + this.min);
},
_getPercentByValue: function (v) {
return (v - this.min) * 100 / (this.max - this.min);
},
getValue: function () {
return this.value;
},
setValue: function (v) {
var value = BI.parseFloat(v);
if ((!isNaN(value))) {
if (this._checkValidation(value)) {
this.value = value;
}
if (value > this.max) {
this.value = this.max;
}
if (value < this.min) {
this.value = this.min;
}
}
},
setMinAndMax: function (v) {
var minNumber = BI.parseFloat(v.min);
var maxNumber = BI.parseFloat(v.max);
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
this.min = minNumber;
this.max = maxNumber;
}
},
reset: function () {
this._setVisible(false);
this.enable = false;
this.value = "";
this.min = 0;
this.max = 0;
this._setBlueTrack(0);
},
populate: function () {
if (!isNaN(this.min) && !isNaN(this.max)) {
this._setVisible(true);
this.enable = true;
this.label.setErrorText(BI.i18nText("BI-Please_Enter") + this.min + "-" + this.max + BI.i18nText("BI-Basic_De") + BI.i18nText("BI-Basic_Number"));
if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
this.label.setValue(this.value);
this._setAllPosition(this._getPercentByValue(this.value));
} else {
this.label.setValue(this.max);
this._setAllPosition(100);
}
}
}
});
BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.single_slider", BI.SingleSlider);/**
* normal single slider
* Created by Young on 2017/6/21.
*/
BI.SingleSliderNormal = BI.inherit(BI.Widget, {
_constant: {
EDITOR_WIDTH: 90,
EDITOR_HEIGHT: 30,
HEIGHT: 28,
SLIDER_WIDTH_HALF: 15,
SLIDER_WIDTH: 30,
SLIDER_HEIGHT: 30,
TRACK_HEIGHT: 24
},
props: {
baseCls: "bi-single-button bi-button-track",
minMax: {
min: 0,
max: 100
},
color: "#3f8ce8"
},
render: function () {
var self = this;
var c = this._constant;
var track = this._createTrack();
this.slider = BI.createWidget({
type: "bi.single_slider_button"
});
this.slider.element.draggable({
axis: "x",
containment: this.grayTrack.element,
scroll: false,
drag: function (e, ui) {
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
self._setBlueTrack(significantPercent);
var v = self._getValueByPercent(significantPercent);
self.value = v;
self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
},
stop: function (e, ui) {
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
var significantPercent = BI.parseFloat(percent.toFixed(1));
self._setSliderPosition(significantPercent);
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
}
});
var sliderVertical = BI.createWidget({
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [this.slider]
}],
hgap: c.SLIDER_WIDTH_HALF,
height: c.SLIDER_HEIGHT
});
sliderVertical.element.click(function (e) {
if (self.enable) {
var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
var trackLength = self.track.element[0].scrollWidth;
var percent = 0;
if (offset < 0) {
percent = 0
}
if (offset > 0 && offset < (trackLength - c.SLIDER_WIDTH)) {
percent = offset * 100 / self._getGrayTrackLength();
}
if (offset > (trackLength - c.SLIDER_WIDTH)) {
percent = 100
}
var significantPercent = BI.parseFloat(percent.toFixed(1));
self._setAllPosition(significantPercent);
var v = self._getValueByPercent(significantPercent);
self.value = v;
self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
}
});
return {
type: "bi.absolute",
element: this,
items: [{
el: {
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [{
el: track,
width: "100%",
height: c.TRACK_HEIGHT
}]
}],
hgap: 7,
height: c.TRACK_HEIGHT
},
top: 3,
left: 0,
width: "100%"
}, {
el: sliderVertical,
top: 0,
left: 0,
width: "100%"
}]
}
},
_createTrack: function () {
var self = this;
var c = this._constant;
this.grayTrack = BI.createWidget({
type: "bi.layout",
cls: "gray-track",
height: 6
});
this.blueTrack = BI.createWidget({
type: "bi.layout",
cls: "blue-track",
height: 6
});
this.blueTrack.element.css({"background-color": this.options.color});
return {
type: "bi.absolute",
items: [{
el: {
type: "bi.vertical",
items: [{
type: "bi.absolute",
items: [{
el: this.grayTrack,
top: 0,
left: 0,
width: "100%"
}, {
el: this.blueTrack,
top: 0,
left: 0,
width: "0%"
}]
}],
hgap: 8,
height: 8
},
top: 8,
left: 0,
width: "100%"
}],
ref: function (ref) {
self.track = ref;
}
}
},
_checkValidation: function (v) {
return !(BI.isNull(v) || v < this.min || v > this.max)
},
_setBlueTrack: function (percent) {
this.blueTrack.element.css({"width": percent + "%"});
},
_setSliderPosition: function (percent) {
this.slider.element.css({"left": percent + "%"});
},
_setAllPosition: function (percent) {
this._setSliderPosition(percent);
this._setBlueTrack(percent);
},
_setVisible: function (visible) {
this.slider.setVisible(visible);
},
_getGrayTrackLength: function () {
return this.grayTrack.element[0].scrollWidth
},
_getValueByPercent: function (percent) {
var thousandth = BI.parseInt(percent * 10);
return (((this.max - this.min) * thousandth) / 1000 + this.min);
},
_getPercentByValue: function (v) {
return (v - this.min) * 100 / (this.max - this.min);
},
getValue: function () {
return this.value;
},
setValue: function (v) {
var value = BI.parseFloat(v);
if ((!isNaN(value))) {
if (this._checkValidation(value)) {
this.value = value;
}
if (value > this.max) {
this.value = this.max;
}
if (value < this.min) {
this.value = this.min;
}
}
},
setMinAndMax: function (v) {
var minNumber = BI.parseFloat(v.min);
var maxNumber = BI.parseFloat(v.max);
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
this.min = minNumber;
this.max = maxNumber;
}
},
reset: function () {
this._setVisible(false);
this.enable = false;
this.value = "";
this.min = 0;
this.max = 0;
this._setBlueTrack(0);
},
populate: function () {
if (!isNaN(this.min) && !isNaN(this.max)) {
this._setVisible(true);
this.enable = true;
if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
this._setAllPosition(this._getPercentByValue(this.value));
} else {
this._setAllPosition(100);
}
}
}
});
BI.SingleSliderNormal.EVENT_DRAG = "EVENT_DRAG";
BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);
Write Preview
Loading…
Cancel
Save