templates/_pagination.html.twig line 1

Open in your IDE?
  1. {#
  2. /**
  3.  * @file
  4.  * Twitter Bootstrap v4-beta.2 Sliding pagination control implementation.
  5.  *
  6.  * View that can be used with the pagination module
  7.  * from the Twitter Bootstrap CSS Toolkit
  8.  * https://getbootstrap.com/docs/4.0/components/pagination/
  9.  *
  10.  */
  11. #}
  12. {% macro _pagination_path(route, query, pageParameterName, page_number) %}{% if page_number == 1 %}{% set _route = route %}{% set _query = query|filter((v, k) => k != pageParameterName) %}{% else %}{% set _route = route~'._pagination' %}{% set _query = query|merge({(pageParameterName): page_number}) %}{% endif %}{{ path(_route, _query)|lower }}{% endmacro %}
  14. {% from _self import _pagination_path %}
  15. <div class="mb-4" id="pagination_container">
  16. {% if pageCount > 1 %}
  17.     <nav class="pagination-content d-flex" id="pagination-content">
  18.         {% set classAlign = (align is not defined) ? '' : align=='center' ? ' justify-content-center' : (align=='right' ? ' justify-content-end' : '') %}
  19.         {% set classSize = (size is not defined) ? '' : size=='large' ? ' pagination-lg' : (size=='small' ? ' pagination-sm' : '') %}
  20.         <ul class="pagination{{ classAlign }}{{ classSize }} d-flex-c">
  22.             <li class="pagination-item pagination-item--prev d-flex-c">
  23.                 {% if previous is defined %}
  24.                 <a class="pagination-link d-flex-c" rel="prev" href="{{ _pagination_path(route, query, pageParameterName, 1) }}">
  25.                 {% else %}
  26.                 <span class="pagination-link d-flex-c disable">
  27.                 {% endif %}
  28.                     <svg width="24" height="25" fill="none"><path d="m18.705 17.208-4.58-4.59 4.58-4.59-1.41-1.41-6 6 6 6 1.41-1.41Z"/><path d="m12.705 17.208-4.58-4.59 4.58-4.59-1.41-1.41-6 6 6 6 1.41-1.41Z"/></svg>
  29.                 {% if previous is defined %}
  30.                 </a>
  31.                 {% else %}
  32.                 </span>
  33.                 {% endif %}
  34.             </li>
  36.             {# Previous #}
  37.             <li class="pagination-item pagination-item--prev d-flex-c">
  38.                 {% if previous is defined %}
  39.                 <a class="pagination-link d-flex-c" rel="prev" href="{{ _pagination_path(route, query, pageParameterName, previous) }}">
  40.                 {% else %}
  41.                 <span class="pagination-link d-flex-c disable">
  42.                 {% endif %}
  43.                     <svg width="24" height="25" fill="none"><path d="m15.705 17.208-4.58-4.59 4.58-4.59-1.41-1.41-6 6 6 6 1.41-1.41Z"/></svg>
  44.                 {% if previous is defined %}
  45.                 </a>
  46.                 {% else %}
  47.                 </span>
  48.                 {% endif %}
  49.             </li>
  51.             {% if startPage > 1 %}
  52.                 <li class="pagination-item d-flex-c">
  53.                     <a class="pagination-link d-flex-c" href="{{ _pagination_path(route, query, pageParameterName, 1) }}">1</a>
  54.                 </li>
  55.                 {% if startPage == 3 %}
  56.                     <li class="pagination-item d-flex-c">
  57.                         <a class="pagination-link d-flex-c" href="{{ _pagination_path(route, query, pageParameterName, 2) }}">2</a>
  58.                     </li>
  59.                 {% elseif startPage != 2 %}
  60.                     <li class="pagination-item d-flex-c disabled">
  61.                         <span class="pagination-link d-flex-c">&hellip;</span>
  62.                     </li>
  63.                 {% endif %}
  64.             {% endif %}
  66.             {% for page in pagesInRange %}
  67.                 {% if page != current %}
  68.                     <li class="pagination-item d-flex-c">
  69.                         <a class="pagination-link d-flex-c" href="{{ _pagination_path(route, query, pageParameterName, page) }}">{{ page }}</a>
  70.                     </li>
  71.                 {% else %}
  72.                     <li class="pagination-item d-flex-c active">
  73.                         <span class="pagination-link d-flex-c">{{ page }}</span>
  74.                     </li>
  75.                 {% endif %}
  77.             {% endfor %}
  79.             {% if pageCount > endPage %}
  80.                 {% if pageCount > (endPage + 1) %}
  81.                     {% if pageCount > (endPage + 2) %}
  82.                         <li class="pagination-item d-flex-c disabled">
  83.                             <span class="pagination-link d-flex-c">&hellip;</span>
  84.                         </li>
  85.                     {% else %}
  86.                         <li class="pagination-item d-flex-c">
  87.                             <a class="pagination-link d-flex-c" href="{{ _pagination_path(route, query, pageParameterName, (pageCount - 1)) }}">{{ pageCount -1 }}</a>
  88.                         </li>
  89.                     {% endif %}
  90.                 {% endif %}
  91.                 <li class="pagination-item d-flex-c">
  92.                     <a class="pagination-link d-flex-c" href="{{ _pagination_path(route, query, pageParameterName, pageCount) }}">{{ pageCount }}</a>
  93.                 </li>
  94.             {% endif %}
  96.             {# Next #}
  97.             <li class="pagination-item pagination-item--next d-flex-c" data-t="{{startPage}}">
  99.                 {% if next is defined %}
  100.                 <a class="pagination-link d-flex-c" rel="prev" href="{{ _pagination_path(route, query, pageParameterName, next) }}">
  101.                 {% else %}
  102.                 <span class="pagination-link d-flex-c disable">
  103.                 {% endif %}
  105.                     <svg width="24" height="25" fill="none"><path d="m8.295 17.208 4.58-4.59-4.58-4.59 1.41-1.41 6 6-6 6-1.41-1.41Z"/></svg>
  107.                 {% if next is defined %}
  108.                 </a>
  109.                 {% else %}
  110.                 </span>
  111.                 {% endif %}
  113.             </li>
  115.             {# Double next #}
  116.             <li class="pagination-item pagination-item--next d-flex-c">
  118.                 {% if next is defined %}
  119.                 <a class="pagination-link d-flex-c" rel="prev" href="{{ _pagination_path(route, query, pageParameterName, pageCount) }}">
  120.                 {% else %}
  121.                 <span class="pagination-link d-flex-c disable">
  122.                 {% endif %}
  124.                     <svg width="24" height="25" fill="none"><path d="m5.295 17.208 4.58-4.59-4.58-4.59 1.41-1.41 6 6-6 6-1.41-1.41Z"/><path d="m11.295 17.208 4.58-4.59-4.58-4.59 1.41-1.41 6 6-6 6-1.41-1.41Z"/></svg>
  126.                 {% if next is defined %}
  127.                 </a>
  128.                 {% else %}
  129.                 </span>
  130.                 {% endif %}
  132.             </li>
  133.         </ul>
  134.     </nav>
  135. {% endif %}
  136. </div>
  137. <script>
  138. (function(){
  139.     const showmore = document.getElementById('showmore_container');
  140.     if (!showmore) return;
  141.     if (showmore.hasAttribute('data-fix-with')) return;
  142.     const pagination = document.querySelector('#pagination-content .pagination');
  143.     showmore.style.setProperty('--btn-width', `${pagination.offsetWidth < 130 ? 130 : (pagination.offsetWidth - 20)}px`);
  144. })();
  145. </script>