in filter, don't trigger change events when dragging range (add changeOnDrag option to range)

This commit is contained in:
rlx 2011-11-11 09:55:22 +00:00
parent f7599f3b30
commit 04da8c0994
2 changed files with 19 additions and 13 deletions

View file

@ -714,6 +714,7 @@ Ox.Filter = function(options, self) {
if (formatType == 'color') {
isHue = formatArgs[0] == 'hue';
$input = Ox.Range({
changeOnDrag: false,
max: isHue ? 360 : 1,
min: 0,
size: !isArray ? 288 : 128, // fixme: should be width!

View file

@ -30,10 +30,10 @@ Ox.Range = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
// fixme: needs a changeOnDrag option (default true)
arrows: false,
arrowStep: 1,
arrowSymbols: ['left', 'right'],
changeOnDrag: true,
max: 100,
min: 0,
orientation: 'horizontal',
@ -93,10 +93,12 @@ Ox.Range = function(options, self) {
}, self.trackImages == 1 ? {
background: 'rgb(0, 0, 0)'
} : {}))
.bindEvent({
.bindEvent(Ox.extend({
mousedown: clickTrack,
drag: dragTrack
})
}, self.options.changeOnDrag ? {} : {
dragend: dragendTrack
}))
.appendTo(that.$element);
self.trackColors && setTrackColors();
@ -109,7 +111,6 @@ Ox.Range = function(options, self) {
})
.appendTo(self.$track.$element);
self.options.trackImages.forEach(function(v, i) {
//Ox.Log('Form', self.trackImageWidths[i])
$('<img>')
.attr({
src: v
@ -135,12 +136,6 @@ Ox.Range = function(options, self) {
width: self.thumbSize
})
.addClass('OxThumb')
/*
.css({
border: '1px solid rgb(255, 255, 255)',
background: 'rgba(0, 0, 0, 0)'
})
*/
.appendTo(self.$track);
setThumb();
@ -165,7 +160,16 @@ Ox.Range = function(options, self) {
}
function dragTrack(data) {
setValue(getVal(data.clientX - self.drag.left - self.drag.offset))
setValue(
getVal(data.clientX - self.drag.left - self.drag.offset),
false,
self.options.changeOnDrag
);
}
function dragendTrack(data) {
self.options.value = void 0;
setValue(getVal(data.clientX - self.drag.left - self.drag.offset));
}
function getPx(val) {
@ -240,15 +244,16 @@ Ox.Range = function(options, self) {
});
}
function setValue(value, animate) {
function setValue(value, animate, trigger) {
// fixme: toPrecision helps with imprecise results of divisions,
// but won't work for very large values. And is 10 a good value?
value = Ox.limit(value.toPrecision(10), self.options.min, self.options.max);
trigger = trigger !== false;
if (value != self.options.value) {
//time = getTime(self.options.value, value);
self.options.value = value;
setThumb(animate);
that.triggerEvent('change', {value: value});
trigger && that.triggerEvent('change', {value: value});
}
}