Skip to content

Commit

Permalink
remove the auto transition stuff - cool but disconcerting
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcolarosa
marcolarosa committed Oct 26, 2024
1 parent 721c148 commit bc4d302
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 198 deletions.
17 changes: 1 addition & 16 deletions src/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,6 @@ layout: home
content: '/images/guide-working-with-a-crate/dataset17.webp'
},
]"
:auto-play="true"
:interval="8000"
:initial-delay=0
/>

<!-- <InfoPanelComponent layout="rtl">
Expand Down Expand Up @@ -132,9 +129,6 @@ layout: home
},
]"
documentation="/docs/guide/vocabulary.html"
:auto-play="true"
:interval="8000"
:initial-delay=1600
/>

<InfoPanelComponent>
Expand Down Expand Up @@ -219,9 +213,6 @@ layout: home
},
]"
documentation="/docs/guide/transcribing-content.html"
:auto-play="true"
:interval="8000"
:initial-delay=3200
/>

<!-- <InfoPanelComponent layout="rtl">
Expand Down Expand Up @@ -268,9 +259,6 @@ layout: home
},
]"
documentation="/docs/guide/assistant-supported-discovery.html"
:auto-play="true"
:interval="8000"
:initial-delay=4800
/>

<!-- <InfoPanelComponent>
Expand Down Expand Up @@ -302,7 +290,7 @@ layout: home
{
title: 'Visualisation',
text: `
Manipulate size and colour of nodes of interest to reveal the features.
Manipulate the size and colour of nodes of interest to reveal the features.
`,
content: '/images/guide-visualise/visualise4.webp'
},
Expand All @@ -315,9 +303,6 @@ layout: home
},
]"
documentation="/docs/guide/visualising-the-structure.html"
:auto-play="true"
:interval="8000"
:initial-delay=6400
/>

</div>
Expand Down
1 change: 1 addition & 0 deletions src/vue-components/Image.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<img :src="src" />
</div> -->
<ImageZoom :src="props.src" alt="Zoom 1" />
<TipComponent>Click the image for a closer look!</TipComponent>
</div>
</template>

Expand Down
187 changes: 5 additions & 182 deletions src/vue-components/InfoPanelCarousel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,6 @@
class="flex flex-col lg:flex-row lg:space-x-2 justify-around items-center"
:class="{ 'border-t border-slate-400': props.border }"
>
<!-- Navigation Arrows -->
<!-- <button
@click="previousSlide"
class="absolute left-0 top-1/2 transform -translate-y-1/2 z-10 p-2 hover:bg-gray-100 rounded-full"
>
<font-awesome-icon icon="chevron-left" />
</button> -->

<!-- Content -->
<transition name="fade" mode="out-in">
<div
Expand Down Expand Up @@ -43,56 +35,19 @@
<template #title> Read the docs </template>
</FeatureComponent>

<!-- Navigation Dots and Timer -->
<!-- Navigation Dots -->
<div class="flex justify-center items-center space-x-4 mt-4">
<div class="flex space-x-2">
<button
v-for="(_, index) in panels"
:key="index"
@click="goToSlide(index)"
:class="[
'h-2 w-2 rounded-full transition-all duration-300',
'h-8 w-8 rounded-full transition-all duration-300',
currentIndex === index ? 'bg-blue-500 w-4' : 'bg-gray-300',
]"
></button>
</div>

<!-- Circular Timer -->
<div
class="relative w-6 h-6"
@mouseenter="pauseTimer"
@mouseleave="resumeTimer"
>
<svg class="transform -rotate-90 w-6 h-6">
<circle
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="2"
fill="transparent"
class="text-gray-200"
/>
<circle
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="2"
fill="transparent"
:stroke-dasharray="circumference"
:stroke-dashoffset="dashOffset"
class="text-blue-500 transition-all duration-200"
/>
</svg>
<!-- Play/Pause Button -->
<button
@click="toggleAutoPlay"
class="absolute inset-0 flex items-center justify-center text-xs text-blue-500"
>
<font-awesome-icon :icon="isPlaying ? 'pause' : 'play'" />
</button>
</div>
</div>
</div>
</transition>
Expand Down Expand Up @@ -153,74 +108,29 @@
<template #title> Read the docs </template>
</FeatureComponent>

