Add pagination feature #327

omares · 2019-03-13T17:29:41Z

Hey @jedrzejchalubek, i added the page navigation features as requested in #252

The syntax was slightly changed from the suggestion.

|> pages to the right
|< pages to the left

Additionally i added the waitForTransition flag which allows developers to decide if they want to create an artificial input delay or not.

Let me know what you think, ill gladly update the documentation when this features passes your requirements.

Todos

Fix pagination in combination with carousel

garygreen · 2019-03-13T17:55:04Z

Thanks so much for this Ota, great work! 👍

jedrzejchalubek · 2019-03-13T17:55:29Z

Wow, great 💯. Please, give me a few days to review it :)

garygreen · 2019-03-13T18:00:57Z

It's very elegantly coded, my only suggestion is maybe having this as more of a separate module which exposes the page number, total number of pages, etc.

Reason being is I believe this could be very useful in #241 #251 - if this was a component that you can interact .getPage() .getTotalPages() blah blah, it could then be used with the navigation/dots. At the moment this PR hard codes the calculations inside the move function. It could also then be optional so could be code-split if folks don't need pagination based controls/navigation.

But in any case this PR is already 💯

omares · 2019-03-13T21:01:15Z

Thanks for the quick response, really appreciated :)
I am currently adapting the overscroll feature of the pagination as it currently does not feel right when bound is deactivated.

@garygreen I agree with your ideas. My suggestion would be to tackle that in a different PR so that we can move one quickly with this one.

@jedrzejchalubek For the sake of testing i created a few demo implementations. Do you want me to commit these too? I created a gist in case you would like to take a preview.

The styles are copied from the official https://glidejs.com website 🙈

/edit

After toying around with my demo i found a few inconsistency that i fixed. Unfortunately the code becomes a bit more complex as bound is messing up the length index.

Besides that i have to take a look at the carousel mode and pagination. Right now i do not understand how to prevent the carousel from rewinding when exceeding the last element.

omares · 2019-03-14T11:20:02Z

@jedrzejchalubek please wait with your review, after investigating the carousel issue i found out that further changes in the code are required and other components, like Translate, have to be adapted too

/edit

@jedrzejchalubek could you please quickly tell me if the "countableSteps" feature in form of >$int and <$int is still something that should be supported? It is not showing up in the docs. If not i would also remove that.

jedrzejchalubek · 2019-03-15T10:37:40Z

@omares Ok, let me know :)

countableSteps are used by Swipe component to move more than one slide if we have a long swiping (https://github.com/glidejs/glide/blob/master/src/components/swipe.js#L141). For now, It should be still supported.

omares · 2019-03-19T00:01:19Z

That took longer than expected :)

Refactored the translate code.
- Fixed issue with gap calculation, you don't have to add random gap values anymore to receive the correct translate distance.
- Unified translate code. Moving left or right does not require individual calculations.
Refactored Run.calculate
- <, >, $steps<, >$steps, |< and |> now share the same code to move around, making the code easier to understand. This should also allow to easily add other navigation concepts.
- Added support for carousel pagination.

omares · 2019-03-19T09:58:09Z

@jedrzejchalubek Ready to review :)

omares · 2019-03-26T10:35:57Z

Hey @jedrzejchalubek is there anything i can do to make the review easier to you?

omares · 2019-04-12T20:02:21Z

@jedrzejchalubek not trying to be a pain in the ass, but any news here?

I would totally love to get this merged so i can remove this from my todo list :D Also this kinda prevents me from contributing more.

jedrzejchalubek · 2019-04-17T16:52:42Z

@omares I was a little busy over the past few weeks. Sorry about that :)

I hope I can make an appropriate review that this PR deserves the following weekend. One more time - great work!

Hey @jedrzejchalubek is there anything i can do to make the review easier to you?

The test are in place. That's all i wish for :)

… class

…alculating

jedrzejchalubek · 2019-04-20T21:22:12Z

@omares I have updated your PR with additional tests so I will be sure running behaves in the same manner as before. The Run component changes a lot, so I had to do that. Also, updated this PR with the latest changes on the master branch (some small bug fixes). Forgive me for these direct commits :)

