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

work on main design & layout

Browse Source
This commit is contained in:
bkfox
2024-01-26 21:55:43 +01:00
parent 0adcacf375
commit 25ceacdff9
25 changed files with 713 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,24 +1,27 @@
<template>
<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>
<nav class="a-carousel-bullets-container">
<!-- <span class="icon bullet" @click="prev" v-if="showPrevButton">
<i :class="leftButtonIcon"></i>
</span> -->
<template v-if="bullets.length > 1">
<span class="icon bullet" v-bind:key="bullet" v-for="bullet of bullets" @click="select(bullet)">
<i v-if="bullet == index" class="fa fa-circle"></i>
<i v-else class="far fa-circle"></i>
</span>
</template>
<!-- <span class="icon bullet" @click="next" v-if="showNextButton">
<i :class="rightButtonIcon"></i>
</span> -->
<slot name="bullets-right" :v-bind="this"></slot>
</nav>
</section>
</template>
<style scoped>
@ -42,10 +45,62 @@
flex-shrink: 0;
}
.a-carousel-bullets-container {
justify-content: center;
flex-grow: 1;
}
.a-carousel-bullets-container .bullet {
cursor: pointer;
}
.a-carousel-bullets-container .bullet-right {
margin-left: auto;
}
.a-carousel-bullets-container {
display: flex;
flex-direction: row;
}
</style>
<script>
import {ref} from 'vue'
class Offset {
constructor(el, min=null, max=null) {
this.el = el
this.rect = el.getBoundingClientRect();
({min, max} = this.minmax(min, max))
this.min = min
this.max = max
this.size = max-min
}
minmax(min=null, max=null) {
min = min === null ? this.rect.left : min
max = max === null ? this.rect.right : max
return {min, max}
}
relative(to) {
return new Offset(this.el, this.min-to.min, this.max-to.min)
}
}
class Card extends Offset {
constructor(el, index) {
super(el)
this.index = index
}
visible(viewportOffset) {
return viewportOffset.min <= this.min && viewportOffset.max >= this.max
}
}
export default {
setup() {
return {
@ -58,7 +113,7 @@ export default {
return {
cards: [],
index: 0,
refresh_: 0,
refresh_: 0,
}
},
@ -72,109 +127,77 @@ export default {
computed: {
card() { return this.cards()[this.index] },
showPrevButton() {
/*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_]
bullets() {
if(!this.cards || !this.$refs.viewport)
return []
if(!this.cards)
return {min: -1, max: -1, count: 0};
let contOff = new Offset(this.$refs.container)
let viewMax = new Offset(this.$refs.viewport).max
let bullets = []
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)
let i = 0;
let max = viewMax
bullets.push(i)
while(i < this.cards.length) {
// skip until next view
for(; i < this.cards.length; i++) {
let card = this.cards[i].relative(contOff)
if(card.max > max) {
max = card.min + viewMax
bullets.push(i)
i++
break
}
}
}
if(max !== -1)
max++
return {
min, max,
count: (min !== -1) ? max-min : 0
}
return bullets
},
},
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.$refs.container)
return []
if(!this.cardSelector)
return this.$refs.container.children
return this.$refs.container.querySelectorAll(this.cardSelector)
let nodes = (!this.cardSelector) ?
[...this.$refs.container.children] :
[...this.$refs.container.querySelectorAll(this.cardSelector)]
return nodes.map((el, index) => new Card(el, index))
},
selectIndex(index, relative=false) {
select(index, relative=false) {
if(relative)
index = this.index + index
index = Math.min(this.cards.length, index)
const el = this.cards[index]
if(!el)
index = Math.min(index, this.cards.length)
index = Math.max(index, 0)
let card = this.cards[index]
if(!card)
return null;
const elOff = this.offset(el, this.$refs.container)
this.$refs.container.style.marginLeft = `-${elOff.min}px`
card = new Card(card.el)
const cont = new Offset(this.$refs.container)
const rel = card.relative(cont)
this.$refs.container.style.marginLeft = `-${rel.min}px`
this.index = index;
return el
},
next() {
this.refresh_++
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() {
this.refresh_++
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)
return card.el
},
refresh() {
this.cards = this.getCards()
this.selectIndex(this.index)
this.select(this.index)
this.refresh_++
}
},