removed depreciated carousel
This commit is contained in:
@@ -1,280 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="sm-carousel"
|
|
||||||
@mouseover="handleMouseOver"
|
|
||||||
@mouseleave="handleMouseLeave">
|
|
||||||
<div ref="slides" class="sm-carousel-slides">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
<div class="sm-carousel-slide-prev" @click="handleClickSlidePrev">
|
|
||||||
<ion-icon name="chevron-back-outline" />
|
|
||||||
</div>
|
|
||||||
<div class="sm-carousel-slide-next" @click="handleClickSlideNext">
|
|
||||||
<ion-icon name="chevron-forward-outline" />
|
|
||||||
</div>
|
|
||||||
<div class="sm-carousel-slide-indicators">
|
|
||||||
<div
|
|
||||||
v-for="(indicator, index) in slideElements"
|
|
||||||
:key="index"
|
|
||||||
:class="[
|
|
||||||
'sm-carousel-slide-indicator-item',
|
|
||||||
{ highlighted: currentSlide == index },
|
|
||||||
]"
|
|
||||||
@click="handleClickIndicator(index)"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, onUnmounted, Ref, ref } from "vue";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reference to slides element.
|
|
||||||
*/
|
|
||||||
const slides: Ref<HTMLElement | null> = ref(null);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The list of slide elements.
|
|
||||||
*/
|
|
||||||
let slideElements: Ref<NodeList | null> = ref(null);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Index of the current slide.
|
|
||||||
*/
|
|
||||||
let currentSlide = ref(0);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The maximum number of slides.
|
|
||||||
*/
|
|
||||||
let maxSlide = ref(0);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The window interval reference to slide the carousel.
|
|
||||||
*/
|
|
||||||
let intervalRef: number | null = null;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The active mutation observer.
|
|
||||||
*/
|
|
||||||
const mutationObserver: Ref<MutationObserver | null> = ref(null);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle the user moving the mouse over the carousel.
|
|
||||||
*/
|
|
||||||
const handleMouseOver = () => {
|
|
||||||
stopAutoSlide();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle the user moving the mouse leaving the carousel.
|
|
||||||
*/
|
|
||||||
const handleMouseLeave = () => {
|
|
||||||
startAutoSlide();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle the user clicking the previous slider indicator.
|
|
||||||
*/
|
|
||||||
const handleClickSlidePrev = () => {
|
|
||||||
if (currentSlide.value == 0) {
|
|
||||||
currentSlide.value = maxSlide.value;
|
|
||||||
} else {
|
|
||||||
currentSlide.value--;
|
|
||||||
}
|
|
||||||
|
|
||||||
updateSlidePositions();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle the user clicking the next slider indicator.
|
|
||||||
*/
|
|
||||||
const handleClickSlideNext = () => {
|
|
||||||
if (currentSlide.value == maxSlide.value) {
|
|
||||||
currentSlide.value = 0;
|
|
||||||
} else {
|
|
||||||
currentSlide.value++;
|
|
||||||
}
|
|
||||||
|
|
||||||
updateSlidePositions();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle the user clicking a slider indicator.
|
|
||||||
*
|
|
||||||
* @param {number} index The slide to move to.
|
|
||||||
*/
|
|
||||||
const handleClickIndicator = (index: number) => {
|
|
||||||
currentSlide.value = index;
|
|
||||||
updateSlidePositions();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle slides added/removed from the carousel and update the data/indicators.
|
|
||||||
*/
|
|
||||||
const handleCarouselUpdate = () => {
|
|
||||||
if (slides.value != null) {
|
|
||||||
slideElements.value =
|
|
||||||
slides.value.querySelectorAll(".sm-carousel-slide");
|
|
||||||
maxSlide.value = slideElements.value.length - 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
updateSlidePositions();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Update the style transform of each slide.
|
|
||||||
*/
|
|
||||||
const updateSlidePositions = () => {
|
|
||||||
if (slideElements.value != null) {
|
|
||||||
slideElements.value.forEach((slide, index) => {
|
|
||||||
(slide as HTMLElement).style.transform = `translateX(${
|
|
||||||
100 * (index - currentSlide.value)
|
|
||||||
}%)`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Start the carousel slider.
|
|
||||||
*/
|
|
||||||
const startAutoSlide = () => {
|
|
||||||
if (intervalRef == null) {
|
|
||||||
intervalRef = window.setInterval(() => {
|
|
||||||
handleClickSlideNext();
|
|
||||||
}, 7000);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Stop the carousel slider.
|
|
||||||
*/
|
|
||||||
const stopAutoSlide = () => {
|
|
||||||
if (intervalRef != null) {
|
|
||||||
window.clearInterval(intervalRef);
|
|
||||||
intervalRef = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Connect the mutation observer to the slider.
|
|
||||||
*/
|
|
||||||
const connectMutationObserver = () => {
|
|
||||||
if (slides.value != null) {
|
|
||||||
mutationObserver.value = new MutationObserver(handleCarouselUpdate);
|
|
||||||
|
|
||||||
mutationObserver.value.observe(slides.value, {
|
|
||||||
attributes: false,
|
|
||||||
childList: true,
|
|
||||||
characterData: true,
|
|
||||||
subtree: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Disconnect the mutation observer from the slider.
|
|
||||||
*/
|
|
||||||
const disconnectMutationObserver = () => {
|
|
||||||
if (mutationObserver.value) {
|
|
||||||
mutationObserver.value.disconnect();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
connectMutationObserver();
|
|
||||||
handleCarouselUpdate();
|
|
||||||
startAutoSlide();
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
stopAutoSlide();
|
|
||||||
disconnectMutationObserver();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.sm-carousel {
|
|
||||||
position: relative;
|
|
||||||
height: 28rem;
|
|
||||||
background: #eee;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.sm-carousel-slide-prev,
|
|
||||||
.sm-carousel-slide-next,
|
|
||||||
.sm-carousel-slide-indicators {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm-carousel-slide-prev,
|
|
||||||
.sm-carousel-slide-next {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
font-size: 300%;
|
|
||||||
-webkit-transform: translateY(-50%) scale(1);
|
|
||||||
transform: translateY(-50%) scale(1);
|
|
||||||
cursor: pointer;
|
|
||||||
color: #fff;
|
|
||||||
transform-origin: center center;
|
|
||||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
|
||||||
opacity: 0.75;
|
|
||||||
|
|
||||||
ion-icon {
|
|
||||||
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
-webkit-transform: translateY(-50%) scale(1.25);
|
|
||||||
transform: translateY(-50%) scale(1.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm-carousel-slide-prev {
|
|
||||||
left: 1rem;
|
|
||||||
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm-carousel-slide-next {
|
|
||||||
right: 1rem;
|
|
||||||
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm-carousel-slide-indicators {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
bottom: 0.25rem;
|
|
||||||
width: 100%;
|
|
||||||
height: 2rem;
|
|
||||||
opacity: 0.75;
|
|
||||||
transition: opacity 0.2s ease-in-out;
|
|
||||||
|
|
||||||
.sm-carousel-slide-indicator-item {
|
|
||||||
height: 12px;
|
|
||||||
width: 12px;
|
|
||||||
border: 1px solid white;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 80%;
|
|
||||||
margin: 0 calc(#{map-get($spacer, 1)} / 3);
|
|
||||||
color: #fff;
|
|
||||||
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 1));
|
|
||||||
|
|
||||||
&.highlighted {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 400px) {
|
|
||||||
.sm-carousel {
|
|
||||||
.sm-carousel-slide-prev,
|
|
||||||
.sm-carousel-slide-next {
|
|
||||||
font-size: 150%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,194 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="sm-carousel-slide" :style="styleObject">
|
|
||||||
<div class="sm-carousel-slide-body">
|
|
||||||
<div class="sm-carousel-slide-content">
|
|
||||||
<div class="sm-carousel-slide-content-inner">
|
|
||||||
<h3>{{ title }}</h3>
|
|
||||||
<p v-if="content">{{ content }}</p>
|
|
||||||
<div class="sm-carousel-slide-body-buttons">
|
|
||||||
<SMButton
|
|
||||||
v-if="url"
|
|
||||||
:to="url"
|
|
||||||
:label="cta"
|
|
||||||
type="secondary-outline" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import SMButton from "./SMButton.vue";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
image: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
url: {
|
|
||||||
type: [String, Object],
|
|
||||||
default: "",
|
|
||||||
required: false,
|
|
||||||
},
|
|
||||||
cta: {
|
|
||||||
type: String,
|
|
||||||
default: "View",
|
|
||||||
required: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Carousel slide styles.
|
|
||||||
*/
|
|
||||||
let styleObject = {
|
|
||||||
backgroundImage: `url('${props.image}')`,
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.sm-carousel-slide {
|
|
||||||
position: absolute;
|
|
||||||
transition: all 0.5s;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.sm-carousel-slide-loading {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm-carousel-slide-body {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 1rem;
|
|
||||||
|
|
||||||
.sm-carousel-slide-content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(0, 0, 0, 0.75);
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
max-width: 800px;
|
|
||||||
padding: 2rem 3rem 1.5rem 3rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
margin-left: 3rem;
|
|
||||||
margin-right: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 200%;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 0 0.5rem 0;
|
|
||||||
text-shadow: 0 0 8px rgba(0, 0, 0, 1);
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
display: inline-block;
|
|
||||||
color: #fff;
|
|
||||||
max-width: 600px;
|
|
||||||
text-shadow: 0 0 8px rgba(0, 0, 0, 1);
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm-carousel-slide-body-buttons {
|
|
||||||
margin-top: 2rem;
|
|
||||||
text-align: right;
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary-outline {
|
|
||||||
border-color: #fff;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.sm-carousel-slide {
|
|
||||||
.sm-carousel-slide-body {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.sm-carousel-slide-content {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 5rem;
|
|
||||||
padding-right: 5rem;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
.sm-carousel-slide-content-inner {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 120%;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sm-carousel-slide-body-buttons {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 640px) {
|
|
||||||
.sm-carousel-slide .sm-carousel-slide-body {
|
|
||||||
h3,
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 400px) {
|
|
||||||
.sm-carousel-slide .sm-carousel-slide-body {
|
|
||||||
.sm-carousel-slide-content {
|
|
||||||
padding-left: 3rem;
|
|
||||||
padding-right: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 175%;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user