https://moreuil.com/js/block/data-list-by-display-section.js

1listBlocks.filter(function(block) { return block.class ? block.class.includes('data-list-by-display-section-home') : undefined }).forEach(function(block) {
2    if (typeof block.display_sections !== 'undefined' && typeof block.display_sections[0] !== 'undefined') {
3        block.display_sections[0].data.forEach(function(sectionData) {
4            if (typeof sectionData.primary_color !== 'undefined')
5                $('.data-list-by-display-section-home .data-display-section.' + sectionData.slug).css('background-color', sectionData.primary_color)
6        })
7    }
8})
9
10listBlocks.filter(function(block) { return block.id === 'data-list-by-display-section' }).forEach(function(block) {
11    const sections = document.querySelectorAll('a.data-display-section');
12    const lastPage = Math.max(...[...sections].map(el => parseInt(el.dataset.page)));
13    if (lastPage > 1) {
14        generatePagination(1, lastPage);
15        changePage(1);
16    }
17})
18
19function generatePagination(currentPage, lastPage, hrefSearch = '') {
20    const paginationUl = document.querySelector('ul.pagination');
21    paginationUl.innerHTML = ''; // Nettoyer les anciens éléments
22
23    const previousPage = currentPage - 1;
24    const nextPage = currentPage + 1;
25
26    const hasPreviousPage = previousPage >= 1;
27    const hasNextPage = nextPage <= lastPage;
28
29    const createPageButton = (page, isActive = false) => {
30        const li = document.createElement('li');
31        li.classList.add('page-item');
32        if (isActive) li.classList.add('active');
33
34        const button = document.createElement('button');
35        button.classList.add('pagination-page', 'page-link');
36        button.textContent = page;
37        button.addEventListener('click', () => changePage(page));
38
39        li.appendChild(button);
40        paginationUl.appendChild(li);
41    };
42
43    // Première page si elle n'est pas dans la pagination normale
44    if (currentPage !== 1 && previousPage !== 1) {
45        createPageButton(1);
46    }
47
48    // Page précédente
49    if (hasPreviousPage) {
50        createPageButton(previousPage);
51    }
52
53    // Page courante (active)
54    createPageButton(currentPage, true);
55
56    // Page suivante
57    if (hasNextPage) {
58        createPageButton(nextPage);
59    }
60
61    // Dernière page si elle n'est pas dans la pagination normale
62    if (lastPage !== currentPage && nextPage !== lastPage) {
63        createPageButton(lastPage);
64    }
65}
66
67function changePage(page) {
68    const sections = document.querySelectorAll('a.data-display-section');
69    sections.forEach(el => {
70        el.style.display = el.dataset.page == page ? '' : (el.dataset.page == 0 ? '' : 'none');
71    });
72
73    // Re-générer la pagination pour mettre à jour les boutons actifs
74    const lastPage = Math.max(...[...sections].map(el => parseInt(el.dataset.page)));
75    generatePagination(page, lastPage);
76}
77
78
79listBlocks.filter(function(block) { return block.class === 'data-list-by-display-section-secondary' }).forEach(function(block) {
80    $('.main-content').css('margin-top', $('.sep-header .row .col-12 .container-fluid .content-img').height() + 30 + 'px')
81    $('.sep-header .data-list-by-display-section .display-section').css('background-color', block.display_sections[0].secondary_color)
82    
83    $('.data-list-by-display-section.data-list-by-display-section-secondary .data-display-section').each(function() {
84        const dataToggle = $(this).data('toggle')
85        if (typeof dataToggle === 'undefined' || (typeof dataToggle !== 'undefined' && dataToggle !== 'collapse')) {
86            $(this).find('p').after('<svg class="arrow-right" xmlns="http://www.w3.org/2000/svg" width="10" height="14" viewBox="0 0 7 11"><path fill="' + block.display_sections[0].primary_color + '" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M1 10.7v0l4.8-4.9v0L1 1v0"></path></svg>')
87        }
88    })
89    
90    if ($('.sep-header .data-list-by-display-section .content-img').length == 0) {
91        $('.sep-header .data-list-by-display-section').css({ 'background-color': block.display_sections[0].secondary_color, '-webkit-box-shadow': '0px -9px 115px 0px rgb(0 0 0 / 75%)', '-moz-box-shadow': '0px 3px 9px 0px rgba(0,0,0,0.75)', 'box-shadow': '0px 4px 5px -1px rgb(0 0 0 / 31%)' })
92        $('.main-content').css('margin-top', $('.sep-header .data-list-by-display-section').height() + 'px')
93    } else {
94        let width = $(window).width() <= 768 ? $(window).width() : $(window).width() <= 1024 ? 1024 : 768  
95        svgWidth = (width * 0.32) >= 140 ? 140 : width * 0.32
96        svgHeigth = svgWidth * 1.13
97        let urlSvg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${svgWidth}' height='${svgHeigth}' viewBox='0 0 107 121'%3E%3Cdefs%3E%3Cmask id='pu0zb' width='2' height='2' x='-1' y='-1'%3E%3Cpath fill='%23fff' d='M4 2h99v112H4z'/%3E%3Cpath d='M13.044 12.924a80.912 80.912 0 0 1 80.912 0 16.863 

9716.863 0 0 1 8.432 14.604v50.416a16.863 16.863 0 0 1-8.432 14.604l-32.024 18.49a16.864 16.864 0 0 1-16.864 0l-32.024-18.49a16.863 16.863 0 0 1-8.432-14.604V27.528a16.864 16.864 0 0 1 8.432-14.604z'/%3E%3C/mask%3E%3Cfilter id='pu0za' width='131' height='147' x='-12' y='-14' filterUnits='userSpaceOnUse'%3E%3CfeOffset dy='3' in='SourceGraphic' result='FeOffset1023Out'/%3E%3CfeGaussianBlur in='FeOffset1023Out' result='FeGaussianBlur1024Out' stdDeviation='2.4 2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cg filter='url(%23pu0za)'%3E%3Cpath fill='none' d='M13.044 12.924a80.912 80.912 0 0 1 80.912 0 16.863 16.863 0 0 1 8.432 14.604v50.416a16.863 16.863 0 0 1-8.432 14.604l-32.024 18.49a16.864 16.864 0 0 1-16.864 0l-32.024-18.49a16.863 16.863 0 0 1-8.432-14.604V27.528a16.864 16.864 0 0 1 8.432-14.604z' mask='url("%23pu0zb")'/%3E%3Cpath fill-opacity='.16' d='M13.044 12.924a80.912 80.912 0 0 1 80.912 0 16.863 16.863 0 0 1 8.432 14.604v50.416a16.863 16.863 0 0 1-8.432 14.604l-32.024 18.49a16.864 16.864 0 0 1-16.864 0l-32.024-18.49a16.863 16.863 0 0 1-8.432-14.604V27.528a16.864 16.864 0 0 1 8.432-14.604z'/%3E%3C/g%3E%3Cpath fill='%23932e34' d='M13.044 12.924a80.912 80.912 0 0 1 80.912 0 16.863 16.863 0 0 1 8.432 14.604v50.416a16.863 16.863 0 0 1-8.432 14.604l-32.024 18.49a16.864 16.864 0 0 1-16.864 0l-32.024-18.49a16.863 16.863 0 0 1-8.432-14.604V27.528a16.864 16.864 0 0 1 8.432-14.604z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
98        $('.sep-header .data-list-by-display-section .display-section').css({ 'mask-image': urlSvg, '-webkit-mask-image': urlSvg, 'width': svgWidth, 'height': svgHeigth })
99    }
100})
101
102if (isInfiniteSlider) {
103    setInfiniteSlider(".data-display-sections")
104}