aircox/assets/src/components/ACarousel.vue

<template>
    <div class="a-carousel-button-container" v-if="showPrevButton">
        <button :class="[buttonClass, 'prev']" aria-label="Go left" @click="prev">
            <span class="icon">
                <i :class="leftButtonIcon"></i>
            </span>
        </button>
    </div>
    <div class="a-carousel-button-container" v-if="showNextButton">
        <button :class="[buttonClass, 'next']" aria-label="Go left" @click="next">
            <span class="icon">
                <i :class="rightButtonIcon"></i>
            </span>
        </button>
    </div>
    <div ref="viewport" class="a-carousel-viewport">
        <section ref="container" :class="['a-carousel-container', containerClass]">
            <slot name="default"></slot>
        </section>
    </div>
</template>
<style scoped>
.a-carousel-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.a-carousel-container {
    display: flex;
    flex-direction: row;
    align-items: left;
}

.a-carousel-container > * {
    flex-shrink: 0;
}

</style>
<script>
import {ref} from 'vue'

export default {
    setup() {
        return {
            viewport: ref(null),
            container: ref(null),
        }
    },

    data() {
        return {
            cards: [],
            index: 0,
            refresh_: 0,
        }
    },

    props: {
        cardSelector: {type: String, default: ''},
        containerClass: {type: String, default: ''},
        buttonClass: {type: String, default: 'button'},
        leftButtonIcon: {type: String, default: "fas fa-chevron-left"},
        rightButtonIcon: {type: String, default: "fas fa-chevron-right"},
    },

    computed: {
        card() { return this.cards()[this.index] },
        showPrevButton() {
            return this.index > 0
        },
        showNextButton() {
            if(!this.cards || this.cards.length <= 1)
                return false

            let { count } = this.visibility
            return (this.index + count) < this.cards.length
        },

        visibility() {
            // force refresh on index
            [this.index, this.refresh_]

            if(!this.cards)
                return {min: -1, max: -1, count: 0};

            const vOff = this.offset(this.$refs.viewport)
            var [min, max] = [-1, -1]
            for(let at=0; at < this.cards.length; at++) {
                const card = this.cards[at]
                const cOff = this.offset(card)
                const visible = vOff.min <= cOff.min && vOff.max >= cOff.max
                if(visible) {
                    if(min === -1)
                        min = parseInt(at)
                    max = parseInt(at)
                }
            }
            if(max !== -1)
                max++
            return {
                min, max,
                count: (min !== -1) ? max-min : 0
            }
        },
    },

    methods: {
        offset(el, parent=null) {
            const rect = el.getBoundingClientRect()
            const off = {min: rect.left, max: rect.right  }
            if(parent === null)
                return off

            const pOff = this.offset(parent)
            return {
                min: off.min - pOff.min,
                max: off.max - pOff.max,
            }
        },

        getCards() {
            if(!this.cardSelector)
                return this.$refs.container.children
            return this.$refs.container.querySelectorAll(this.cardSelector)
        },

        selectIndex(index, relative=false) {
            if(relative)
                index = this.index + index

            index = Math.min(this.cards.length, index)
            const el = this.cards[index]
            const elOff = this.offset(el, this.$refs.container)
            this.$refs.container.style.marginLeft = `-${elOff.min}px`
            this.index = index;
            return el
        },

        next() {
            if(!this.visibility.count)
                return
            let {count} = this.visibility
            let at = Math.min(
                count === 1 ? this.index+count : this.index+count-1,
                this.cards.length-count
            )
            this.selectIndex(at)
        },

        prev() {
            if(!this.visibility.count)
                return
            const {min, count} = this.visibility
            let at = Math.max(0, min-count)
            if(min < 0 || count <= 0)
                return
            this.selectIndex(at)
        },

        refresh() {
            this.cards = this.getCards()
            this.selectIndex(this.index)
            this.refresh_++
        }
    },


    mounted() {
        this.observer = [
            new MutationObserver(() => this.refresh()),
            new ResizeObserver(() => this.refresh())
        ]
        this.observer[0].observe(this.$refs.container, {"childList": true})
        this.observer[1].observe(this.$refs.container)
        this.refresh()
    },

    unmounted() {
        for(var observer of this.observers)
            observer.disconnect()
    }
}
</script>