Complex Pagination using Newer/Older with Shift

jakob · 2020-05-29 08:19:05

philwareham wrote #323392:

Note to self: we should write a blog article for this once Textpattern 4.8.1 ships – detailing Michael’s original code and the other updates from all here. Very handy!

Maybe I can ask Michael to incorporate these in a new article for txptips?

philwareham · 2020-05-29 08:20:45

jakob wrote #323394:

Maybe I can ask Michael to incorporate these in a new article for txptips?

OK, sure – that makes sense. Basically as long as the solution is detailed somewhere that’s helpful for future reference (things in the forum get a bit buried after a few months, naturally).

Bloke · 2020-05-29 08:28:17

Slightly OT but I was thinking of starting a series of short blog articles on .com prefixed with Feature focus:. I penned one yesterday (currently draft) on pageless sections and a little mention of the multi-edit tool’s ability to set them.

If anybody would like to write or propose an article for this series that focuses on a particular aspect of 4.8.x then please drop it to one of us. It could go hand-in-hand with a txptip.

michaelkpate · 2020-05-29 13:06:16

jakob wrote #323394:

Maybe I can ask Michael to incorporate these in a new article for txptips?

I will try to whip something up this weekend. I’ve been following the discussion.

philwareham · 2020-10-13 08:16:25

Hi, just reviving this old thread with a new question.

OK, so I had this pagination code working fine on a few sites:

<txp:pages pg link="" showalways="2" evaluate="5,2,8,4,6">
    <nav class="paginator" aria-label="Page navigation">
        <txp:newer showalways><a rel="prev" href="<txp:yield item="url" />">Previous</a></txp:newer>
        <ul class="pagination">
            <txp:newer shift><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:newer>
            <txp:newer shift="-2"><li role="separator" aria-label="More pages">…</li></txp:newer>
            <txp:newer total shift="2"><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:newer>
            <txp:pages><li class="current"><b title="Current page" aria-current="page"><txp:yield item="page" /></b></li></txp:pages>
            <txp:older total shift="2"><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:older>
            <txp:older shift="-2"><li role="separator" aria-label="More pages">…</li></txp:older>
            <txp:older shift><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:older>
        </ul>
        <txp:older showalways><a rel="next" href="<txp:yield item="url" />">Next</a></txp:older>
    </nav>
</txp:pages>

But now I want to use that for a theme I’m creating for Textpattern, so I’d changed the various hardcoded texts in the above with actual <txp:text /> tags for multilingual use. Like so:

<txp:pages pg link="" showalways="2" evaluate="5,2,8,4,6">
    <nav class="paginator" aria-label="<txp:text item="page_nav" />">
        <txp:newer showalways><a rel="prev" href="<txp:yield item="url" />"><txp:text item="prev" /></a></txp:newer>
        <ul class="pagination">
            <txp:newer shift><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:newer>
            <txp:newer shift="-2"><li role="separator" aria-label="<txp:text item="more_pages" />">…</li></txp:newer>
            <txp:newer total shift="2"><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:newer>
            <txp:pages><li class="current"><b aria-current="page"><txp:yield item="page" /></b></li></txp:pages>
            <txp:older total shift="2"><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:older>
            <txp:older shift="-2"><li role="separator" aria-label="<txp:text item="more_pages" />">…</li></txp:older>
            <txp:older shift><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:older>
        </ul>
        <txp:older showalways><a rel="next" href="<txp:yield item="url" />"><txp:text item="next" /></a></txp:older>
    </nav>
</txp:pages>

And now the pagination code is pretty broken. I think it may be to do with the evaluate attribute and maybe it’s evaluating the text tags as well – but I’m not clever enough to work out how the evaluation works here anyway (I used Oleg’s code examples to make the pagination in the first place, and I admit I don’t really know how the nuts and bolts of this work).

Any suggestions on how to fix greatly appreciated.

Bloke · 2020-10-13 08:27:24

The numbers in evaluate are the ‘positions’ of the tags inside the container that you want to evaluate, in the order you want them to be executed. In the original, the 5th top-level child <txp: tag (the <txp:pages> in the middle) was executed first. Then the 2nd (the first <txp:newer> inside the <ul>) and so forth.

When you introduced <txp:text> above those in the outer <nav>, you’ve pushed all the numerical indexes down by one. The other <txp:text> tags are all attributes inside other tags, so don’t count in the indexing, because they’re not direct descendants (first-child) tags of the tag that has the evaluate attribute.

I reckon if you add one to all the numbers in the evaluate tag, it’ll work again.

Last edited by Bloke (2020-10-13 08:30:22)

philwareham · 2020-10-13 08:46:26

Ah, OK thanks – well that was easy (it’s fixed now).

For reference this is the working code:

<txp:pages pg link="" showalways="2" evaluate="6,3,9,5,7">
    <nav class="paginator" aria-label="<txp:text item="page_nav" />">
        <txp:newer showalways><a rel="prev" href="<txp:yield item="url" />"><txp:text item="prev" /></a></txp:newer>
        <ul class="pagination">
            <txp:newer shift><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:newer>
            <txp:newer shift="-2"><li role="separator" aria-label="<txp:text item="more_pages" />">…</li></txp:newer>
            <txp:newer total shift="2"><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:newer>
            <txp:pages><li class="current"><b aria-current="page"><txp:yield item="page" /></b></li></txp:pages>
            <txp:older total shift="2"><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:older>
            <txp:older shift="-2"><li role="separator" aria-label="<txp:text item="more_pages" />">…</li></txp:older>
            <txp:older shift><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:older>
        </ul>
        <txp:older showalways><a rel="next" href="<txp:yield item="url" />"><txp:text item="next" /></a></txp:older>
    </nav>
