SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: migrate Gallery component

Browse source
This commit is contained in:
Sebin Nyshkim 2023-01-20 00:48:15 +01:00
parent 4384759616
commit 6e2a633b45
1 changed files with 39 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

188
src/components/Gallery.vue
View file

@ -1,188 +0,0 @@
<template>
<div class="gallery">
<div class="gallery__images">
<a
href="#"
class="gallery__prev"
@click.prevent="prev()"
v-show="activeImage > 0"
></a>
<a
href="#"
class="gallery__next"
@click.prevent="next()"
v-show="activeImage < images.length - 1"
></a>
<div class="gallery__viewport" :style="offset">
<slot></slot>
</div>
</div>
<nav class="gallery__navigation">
<ul>
<li v-for="(image, idx) in images" :key="idx">
<a
href="#"
:class="{ active: activeImage === idx }"
@click.prevent="setActive(idx)"
></a>
</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
name: "gallery",
data() {
return {
activeImage: 0,
images: [],
};
},
computed: {
offset() {
return `margin-left: -${this.activeImage * 100}%`;
},
},
methods: {
setActive(index) {
this.activeImage = index;
},
prev() {
if (this.activeImage > 0) {
this.activeImage -= 1;
}
},
next() {
if (this.activeImage < this.images.length - 1) {
this.activeImage += 1;
}
},
},
mounted() {
const sel = ".gallery__viewport .figure";
const elements = this.$el.querySelectorAll(sel);
const images = Array.from(elements);
this.images = images;
},
};
</script>
<style lang="scss">
@import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";
.gallery {
&__prev,
&__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 1em;
height: 1em;
z-index: 1;
border: {
top: 0.125em solid #fff;
right: 0.125em solid #fff;
}
@include mq-desktop {
width: 1.5em;
height: 1.5em;
}
}
&__prev {
left: 1.5em;
transform: rotate(-135deg);
@include mq-desktop {
left: 2em;
}
}
&__next {
right: 1.5em;
transform: rotate(45deg);
@include mq-desktop {
right: 2em;
}
}
&__images {
position: relative;
overflow: hidden;
}
&__viewport {
display: flex;
flex-flow: row nowrap;
align-items: center;
width: 100%;
height: 100%;
transition: 0.3s all ease-in-out;
}
.figure {
margin: 0;
padding: 0 3em;
flex: 1 0 100%;
@include mq-desktop {
padding: 0 3.5em;
}
&__meta {
text-align: center;
p {
margin: 0.5em auto;
}
}
}
&__navigation {
display: flex;
flex-flow: row wrap;
justify-content: center;
ul {
flex: 0 1 auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
list-style: none;
margin: 1em 0;
padding: 0;
}
li {
flex: 0 1 auto;
padding: 0.375em;
a {
display: block;
width: 0.5em;
height: 0.5em;
border-radius: 1em;
background: rgba(#fff, 0.5);
&.active {
background: #fff;
}
}
}
}
}
</style>