I found a few edge cases that need to be addressed and behaviors that I want to behave differently. I will prepare and push you falling tests that you would need to get to the green. Are you ok with that workflow?

When we get this done, we will take care of refactorization to achieve better compression :)

…nsistently and as expected

jedrzejchalubek · 2019-04-21T18:47:51Z

Added regression test :) Here what I want to achieve:

I would like that new pattern was moving the slider between viewports rather than a number of slides defined in perView
We have to double the number of clones, because in carousel mode and rewind turned on, so we avoid seeing an empty space when looping and jumping translation

omares · 2019-04-26T07:21:28Z

Hey @jedrzejchalubek, awesome and thanks for taking care. I will look at the test!
Right now i am swamped :( hoping it wont take me to long.

omares · 2019-05-10T14:45:35Z

Hey @jedrzejchalubek do you mean viewport as in "number of slides" currently visible?

Edit: Never mind, figured it out and fixed it ;) Now onto the cloning behaviour.

omares · 2019-05-10T22:16:31Z

@jedrzejchalubek i fixed both issues.

Regarding the cloning behaviour i went a slightly different way. As it is about avoiding the emptiness i solved it by adding the required number of clones to prevent the space, instead of doubling it. As less is more for performance :)

jedrzejchalubek · 2019-05-13T15:43:05Z

Great! Going to give this a second review and we are ready to merge.

I'll take care of small refactoring later on :)

EvilLooney · 2019-05-29T02:24:01Z

@omares

I am testing out your commit and have to say it's working pretty well.

My only comment would be that it would be nice if the paging could be applied to "dragging" as well.

Great work!

omares · 2019-05-29T14:30:38Z

thanks @EvilLooney for the feedback. i really hope that @jedrzejchalubek finds time soon to finish this as the pr is already a few weeks old.

marcosmyara · 2019-06-01T07:35:59Z

@omares does this update mean once the slider is loaded (with no rewind option and focused on slide 0) there will be a glide__arrow--disabled class added to the left arrow button? and also the class will be added to the right arrow button once the slider reaches the end? Cause that is really what i am expecting, i hope i got it right from what i read here. thanks!

omares · 2019-06-03T08:30:21Z

@marcosmyara setting the appropriate disabled class is implemented in my second PR #328 which unfortunately is also pending.

vincent-lu · 2019-06-13T21:11:59Z

Hey guys any ETA on this one?

Round perView incrementer so there is a proper number of clones when we have an odd number of slides

Add tests for testing clones generation for `even` and `odd` number of `perView` option

jedrzejchalubek · 2019-06-20T13:34:29Z

I've made the final review and PR has been merged. 🎉🎉🎉

Thank you for your contribution @omares. Fantastic work :) v3.4 that includes this feature should be released within this week.

rockymountainhigh1943 · 2019-09-12T21:11:55Z

@jedrzejchalubek — is there a read on when this feature will be released?

GiancarlosIO · 2019-09-13T22:32:22Z

👀

Add pagination feature

d58f743

omares mentioned this pull request Mar 13, 2019

Make it easier to navigate by direction to next/prev "page" #252

Closed

Further improve pagination behaviour for slider

32f1496

omares force-pushed the add_pagination branch 2 times, most recently from 5db80b1 to a3a6afc Compare March 19, 2019 00:00

omares force-pushed the add_pagination branch from a3a6afc to 70b05af Compare March 19, 2019 00:02

Support carousel pagination, improve index and translate calculation

5156a02

omares force-pushed the add_pagination branch from 70b05af to 5156a02 Compare March 19, 2019 00:04

jedrzejchalubek added 6 commits April 20, 2019 20:54

tests(run): Add events() and go() tests

2a179ed

fix(run): Normalize step value to int

1ce121f

fix(controls): Check existence of control item before adding/removing…

3205b14

… class

Merge branch 'master' into add_pagination

03cf144

fix(run): Remove old execution of run.start and run.end events when c…

a433240

…alculating

feat(run): Warn about invalid direction pattern

ae1e894

test(run): Regression tests to enssure new viewport moving behaves co…

7f508b5

…nsistently and as expected

