SliderValuesPlugin.js revision 427d76fb4250814666fdd978723d1a89e8c06fc5
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenkvar MIN = 'min',
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk MAX = 'max',
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk VALUE = 'value',
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk isNumber = Y.Lang.isNumber,
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk abs = Math.abs;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenkfunction SliderValuesPlugin() {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk SliderValuesPlugin.superclass.apply(this,arguments);
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk}
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenkY.mix(SliderValuesPlugin,{
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk NAME : 'slidervaluesplugin',
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk NS : 'slidervalues',
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk ATTRS : {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk values : {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk value : null,
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk validator : function (v) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk return this._validateNewValues(v);
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk }
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk }
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk }
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk});
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenkY.extend(SliderValuesPlugin, {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk _values : null,
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk _tickSize : null,
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk initializer : function () {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk var slider = this.owner;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk slider.on('sync', this._doSyncUI);
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk slider.on('thumbDrag', this._onDDDrag);
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk slider.on('valueSet', this._uiSetThumbPosition);
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk this.after('valuesChange', this._afterValuesChange);
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk this.addOverride(slider,'_validateNewValue',this._validateNewValue);
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk slider._tickAxis = 'tick' + slider.get('axis').toUpperCase();
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk },
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk getValues : function () {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk return this._values ? Y.Array(this._values.arr) : null;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk },
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk _doSyncUI : function (e) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk var slider = this.owner;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk this._updateValues();
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk if (this._values) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk e.preventDefault();
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk slider._setRailDims();
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk slider._setThumbDims();
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk slider._setRailOffsetXY();
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk slider._setDDGutter();
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk this._setValueStops();
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk slider.set(VALUE,slider.get(VALUE),{ddEvent:null});
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk }
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk },
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk _setValueStops : function () {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk var slider = this.owner,
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk dim = slider._railDims[slider._key.xyIndex];
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk this._tickSize = floor(dim / (this._values.length - 1));
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk slider._dd.set(this._tickAxis, this._tickSize);
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk },
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk _updateValues : function() {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk var slider = this.owner,
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk min = this.get(MIN),
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk max = this.get(MAX),
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk v = this.get('values'),
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk inc = (max - min)/(v - 1),
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk vals = null,
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk i,len;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk if (v) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk if (isArray(v)) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk vals = v;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk } else {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk vals = [min];
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk for (i = 1, len = v - 1; i < len; ++i) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk vals[i] = Math.round(min + (i * inc));
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk }
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk vals[i] = max;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk }
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk // transform into a map struct for fast lookup
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk vals = {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk arr : vals,
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk length : vals.length
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk };
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk for (i = vals.length - 1; i >= 0; --i) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk vals[vals.arr[i]] = i;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk }
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk }
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk this._values = vals;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk },
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk _onDDDrag : function (e) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk if (this._values) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk e.preventDefault();
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk var slider = this.owner,
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk before = slider.get('value'),
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk val = e.ddEvent[this._key.eventPageAxis] - this._offsetXY;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk val = this._values.arr[round(val / this._tickSize)];
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk if (before !== val) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk slider.set(VALUE, val, {ddEvent: e.ddEvent});
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk }
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk }
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk },
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk _uiSetThumbPosition : function (e) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk e.preventDefault();
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk var slider = this.owner,
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk i = this._key.xyIndex,
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk v;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk v = round(this._values[e.changeEv.newVal] * this._tickSize) -
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk floor(slider._thumbDims[i] / 2);
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk slider.get(THUMB).setStyle(slider._key.offsetEdge, v + 'px');
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk },
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk _validateNewValue : function (v) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk return isNumber(v) && isNumber(this._values[v]);
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk },
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk _setValueFn : function (v) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk var slider = this.owner,
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk values = slider.get('values'),
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk x,i;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk if (values) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk if (!this._values) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk // For support of value validation during initialization
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk this._updateValues();
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk }
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk values = this._values;
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk if (!isNumber(v)) {
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk v = values.arr[0];
4b8d88eb610aa1e0bb6ec632f792744b3d6b5f22jeff.schenk } else if (!values[v]) {
values = values.arr;
if (values[0] > values[values.length - 1]) {
values = Y.Array(values);
values.reverse();
}
x = values[values.length - 1];
for (i = values.length - 1; i >= 0; --i) {
if (values[i] > v) {
x = values[i];
} else {
v = abs(x - v) < abs(values[i] - v) ?
x : values[i];
break;
}
}
}
}
return Math.round(v);
},
_validateNewValues : function (v) {
var slider = this.owner,
max = slider.get(MAX),
pass = v === null || Y.Lang.isArray(v);
// TODO: timing issue with initial value set before values range
// updates available range. E.g. -50 is outside the default min/max,
// so if values is set to an array and min/max are omitted, -50 is
// not honored, and is replaced with default min.
if (pass && isNumber(v)) {
pass = v > 1 && v <= abs(max - slider.get(MIN));
}
return pass;
},
_afterValuesChange : function (e) {
var slider = this.owner;
this._updateValues();
if (this._values) {
slider.set(MIN,this._values[0]);
slider.set(MAX,this._values[this._values.length - 1]);
} else {
slider._dd.set('',false);
}
slider._refresh(e);
}
});
Y.Plugin.SliderValuesPlugin = SliderValuesPlugin;