TangibleInc / template-system

A template system for WordPress with content type loops and conditions
https://docs.loopsandlogic.com/reference/template-system/
8 stars 3 forks source link

Support looping through total number of pages to create any number of buttons #61

Open eliot-akira opened 9 months ago

eliot-akira commented 9 months ago
<Loop type=paginate_pages>
  <li><PaginateButton type=page page="{Get loop=count}">Page <Get loop=count /></PaginateButton><li>
</Loop>

Ideas for syntax and different types of pagination buttons

<PaginateButtons name=loop_name>     
  <PaginateButton type=first />
  <PaginateButton type=previous><i class="chevron-left"></i> Previous Page</PaginateButton>
  <ul>
    <Loop type=paginate_pages>
      <li><PaginateButton type=page>Page <Get loop=count /></PaginateButton><li>
    </Loop>
  </ul>
  <PaginateButton type=next />
  <PaginateButton type=last>My last page text</PaginateButton>
</PaginateButtons>
<!-- Defining a unique loop name for pagination (and maybe other things eventually?) to reference -->
<Loop type=post paged=5 loop_name=my_loop>
  Loop contents
</Loop>

<!-- Display types of pagination buttons. Note that all of these would output the same thing -->

<Paginate name=my_loop> <!-- Manual approach -->
  <PaginateButton name=first_page />
  <PaginateButton name=previous_pages count="1" separator="..." />
  <PaginateButton name=current_page />
  <PaginateButton name=next_pages count="1" separator="..." />
  <PaginateButton name=last_page />
</Paginate>

<Paginate my_loop> <!-- New recommended shorthand default -->
  <PaginateButton default />
</Paginate>

<PaginateButtons /> <!-- Deprecated -->

<!-- "Looping" through all pages. Note both of these would display the same thing -->

<Paginate my_loop>
  <PaginateButton all_pages />
</Paginate>

<Paginate my_loop>
  <PaginateButton previous_pages />
  <PaginateButton current_page />
  <PaginateButton next_pages />
</Paginate>

<!-- Changing the content within pagination button -->

<Paginate my_loop>
  <PaginateButton previous_button>
    <i class="chevron-left"></i> Previous Page
  </PaginateButton>
  <PaginateButton all_pages>
    Page <Get loop=current_page /> (Or just <Field page_number /> though it's not really a field)
  </PaginateButton>
  <PaginateButton next_button>
    <i class="chevron-right"></i> Next Page
  </PaginateButton>
</Paginate>

<!-- Some funky chunky use cases by a guy who doesn't know frontend stuff yet -->

<Paginate name=my_loop>
  G
  <PaginateButton name=previous_pages count=5>o</PaginateButton>
  <PaginateButton name=current_page><strong>o</strong></PaginateButton>
  <PaginateButton name=next_pages count=5>o</PaginateButton>
  gle
</Paginate>

<Paginate my_loop>
  <PaginateButton previous_button />
  <PaginateButton previous_pages count="3">
    <span class="gallery-pagination">•</span>
  </PaginateButton>
  <PaginateButton current_page>
    <span class="gallery-pagination active">•</span>
  </PaginateButton>
  <PaginateButton next_pages count="3">
    <span class="gallery-pagination">•</span>
  </PaginateButton>
  <PaginateButton next_button />
</Paginate>

<!-- A load-more button -->

<Paginate my_loop>
  <PaginateButton load_more />
</Paginate>