jedrzejchalubek added this to the 3.4.0 milestone Apr 26, 2019

jedrzejchalubek mentioned this pull request May 6, 2019

Small improvements #328

Merged

omares added 2 commits May 11, 2019 00:04

Increase cloning buffer and normalizee forward paging

c9cdbdd

Do not override dist files

4b3c27e

jedrzejchalubek added 3 commits June 20, 2019 14:28

fix(clones): Round perView incrementer

ded16d0

Round perView incrementer so there is a proper number of clones when we have an odd number of slides

test(clones): Test use case for number of clones

98a8076

Add tests for testing clones generation for `even` and `odd` number of `perView` option

style(): Fix linting error in carousel tests file

0fce544

jedrzejchalubek merged commit b32ea37 into glidejs:master Jun 20, 2019

jedrzejchalubek modified the milestones: 3.4.0, 4.0.0 Jul 7, 2019

leonGiftagram mentioned this pull request Aug 8, 2019

When is the next release with slide view pagination coming out? #400

Closed

xfra35 mentioned this pull request Oct 27, 2019

Scroll multiple slides #408

Open

SassNinja mentioned this pull request Apr 15, 2020

latest version on npmjs.com doesn't equal master branch #476

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add pagination feature #327

Add pagination feature #327

omares commented Mar 13, 2019 •

edited

garygreen commented Mar 13, 2019

jedrzejchalubek commented Mar 13, 2019

garygreen commented Mar 13, 2019 •

edited

omares commented Mar 13, 2019 •

edited

omares commented Mar 14, 2019 •

edited

jedrzejchalubek commented Mar 15, 2019

omares commented Mar 19, 2019

omares commented Mar 19, 2019

omares commented Mar 26, 2019

omares commented Apr 12, 2019

jedrzejchalubek commented Apr 17, 2019 •

edited

jedrzejchalubek commented Apr 20, 2019 •

edited

jedrzejchalubek commented Apr 21, 2019

omares commented Apr 26, 2019

omares commented May 10, 2019 •

edited

omares commented May 10, 2019

jedrzejchalubek commented May 13, 2019 •

edited

EvilLooney commented May 29, 2019

omares commented May 29, 2019

marcosmyara commented Jun 1, 2019

omares commented Jun 3, 2019

vincent-lu commented Jun 13, 2019

jedrzejchalubek commented Jun 20, 2019

rockymountainhigh1943 commented Sep 12, 2019

GiancarlosIO commented Sep 13, 2019

Add pagination feature #327

Add pagination feature #327

Conversation

omares commented Mar 13, 2019 • edited

Todos

garygreen commented Mar 13, 2019

jedrzejchalubek commented Mar 13, 2019

garygreen commented Mar 13, 2019 • edited

omares commented Mar 13, 2019 • edited

omares commented Mar 14, 2019 • edited

jedrzejchalubek commented Mar 15, 2019

omares commented Mar 19, 2019

omares commented Mar 19, 2019

omares commented Mar 26, 2019

omares commented Apr 12, 2019

jedrzejchalubek commented Apr 17, 2019 • edited

jedrzejchalubek commented Apr 20, 2019 • edited

jedrzejchalubek commented Apr 21, 2019

omares commented Apr 26, 2019

omares commented May 10, 2019 • edited

omares commented May 10, 2019

jedrzejchalubek commented May 13, 2019 • edited

EvilLooney commented May 29, 2019

omares commented May 29, 2019

marcosmyara commented Jun 1, 2019

omares commented Jun 3, 2019

vincent-lu commented Jun 13, 2019

jedrzejchalubek commented Jun 20, 2019

rockymountainhigh1943 commented Sep 12, 2019

GiancarlosIO commented Sep 13, 2019

omares commented Mar 13, 2019 •

edited

garygreen commented Mar 13, 2019 •

edited

omares commented Mar 13, 2019 •

edited

omares commented Mar 14, 2019 •

edited

jedrzejchalubek commented Apr 17, 2019 •

edited

jedrzejchalubek commented Apr 20, 2019 •

edited

omares commented May 10, 2019 •

edited

jedrzejchalubek commented May 13, 2019 •

edited