<!-- Navigation Dots and Timer -->
<!-- Navigation Dots -->
<div class="flex justify-center items-center space-x-4 mt-4">
<div class="flex space-x-2">
<button
v-for="(_, index) in panels"
:key="index"
@click="goToSlide(index)"
:class="[
'h-2 w-2 rounded-full transition-all duration-300',
'h-8 w-8 rounded-full transition-all duration-300',
currentIndex === index ? 'bg-blue-500 w-4' : 'bg-gray-300',
]"
></button>
</div>

<!-- Circular Timer -->
<div
class="relative w-6 h-6"
@mouseenter="pauseTimer"
@mouseleave="resumeTimer"
>
<svg class="transform -rotate-90 w-6 h-6">
<circle
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="2"
fill="transparent"
class="text-gray-200"
/>
<circle
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="2"
fill="transparent"
:stroke-dasharray="circumference"
:stroke-dashoffset="dashOffset"
class="text-blue-500 transition-all duration-200"
/>
</svg>
<!-- Play/Pause Button -->
<button
@click="toggleAutoPlay"
class="absolute inset-0 flex items-center justify-center text-xs text-blue-500"
>
<font-awesome-icon :icon="isPlaying ? 'pause' : 'play'" />
</button>
</div>
</div>
</div>
</transition>

<!-- Navigation Arrows -->
<!-- <button
@click="nextSlide"
class="absolute right-0 top-1/2 transform -translate-y-1/2 z-10 p-2 hover:bg-gray-100 rounded-full"
>
<font-awesome-icon icon="chevron-right" />
</button> -->
</div>
</div>
</template>

<script setup>
import { faBook } from "@fortawesome/free-solid-svg-icons";
import { ref, computed, onMounted, onBeforeUnmount, onBeforeMount } from "vue";
import { ref, computed, onBeforeMount } from "vue";
const props = defineProps({
panels: {
Expand All @@ -237,89 +147,16 @@ const props = defineProps({
default: "ltr",
validator: (v) => ["ltr", "rtl"].includes(v),
},
autoPlay: {
type: Boolean,
default: false,
},
interval: {
type: Number,
default: 10000,
},
initialDelay: {
type: Number,
default: 0, // Default initial delay in milliseconds
},
documentation: {
type: String,
},
});
const currentIndex = ref(0);
const smallDevice = ref(true);
const timeLeft = ref(props.interval);
const isPlaying = ref(props.autoPlay);
let autoPlayInterval;
let countdownInterval;
const circumference = 2 * Math.PI * 10; // 2πr where r=10
const dashOffset = computed(() => {
return circumference * (1 - timeLeft.value / props.interval);
});
const currentPanel = computed(() => props.panels[currentIndex.value]);
const nextSlide = () => {
currentIndex.value = (currentIndex.value + 1) % props.panels.length;
resetTimer();
};
const previousSlide = () => {
currentIndex.value =
currentIndex.value === 0 ? props.panels.length - 1 : currentIndex.value - 1;
resetTimer();
};
const goToSlide = (index) => {
currentIndex.value = index;
resetTimer();
};
const startTimer = () => {
if (autoPlayInterval) clearInterval(autoPlayInterval);
if (countdownInterval) clearInterval(countdownInterval);
if (isPlaying.value) {
autoPlayInterval = setInterval(nextSlide, props.interval);
countdownInterval = setInterval(() => {
timeLeft.value = Math.max(0, timeLeft.value - 100);
}, 100);
}
};
const resetTimer = () => {
timeLeft.value = props.interval;
startTimer();
};
const pauseTimer = () => {
clearInterval(autoPlayInterval);
clearInterval(countdownInterval);
};
const resumeTimer = () => {
if (isPlaying.value) {
startTimer();
}
};
const toggleAutoPlay = () => {
isPlaying.value = !isPlaying.value;
if (isPlaying.value) {
startTimer();
} else {
pauseTimer();
}
};
const preloadImages = () => {
Expand All @@ -335,20 +172,6 @@ onBeforeMount(() => {
preloadImages();
smallDevice.value = window.innerWidth < 900;
});
onMounted(() => {
preloadImages();
if (props.autoPlay) {
// Set initial timeout before starting the regular interval
setTimeout(() => {
startTimer();
}, props.initialDelay);
}
});
onBeforeUnmount(() => {
pauseTimer();
});
</script>

<style scoped>
Expand Down

0 comments on commit bc4d302

Please sign in to comment.