Infinite number of tiles

ovidiuch / dragdealer

Drag-based vanilla JS component

http://ovidiuch.github.io/dragdealer

MIT License

1.05k stars 149 forks source link

Infinite number of tiles #114

Closed asdf23 closed 8 years ago

asdf23 commented 8 years ago

Is it possible to have a non-ending list of tiles (I'm building a calendar)? In the demo with the car it would be great if I could dynamically add a tile after the first/last slide is reached.

By "tile" I mean the sort of sticky area where the scrolling stops. In the car demo each car would be what I'm calling a "tile".

ovidiuch commented 8 years ago

It is theoretically possible, but you'd need to understand the internals of the lib. I can't say I have the clear picture in my head, but you can

listen to when the dragging gets close to an edge,
mutate the dom and re-init dragdealer,
calculate the new offset using cross multiplication, based on the entire new vs previous size and the size of the added element
... and theoretically the user wouldn't notice anything, provided that the drag events are still active

Good luck! (Or maybe find a tool that does this out of the box)

asdf23 commented 8 years ago

What about.. onDragStop, change dom, dragDealerObj("destroy"), new DragDealer() ?

asdf23 commented 8 years ago

Actually I got it to work.. I'm using SVG not HTML I had to change the code a little bit. The two biggest changes were changing string manipulation of className to using classList as an array. And second to change how boundaries were calculated using getBBox and removing offsetHeight and sometimes availHeight. I didn't do much past that, it just works. I'm not exactly sure why. I've got a def with 3 use'es left right center. The down click resets the translateX to the center tile (again not my code). It works great, but now I have to tie in my content over the calendar. I noticed that there isn't a onDragStop that fires when the animation stops. I also see that every mouse click slides the tiles.. that is troublesome. I wonder if it's possible to not use the animation, or to use the animation only when needed..

asdf23 commented 8 years ago

I don't get what is going on in animateWithRequestAnimationFrame line this.interval = this.requestAnimationFrame(this.animateWithRequestAnimationFrame); This is called multiple times. I would think you'd want animate() called multiple times but not this line.

asdf23 commented 8 years ago

I see whats going on here, perhaps I should open another issue. There are events and methods that are hooked/called when they need not be. Perhaps it's not much of an issue but if you consider performance of the page, battery life, and interopability with other events under the same dom objects it becomes an issue. For instance there is no need to track mouse/touch movements if there was no click/touch, no mathimatical calculation is needed during a time when there is nothing to animate. I could clone your repo and post my version but i removed portions that would make it backwards compatible. Also i see you've altered the license. I'm not sure what is up with that.

ovidiuch commented 8 years ago

For instance there is no need to track mouse/touch movements if there was no click/touch, no mathimatical calculation is needed during a time when there is nothing to animate. I could clone your repo and post my version but i removed portions that would make it backwards compatible.

Feel free to propose any improvements to the current code.

Also i see you've altered the license. I'm not sure what is up with that.

What do you mean? The license hasn't changed since it was added initially in 2014.

asdf23 commented 8 years ago

I don't have anything to add to the suggestions. I'll post a version of it when I have the bugs worked out however I did not attempt to keep backwards compatibility or attempt to handle HTML.

By "license" I mean the file header explaining the license, first 10 lines or so. You can see it in your own history.