Complex Pagination using Newer/Older with Shift

michaelkpate · 2020-02-12 00:21:14

Pat64 wrote #321616:

Just a little improvment for your site demo, change styles by these ones instead:

I mixed what you did here with Phil’s original CSS – probably in a terrible way – but it adds some cool effects.

Thanks for the assist.

Pat64 · 2020-02-12 06:16:52

Super cool, Michael! (I added a support for small screens into the styles above)

Last edited by Pat64 (2020-02-12 07:22:34)

philwareham · 2020-02-13 09:20:54

I’ve recently found out the line:

<li class="active"><txp:newer shift="0" link=""><span aria-label="current page"><txp:yield item="page" /></span></txp:newer></li>

Would be more accessible as:

<li class="active"><txp:newer shift="0" link=""><span aria-current="page"><txp:yield item="page" /></span></txp:newer></li>

phiw13 · 2020-02-17 06:09:34

This is interesting and works well for my needs —with the modification to use aria-current="page" as suggested above and my own classes and styling logic. But beat me if I understand what is going one v:–(.

Perhaps a stupid question but could you explain the evaluate logic in your <txp:pages evaluate="5,2,8,4,6" pg> ? This may help me understand better how those navigation constructions actually work. Tia.

michaelkpate · 2020-02-17 21:21:05

phiw13 wrote #321694:

This is interesting and works well for my needs —with the modification to use aria-current="page" as suggested above and my own classes and styling logic. But beat me if I understand what is going one v:–(.

Perhaps a stupid question but could you explain the evaluate logic in your <txp:pages evaluate="5,2,8,4,6" pg> ? This may help me understand better how those navigation constructions actually work. Tia.

I added a much more extensive explanation but basically there are 9 lines in the code with either newer or older – so by adding evaluate we are saying do line 5, then line 2, then line 8, then 4, and then 6 – and then 1, 3, 7, 9 in order. Without this, you would need all the complicated structures I had in the original pagination-master – this simple but ultra-powerful change condenses 9 different possibilities down to 1.

And yes, styling and classes will vary. I have been working on a port of Typerite and for pagination the default template uses

             <div class="row">
                <div class="column large-full">
                    <nav class="pgn">
                        <ul>
                            <li><a class="pgn__prev" href="#0">Prev</a></li>
                            <li><a class="pgn__num" href="#0">1</a></li>
                            <li><span class="pgn__num current">2</span></li>
                            <li><a class="pgn__num" href="#0">3</a></li>
                            <li><a class="pgn__num" href="#0">4</a></li>
                            <li><a class="pgn__num" href="#0">5</a></li>
                            <li><span class="pgn__num dots">…</span></li>
                            <li><a class="pgn__num" href="#0">8</a></li>
                            <li><a class="pgn__next" href="#0">Next</a></li>
                        </ul>
                    </nav>
                </div>
            </div>

which is certainly doable but is taking a bit of modification.

phiw13 · 2020-02-17 22:07:37

Thanks, I start to see the light on the working of this.

For your Typerite navigation bar, you should be able to add those classes to the <span />s you already have in your code with the same effect I think.

michaelkpate · 2020-02-19 00:11:44

This is what I came up with for Typerite – a bit convoluted but it seems to be working.

<txp:variable name="lastpage" value='<txp:older shift="-1" link="" showalways="1"><txp:yield item="page" /></txp:older>' />

<txp:pages pg="pg" evaluate="5,2,8,4,6">
            <div class="row">
                <div class="column large-full">
                    <nav class="pgn">
                        <ul>
                            <txp:evaluate test="newer"><li><a class="pgn__prev" href="<txp:newer shift="1" showalways />"><span aria-label="Go to previous page">Prev</span></a></li></txp:evaluate>
                            <txp:evaluate test="newer"><li><a class="pgn__num" href="<txp:newer shift />"><span aria-label="Go to first page">1</span></a></li></txp:evaluate>
                            <txp:evaluate test="newer"><li class="separator"><txp:newer shift="-2" link="" break=""><span role="separator" aria-label="More pages" class="pgn__num dots">…</span></txp:newer></li></txp:evaluate>
                            <txp:newer shift="1" break="li"><span class="pgn__num" aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></span></txp:newer>
                            <txp:newer shift="0" link="" break="li"><span class="pgn__num current" aria-current="page"><txp:yield item="page" /></span></txp:newer>
                            <txp:older shift="1" break="li"><span class="pgn__num" aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></span></txp:older>
                            <txp:evaluate test="older"><li class="separator"><txp:older shift="-2" link="" break=""><span role="separator" aria-label="More pages" class="pgn__num dots">…</span></txp:older></li></txp:evaluate>
                            <txp:evaluate test="older"><li><a class="pgn__num" href="<txp:older shift />"><span aria-label="Go to last page"><txp:variable name="lastpage" /></span></a></li></txp:evaluate>
                            <txp:evaluate test="older"><li><a class="pgn__next" href="<txp:older shift="1" showalways />"><span aria-label="Go to next page">Next</span></a></li></txp:evaluate>
                        </ul>
                    </nav>
                </div>
            </div>
</txp:pages>

The main difference was that I hard-coded 1 for the first page and used a previously-set variable for the last page so that I only had to use newer/older once per line – I needed to use it as a single tag for the url. I thought perhaps I could use txp:page_url but that only returns the current page.

singaz · 2020-04-15 16:13:36

Used version Textpattern 4.8

I am using code like this:

<txp:if_article_list>
	<txp:if_category>
		<txp:article form="article_list_category"/>
	<txp:else />
		<txp:if_author>
			<txp:article_custom form="article_list_author"/>
		<txp:else />
			<txp:if_section>
				<txp:article form="article_list_section"/>
			</txp:if_section>
		</txp:if_author>
	</txp:if_category>
<nav class="navigation">
<txp:older><txp:text item="older" /></txp:older>
<txp:newer><txp:text item="newer" /></txp:newer>
</nav>
<txp:else />
<txp:article />
</txp:if_article_list>

When I am in the place of the “author”, pagination does not work.

Question: in the <txp: if_author> </ txp: if_author> section, should pagination work or not? I have not used it before and I do not know how to use it correctly.

P.S.
<txp: if_author> </ txp: if_author> is this section or category …?

etc · 2020-04-15 20:08:18

singaz wrote #322607:

When I am in the place of the “author”, pagination does not work.

Question: in the <txp: if_author> </ txp: if_author> section, should pagination work or not? I have not used it before and I do not know how to use it correctly.

The problem is probably not <txp:if_author /> but <txp:article_custom />. Try with <txp:article /> instead?

singaz · 2020-04-15 21:38:31

Yes! <txp: article /> works as it should!

The correct code is:

<txp:if_author>
	<txp:article form="article_list_author"/>
</txp:if_author>

My inattention and subtleties of work <txp: article /> and <txp: article_custom />.

Thank you Oleg!

hilaryaq · 2020-05-04 11:53:27

Super cool thanks for this @michaelkpate! :)

phiw13 · 2020-05-27 08:44:55

Heads up for anyone having issues with displaying the current page item with the code discussed in this thread (the line containing txp:newer shift="0"), see this thread instead.

Textpattern CMS

Textpattern CMS support forum

#13 2020-02-12 00:21:14

Re: Complex Pagination using Newer/Older with Shift

Pat64 wrote #321616:

#14 2020-02-12 06:16:52

Re: Complex Pagination using Newer/Older with Shift

#15 2020-02-13 09:20:54

Re: Complex Pagination using Newer/Older with Shift

#16 2020-02-17 06:09:34

Re: Complex Pagination using Newer/Older with Shift

#17 2020-02-17 21:21:05

Re: Complex Pagination using Newer/Older with Shift

phiw13 wrote #321694:

#18 2020-02-17 22:07:37

Re: Complex Pagination using Newer/Older with Shift

#19 2020-02-19 00:11:44

Re: Complex Pagination using Newer/Older with Shift

#20 2020-04-15 16:13:36

Re: Complex Pagination using Newer/Older with Shift

#21 2020-04-15 20:08:18

Re: Complex Pagination using Newer/Older with Shift

singaz wrote #322607:

#22 2020-04-15 21:38:31

Re: Complex Pagination using Newer/Older with Shift

#23 2020-05-04 11:53:27

Re: Complex Pagination using Newer/Older with Shift

#24 2020-05-27 08:44:55

Re: Complex Pagination using Newer/Older with Shift

Board footer