Pagination prev , next button set class istead of removing

[Lefthandmedia]

When the Next or Previous button in pagination are not wanted they are not rendered. This results in a shift of the whole pagination component. I'd prefer it when a class='disabled' is set so i can just make 'm invisible instead of removing them from the DOM. This gives me the posibilitie of preventing this shift in layout in my custom styling.

[anttiai]

Hey, this can be easily implemented with a custom handlebars template. The default template hides the Previous and Next buttons, but a template like this would add the disabled CSS class to the buttons:

var customPaginationTemplate = `
  <div class="addsearch-pagination">
    <button data-page="previous" aria-label="Previous page" {{#equals currentPage 1}}class="disabled"{{/equals}}>❮</button>
    {{#each pages}}
      <button data-page="{{this}}" aria-label="Go to results page {{this}}" {{#equals ../currentPage this}}data-active="true" aria-current="true"{{/equals}}>
        {{this}}
      </button>
    {{/each}}
    <button data-page="next" aria-label="Next page" {{#equals currentPage lastPage}}class="disabled"{{/equals}}>❯</button>
  </div>
`;

searchui.pagination({
  containerId: 'pagination',
  template: customPaginationTemplate
});

The code above is proof of concept and might require further tweaking. Full handlebars documentation can be found at handlebarsjs.com.

All Search UI components have overridable templates. That makes the library very flexible!

[Lefthandmedia]

tnx. that works