carousel, display logs

assets/src/components/ACarousel.vue

@@ -0,0 +1,184 @@
+<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>

assets/src/components/index.js

@@ -1,4 +1,5 @@
 import AAutocomplete from './AAutocomplete.vue'
+import ACarousel from './ACarousel.vue'
 import ADropdown from "./ADropdown.vue"
 import AEpisode from './AEpisode.vue'
 import AList from './AList.vue'
@@ -15,7 +16,7 @@ import AStreamer from './AStreamer.vue'
  * Core components
  */
 export const base = {
-    AAutocomplete, ADropdown, AEpisode, AList, APage, APlayer, APlaylist,
+    AAutocomplete, ACarousel, ADropdown, AEpisode, AList, APage, APlayer, APlaylist,
     AProgress, ASoundItem,
 }