Template page updates

components/template/Features/Animation/index.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="template-features-animation-wrapper">
+        <div v-if="title" class="template-features-animation-title">
+            <h2>{{ title }}</h2>
+        </div>
+        <div ref="animationRef" class="template-features-animation">
+            <div class="template-features-animation-left">
+                <template v-for="(data, index) in featuresData" :key="index">
+                    <div
+                        @click="handleClick(data.id)"
+                        @mouseenter="enterCardArea(data.id)"
+                        @mouseleave="leaveCardArea(data.id)"
+                        :class="`template-features-animation-left-card ${selectedID === data.id ? 'template-features-animation-left-card-active' : ''}`"
+                    >
+                        <div class="template-features-animation-left-card-order">
+                            <div>{{ orderNumber(index) }}</div>
+                            <div>{{ orderNumber(index) }}</div>
+                            <div>{{ orderNumber(index) }}</div>
+                        </div>
+                        <div class="template-features-animation-left-card-content">
+                            <h5>{{ data.title }}</h5>
+                            <p>
+                                <template v-if="data.slotType">
+                                    <slot :name="data.slotType" />
+                                </template>
+                                <template v-else>
+                                    {{ data.description }}
+                                </template>
+                            </p>
+                        </div>
+                    </div>
+                </template>
+            </div>
+            <div class="template-features-animation-right">
+                <TemplateFeaturesAnimationInline
+                    v-if="featuresData[selectedID - 1]?.type === 'inline-animation'"
+                    :inlineFeaturesData="featuresData[selectedID - 1]?.inlineFeaturesData"
+                    :parentHandleClick="handleClick"
+                    :parentHandleHover="handleHover"
+                    :parentID="selectedID"
+                    :inlineSeconds="animationSeconds / featuresData[selectedID - 1]?.inlineFeaturesData.length"
+                />
+                <img v-else :src="featuresData[selectedID - 1]?.src" alt="Animation Feature Image" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        featuresData: {
+            type: null,
+            default: null
+        },
+        title: {
+            type: null,
+            default: null
+        }
+    },
+    observer: null,
+    timeout: null,
+    data() {
+        return {
+            selectedID: 1,
+            intervalIds: [],
+            cancelInterval: false,
+            hoveredID: null,
+            visible: false,
+            animationSeconds: 5000
+        };
+    },
+    mounted() {
+        this.observer = new IntersectionObserver(([entry]) => {
+            clearTimeout(this.timeout);
+
+            if (entry.isIntersecting) {
+                this.timeout = setTimeout(
+                    () => {
+                        this.visible = entry.isIntersecting;
+                        this.createInterval();
+                        this.observer.unobserve(this.$el);
+                    },
+                    { threshold: 0.2 }
+                );
+            }
+        });
+
+        this.observer.observe(this.$el);
+    },
+    beforeUnmount() {
+        !this.visible && this.$el && this.observer?.unobserve(this.$el);
+        this.intervalIds = [];
+    },
+    methods: {
+        enterCardArea(id) {
+            this.hoveredID = id;
+            this.handleHover(id, 'onMouseEnter');
+        },
+        leaveCardArea(id) {
+            this.hoveredID = null;
+            this.handleHover(id, 'onMouseLeave');
+        },
+        orderNumber(index) {
+            return (index + 1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false });
+        },
+        clearAllIntervals() {
+            if (this.intervalIds.length <= 0) {
+                return;
+            }
+
+            this.intervalIds.forEach((intervalId) => clearInterval(intervalId));
+            this.intervalIds = [];
+        },
+        createInterval() {
+            const interval = setInterval(() => {
+                this.selectedID = this.selectedID === this.featuresData.length ? 1 : this.selectedID + 1;
+            }, 4000);
+
+            this.intervalIds = [...this.intervalIds, interval];
+        },
+        handleClick(cardId) {
+            this.clearAllIntervals();
+            this.selectedID = cardId;
+            this.cancelInterval = true;
+        },
+        handleHover(cardId, type) {
+            if (this.cancelInterval || cardId !== this.selectedID) {
+                return;
+            }
+
+            this.clearAllIntervals();
+
+            if (type === 'onMouseLeave') {
+                this.selectedID = cardId;
+                this.createInterval();
+            }
+        }
+    }
+};
+</script>