</txp:pages>

etc · 2020-10-14 07:25:27

Bloke wrote #326347:

When you introduced <txp:text> above those in the outer <nav>, you’ve pushed all the numerical indexes down by one.

Would introducing some ignore attribute be handy? Generally, tags like <txp:text /> output something, so testing them for emptiness is useless.

Edit: though, for positional tags this could be confusing.

philwareham · 2020-10-14 07:27:43

etc wrote #326369:

Would introducing some ignore attribute be handy? Generally, tags like <txp:text /> output something, so testing them for emptiness is useless.

Seems like a good idea.

etc · 2020-10-14 07:29:11

philwareham wrote #326370:

Seems like a good idea.

Ok, to think about.

phiw13 · 2020-10-14 07:39:48

etc wrote #326369:

Would introducing some ignore attribute be handy? Generally, tags like <txp:text /> output something, so testing them for emptiness is useless.

Edit: though, for positional tags this could be confusing.

Hmm… not dismissing this out of hand, but doesn’t this introduce yet another cognitive complexity on the end-users side ? (I mean, already phil got slightly lost in deciding what is been evaluated in the code above, I fear an ignore attribute may run into similar problems)

etc · 2020-10-14 08:13:06

phiw13 wrote #326372:

Hmm… not dismissing this out of hand, but doesn’t this introduce yet another cognitive complexity on the end-users side ?

It does. An easier (end-user wise) option might be some global order attribute that alters the order the tags are processed in inside each block. Code-wise it’s another story, though…

etc · 2020-10-16 10:36:47

etc wrote #326374:

An easier (end-user wise) option might be some global order attribute that alters the order the tags are processed in inside each block.

Finally done, via a new <txp:tag[n] /> syntax, to be approved/chosen by the community:

<!-- copy the whole block -->
<txp:variable name="test" add output /> (outputs 6)
<txp:variable[2] name="test" output>5</txp:variable> (outputs 5)
<txp:variable[1] name="test" add output /> (outputs 1)

etc · 2020-10-16 11:34:07

etc wrote #326433:

Finally done, via a new <txp:tag[n] /> syntax, to be approved/chosen by the community:

Which means Phil can set the tags processing priority independently of addition/deletion another tags:

<txp:pages pg link="" showalways="2">
    <nav class="paginator" aria-label="<txp:text item="page_nav" />">
        <txp:newer showalways><a rel="prev" href="<txp:yield item="url" />"><txp:text item="prev" /></a></txp:newer>
        <ul class="pagination">
            <txp:newer[2] shift><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:newer>
            <txp:newer shift="-2"><li role="separator" aria-label="<txp:text item="more_pages" />">…</li></txp:newer>
            <txp:newer[3] total shift="2"><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:newer>
            <txp:pages[1]><li class="current"><b aria-current="page"><txp:yield item="page" /></b></li></txp:pages>
            <txp:older[3] total shift="2"><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:older>
            <txp:older shift="-2"><li role="separator" aria-label="<txp:text item="more_pages" />">…</li></txp:older>
            <txp:older[2] shift><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:older>
        </ul>
        <txp:older showalways><a rel="next" href="<txp:yield item="url" />"><txp:text item="next" /></a></txp:older>
    </nav>
</txp:pages>

philwareham · 2020-10-16 11:36:53

Thanks Oleg – is this method less taxing on resources than using the evaluate method – or it is negligible difference?

Textpattern CMS support forum

#31 2020-05-29 08:19:05

Re: Complex Pagination using Newer/Older with Shift

philwareham wrote #323392:

#32 2020-05-29 08:20:45

Re: Complex Pagination using Newer/Older with Shift

jakob wrote #323394:

#33 2020-05-29 08:28:17

Re: Complex Pagination using Newer/Older with Shift

#34 2020-05-29 13:06:16

Re: Complex Pagination using Newer/Older with Shift

jakob wrote #323394:

#35 2020-10-13 08:16:25

Re: Complex Pagination using Newer/Older with Shift

#36 2020-10-13 08:27:24

Re: Complex Pagination using Newer/Older with Shift

#37 2020-10-13 08:46:26

Re: Complex Pagination using Newer/Older with Shift

#38 2020-10-14 07:25:27

Re: Complex Pagination using Newer/Older with Shift

Bloke wrote #326347:

#39 2020-10-14 07:27:43

Re: Complex Pagination using Newer/Older with Shift

etc wrote #326369:

#40 2020-10-14 07:29:11

Re: Complex Pagination using Newer/Older with Shift

philwareham wrote #326370:

#41 2020-10-14 07:39:48

Re: Complex Pagination using Newer/Older with Shift

etc wrote #326369:

#42 2020-10-14 08:13:06

Re: Complex Pagination using Newer/Older with Shift

phiw13 wrote #326372:

#43 2020-10-16 10:36:47

Re: Complex Pagination using Newer/Older with Shift

etc wrote #326374:

#44 2020-10-16 11:34:07

Re: Complex Pagination using Newer/Older with Shift

etc wrote #326433:

#45 2020-10-16 11:36:53

Re: Complex Pagination using Newer/Older with Shift

Board footer