templates/ProfileList/_show_more.profiles.html.twig line 1

Open in your IDE?
  1. {% set totalPages = (profiles.totalCount / profiles.currentLimit)|round(0, 'ceil') %}
  2. {% set innerText = innerText is defined ? innerText : 'Показать ещё' %}
  3. <div class="load-more-container d-flex-c mb-4" id="showmore_container">
  4.     <button class="load-more btn btn-main{{ totalPages == 1 or totalPages == profiles.currentPage ? ' d-none' : '' }}"
  5.         type="button"
  6.         id="load-more-btn"
  7.         data-currentPage="{{ profiles.currentPage }}"
  8.         data-totalPages="{{ totalPages }}"
  9.         data-perPage="{{ profiles.currentLimit }}"
  10.         data-itemsInRow="{{ profiles.currentLimit >= 3 ? 3 : profiles.currentLimit }}"
  11.         data-url="{{ app.request.requestUri }}"
  12.         {# data-filter-url="{{ path('profile_list.filter_list', {city: app.request.attributes.get('city').uriIdentity}) }}" #}
  13.     >{{ innerText }}</button>
  14. </div>
  16. <script type="text/javascript">
  17.     document.addEventListener('DOMContentLoaded', function() {
  18.         window.moreLoader = new MoreLoader({
  19.             'btnMoreSelector': '#load-more-btn',
  20.             'containerSelector': '#profile-list',
  21.             'receiveRenderedResponse': true,
  22.             'responseCallback': function(response) {
  23.                 const profileListRoot = document.getElementById('profile-list');
  25.                 const existIdSet = new Set([...profileListRoot.querySelectorAll('.profile-card')].map(el => {
  26.                     const id = +el.dataset.profileId;
  27.                     return isNaN(id) ? null : id;
  28.                 }).filter(id => id !== null));
  30.                 const div = document.createElement('div');
  31.                 div.innerHTML = response;
  33.                 const profileListResponse = [...div.querySelectorAll('.profile-card')];
  34.                 const responseIdList = [];
  36.                 {# // Добавляем только новые элементы и собираем их ID #}
  37.                 profileListResponse.forEach(el => {
  38.                     const profileId = +el.dataset.profileId;
  39.                     if (!isNaN(profileId) && !existIdSet.has(profileId)) {
  40.                         profileListRoot.appendChild(el);
  41.                         responseIdList.push(profileId);
  42.                     }
  43.                 });
  45.                 if (responseIdList.length < 4) {
  46.                     setTimeout(()=>{
  47.                         window.moreLoader.showMore();
  48.                     }, 10)
  49.                 }
  51.                 document.querySelectorAll('.pagination').forEach(function (el) {
  52.                     el.style.display = 'none';
  53.                 });
  54.             },
  55.             'templateSelector': null,
  57.             {% set route = app.request.get('_route') is null and "massagers" in app.request.pathInfo ? 'masseur_list.page' : app.request.get('_route') %}
  58.             {% set urlPath = '._pagination' in route ? route : route ~ '._pagination' %}
  59.             {% set routeParams = app.request.get('_route_params') ?? [] %}
  60.             'url': '{{ path(urlPath, routeParams|merge({city: city.uriIdentity, page: profiles.currentPage + 1})) }}',
  61.             'urlCity': '{{ city.uriIdentity }}',
  62.             'urlPagePartTemplate': 'page%N%/',
  63.             'currentPage': {{ profiles.currentPage }},
  64.             'totalPages': {{ (profiles.totalCount / profiles.currentLimit)|round(0, 'ceil') }},
  65.             'perPage': 5,
  66.             'itemsInRow': 2,
  67.             'recordsArrayName': 'profiles',
  68.         });
  69.     });
  70. </script>
  71. {% include 'ShowMore/_show_more.base.html.twig' %}