form elements rewrite, part 1
This commit is contained in:
rlx
parent
cf567e5608
commit
7f83cd3141
30 changed files with 1061 additions and 958 deletions
|
|
@ -1,26 +1,30 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
|
||||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.Range <f:Ox.Element> Range Object
|
||||
() -> <f> Range Object
|
||||
(options) -> <f> Range Object
|
||||
(options, self) -> <f> Range Object
|
||||
options <o> Options object
|
||||
arrows <b> if true, show arrows
|
||||
arrowStep <n> step when clicking arrows
|
||||
arrowSymbols <a> arrow symbols, like ['minus', 'plus']
|
||||
max <n> maximum value
|
||||
min <n> minimum value
|
||||
orientation <s> 'horizontal' or 'vertical'
|
||||
step <n> step between values
|
||||
size <n> width or height, in px
|
||||
thumbSize <n> minimum width or height of thumb, in px
|
||||
thumbValue <b> if true, display value on thumb
|
||||
trackGradient <a> colors
|
||||
trackImages <s|[s]> one or multiple track background image URLs
|
||||
trackStep <n> 0 (scroll here) or step when clicking track
|
||||
value <n> initial value
|
||||
valueNames <a> value names to display on thumb
|
||||
arrows <b> if true, show arrows
|
||||
arrowStep <n> step when clicking arrows
|
||||
arrowSymbols <[s]> arrow symbols, like ['minus', 'plus']
|
||||
max <n> maximum value
|
||||
min <n> minimum value
|
||||
orientation <s> 'horizontal' or 'vertical'
|
||||
step <n> step between values
|
||||
size <n> width or height, in px
|
||||
thumbSize <n> minimum width or height of thumb, in px
|
||||
thumbStyle <s|'opaque'> Thumb style ('opaque' or 'transparent')
|
||||
thumbValue <b> if true, display value on thumb
|
||||
trackColors <[s]> CSS colors
|
||||
trackGradient <b|false> if true, display track colors as gradient
|
||||
trackImages <s|[s]> one or multiple track background image URLs
|
||||
trackStep <n> 0 (scroll here) or step when clicking track
|
||||
value <n> initial value
|
||||
values <[s]> values to display on thumb
|
||||
self <o> shared private variable
|
||||
change <!> triggered on change of the range
|
||||
@*/
|
||||
|
|
@ -29,40 +33,51 @@ Ox.Range = function(options, self) {
|
|||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
arrows: false,
|
||||
arrowStep: 1,
|
||||
arrowSymbols: ['left', 'right'],
|
||||
changeOnDrag: true,
|
||||
max: 100,
|
||||
min: 0,
|
||||
orientation: 'horizontal',
|
||||
step: 1,
|
||||
size: 128, // fixme: shouldn't this be width?
|
||||
thumbSize: 16,
|
||||
thumbValue: false,
|
||||
trackColors: [],
|
||||
trackImages: [],
|
||||
trackStep: 0,
|
||||
value: 0,
|
||||
valueNames: null,
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxRange')
|
||||
.css({
|
||||
width: self.options.size + 'px'
|
||||
});
|
||||
.defaults({
|
||||
arrows: false,
|
||||
arrowStep: 1,
|
||||
arrowSymbols: ['left', 'right'],
|
||||
changeOnDrag: false,
|
||||
max: 100,
|
||||
min: 0,
|
||||
orientation: 'horizontal',
|
||||
step: 1,
|
||||
size: 128, // fixme: shouldn't this be width?
|
||||
thumbSize: 16,
|
||||
thumbStyle: 'default',
|
||||
thumbValue: false,
|
||||
trackColors: [],
|
||||
trackGradient: false,
|
||||
trackImages: [],
|
||||
trackStep: 0,
|
||||
value: 0,
|
||||
values: [],
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxRange')
|
||||
.css({
|
||||
width: self.options.size + 'px'
|
||||
});
|
||||
|
||||
self.hasValues = !Ox.isEmpty(self.options.values);
|
||||
if (self.hasValues) {
|
||||
self.options.max = self.options.values.length - 1;
|
||||
self.options.min = 0;
|
||||
self.options.step = 1;
|
||||
self.options.thumbValue = true;
|
||||
self.options.value = Ox.isNumber(self.options.value)
|
||||
? self.options.values[self.options.value] : self.options.value;
|
||||
Ox.print('!!!$!!!', self.options.value)
|
||||
}
|
||||
self.options.arrowStep = options.arrowStep || self.options.step;
|
||||
self.options.trackImages = Ox.isArray(self.options.trackImages)
|
||||
? self.options.trackImages : [self.options.trackImages];
|
||||
self.options.trackImages = Ox.toArray(self.options.trackImages);
|
||||
|
||||
self.trackColors = self.options.trackColors.length;
|
||||
self.trackImages = self.options.trackImages.length;
|
||||
self.values = (
|
||||
self.options.max - self.options.min + self.options.step
|
||||
) / self.options.step;
|
||||
|
||||
Ox.extend(self, {
|
||||
trackColors: self.options.trackColors.length,
|
||||
trackImages: self.options.trackImages.length,
|
||||
values: (self.options.max - self.options.min + self.options.step) /
|
||||
self.options.step
|
||||
});
|
||||
setSizes();
|
||||
|
||||
if (self.options.arrows) {
|
||||
|
|
@ -130,12 +145,11 @@ Ox.Range = function(options, self) {
|
|||
|
||||
self.$thumb = Ox.Button({
|
||||
id: self.options.id + 'Thumb',
|
||||
title: self.options.thumbValue ? (self.options.valueNames ?
|
||||
self.options.valueNames[self.options.value] :
|
||||
self.options.value) : '',
|
||||
width: self.thumbSize
|
||||
})
|
||||
.addClass('OxThumb')
|
||||
.addClass('OxThumb' + (
|
||||
self.options.thumbStyle == 'transparent' ? ' OxTransparent' : ''
|
||||
))
|
||||
.appendTo(self.$track);
|
||||
|
||||
setThumb();
|
||||
|
|
@ -145,7 +159,8 @@ Ox.Range = function(options, self) {
|
|||
setValue(
|
||||
self.options.value
|
||||
+ self.options.arrowStep * (i == 0 ? -1 : 1) * (data.shiftKey ? 2 : 1),
|
||||
animate
|
||||
animate,
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -156,12 +171,12 @@ Ox.Range = function(options, self) {
|
|||
left: self.$track.offset().left,
|
||||
offset: isThumb ? data.clientX - self.$thumb.offset().left - 8 /*self.thumbSize / 2*/ : 0
|
||||
};
|
||||
setValue(getVal(data.clientX - self.drag.left - self.drag.offset), !isThumb);
|
||||
setValue(getValue(data.clientX - self.drag.left - self.drag.offset), !isThumb, true);
|
||||
}
|
||||
|
||||
function dragTrack(data) {
|
||||
setValue(
|
||||
getVal(data.clientX - self.drag.left - self.drag.offset),
|
||||
getValue(data.clientX - self.drag.left - self.drag.offset),
|
||||
false,
|
||||
self.options.changeOnDrag
|
||||
);
|
||||
|
|
@ -169,13 +184,14 @@ Ox.Range = function(options, self) {
|
|||
|
||||
function dragendTrack(data) {
|
||||
self.options.value = void 0;
|
||||
setValue(getVal(data.clientX - self.drag.left - self.drag.offset));
|
||||
setValue(getValue(data.clientX - self.drag.left - self.drag.offset), false, true);
|
||||
}
|
||||
|
||||
function getPx(val) {
|
||||
var pxPerVal = (self.trackSize - self.thumbSize) /
|
||||
(self.options.max - self.options.min);
|
||||
return Math.ceil((val - self.options.min) * pxPerVal);
|
||||
function getPx(value) {
|
||||
var pxPerValue = (self.trackSize - self.thumbSize)
|
||||
/ (self.options.max - self.options.min);
|
||||
value = self.hasValues ? self.options.values.indexOf(value) : value;
|
||||
return Math.ceil((value - self.options.min) * pxPerValue);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -184,23 +200,30 @@ Ox.Range = function(options, self) {
|
|||
}
|
||||
*/
|
||||
|
||||
function getVal(px) {
|
||||
function getValue(px) {
|
||||
var px = self.trackSize / self.values >= 16 ? px : px - 8,
|
||||
valPerPx = (self.options.max - self.options.min) /
|
||||
(self.trackSize - self.thumbSize);
|
||||
return Ox.limit(self.options.min +
|
||||
Math.floor(px * valPerPx / self.options.step) * self.options.step,
|
||||
self.options.min, self.options.max);
|
||||
valuePerPx = (self.options.max - self.options.min)
|
||||
/ (self.trackSize - self.thumbSize),
|
||||
value = Ox.limit(
|
||||
self.options.min
|
||||
+ Math.floor(px * valuePerPx / self.options.step) * self.options.step,
|
||||
self.options.min,
|
||||
self.options.max
|
||||
);
|
||||
return self.hasValues ? self.options.values[value] : value;
|
||||
}
|
||||
|
||||
function setSizes() {
|
||||
self.trackSize = self.options.size - self.options.arrows * 32;
|
||||
self.thumbSize = Math.max(self.trackSize / self.values, self.options.thumbSize);
|
||||
self.trackImageWidths = self.trackImages == 1 ? [self.trackSize - 16] :
|
||||
Ox.divideInt(self.trackSize - 2, self.trackImages);
|
||||
self.trackColorsStart = self.thumbSize / 2 / self.options.size;
|
||||
self.trackColorsStep = (self.options.size - self.thumbSize) /
|
||||
(self.trackColors - 1) / self.options.size;
|
||||
self.trackImageWidths = self.trackImages == 1
|
||||
? [self.trackSize - 16]
|
||||
: Ox.divideInt(self.trackSize - 2, self.trackImages);
|
||||
self.trackColorStart = self.options.trackGradient
|
||||
? self.thumbSize / 2 / self.options.size : 0;
|
||||
self.trackColorStep = self.options.trackGradient
|
||||
? (self.options.size - self.thumbSize) / (self.trackColors - 1) / self.options.size
|
||||
: 1 / self.trackColors;
|
||||
that.css({
|
||||
width: self.options.size + 'px'
|
||||
});
|
||||
|
|
@ -208,53 +231,57 @@ Ox.Range = function(options, self) {
|
|||
width: (self.trackSize - 2) + 'px'
|
||||
});
|
||||
if (self.$thumb) {
|
||||
self.$thumb.options({
|
||||
width: self.thumbSize
|
||||
});
|
||||
self.$thumb.options({width: self.thumbSize});
|
||||
setThumb();
|
||||
}
|
||||
}
|
||||
|
||||
function setThumb(animate) {
|
||||
self.$thumb.stop().animate({
|
||||
marginLeft: (getPx(self.options.value) - 1) + 'px',
|
||||
marginLeft: getPx(self.options.value) - 1 + 'px',
|
||||
//width: self.thumbSize + 'px'
|
||||
}, animate ? 250 : 0, function() {
|
||||
if (self.options.thumbValue) {
|
||||
self.$thumb.options({
|
||||
title: self.options.valueNames
|
||||
? self.options.valueNames[self.options.value]
|
||||
: self.options.value
|
||||
});
|
||||
}
|
||||
self.options.thumbValue && self.$thumb.options({
|
||||
title: self.options.value
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setTrackColors() {
|
||||
// fixme: remove outdated -webkit format, and add -o
|
||||
self.$track.css({
|
||||
backgroundImage: $.browser.mozilla ?
|
||||
('-moz-linear-gradient(left, ' +
|
||||
self.options.trackColors[0] + ' 0%, ' + self.options.trackColors.map(function(v, i) {
|
||||
return v + ' ' + ((self.trackColorsStart + self.trackColorsStep * i) * 100) + '%';
|
||||
}).join(', ') + ', ' + self.options.trackColors[self.trackColors - 1] + ' 100%)') :
|
||||
('-webkit-gradient(linear, left top, right top, color-stop(0, ' +
|
||||
self.options.trackColors[0] + '), ' + self.options.trackColors.map(function(v, i) {
|
||||
return 'color-stop(' + (self.trackColorsStart + self.trackColorsStep * i) + ', ' + v + ')';
|
||||
}).join(', ') + ', color-stop(1, ' + self.options.trackColors[self.trackColors - 1] + '))')
|
||||
['moz', 'o', 'webkit'].forEach(function(browser) {
|
||||
self.$track.css({
|
||||
background: '-' + browser + '-linear-gradient(left, '
|
||||
+ self.options.trackColors[0] + ' 0%, '
|
||||
+ self.options.trackColors.map(function(v, i) {
|
||||
var ret = v + ' ' + (
|
||||
self.trackColorStart + self.trackColorStep * i
|
||||
) * 100 + '%';
|
||||
if (!self.options.trackGradient) {
|
||||
ret += ', ' + v + ' ' + (
|
||||
self.trackColorStart + self.trackColorStep * (i + 1)
|
||||
) * 100 + '%';
|
||||
}
|
||||
return ret;
|
||||
}).join(', ') + ', '
|
||||
+ self.options.trackColors[self.trackColors - 1] + ' 100%)'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
value = Ox.limit(
|
||||
self.hasValues ? self.options.values.indexOf(value) : value.toPrecision(10),
|
||||
self.options.min,
|
||||
self.options.max
|
||||
);
|
||||
value = self.hasValues ? self.options.values[value] : value;
|
||||
if (value != self.options.value) {
|
||||
//time = getTime(self.options.value, value);
|
||||
self.options.value = value;
|
||||
setThumb(animate);
|
||||
trigger && that.triggerEvent('change', {value: value});
|
||||
trigger && that.triggerEvent('change', {value: self.options.value});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -268,15 +295,6 @@ Ox.Range = function(options, self) {
|
|||
}
|
||||
}
|
||||
|
||||
that.value = function() {
|
||||
if (arguments.length == 0) {
|
||||
return self.options.value;
|
||||
} else {
|
||||
self.options.type = arguments[0];
|
||||
setThumb();
|
||||
}
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue