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 city = app.request.attributes.get('city', default_city()) -%}
  14.     {%- if page_number == 1 -%}
  15.         {%- set _route = route -%}
  16.         {%- set _query = query|filter((v, k) => k != pageParameterName) -%}
  17.     {%- else -%}
  18.         {%- set _route = route~'._pagination' -%}
  19.         {%- set _query = query|merge({(pageParameterName): page_number}) -%}
  20.     {%- endif -%}
  21.     {%- set _query = _query|merge({'city': city.uriIdentity}) -%}
  22.     {{- path(_route, _query) -}}
  23. {%- endmacro -%}
  25. {% from _self import _pagination_path %}
  27. <div id="pagination_container">
  28.     {% if pageCount > 1 %}
  29.     <nav class="pagination">
  30.         {% set classAlign = (align is not defined) ? '' : align=='center' ? ' justify-content-center' : (align=='right' ? ' justify-content-end' : '') %}
  31.         {% set classSize = (size is not defined) ? '' : size=='large' ? ' pagination-lg' : (size=='small' ? ' pagination-sm' : '') %}
  32.         <ul class="pagination__list d-flex">
  34.             {% if previous is defined %}
  35.                 <li class="pagination__item rounding pagination__item-prev">
  36.                     <a class="pagination__link" rel="prev" href="{{ _pagination_path(route, query, pageParameterName, previous) }}" aria-label="Ссылка на предыдущую страницу" data-page="{{previous}}">{#&laquo;&nbsp;{{ 'label_previous'|trans({}, 'KnpPaginatorBundle') }}#}
  37.                         <svg class="icon">
  38.                             <use xlink:href="{{ asset('assets_domain/images/icons/svg-library.svg', 'nodomainConfig') }}#icon-arrow-left"></use>
  39.                         </svg>
  40.                     </a>
  41.                 </li>
  42.             {% else %}
  43.                 <li class="pagination__item rounding pagination__item--disabled">
  44.                     <span class="pagination__link d-flex">
  45.                         {#&laquo;&nbsp;{{ 'label_previous'|trans({}, 'KnpPaginatorBundle') }}#}
  46.                         <svg class="icon">
  47.                             <use xlink:href="{{ asset('assets_domain/images/icons/svg-library.svg', 'nodomainConfig') }}#icon-arrow-left"></use>
  48.                         </svg>
  49.                     </span>
  50.                 </li>
  51.             {% endif %}
  53.             {% if startPage > 1 %}
  54.                 <li class="pagination__item rounding">
  55.                     <a class="pagination__link" href="{{ _pagination_path(route, query, pageParameterName, 1) }}" aria-label="Ссылка на первую страницу">1</a>
  56.                 </li>
  57.                 {% if startPage == 3 %}
  58.                     <li class="pagination__item rounding">
  59.                         <a class="pagination__link" href="{{ _pagination_path(route, query, pageParameterName, 2) }}" aria-label="Ссылка на вторую страницу">2</a>
  60.                     </li>
  61.                 {% elseif startPage != 2 %}
  62.                     <li class="pagination__item rounding pagination__item_spacer">
  63.                         <div class="pagination__link d-flex">...</div>
  64.                     </li>
  65.                 {% endif %}
  66.             {% endif %}
  68.             {% for page in pagesInRange %}
  69.                 {% if page != current %}
  70.                     <li class="pagination__item rounding">
  71.                         <a class="pagination__link" href="{{ _pagination_path(route, query, pageParameterName, page) }}" aria-label="Ссылка на {{ page }} страницу">{{ page }}</a>
  72.                     </li>
  73.                 {% else %}
  74.                     <li class="pagination__item rounding pagination__item_first pagination__item_active">
  75.                         <a href="#" class="pagination__link" aria-label="Неактивная ссылка">{{ page }}</a>
  76.                     </li>
  77.                 {% endif %}
  79.             {% endfor %}
  81.             {% if pageCount > endPage %}
  82.                 {% if pageCount > (endPage + 1) %}
  83.                     {% if pageCount > (endPage + 2) %}
  84.                         <li class="pagination__item rounding pagination__item_spacer">
  85.                             <div class="pagination__link">...</div>
  86.                         </li>
  87.                     {% else %}
  88.                         <li class="pagination__item rounding">
  89.                             <a class="pagination__link" href="{{ _pagination_path(route, query, pageParameterName, (pageCount - 1)) }}" aria-label="Ссылка на {{ pageCount -1 }} страницу">{{ pageCount -1 }}</a>
  90.                         </li>
  91.                     {% endif %}
  92.                 {% endif %}
  93.                 <li class="pagination__item rounding" data-show="true">
  94.                     <a class="pagination__link" href="{{ _pagination_path(route, query, pageParameterName, pageCount) }}" aria-label="Ссылка на {{ pageCount }} страницу">{{ pageCount }}</a>
  95.                 </li>
  96.             {% endif %}
  98.             {% if next is defined %}
  99.                 <li class="pagination__item rounding pagination__item-next">
  100.                     <a class="pagination__link" rel="next" href="{{ _pagination_path(route, query, pageParameterName, next) }}" aria-label="Ссылка на следующую страницу" data-page="{{next}}">
  101.                         <svg class="icon">
  102.                             <use xlink:href="{{ asset('assets_domain/images/icons/svg-library.svg', 'nodomainConfig') }}#icon-arrow-right"></use>
  103.                         </svg>
  104.                     </a>
  105.                 </li>
  106.             {% else %}
  107.                 <li class="pagination__item rounding pagination__item--disabled">
  108.                     <span class="pagination__link">
  109.                         <svg class="icon">
  110.                             <use xlink:href="{{ asset('assets_domain/images/icons/svg-library.svg', 'nodomainConfig') }}#icon-arrow-right"></use>
  111.                         </svg>
  112.                     </span>
  113.                 </li>
  114.             {% endif %}
  115.         </ul>
  116.     </nav>
  118.     <script>
  119.         function paginationChecked() {
  120.             {#
  121.                 В мобильной версии нам нужно показывать пункты +- 1 от текущей, стрелочки
  122.                 и точки если пунктов больше в текущем направлении
  123.             #}
  124.             const paginationList = document.querySelector('.pagination__list');
  125.             const activeEl = paginationList.querySelector('.pagination__item_active');
  126.             const previousActiveEl = activeEl.previousElementSibling;
  127.             const nextActiveEl = activeEl.nextElementSibling;
  131.             //const dotMarkup = `<li class="pagination__item rounding pagination__item--dot pagination__item--disabled pagination__item--mobile-active"><span class="pagination__link">…</span></li>`;
  133.             [...paginationList.children].forEach(el => {
  134.                 if (el.dataset.show) el.classList.add('pagination__item--mobile-active');
  135.                 el.addEventListener('click',() => {
  136.                     document.dispatchEvent(new CustomEvent("fetchSimilar:trigger", { detail: { type: 'recommendation' }}));
  137.                 })
  138.             })
  140.             {#// Проверяем элементы позади#}
  141.             if (elementCheck(previousActiveEl, 'pagination__item-prev')) {
  142.                 if (nextActiveEl) nextActiveEl.classList.add('pagination__item--mobile-active');
  144.                 const prePreviousActiveEl = previousActiveEl.previousElementSibling;
  145.                 if (prePreviousActiveEl && elementCheck(prePreviousActiveEl, 'pagination__item-prev') && (+activeEl.innerText > 3) && !prePreviousActiveEl.previousElementSibling.classList.contains('pagination__item--dot')) {
  146.                     {#// добавить многоточие#}
  147.                     appendDotPagination(previousActiveEl, false);
  148.                 }
  149.             }
  150.             {#// Проверяем элементы впереди#}
  151.             if (elementCheck(nextActiveEl, 'pagination__item-next')) {
  152.                 const nextNextActiveEl = nextActiveEl.nextElementSibling;
  154.                 if (elementCheck(nextNextActiveEl, 'pagination__item-next') && checkNextPlace(activeEl) && !nextNextActiveEl.nextElementSibling.classList.contains('pagination__item--dot')) {// && (+nextNextActiveEl.innerText < 3)
  155.                     {#// добавить многоточие#}
  156.                     appendDotPagination(nextNextActiveEl, true);
  157.                 }
  158.             }
  161.             {#/**
  162.             * Проверка текущего предыдущего элемента
  163.             *
  164.             * element - элемент для проверки
  165.             * return - элемент соответствует критериям?
  166.             */#}
  167.             function elementCheck(element, className) {
  168.                 if (element && !element.classList.contains(className)) {
  170.                     element.classList.add('pagination__item--mobile-active');
  171.                     return true;
  172.                 }
  174.                 return false;
  175.             }
  177.             {#/**
  178.             * Генератор многоточия
  179.             *
  180.             */#}
  181.             function appendDotPagination(element, isNext = false){
  182.                 const liTemp = document.createElement('li');
  183.                 element.parentElement.insertBefore(liTemp, isNext ? element.nextElementSibling :  element.previousElementSibling);
  184.                 //liTemp.outerHTML = dotMarkup;
  185.             }
  187.             {#/**
  188.             * Проверка на необходимости вставки многоточия впереди
  189.             * Если впереди больше 4 элементов - можно вставлять
  190.             *
  191.             */#}
  192.             function checkNextPlace(element) {
  193.                 const countToCheck = 4;
  194.                 let i = 0;
  196.                 for (; i < 4; i++){
  197.                     if (element.nextElementSibling) {
  198.                         element = element.nextElementSibling;
  199.                     } else {
  200.                         break;
  201.                     }
  202.                 }
  204.                 return i === 4
  205.             }
  206.         }
  208.         paginationChecked();
  210.         document.addEventListener('showmore:trigger', paginationChecked.bind())
  211.         document.addEventListener('ajaxLoadEnd', paginationChecked.bind())
  212.     </script>
  213. {% endif %}
  214. </div>