forked from 0x2620/oxjs
better filesystem structure for modules and themes; 'minified' ui if debug option not set; dynamially generated map markers
This commit is contained in:
rolux
parent
358ee1bc96
commit
4489e88f44
596 changed files with 115093 additions and 17682 deletions
249
source/Ox.UI/js/Form/Ox.Range.js
Normal file
249
source/Ox.UI/js/Form/Ox.Range.js
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=js
|
||||
Ox.Range = function(options, self) {
|
||||
|
||||
/**
|
||||
options
|
||||
arrows boolean if true, show arrows
|
||||
arrowStep number step when clicking arrows
|
||||
arrowSymbols array arrow symbols, like ['minus', 'plus']
|
||||
max number maximum value
|
||||
min number minimum value
|
||||
orientation string 'horizontal' or 'vertical'
|
||||
step number step between values
|
||||
size number width or height, in px
|
||||
thumbSize number minimum width or height of thumb, in px
|
||||
thumbValue boolean if true, display value on thumb
|
||||
trackGradient array colors
|
||||
trackImages string or array one or multiple track background image URLs
|
||||
trackStep number 0 (scroll here) or step when clicking track
|
||||
value number initial value
|
||||
valueNames array value names to display on thumb
|
||||
*/
|
||||
|
||||
var self = self || {},
|
||||
that = new Ox.Element({}, self)
|
||||
.defaults({
|
||||
arrows: false,
|
||||
arrowStep: 1,
|
||||
arrowSymbols: ['left', 'right'],
|
||||
max: 100,
|
||||
min: 0,
|
||||
orientation: 'horizontal',
|
||||
step: 1,
|
||||
size: 128,
|
||||
thumbSize: 16,
|
||||
thumbValue: false,
|
||||
trackColors: [],
|
||||
trackImages: [],
|
||||
trackStep: 0,
|
||||
value: 0,
|
||||
valueNames: null,
|
||||
})
|
||||
.options($.extend(options, {
|
||||
arrowStep: options.arrowStep ?
|
||||
options.arrowStep : options.step,
|
||||
trackImages: $.makeArray(options.trackImages || [])
|
||||
}))
|
||||
.addClass('OxRange')
|
||||
.css({
|
||||
width: self.options.size + 'px'
|
||||
});
|
||||
|
||||
$.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) {
|
||||
self.$arrows = [];
|
||||
Ox.range(0, 2).forEach(function(i) {
|
||||
self.$arrows[i] = new Ox.Button({
|
||||
overlap: i == 0 ? 'right' : 'left',
|
||||
title: self.options.arrowSymbols[i],
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxArrow')
|
||||
.bindEvent({
|
||||
mousedown: function(event, e) {
|
||||
clickArrow(e, i, true);
|
||||
},
|
||||
mouserepeat: function(event, e) {
|
||||
clickArrow(e, i, false);
|
||||
}
|
||||
})
|
||||
.appendTo(that.$element);
|
||||
});
|
||||
}
|
||||
|
||||
self.$track = new Ox.Element()
|
||||
.addClass('OxTrack')
|
||||
.css($.extend({
|
||||
width: (self.trackSize - 2) + 'px'
|
||||
}, self.trackImages == 1 ? {
|
||||
background: 'rgb(0, 0, 0)'
|
||||
} : {}))
|
||||
.bindEvent({
|
||||
mousedown: clickTrack,
|
||||
drag: dragTrack
|
||||
})
|
||||
.appendTo(that.$element);
|
||||
|
||||
self.trackColors && setTrackColors();
|
||||
|
||||
if (self.trackImages) {
|
||||
self.$trackImages = $('<div>')
|
||||
.css({
|
||||
width: self.trackSize + 'px',
|
||||
marginRight: (-self.trackSize - 1) + 'px'
|
||||
})
|
||||
.appendTo(self.$track.$element);
|
||||
self.options.trackImages.forEach(function(v, i) {
|
||||
//Ox.print(self.trackImageWidths[i])
|
||||
$('<img>')
|
||||
.attr({
|
||||
src: v
|
||||
})
|
||||
.addClass(i == 0 ? 'OxFirstChild' : '')
|
||||
.addClass(i == self.trackImages - 1 ? 'OxLastChild' : '')
|
||||
.css({
|
||||
width: self.trackImageWidths[i] + 'px'
|
||||
})
|
||||
.mousedown(function(e) {
|
||||
e.preventDefault(); // prevent drag
|
||||
})
|
||||
.appendTo(self.$trackImages);
|
||||
//left += self.trackImageWidths[i];
|
||||
});
|
||||
}
|
||||
|
||||
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')
|
||||
/*
|
||||
.css({
|
||||
border: '1px solid rgb(255, 255, 255)',
|
||||
background: 'rgba(0, 0, 0, 0)'
|
||||
})
|
||||
*/
|
||||
.appendTo(self.$track);
|
||||
|
||||
setThumb();
|
||||
|
||||
function clickArrow(e, i, animate) {
|
||||
// fixme: shift doesn't work, see menu scrolling
|
||||
setValue(self.options.value + self.options.arrowStep * (i == 0 ? -1 : 1) * (e.shiftKey ? 2 : 1), animate);
|
||||
}
|
||||
|
||||
function clickTrack(event, e) {
|
||||
// fixme: thumb ends up a bit too far on the right
|
||||
var isThumb = $(e.target).hasClass('OxThumb');
|
||||
self.drag = {
|
||||
left: self.$track.offset().left,
|
||||
offset: isThumb ? e.clientX - self.$thumb.offset().left - 8 /*self.thumbSize / 2*/ : 0
|
||||
};
|
||||
setValue(getVal(e.clientX - self.drag.left - self.drag.offset), !isThumb);
|
||||
}
|
||||
|
||||
function dragTrack(event, e) {
|
||||
setValue(getVal(e.clientX - self.drag.left - self.drag.offset))
|
||||
}
|
||||
|
||||
function getPx(val) {
|
||||
var pxPerVal = (self.trackSize - self.thumbSize) /
|
||||
(self.options.max - self.options.min);
|
||||
return Math.ceil((val - self.options.min) * pxPerVal);
|
||||
}
|
||||
|
||||
/*
|
||||
function getTime(oldValue, newValue) {
|
||||
return self.animationTime * Math.abs(oldValue - newValue) / (self.options.max - self.options.min);
|
||||
}
|
||||
*/
|
||||
|
||||
function getVal(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);
|
||||
}
|
||||
|
||||
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.$track && self.$track.css({
|
||||
width: (self.trackSize - 2) + 'px'
|
||||
});
|
||||
self.$thumb && self.$thumb.options({
|
||||
width: self.thumbSize
|
||||
});
|
||||
}
|
||||
|
||||
function setThumb(animate) {
|
||||
self.$thumb.stop().animate({
|
||||
marginLeft: (getPx(self.options.value) - 1) + 'px',
|
||||
//width: self.thumbSize + 'px'
|
||||
}, animate ? 200 : 0, function() {
|
||||
if (self.options.thumbValue) {
|
||||
self.$thumb.options({
|
||||
title: self.options.valueNames ?
|
||||
self.options.valueNames[self.options.value] :
|
||||
self.options.value
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setTrackColors() {
|
||||
self.$track.css({
|
||||
backgroundImage: $.browser.mozilla ?
|
||||
('-moz-linear-gradient(left, ' +
|
||||
self.options.trackColors[0] + ' 0%, ' + $.map(self.options.trackColors, 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] + '), ' + $.map(self.options.trackColors, function(v, i) {
|
||||
return 'color-stop(' + (self.trackColorsStart + self.trackColorsStep * i) + ', ' + v + ')';
|
||||
}).join(', ') + ', color-stop(1, ' + self.options.trackColors[self.trackColors - 1] + '))')
|
||||
});
|
||||
}
|
||||
|
||||
function setValue(value, animate) {
|
||||
var value = Ox.limit(value, self.options.min, self.options.max);
|
||||
if (value != self.options.value) {
|
||||
//time = getTime(self.options.value, value);
|
||||
self.options.value = value;
|
||||
setThumb(animate);
|
||||
that.triggerEvent('change', {
|
||||
value: value
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
if (key == 'size') {
|
||||
setSizes();
|
||||
} else if (key == 'trackColors') {
|
||||
setTrackColors();
|
||||
} else if (key == 'value') {
|
||||
setThumb();
|
||||
}
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue