pagination bwp

pagination-get.php

<div class="o-pagination-wrapper js-pagination-wrapper" data-page="<?= $page ?>">
<?php
get_partial('common/partials/pagination-list', [
'current' => $page,
'max' => $max_pages
]);
?>
</div>

pagination-zm.php

<?php
/**
 * @var $current
 * @var $max
 */
if ($max > 1) {
    if ($current == 1 || $current == 2) {
        $start = 1;
    } else {
        $start = $current - 2;
    }
    if ($current < $max - 3) {
        $end = $current + 3;
    } else {
        $end = $max + 1;
    } ?>
    <div class="o-container">
        <ul class="c-pagination">
            <?php
            if ($current > $start) { ?>
                <li class="pagination-prev c-pagination__item">
                    <a href="#" data-val="prev"
                       class="c-pagination-arrow c-pagination-arrow--previous js-pagination-link js-pagination-link-arrow">
                        <?php
                        get_partial('icons/chevron-left');
                        ?>
                    </a>
                </li>
                <?php
            }
            if ($start > 1) { ?>
                <li class="c-pagination__item ">
                    <a href="#" data-val="1" id="1"
                       class="c-pagination-number js-pagination-link <?= $start === $current ? 'is-active' : '' ?>">
                        <span>1</span>
                    </a>
                </li>
                <li class="c-pagination__item">
                    <span class="c-pagination-separator">
                        ...
                    </span>
                </li>
                <?php
            }
            for ($i = $start; $i < $end; $i++) {
                ?>
                <li class="pagination-item ">
                    <a href="#" data-val="<?= $i ?>" id="<?= $i ?>"
                       class="c-pagination-number u-b1 js-pagination-link <?= $i === $current ? 'is-active' : '' ?>">
                        <?= $i ?>
                    </a>
                </li>
                <?php
            }
            if ($end < $max) { ?>
                <li class="c-pagination__item">
                    <span class="c-pagination-separator">
                        ...
                    </span>
                </li>
                <li class="pagination-item ">
                    <a href="#" data-val="<?= $max ?>" id="<?= $max ?>"
                       class="c-pagination-number u-b1 js-pagination-link <?= $max === $current ? 'is-active' : '' ?>r">
                        <?= $max ?>
                    </a>
                </li>
                <?php
            }

            if ($current < $max) { ?>
                <li class="pagination-next c-pagination__item">
                    <a href="#" data-val="next"
                       class="c-pagination-arrow c-pagination-arrow--next js-pagination-link js-pagination-link-arrow">
                        <?php
                        get_partial('icons/chevron-right');
                        ?>
                    </a>
                </li>
                <?php
            }
            ?>

        </ul>
    </div>
    <?php
}

pagination.php

<?php
/**
* @var $current
* @var $max
*/
if ($max > 1) {
if ($current == 1 || $current == 2) {
$start = 1;
} else {
$start = $current - 2;
}
if ($current < $max - 3) {
$end = $current + 3;
} else {
$end = $max + 1;
} ?>
<div class="o-container">
<ul class="c-pagination">
<?php
if ($current > $start) { ?>
<li class="pagination-prev c-pagination__item">
<a href="#" data-val="prev" class="c-pagination-arrow c-pagination-arrow--previous js-pagination-link js-pagination-link-arrow">
<svg class="u-icon u-icon--chevron-left">
<use xlink:href="<?=bu('icons/symbol-defs.svg#u-icon--chevron-left');?>"></use>
</svg>
</a>
</li>
<?php
}
if ($start > 1) { ?>
<li class="c-pagination__item ">
<a href="#" data-val="1" id="1" class="c-pagination-number js-pagination-link <?= $start === $current ? 'is-active' : '' ?>">
<span>1</span>
</a>
</li>
<li class="c-pagination__item">
<span class="c-pagination-separator">
...
</span>
</li>
<?php
}
for ($i = $start; $i < $end; $i++) {
?>
<li class="pagination-item ">
<a href="#" data-val="<?= $i ?>" id="<?= $i ?>" class="c-pagination-number js-pagination-link <?= $i === $current ? 'is-active' : '' ?>">
<?= $i ?>
</a>
</li>
<?php
}
if($end < $max) { ?>
<li class="c-pagination__item">
<span class="c-pagination-separator">
...
</span>
</li>
<li class="pagination-item ">
<a href="#" data-val="<?= $max ?>" id="<?= $max ?>" class="c-pagination-number js-pagination-link <?= $max === $current ? 'is-active' : '' ?>r">
<?= $max ?>
</a>
</li>
<?php
}

if ($current < $max) { ?>
<li class="pagination-next c-pagination__item">
<a href="#" data-val="next" class="c-pagination-arrow c-pagination-arrow--next js-pagination-link js-pagination-link-arrow">
<svg class="u-icon u-icon--chevron-right">
<use xlink:href="<?=bu('icons/symbol-defs.svg#u-icon--chevron-right');?>"></use>
</svg>
</a>
</li>
<?php
}
?>

</ul>
</div>
<?php
}

pagination.scss

//PAGINATION
.o-pagination-wrapper {
padding-bottom: 80px;
}

.c-pagination {
display: flex;
align-items: center;
justify-content: center;

&__item {
}
}

.c-pagination-number,
.c-pagination-separator,
.c-pagination-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 100px;
position: relative;

&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
z-index: -1;
transition: getTransition();
}

span {
position: relative;
}

&:hover {
color: $warm-grey;

&:before {
background-color: $mushroom--24;
}
}

&:active {
color: $black;

&:before {
background-color: $beige;
}
}
}

.c-pagination-number {
margin: 0 4px;
color: $warm-grey;

//state
&.is-active {
color: $black;

&:before {
background-color: $beige;
}
}
}

.c-pagination-separator {
margin: 0 4px;
pointer-events: none;
}

.c-pagination-arrow {
width: 40px;
height: 40px;

&--previous {
margin-right: 16px;
}

&--next {
margin-left: 16px;
}

//overrides
.u-icon {
font-size: 20px;
position: relative;
}

&:active {
.u-icon {
color: $black;
}
}
}