Skip to content

Commit 4f66297

Browse files
AlacrisDevsAlacrisDevs
committed
Updated GalleryCard, added GalleryOverlay, did some code refactoring for style, should be hella nicer now
1 parent b0f6408 commit 4f66297

File tree

12 files changed

+300
-208
lines changed

12 files changed

+300
-208
lines changed

‎src/components/cards/GalleryCard.vue‎

Lines changed: 12 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue';
3-
import { galleryList } from '../lists/GalleryData.js';
42
const props = defineProps({
53
index: {
64
type: Number,
@@ -16,66 +14,22 @@ const props = defineProps({
1614
},
1715
});
1816
19-
const isOverlayOpen = ref(false);
20-
const currentImageIndex = ref(props.index);
21-
const images = ref(galleryList);
17+
const emit = defineEmits(['open-overlay']);
2218
23-
const toggleOverlay = () => {
24-
isOverlayOpen.value = !isOverlayOpen.value;
25-
setupScrollLock();
26-
currentImageIndex.value = props.index;
27-
};
28-
29-
const setupScrollLock = () => {
30-
document.body.style.overflow = isOverlayOpen.value ? 'hidden' : '';
31-
};
32-
33-
const showNextImage = () => {
34-
if (currentImageIndex.value < images.value.length) {
35-
currentImageIndex.value++;
36-
}
37-
};
38-
39-
const showPreviousImage = () => {
40-
if (currentImageIndex.value > 0) {
41-
currentImageIndex.value--;
42-
}
19+
const handleClick = () => {
20+
emit('open-overlay', props.index);
4321
};
4422
</script>
4523

4624
<template>
47-
<button @click.prevent="toggleOverlay"
48-
class="w-32 xl:w-64 sm:w-32 aspect-video flex-col justify-center items-start gap-4 inline-flex">
49-
<img class="w-32 xl:w-64 sm:w-32 aspect-video object-cover object-center relative" :src="imageSrc"
50-
:alt="cardName" />
25+
<button @click="handleClick"
26+
class="w-full h-full max-h-56 flex-col justify-center items-center flex relative shadow-card">
27+
<img class="w-full h-full aspect-video object-cover" :src="imageSrc" :alt="cardName" />
5128
</button>
52-
<div v-if="isOverlayOpen"
53-
class="fixed inset-0 px-8 xl:px-32 py-16 bg-dark bg-opacity-95 z-[1] flex flex-col items-center justify-center gap-8">
54-
<img class="w-auto h-1/3 xl:h-3/4 lg:h-1/2 md:h-2/5 sm:h-1/3 aspect-auto relative"
55-
:src="galleryList[currentImageIndex].src" :alt="galleryList[currentImageIndex].name" />
56-
57-
<h3 class="text-light">{{ galleryList[currentImageIndex].name }}</h3>
58-
59-
<button @click.prevent="toggleOverlay" class="p-2 absolute top-20 right-4 xl:top-24 xl:right-6 z-[2]">
60-
<svg class="w-8 xl:w-16 h-8 xl:h-16" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
61-
<g fill="none" stroke="#E9F2FF" stroke-width="4">
62-
<line x1="5" y1="5" x2="27" y2="27" />
63-
<line x1="5" y1="27" x2="27" y2="5" />
64-
</g>
65-
</svg>
66-
</button>
29+
</template>
6730

68-
<button v-if="currentImageIndex > 0" @click.prevent="showPreviousImage" class="p-2 absolute left-4 xl:left-6 z-[2]">
69-
<svg class="w-8 xl:w-16 h-8 xl:h-16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
70-
<path d="M21 5L10 16L21 27" stroke="#E9F2FF" stroke-width="4" />
71-
</svg>
72-
</button>
73-
74-
<button v-if="currentImageIndex < galleryList.length - 1" @click.prevent="showNextImage"
75-
class="p-2 absolute right-4 xl:right-6 z-[2]">
76-
<svg class="w-8 xl:w-16 h-8 xl:h-16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
77-
<path d="M10 27L21 16L10 5" stroke="#E9F2FF" stroke-width="4" />
78-
</svg>
79-
</button>
80-
</div>
81-
</template>
31+
<script lang="ts">
32+
export default {
33+
name: 'GalleryCard'
34+
};
35+
</script>

‎src/components/cards/GalleryOverlay.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<script setup lang="ts">
2+
import { onMounted, onUnmounted } from 'vue';
3+
4+
interface Photo {
5+
src: string;
6+
name: string;
7+
}
8+
9+
const props = defineProps({
10+
photos: {
11+
type: Array as () => Photo[],
12+
required: true,
13+
},
14+
currentIndex: {
15+
type: Number,
16+
required: true,
17+
},
18+
isOpen: {
19+
type: Boolean,
20+
required: true,
21+
},
22+
});
23+
24+
const emit = defineEmits(['close-overlay', 'update-index']);
25+
26+
const handleClose = () => {
27+
emit('close-overlay');
28+
};
29+
30+
const showNextImage = () => {
31+
if (props.currentIndex < props.photos.length - 1) {
32+
emit('update-index', props.currentIndex + 1);
33+
}
34+
};
35+
36+
const showPreviousImage = () => {
37+
if (props.currentIndex > 0) {
38+
emit('update-index', props.currentIndex - 1);
39+
}
40+
};
41+
42+
// Handle Keydown Events
43+
const handleKeyDown = (event: KeyboardEvent) => {
44+
switch (event.key) {
45+
case 'Escape':
46+
handleClose();
47+
// console.log('Escape');
48+
break;
49+
case 'ArrowRight':
50+
showNextImage();
51+
// console.log('ArrowRight');
52+
break;
53+
case 'ArrowLeft':
54+
showPreviousImage();
55+
// console.log('ArrowLeft');
56+
break;
57+
}
58+
};
59+
60+
onMounted(() => {
61+
window.addEventListener('keydown', handleKeyDown);
62+
});
63+
64+
onUnmounted(() => {
65+
window.removeEventListener('keydown', handleKeyDown);
66+
});
67+
</script>
68+
69+
70+
<template>
71+
<div v-if="isOpen"
72+
class="p-0 2xl:py-24 2xl:px-8 fixed inset-0 bg-dark/90 z-20 flex flex-row items-center justify-center">
73+
<!-- Close Button -->
74+
<button @click.prevent="handleClose" class="pt-24 pr-8 px-4 absolute top-0 right-0">
75+
<svg class="w-8 xl:w-16 h-8 xl:h-16" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
76+
<g fill="none" stroke="#E9F2FF" stroke-width="4">
77+
<line x1="5" y1="5" x2="27" y2="27" />
78+
<line x1="5" y1="27" x2="27" y2="5" />
79+
</g>
80+
</svg>
81+
</button>
82+
83+
<!-- Left Arrow -->
84+
<button @click.prevent="showPreviousImage" :disabled="currentIndex === 0" class="m-4 z-30 disabled:opacity-0">
85+
<svg class="w-8 xl:w-16 h-8 xl:h-16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
86+
<path d="M21 5L10 16L21 27" stroke="#E9F2FF" stroke-width="4" />
87+
</svg>
88+
</button>
89+
90+
<!-- Image and Description -->
91+
<div class="w-full items-center justify-center gap-8 flex-col flex">
92+
<img class="w-full h-auto max-w-[100%] max-h-[80vh] object-contain" :src="photos[currentIndex].src"
93+
:alt="photos[currentIndex].name" />
94+
<h3 class="text-center">{{ photos[currentIndex].name }}</h3>
95+
</div>
96+
97+
<!-- Right Arrow -->
98+
<button @click.prevent="showNextImage" :disabled="currentIndex === photos.length - 1"
99+
class="m-4 z-30 disabled:opacity-0">
100+
<svg class="w-8 xl:w-16 h-8 xl:h-16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
101+
<path d="M10 27L21 16L10 5" stroke="#E9F2FF" stroke-width="4" />
102+
</svg>
103+
</button>
104+
</div>
105+
</template>

‎src/components/cards/ImageCard.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script setup lang="ts">
2-
import { designList } from '../lists/DesignsData.js';
32
const props = defineProps<{
43
imageSrc: string,
54
cardName: string,

‎src/components/cards/LinkCard.vue‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
<script setup lang="ts">
2-
import { brandList } from '../lists/BrandsData.js';
3-
import { eventList } from '../lists/EventsData.js';
4-
import { gameList } from '../lists/GamesData.js';
52
const props = defineProps<{
63
cardUrl: string,
74
imageSrc: string,

‎src/components/lists/BrandsData.js‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

0 commit comments

Comments
 (0)