rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

carousel, display logs

Browse Source
This commit is contained in:
bkfox
2023-11-28 01:23:56 +01:00
parent cb5a6a3ee8
commit ed9affbef6
6 changed files with 58 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/src/assets/styles.scss
View File

@ -665,6 +665,7 @@ nav li {
& .headings {
width: var(--preview-cover-size);
min-width: var(--preview-cover-size);
flex-grow: 0;
margin-right: $mp-4;
}
@ -751,6 +752,10 @@ nav li {
gap: $mp-4;
}
.a-carousel {
padding-bottom: $text-size-medium;
}
.a-carousel-container {
width: 100%;
gap: $mp-4;

60
assets/src/components/ACarousel.vue
View File

@ -1,29 +1,35 @@
<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>
<section class="a-carousel">
<nav 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>
</nav>
<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>
<nav ref="viewport" class="a-carousel-viewport">
<section ref="container" :class="['a-carousel-container', containerClass]">
<slot name="default"></slot>
</section>
</nav>
</section>
</template>
<style scoped>
.a-carousel {
width: 100%;
position: relative;
}
.a-carousel-viewport {
width: 100%;
overflow: hidden;
position: relative;
}
.a-carousel-container {
@ -120,6 +126,8 @@ export default {
},
getCards() {
if(!this.$refs.container)
return []
if(!this.cardSelector)
return this.$refs.container.children
return this.$refs.container.querySelectorAll(this.cardSelector)
@ -131,6 +139,8 @@ export default {
index = Math.min(this.cards.length, index)
const el = this.cards[index]
if(!el)
return null;
const elOff = this.offset(el, this.$refs.container)
this.$refs.container.style.marginLeft = `-${elOff.min}px`
this.index = index;
@ -138,6 +148,8 @@ export default {
},
next() {
this.refresh_++
if(!this.visibility.count)
return
let {count} = this.visibility
@ -149,6 +161,8 @@ export default {
},
prev() {
this.refresh_++
if(!this.visibility.count)
return
const {min, count} = this.visibility
@ -167,12 +181,12 @@ export default {
mounted() {
this.observer = [
this.observers = [
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.observers[0].observe(this.$refs.container, {"childList": true})
this.observers[1].observe(this.$refs.container)
this.refresh()
},