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) %}
  13.     {%- set alreadyOutput = false -%}
  14.     {%- if page_number == 1 -%}
  15.         {%- set _route = route -%}
  16.         {%- if 'profile_list.list_by_city' in _route -%}
  17.             {%- set _query = query|merge({(pageParameterName): '1'}) -%}
  18.             {% set linkToProfileList = path('profile_list.list_by_city._pagination', _query)|replace({'/page1': ''}) %}
  19.             {{- linkToProfileList|lower -}}
  20.             {%- set alreadyOutput = true -%}
  21.         {%- endif -%}
  22.         {%- set _query = query|filter((v, k) => k != pageParameterName) -%}
  23.     {%- else -%}
  24.         {%- set _route = route~'._pagination' -%}
  25.         {%- set _query = query|merge({(pageParameterName): page_number}) -%}
  26.     {%- endif -%}
  27.     
  28.     {%- if not alreadyOutput -%}
  29.         {{- path(_route, _query)|lower -}}
  30.     {%- endif -%}
  31. {% endmacro %}
  33. {% from _self import _pagination_path %}
  34. <div class="mb-4" id="pagination_container">
  35. {% if pageCount > 1 %}
  36.     <nav class="pagination-content d-flex" id="pagination-content">
  37.         {% set classAlign = (align is not defined) ? '' : align=='center' ? ' justify-content-center' : (align=='right' ? ' justify-content-end' : '') %}
  38.         {% set classSize = (size is not defined) ? '' : size=='large' ? ' pagination-lg' : (size=='small' ? ' pagination-sm' : '') %}
  39.         <ul class="pagination{{ classAlign }}{{ classSize }} d-flex-c">
  41.             <li class="pagination-item pagination-item--prev d-flex-c">
  42.                 {% if previous is defined %}
  43.                 <a class="pagination-link d-flex-c" rel="prev" href="{{ _pagination_path(route, query, pageParameterName, 1) }}">
  44.                 {% else %}
  45.                 <span class="pagination-link d-flex-c disable">
  46.                 {% endif %}
  47.                     <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>
  48.                 {% if previous is defined %}
  49.                 </a>
  50.                 {% else %}
  51.                 </span>
  52.                 {% endif %}
  53.             </li>
  55.             {# Previous #}
  56.             <li class="pagination-item pagination-item--prev d-flex-c">
  57.                 {% if previous is defined %}
  58.                 <a class="pagination-link d-flex-c" rel="prev" href="{{ _pagination_path(route, query, pageParameterName, previous) }}">
  59.                 {% else %}
  60.                 <span class="pagination-link d-flex-c disable">
  61.                 {% endif %}
  62.                     <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>
  63.                 {% if previous is defined %}
  64.                 </a>
  65.                 {% else %}
  66.                 </span>
  67.                 {% endif %}
  68.             </li>
  70.             {% if startPage > 1 %}
  71.                 <li class="pagination-item d-flex-c">
  72.                     <a class="pagination-link d-flex-c" href="{{ _pagination_path(route, query, pageParameterName, 1) }}">1</a>
  73.                 </li>
  74.                 {% if startPage == 3 %}
  75.                     <li class="pagination-item d-flex-c">
  76.                         <a class="pagination-link d-flex-c" href="{{ _pagination_path(route, query, pageParameterName, 2) }}">2</a>
  77.                     </li>
  78.                 {% elseif startPage != 2 %}
  79.                     <li class="pagination-item d-flex-c disabled">
  80.                         <span class="pagination-link d-flex-c">&hellip;</span>
  81.                     </li>
  82.                 {% endif %}
  83.             {% endif %}
  85.             {% for page in pagesInRange %}
  86.                 {% if page != current %}
  87.                     <li class="pagination-item d-flex-c">
  88.                         <a class="pagination-link d-flex-c" href="{{ _pagination_path(route, query, pageParameterName, page) }}">{{ page }}</a>
  89.                     </li>
  90.                 {% else %}
  91.                     <li class="pagination-item d-flex-c active">
  92.                         <span class="pagination-link d-flex-c">{{ page }}</span>
  93.                     </li>
  94.                 {% endif %}
  96.             {% endfor %}
  98.             {% if pageCount > endPage %}
  99.                 {% if pageCount > (endPage + 1) %}
  100.                     {% if pageCount > (endPage + 2) %}
  101.                         <li class="pagination-item d-flex-c disabled">
  102.                             <span class="pagination-link d-flex-c">&hellip;</span>
  103.                         </li>
  104.                     {% else %}
  105.                         <li class="pagination-item d-flex-c">
  106.                             <a class="pagination-link d-flex-c" href="{{ _pagination_path(route, query, pageParameterName, (pageCount - 1)) }}">{{ pageCount -1 }}</a>
  107.                         </li>
  108.                     {% endif %}
  109.                 {% endif %}
  110.                 <li class="pagination-item d-flex-c">
  111.                     <a class="pagination-link d-flex-c" href="{{ _pagination_path(route, query, pageParameterName, pageCount) }}">{{ pageCount }}</a>
  112.                 </li>
  113.             {% endif %}
  115.             {# Next #}
  116.             <li class="pagination-item pagination-item--next d-flex-c" data-t="{{startPage}}">
  118.                 {% if next is defined %}
  119.                 <a class="pagination-link d-flex-c" rel="prev" href="{{ _pagination_path(route, query, pageParameterName, next) }}">
  120.                 {% else %}
  121.                 <span class="pagination-link d-flex-c disable">
  122.                 {% endif %}
  124.                     <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>
  126.                 {% if next is defined %}
  127.                 </a>
  128.                 {% else %}
  129.                 </span>
  130.                 {% endif %}
  132.             </li>
  134.             {# Double next #}
  135.             <li class="pagination-item pagination-item--next d-flex-c">
  137.                 {% if next is defined %}
  138.                 <a class="pagination-link d-flex-c" rel="prev" href="{{ _pagination_path(route, query, pageParameterName, pageCount) }}">
  139.                 {% else %}
  140.                 <span class="pagination-link d-flex-c disable">
  141.                 {% endif %}
  143.                     <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>
  145.                 {% if next is defined %}
  146.                 </a>
  147.                 {% else %}
  148.                 </span>
  149.                 {% endif %}
  151.             </li>
  152.         </ul>
  153.     </nav>
  154. {% endif %}
  155. </div>
  156. <script>
  157. (function(){
  158.     const showmore = document.getElementById('showmore_container');
  159.     if (!showmore) return;
  160.     if (showmore.hasAttribute('data-fix-with')) return;
  161.     const pagination = document.querySelector('#pagination-content .pagination');
  162.     showmore.style.setProperty('--btn-width', `${pagination.offsetWidth < 130 ? 130 : (pagination.offsetWidth - 20)}px`);
  163. })();
  164. </script>