0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
source/Ox.UI/js/Form/Ox.Filter.js
View file

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

31
source/Ox.UI/js/Form/Ox.Range.js
View file

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