elgentos / categorytiling Goto Github PK

<?php

/**
 * Copyright - elgentos ecommerce solutions (https://elgentos.nl)
 */

declare(strict_types=1);

use Elgentos\CategoryTiling\Block\Category\View;
use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Magento\Framework\Escaper;

/**
 * Category view template
 *
 * @var View $block
 * @var Escaper $escaper
 * @var ViewModelRegistry $viewModels
 */

if (!$block->showTiling() || !$block->getSubcategories()) {
    return;
}

$heroicons     = $viewModels->require(HeroiconsOutline::class);
$subcategories = $block->getSubcategories();

?>

<div class="bg-orange-lighter pb-4">
    <div class="container">
        <div class="relative overflow-hidden mb-4"
             x-data="carouselSlider()">
            <div class="relative lg:-mx-4 snap-x snap-mandatory overflow-x-scroll lg:overflow-hidden">
                <div
                    class="relative flex snap-x my-0 lg:overflow-hidden mr-4 p-0 after:w-4 after:h-4 after:snap-start after:content-[''] after:table lg:after:content-none after:shrink-0"
                    x-ref="carousel">
                <?php foreach ($subcategories as $subcategory): ?>
                    <div
                        class="relative snap-start block  w-1/2 sm:w-1/3 md:w-1/2 lg:w-1/3 xl:w-1/5 flex-none h-full pl-4">
                        <div class="bg-white border border-gray-lightest rounded-sm">
                            <?php if ($subcategory->getImageUrl()): ?>
                                <a href="<?= $escaper->escapeUrl($subcategory->getUrl()) ?>">
                                    <span class="flex justify-center items-center">
                                        <img class="h-40" src="<?= $escaper->escapeUrl($subcategory->getImageUrl()) ?>"
                                             alt="<?= $escaper->escapeHtmlAttr($subcategory->getName()) ?>">
                                    </span>
                                </a>
                            <?php endif; ?>
                            <a class="block text-blue cursor-pointer p-1 hover:text-orange transition border-t border-gray-lightest w-full text-sm text-center"
                               href="<?= $escaper->escapeUrl($subcategory->getUrl()) ?>">
                                <?= $escaper->escapeHtml($subcategory->getName()) ?>
                            </a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <div
                class="absolute w-full h-full top-0 bottom-0 left-0 right-0 pointer-events-none select-none hidden md:flex">
                <button class="absolute left-4 flex justify-center items-center select-none pointer-events-auto cursor-pointer hover:shadow-lg transition-all top-1/3
                               border border-gray-lightest shadow rounded-r-lg bg-white p-2 cursor-pointer hover:shadow-lg transition hidden"
                        @click.debounce.100ms="slide('left', 2)"
                        x-ref="leftNav">
                    <?= $heroicons->arrowLeftHtml('w-5 h-5 text-blue') ?>
                </button>
                <button class="absolute right-4 flex justify-center items-center select-none pointer-events-auto cursor-pointer hover:shadow-lg
                transition-all top-1/3 border border-gray-lightest shadow rounded-l-lg bg-white p-2 cursor-pointer hover:shadow-lg transition"
                        @click.debounce.100ms="slide('right', 2)"
                        x-ref="rightNav" x-cloak>
                    <?= $heroicons->arrowRightHtml('w-5 h-5 text-blue') ?>
                </button>
            </div>

        </div>
    </div>
</div>

<script>
    function carouselSlider() {
        return {
            imagesAmount: null,
            slideAmount: 0,
            leftNav(multiplier) {
                const pixelsToScroll = this.$refs.carousel.childNodes[1].scrollWidth * multiplier;
                this.$refs.carousel.scrollBy({
                    left: -pixelsToScroll,
                    behavior: "smooth",
                });
                this.slideAmount--;

                if (this.slideAmount === 0) {
                    this.$refs.leftNav.classList.add('hidden');
                }

                this.$refs.rightNav.classList.remove('hidden');
            },
            rightNav(multiplier) {
                const pixelsToScroll = this.$refs.carousel.childNodes[1].scrollWidth * multiplier;
                const currentScrollLeft = this.$refs.carousel.scrollLeft;
                const newScrollLeft = currentScrollLeft + pixelsToScroll;

                this.$refs.carousel.scrollBy({
                    left: pixelsToScroll,
                    behavior: "smooth",
                });

                this.slideAmount++;

                if (newScrollLeft + this.$refs.carousel.clientWidth >= this.$refs.carousel.scrollWidth - 2) {
                    this.$refs.rightNav.classList.add('hidden');
                    this.$refs.leftNav.classList.remove('hidden');
                } else {
                    this.$refs.rightNav.classList.remove('hidden');
                }

                if (this.slideAmount !== 0) {
                    this.$refs.leftNav.classList.remove('hidden');
                }
            },

            slide(direction, multiplier) {
                let pixelsToScroll = (this.$refs.carousel.childNodes[1].scrollWidth) * multiplier;

                if (direction === "left") {
                    this.$refs.carousel.scrollBy({
                        left: -pixelsToScroll,
                        behavior: "smooth",
                    });

                    this.leftNav(multiplier);
                } else {
                    this.$refs.carousel.scrollBy({
                        left: pixelsToScroll,
                        behavior: "smooth",
                    });

                    this.rightNav(multiplier);
                }
            },
            init() {
                if (this.$refs.carousel.clientWidth >= this.$refs.carousel.scrollWidth - 2) {
                    this.$refs.rightNav.classList.add('hidden');
                }
            }
        };
    }
</script>