bonjour à tous,
J'essaie de programmer une classe Slider qui m permettra de realiser un slider de ce type http://20bits.com/articles/creating-a-fancy-slider-with-yui/
J'aimerai plus tard l'enregistrer comme un widget personnel sur YUI et l'appeler Bar.
J'ai essayé de prendre le code du dualslider de YUI pour le transformer de facon à n'avoir qu'un seul element maniable(Thumb) et un element qui change de couleur lorsqu'on manie le Thumb( http://20bits.com/articles/creating-a-fancy-slider-with-yui/)
le code du dualslider se trouve sur cette page à partir de la ligne 1420:
http://trac.symfony-project.org/browser/plugins/ysfYUIPlugin/trunk/web/yui/slider/slider.js?rev=12263
Voici un essaie de transfprmation que j'ai fait: j'ai juste enlevé les methodes et les élements dont je n'avais pas besoin...Je vous en prie aidez-moi, c'est urgent.
J'ai effacé la fonction selectActiveSlider mais je ne sis comment la reécrire sans la variable max:
----------------------------------------------------------------------------------------------------------------------
| selectActiveSlider: function(e) { |
| 1801 | var min = this.minSlider, |
|---|
| 1802 | max = this.maxSlider, |
|---|
| 1803 | minLocked = min.isLocked(), |
|---|
| 1804 | maxLocked = max.isLocked(), |
|---|
| 1805 | Ev = YAHOO.util.Event, |
|---|
| 1806 | d; |
|---|
| 1807 |
|
|---|
| 1808 | if (minLocked || maxLocked) { |
|---|
| 1809 | this.activeSlider = minLocked ? max : min; |
|---|
| 1810 | } else { |
|---|
| 1811 | if (this.isHoriz) { |
|---|
| 1812 | d = Ev.getPageX(e)-min.thumb.initPageX-min.thumbCenterPoint.x; |
|---|
| 1813 | } else { |
|---|
| 1814 | d = Ev.getPageY(e)-min.thumb.initPageY-min.thumbCenterPoint.y; |
|---|
| 1815 | } |
|---|
| 1816 | |
|---|
| 1817 | this.activeSlider = d*2 > max.getValue()+min.getValue() ? max : min; |
|---|
| 1818 | } |
|---|
| 1819 | } |
|---|
-----------------------------------------------------------------------------------------------------------------------
YAHOO.namespace('MeMe');
/**
* A slider with two thumbs, one that represents the min value and
* the other the max. Actually a composition of two sliders, both with
* the same background. The constraints for each slider are adjusted
* dynamically so that the min value of the max slider is equal or greater
* to the current value of the min slider, and the max value of the min
* slider is the current value of the max slider.
* Constructor assumes both thumbs are positioned absolutely at the 0 mark on
* the background.
*
* @namespace YAHOO.widget
* @class DualSlider
* @uses YAHOO.util.EventProvider
* @constructor
* @param {Slider} minSlider The Slider instance used for the min value thumb
* @param {Slider} maxSlider The Slider instance used for the max value thumb
* @param {int} range The number of pixels the thumbs may move within
* @param {Array} initVals (optional) [min,max] Initial thumb placement
*/
YAHOO.widget.barslider = function(minSlider, bar, range, initVals) {
var self = this,
lang = YAHOO.lang;
this.bar = bar;
/**
* A slider instance that keeps track of the lower value of the range.
* <strong>read only</strong>
* @property minSlider
* @type Slider
*/
this.minSlider = minSlider;
/**
* The currently active slider (min or max). <strong>read only</strong>
* @property activeSlider
* @type Slider
*/
this.activeSlider = minSlider;
/**
* Is the DualSlider oriented horizontally or vertically?
* <strong>read only</strong>
* @property isHoriz
* @type boolean
*/
this.isHoriz = minSlider.thumb._isHoriz;
// Validate initial values
initVals = YAHOO.lang.isArray(initVals) ? initVals : [0,range];
initVals[0] = Math.min(Math.max(parseInt(initVals[0],10)|0,0),range);
var ready = { min : false, max : false };
this.minSlider.thumb.onAvailable = function () {
minSlider.setStartSliderState();
ready.min = true;
if (ready.max) {
minSlider.setValue(initVals[0],true,true,true);
self.updateValue(true);
self.fireEvent('ready',self);
}
};
// dispatch mousedowns to the active slider
//JETER UN COUP D'OEIL
minSlider.onMouseDown = function(e) {
return self._handleMouseDown(e);
};
// Fix the drag behavior so that only the active slider
// follows the drag
minSlider.onDrag = function(e) {
self._handleDrag(e);
};
// The core events for each slider are handled so we can expose a single
// event for when the event happens on either slider
minSlider.subscribe("change", this._handleMinChange, minSlider, this);
minSlider.subscribe("slideStart", this._handleSlideStart, minSlider, this);
minSlider.subscribe("slideEnd", this._handleSlideEnd, minSlider, this);
/**
* Event that fires when the slider is finished setting up
* @event ready
* @param {DualSlider} dualslider the DualSlider instance
*/
this.createEvent("ready", this);
/**
* Event that fires when either the min or max value changes
* @event change
* @param {DualSlider} dualslider the DualSlider instance
*/
this.createEvent("change", this);
/**
* Event that fires when one of the thumbs begins to move
* @event slideStart
* @param {Slider} activeSlider the moving slider
*/
this.createEvent("slideStart", this);
/**
* Event that fires when one of the thumbs finishes moving
* @event slideEnd
* @param {Slider} activeSlider the moving slider
*/
this.createEvent("slideEnd", this);
};
YAHOO.widget.Barslider .prototype = {
/**
* The current value of the min thumb. <strong>read only</strong>.
* @property minVal
* @type int
*/
minVal : -1,
/**
* Executed when one of the sliders fires the slideStart event
* @method _handleSlideStart
* @private
*/
_handleSlideStart: function(data, slider) {
this.fireEvent("slideStart", slider);
},
/**
* Executed when one of the sliders fires the slideEnd event
* @method _handleSlideEnd
* @private
*/
_handleSlideEnd: function(data, slider) {
this.fireEvent("slideEnd", slider);
},
/**
* Overrides the onDrag method for both sliders
* @method _handleDrag
* @private
*/
_handleDrag: function(e) {
YAHOO.widget.Slider.prototype.onDrag.call(this.activeSlider, e);
},
/**
* Executed when the min slider fires the change event
* @method _handleMinChange
* @private
*/
_handleMinChange: function() {
this.activeSlider = this.minSlider;
this.updateValue();
},
/**
* Sets the min and max thumbs to new values.
* @method setValues
* @param min {int} Pixel offset to assign to the min thumb
* @param max {int} Pixel offset to assign to the max thumb
* @param skipAnim {boolean} (optional) Set to true to skip thumb animation.
* Default false
* @param force {boolean} (optional) ignore the locked setting and set
* value anyway. Default false
* @param silent {boolean} (optional) Set to true to skip firing change
* events. Default false
*/
setValues : function (min, skipAnim, force, silent) {
var mins = this.minSlider,
mint = mins.thumb,
self = this,
done = { min : false}; // Essayer de comprendre
// Clear constraints to prevent animated thumbs from prematurely
// stopping when hitting a constraint that's moving with the other
// thumb.
if (mint._isHoriz) {
mint.setXConstraint(mint.leftConstraint,maxt.rightConstraint,mint.tickSize);
} else {
mint.setYConstraint(mint.topConstraint,maxt.bottomConstraint,mint.tickSize);
}
},
/**
* Overrides the onMouseDown for both slider, only moving the active slider
* @method handleMouseDown
* @private
*/
_handleMouseDown: function(e) {
this.selectActiveSlider(e);
YAHOO.widget.Slider.prototype.onMouseDown.call(this.activeSlider, e);
},
/**
* Schedule an event callback that will execute once, then unsubscribe
* itself.
* @method _oneTimeCallback
* @param o {EventProvider} Object to attach the event to
* @param evt {string} Name of the event
* @param fn {Function} function to execute once
* @private
*/
_oneTimeCallback : function (o,evt,fn) {
o.subscribe(evt,function () {
// Unsubscribe myself
o.unsubscribe(evt,arguments.callee);
// Pass the event handler arguments to the one time callback
fn.apply({},[].slice.apply(arguments));
});
},
/**
* Clean up the slideEnd event subscribers array, since each one-time
* callback will be replaced in the event's subscribers property with
* null. This will cause memory bloat and loss of performance.
* @method _cleanEvent
* @param o {EventProvider} object housing the CustomEvent
* @param evt {string} name of the CustomEvent
* @private
*/
_cleanEvent : function (o,evt) {
if (o.__yui_events && o.events[evt]) {
var ce, i, len;
for (i = o.__yui_events.length; i >= 0; --i) {
if (o.__yui_events[i].type === evt) {
ce = o.__yui_events[i];
break;
}
}
if (ce) {
var subs = ce.subscribers,
newSubs = [],
j = 0;
for (i = 0, len = subs.length; i < len; ++i) {
if (subs[i]) {
newSubs[j++] = subs[i];
}
}
ce.subscribers = newSubs;
}
}
}
};
YAHOO.augment(YAHOO.widget.BarSlider, YAHOO.util.EventProvider);
/**
* Overrides the onMouseDown for both slider, only moving the active slider
* @method handleMouseDown
* @private
*/
_handleMouseDown: function(e) {
this.selectActiveSlider(e);
var parselenght = 10;
var clickbarX = YAHOO.util.Event.getPageX(e);
var bElementX = YAHOO.util.Dom.getX(bElementId);
var bElementPaddingX = parseInt(YAHOO.util.Dom.getStyle(bElementId,"padding-left"),parselenght);
var offsetFromstart = clickX - containerX - containerPaddingX;
YAHOO.util.Dom.setStyle(barId, "width", offsetFromstart + "px");
YAHOO.widget.MeVis.Bar.prototype.onMouseDown.call(this.activeSlider, e);
//this.setBarStyle(offsetFromstart, barId);
};
/**
* Factory method for creating a horizontal dual-thumb slider
* @for YAHOO.widget.Slider
* @method YAHOO.widget.Slider.getHorizDualSlider
* @static
* @param {String} bg the id of the slider's background element
* @param {String} minthumb the id of the min thumb
* @param {String} maxthumb the id of the thumb thumb
* @param {int} range the number of pixels the thumbs can move within
* @param {int} iTickSize (optional) the element should move this many pixels
* at a time
* @param {Array} initVals (optional) [min,max] Initial thumb placement
* @return {DualSlider} a horizontal dual-thumb slider control
*/
YAHOO.widget.Slider.getHorizSlider =
function (bg, minthumb, range, iTickSize, initVals) {
var mint;
var YW = YAHOO.widget, Slider = YW.Slider, Thumb = YW.SliderThumb;
mint = new Thumb(minthumb, bg, 0, range, 0, 0, iTickSize);
return new YW.Slider(new Slider(bg, bg, mint, "horiz"), range, initVals);
};