hero-with-headline.html

{%- assign show_hero_carousel_pagination = include.show_pagination | default: true -%}
{%- assign show_hero_carousel_arrows = include.show_arrows | default: true -%}
{%- assign arrow_color = include.arrow_color | default: "white" -%}
{%- if show_hero_carousel_arrows -%}
    {%- assign arrow_name_left = "arrow-left-" | append: arrow_color -%}
    {%- assign arrow_name_right = "arrow-right-" | append: arrow_color -%}
{%- endif -%}
<div id="{{ include.carousel_id }}" class="hero-with-headline">
    <div class="hero-with-headline--wrapper">
        {%- if include.headline and include.headline != "" -%}
        <div class="hero-with-headline--headline">
            <h1>{{ include.headline }}</h1>
        </div>
        {%- endif -%}
        <div class="hero-with-headline--carousel">
            <div class="hero-with-headline--carousel--viewport">
            {% if show_hero_carousel_arrows %}
                <div class="landing-page-hero--arrows--arrow landing-page-hero--arrows--arrow__left">
                    <opensearch-button 
                        icon-only="true" 
                        icon-position="center"
                        fill="transparent" 
                        no-outline="true"
                    >
                        <div slot="icon-slot">
                            {%- include icons.html type=arrow_name_left -%}
                        </div>
                    </opensearch-button>
                </div>
                <div class="landing-page-hero--arrows--arrow landing-page-hero--arrows--arrow__right">
                    <opensearch-button 
                        icon-only="true" 
                        icon-position="center"
                        fill="transparent"
                        no-outline="true"
                    >
                        <div slot="icon-slot">
                            {%- include icons.html type=arrow_name_right -%}
                        </div>
                    </opensearch-button>
                </div>
            
            {% endif  %}
                <div class="hero-with-headline--carousel--wrapper">
                    {%- for item in include.items -%}
                        <div class="hero-with-headline--carousel--item">
                            {{ item }}
                        </div>
                    {%- endfor -%}
                </div>
            </div>
        </div>
        {%- if show_hero_carousel_pagination -%}
        <div class="hero-with-headline--carousel--pagination">
            <div class="hero-with-headline--carousel--pagination--items-wrapper">
                {%- for item in include.items -%}
                <div role="button" 
                    aria-label="Go to slide {{ forloop.index }}" 
                    title="Go to slide {{ forloop.index }}"
                    {% if forloop.first %}
                        class="hero-with-headline--carousel--pagination--item hero-with-headline--carousel--pagination--item__active"
                    {% else %}
                        class="hero-with-headline--carousel--pagination--item"
                    {% endif %}
                ></div>
                {%- endfor -%}
            </div>
        </div>
        {%- endif -%}
    </div>
