mousescroll handler and next and prev functionality

[shobson]

Was wondering if its possible to have the next/prev buttons have the scrollbar functionality, where as of right now if there user scrolls up/down one mousewheel it animates to one cell at a time (left aligned), unlike how it is handled now with the next and prev buttons using the active class to transition through. Ideally I'd like to be able to have the same functionality if I were to click the next/prev buttons as the mousescroll.

Just wondering if this is possible with adjusting the sly.js file or if I should just use my own jquery to handle this.

[mparisi76]

I'm also looking for this functionality but have been unable to get it to work out of the box. Any information on how I can accomplish this? I basically need the forward/backward scrolling buttons to also act as single item navigation if the user lets go of them quickly. I was trying to find the spot in sly.js which deals with the threshold of movement which determines if the slidee moves forward or reverse. It seems by default to scroll to about half way through an item before it will advance to the next item. Anything less than half will retreat back to the original position.

[darsain]

Well, implement it yourself than. When user mosedowns on next button, it'll start moving, if he mouseups it'll stop, but when the mousedown lasted below a certain time threshold, you'll trigger next slide.

If I'l get to rewriting Sly finally, I'll most definitely remove all convenient bindings, meaning options like forward, backward, prev, next, prevPage, nextPage, ... will be gone and you'll have to use Sly API to implement them yourself.

[mparisi76]

That's a good idea to leave the implementation of those to the developer. I've spent hours trying to figure out where in the code deals with whether or not to update the slidee position to the next item or back to the previous item based on how long the user has held down the mouse button. I've messed with slideTo(), render(), getPos(), and others. I just can't figure out where the logic is when the user let's go of the mouse button that tells the slidee to move forward or revert back. Can you give me a little hint?

[darsain]

You don't need that at all. Here is the general idea:

var sly = new Sly(frame, options).init();

var fwdButton = document.querySelector('.forward');
var pressThreshold = 300; // button press shorter than this triggers item nav method
var moveStart;

fwdButton.addEventListener('mousedown', function () {
  moveStart = +new Date();
  sly.moveBy(300); // move forwards with speed of 300px per second
});

fwdButton.addEventListener('mouseup', function () {
  sly.stop(); // stop continuous movement
  if (+new Date() - moveStart > pressThreshold) {
    sly.toStart(sly.rel.firstItem + 1); // if user just pressed the button, navigate to the next item
  }
});

And similar for "previous button".

[mparisi76]

Thanks for that, it helps a ton. Unfortunately, I changed the pressThreshold to 10 and I've inspected the toStart() method when just pressing the "next" button, the item parameter is 1 as expected, however the slidee still slides back to its original position. Is there something else I need to look at?

[darsain]

Yeaaah, .stop() is actually asynchronous and kicks in next animation frame. I'm not gonna trace what's actually happening when you do .toStart() right after .stop() right now. Instead I'd suggest you to just bump up the moveBy speed into something usable so the slide back when item alignment kicks in won't be an issue. Having slow moveBy speed is annoying anyway :)

Sly is currently a little bit of a mess as it is trying to solve a lot of problems at once. I need to rewrite it, and split it into multiple libraries, or at least shave off bunch of stuff.

[mparisi76]

That did it! Well, kind of. It's a little jumpy but definitely works better. I appreciate your time with this. I know how it is to have projects on the side, especially ones that require support. It's a great little library, I hope to see it reach a next generation. Thanks again.