in partnership with mediatemple

Ticket #909 (new defect)

Opened 2 months ago

Last modified 2 weeks ago

Slider: onComplete() is fired before onTick()

Reported by: lebowski Owned by:
Type: defect Priority: minor
Milestone: Mootools version 1.2 Component: Plugins
Keywords: Cc:

Description

When clicking the knob, the 'onComplete' event is fired before 'onTick'.
I thing, 'onComplete' should be fired when you are done dragging.
You can find this in the beta docs:
onComplete - Fire when you're done dragging.

When you use the slider, you the following events are fired:

        (mousedown)
        onComplete
        onTick
        (mouseup)
        onComplete

JS:

var slider = new Slider('myElement','myKnob', {
  steps: 100,
  wheel: false,
  onTick: function(pos){
    console.log('onTick');
  },
  onComplete: function(step){
    console.log('onComplete');
  }
});

HTML:

<div id="myElement">
  <div id="myKnob"></div>
</div>

Used software: MooTools r1502, Firefox 2.x / Safari 3.x
An example of this problem can be found under:
http://dev.mixable.de/slider-test.html

Change History

Changed 2 weeks ago by seventhapex

I believe this is because Slider is registering a "mouseup" event on the track even when clicking on the knob. I believe a simple fix would be to change the Slider.track.addEvent('mouseup') event to a "click" event;

FROM:

this.element.addEvent('mouseup', this.clickedElement.bind(this));

TO:

this.element.addEvent('click', this.clickedElement.bind(this));

Changed 2 weeks ago by seventhapex

sorry.. that's the "mousedown" event that should be replaced.

Changed 2 weeks ago by seventhapex

That diddn't work either... But this does the trick;

this.element.addEvent('mousedown', this.clickedElement.bind(this));

		// keep track from firing the 'mousedown' event if the knob has been hovored
		this.knob.addEvent('mouseenter',function(){
  		this.element.removeEvents('mousedown');
		}.bind(this));
		this.knob.addEvent('mouseleave',function(){
  		this.element.addEvent('mousedown', this.clickedElement.bind(this));
		}.bind(this));
Note: See TracTickets for help on using tickets.