</div>
{% assign carousel_timeout = include.timeout | default: 10000 %}
{% assign carousel_pause_timeout = include.pause_timeout | default: 20000 %}
<script type="module">
    document.addEventListener('DOMContentLoaded', () => {

        const timeout = {{ carousel_timeout }};
        const restartTimeout = {{ carousel_pause_timeout }};
        const carouselState = {
            isPaused: false,
            unpauseCountDown: 0,
            pauseTimer: 0,
            restartTimeout,
            timeout,
            previousFrame: 0,
            currentFrame: 1,
            nextFrame: 2,
            timer: 0,
        };

        const carouselId = "{{ include.carousel_id }}";
        const carousel = document.getElementById(carouselId);
        const itemCount = carousel.querySelectorAll('.hero-with-headline--carousel--item').length;
        const wrapper = carousel.querySelector('.hero-with-headline--carousel--wrapper');
        {% if show_hero_carousel_pagination %}
        const paginationItems = carousel.querySelectorAll('.hero-with-headline--carousel--pagination--item');
        {% endif %}
        const move = (state) => {
            const { classList } = wrapper;
            const { length } = classList;
            const nextAnimationClassName = `hero-with-headline--carousel--wrapper__running__from-${state.previousFrame}__to-${state.currentFrame}`;
            for (let i = 0; i < length; ++i) {
                const className = classList.item(i);
                if (className.startsWith('hero-with-headline--carousel--wrapper__running__from-')) {
                    classList.replace(className, nextAnimationClassName);
                    break;
                } else if (i === length - 1) {
                    classList.add(nextAnimationClassName);
                }
            }

            {% if show_hero_carousel_pagination %}
            paginationItems.item(state.previousFrame).classList.remove('hero-with-headline--carousel--pagination--item__active');
            paginationItems.item(state.currentFrame).classList.add('hero-with-headline--carousel--pagination--item__active');
            {% endif %}
        };

        const carouselRunner = () => {
            if (carouselState.isPaused) {
                return;
            } else {
                if (carouselState.currentFrame === itemCount) {
                    // Start over
                    carouselState.currentFrame = 0;
                    carouselState.nextFrame = 1;
                }
                move(carouselState);
                carouselState.previousFrame = carouselState.currentFrame;
                carouselState.currentFrame = carouselState.nextFrame;
                carouselState.nextFrame = carouselState.currentFrame + 1;
            }
        };
        const pauseCarousel = () => {
            carouselState.isPaused = true;
            stopCarousel();
            if (carouselState.pauseTimer !== 0) {
                window.clearTimeout(carouselState.pauseTimer);
            }
            carouselState.pauseTimer = window.setTimeout(startCarousel, carouselState.restartTimeout);
        };
        const unPauseCarousel = () => {
            carouselState.isPaused = false;
            carouselState.unpauseCountDown = 0;
            if (carouselState.pauseTimer !== 0) {
                window.clearTimeout(carouselState.pauseTimer);
                carouselState.pauseTimer = 0;
            }
        };
        const startCarousel = () => {
            if (carouselState.timer !== 0) {
                // Already running.
                return;
            } else if (carouselState.isPaused) {
                unPauseCarousel();
            }
            carouselState.timer = window.setInterval(carouselRunner, carouselState.timeout);
        };
        const stopCarousel = () => {
            if (carouselState.timer === 0) {
                // Already stopped.
                return;
            }
            window.clearInterval(carouselState.timer);
            carouselState.timer = 0;
        };

        {% if show_hero_carousel_pagination %}
        carousel.querySelector('.hero-with-headline--carousel--pagination--items-wrapper').addEventListener('click', (event) => {
            const findItemParent = (element) => {
                if (element.classList.contains('hero-with-headline--carousel--pagination--item')) {
                    return element;
                }
                if (element.parentElement) {
                    return findItemParent(element.parentElement);
                }
                return null;
            };
            const item = findItemParent(event.target);
            if (item) {
                const index = Array.prototype.indexOf.call(paginationItems, item);
                carouselState.currentFrame = index;
                carouselState.nextFrame = index + 1;
                move(carouselState);
                carouselState.previousFrame = index;
                carouselState.currentFrame = carouselState.nextFrame;
                carouselState.nextFrame = carouselState.nextFrame + 1;
                pauseCarousel();
            }
        });
        {% endif %}

        function moveLeftRight(direction) {
            if (direction === 'left') {
                if (carouselState.currentFrame === 1) {
                    return;
                }
            } else {
                if (carouselState.currentFrame === itemCount) {
                    return;
                }
            }
            stopCarousel();
            if (direction === 'left') {
                // Move the carousel 'back'; next = previous; current = previous - 1.
                carouselState.nextFrame = carouselState.previousFrame;
                carouselState.currentFrame = carouselState.previousFrame - 1;
            } 
            // Position the carousel with the updated state.
            // Then setup the next frame and start the timer.
            move(carouselState);
            carouselState.previousFrame = carouselState.currentFrame;
            carouselState.currentFrame = carouselState.nextFrame;
            carouselState.nextFrame = carouselState.nextFrame + 1;
            startCarousel();
        }

        const initializeSwipeState = (startingPoint) => {
            return {
                start: { ...startingPoint },
                movementSteps: [],
                end: null,
                direction: '',
            };
        };

        const setEndingSwipeState = (endingPoint) => {
            const distanceX = endingPoint.x - swipeState.start.x;
            if (Math.abs(distanceX) >= SWIPE_MIN_DISTANCE_THRESHOLD) {
                const direction = distanceX < 0 ? 'right' : distanceX > 0 ? 'left' : '';
                return {
                    ...swipeState,
                    end: endingPoint,
                    direction,
                };
            }
            return {
                ...swipeState,
                end: endingPoint,
                direction: '',
            };
        };

        const resetSwipeState = () => {
            return {
                start: null,
                movementSteps: null,
                end: null,
                direction: 0,
            };
        }

        const getTouchMouseEventCoordinates = (e) => {
            if (e.changedTouches) {
                return {
                    x: e.changedTouches[0].clientX,
                    y: e.changedTouches[0].clientY,
                };
            }
            return {
                x: e.clientX,
                y: e.clientY,
            };
        };

        let swipeState = resetSwipeState();
        const SWIPE_MIN_DISTANCE_THRESHOLD = 30;

        const onTouchStart = (e) => {
            stopCarousel();
            const startingPoint = getTouchMouseEventCoordinates(e);
            swipeState = initializeSwipeState(startingPoint);
            console.log('Touch start...');
            console.log(swipeState);
        };
        
        const onTouchEnd = (e) => {
            const endingPoint = getTouchMouseEventCoordinates(e);
            swipeState = setEndingSwipeState(endingPoint);
            console.log('Touch end...');
            console.log(swipeState);
            if (['left', 'right'].includes(swipeState.direction)) {
                moveLeftRight(swipeState.direction);
                console.log('Swiped to the ', swipeState.direction);
                e.stopPropagation();
                e.stopImmediatePropagation();
            } else {
                startCarousel();
            }
        };

        const onTouchCancel = (e) => {
            swipeState = resetSwipeState();
            startCarousel();
        };

        const viewportClassSelector = '.hero-with-headline--carousel--viewport';
        const carouselViewport = carousel.querySelector(viewportClassSelector);
        if (carouselViewport) {
            carouselViewport.addEventListener('touchstart', onTouchStart, {
                capture: true,
                passive: true,
            });
            carouselViewport.addEventListener('touchend', onTouchEnd, {
                capture: true,
                passive: true,
            });
            carouselViewport.addEventListener('touchcancel', onTouchCancel);
            carouselViewport.addEventListener('mousedown', onTouchStart, {
                capture: true,
                passive: true,
            });
            carouselViewport.addEventListener('mouseup', onTouchEnd, {
                capture: true,
                passive: true,
            });
        }

        {% if show_hero_carousel_arrows %}
        carousel.querySelector('.landing-page-hero--arrows--arrow__left > opensearch-button').addEventListener('click', (event) => {
            moveLeftRight('left');
        });
        carousel.querySelector('.landing-page-hero--arrows--arrow__right > opensearch-button').addEventListener('click', (event) => {
            moveLeftRight('right');
        });
        {% endif %}
        startCarousel();
    });
</script>