ep-lib-ts 1.0.42 → 1.0.44

package/src/components/interactions/EpDraggable.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { VueDraggableNext as draggable } from 'vue-draggable-next';
+
+import { Choice, Answer, Sockets } from '../../types/Draggable';
+
+import { mdiCheckBold, mdiCloseThick } from "@mdi/js";
+import EpIcon from '../basics/EpIcon.vue';
+
+
+
+
+
+interface Props {
+    answers: Answer[],
+    src: string,
+    sockets: Sockets[]
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+
+
+
+// Manage the image and its size
+
+const originalWidth = ref(0);
+const originalHeight = ref(0);
+
+const actualRect = ref({ width: 0, height: 0 });
+const myImage = ref<HTMLImageElement | null>(null);
+
+
+
+const updateSize = () => {
+    
+    if (!myImage.value) return;
+
+    const rect = myImage.value.getBoundingClientRect();
+    actualRect.value = { width: rect.width, height: rect.height };
+
+    console.log('Image size updated. Width:', actualRect.value.width, 'Height:', actualRect.value.height);
+};
+
+
+onMounted(() => {
+    window.addEventListener('resize', updateSize);
+});
+onUnmounted(() => {
+    window.removeEventListener('resize', updateSize);
+});
+
+
+
+const handleImageLoad = (event: any) => {
+    originalWidth.value = event.target.naturalWidth;
+    originalHeight.value = event.target.naturalHeight;
+
+    console.log('Image loaded. Width:', originalWidth.value, 'Height:', originalHeight.value);
+
+    updateSize();
+}
+
+
+const xRatio = computed(() => {
+    if (actualRect.value.width == 0) return 1;
+    return actualRect.value.width / originalWidth.value;
+});
+
+const yRatio = computed(() => {
+    if (actualRect.value.height == 0) return 1;
+    return actualRect.value.height / originalHeight.value;
+});
+
+
+
+
+
+
+// Créer une copie réactive de props.answers
+const availableAnswers = ref([...props.answers]);
+
+const choices = ref<Choice[]>( props.sockets.map((s) => {
+    return {
+        choice: [],
+        expected: s.correctAnswer ,
+        allowPut: true
+    }
+}));
+
+
+
+
+// Manage drag and drop
+const onAdd = (event: any, index: number) => {
+    console.log(event.clone);
+
+    // Retirer l'élément de la liste des réponses disponibles
+    availableAnswers.value = availableAnswers.value.filter(item => item.name !== event.clone.name);
+    choices.value[index].allowPut = false;
+}
+
+const onRemove = (event: any, index: number) => {
+    console.log(event.clone);
+
+    choices.value[index].choice = [];
+    choices.value[index].allowPut = true;
+}
+
+
+
+
+// Manage verification buttons
+const validating = ref(false);
+
+const validate = () => {
+    validating.value = true;
+    choices.value.forEach((choice) => {
+        choice.allowPut = false;
+    });
+}
+
+const retry = () => {
+    validating.value = false;
+    availableAnswers.value = [...props.answers];
+    choices.value.forEach((choice) => {
+        choice.choice = [];
+        choice.allowPut = true;
+    });
+}
+
+
+</script>
+
+<template>
+
+<div class="flex flex-col">
+    <div class="grid grid-cols-3 gap-3 w-full my-8">
+
+        <!-- Draggable answers block -->
+        <div class="col-span-1 m-6">
+            <draggable
+                class="dragArea bg-gray-700 rounded-md p-4 min-h-5 list-group w-full"
+                v-model="availableAnswers"
+                :group="{ name: 'answers', pull: !validating, put: !validating }"
+            >
+                <div
+                    class="list-group-item bg-gray-300 dark:bg-gray-800 m-1 p-3 rounded-md text-center flex justify-center items-center"
+                    v-for="element in availableAnswers"
+                    :key="element.name"
+                >
+                    <img class="cursor-grab active:cursor-grabbing max-w-32 rounded" v-if="element.isImg" :src="element.src" alt="img" />
+                    <p class="cursor-grab active:cursor-grabbing" v-else>{{ element.name }}</p>
+                </div>
+            </draggable>
+        </div>
+    
+    
+        <!-- Drop area block -->
+        <div class="col-span-2 relative">
+            <img @load="handleImageLoad" ref="myImage" :src="props.src" alt="img" class="w-full h-full select-none" />
+            <draggable
+                class="dropArea absolute bg-gray-300 dark:bg-gray-800 p-4 rounded-md min-w-14 max-w-32"
+                v-for="(socket, index) in props.sockets"
+                :key="index"
+                v-model="choices[index].choice"
+                :group="{ put: choices[index].allowPut }"
+                :style="{ left: (socket.xPos * xRatio) + 'px', top: (socket.yPos * yRatio) + 'px' }"
+                @add="onAdd($event, index)"
+                @remove="onRemove($event, index)"
+            >
+                <img class="cursor-grab active:cursor-grabbing rounded" v-if="choices[index].choice[0] && choices[index].choice[0].isImg" :src="choices[index].choice[0].src" alt="img" />
+                <p class="cursor-grab active:cursor-grabbing" v-else-if="choices[index].choice[0]">{{ choices[index].choice[0].name }}</p>
+                <span v-if="validating && choices[index].choice[0]?.name !== choices[index].expected" class="absolute -top-5 -right-5 bg-red-500 text-white px-2 py-1 rounded-md">
+                    <EpIcon :iconPath="mdiCloseThick" size="18"></EpIcon>
+                </span>
+                <span v-if="validating && choices[index].choice[0]?.name === choices[index].expected" class="absolute -top-5 -right-5 bg-green-500 text-white px-2 py-1 rounded-md">
+                    <EpIcon :iconPath="mdiCheckBold" size="18"></EpIcon>
+                </span>
+            </draggable>
+        </div>
+    </div>
+
+    <!-- Verification buttons -->
+    <div class="flex justify-center gap-4 mt-8">
+        <button class="bg-blue-500 text-white px-3 py-2 rounded-md text-center" @click="validate">Valider</button>
+        <button class="bg-blue-500 text-white px-3 py-2 rounded-md text-center" @click="retry">Recommencer</button>
+    </div>
+
+</div>
+
+</template>

package/src/components/interactions/EpSvgShow.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { onMounted, ref, computed, nextTick } from 'vue';
+import { useRenderText } from '../../composables/useRenderText';
+
+
+
+interface Props {
+    svg: string,
+    id: string,
+    animation?: "" | "translateX" | "scale",
+    multiple?: boolean
+}
+
+
+const props = withDefaults(defineProps<Props>(), {
+    animation: "",
+    multiple: false
+});
+
+const svg = ref<string>("");
+
+const animationType = computed(() => {
+    switch (props.animation) {
+        case "translateX":
+            return "animate-slide";
+        case "scale":
+            return "animate-zoom";
+        default:
+            return "animate-fade";
+    }
+});
+
+
+
+
+
+onMounted(async() => {
+    svg.value = useRenderText(props.svg);
+
+    await nextTick();
+
+    // manage the scenes
+    const scenes = document.getElementById(props.id)?.getElementsByClassName('scene');
+
+    if(scenes) {
+        Array.from(scenes).forEach((s) => {
+            if(!s.classList.contains('hidden')) {
+                s.classList.add('hidden');
+            }
+        });
+    }
+
+    // manage the buttons
+    const btns = document.getElementById(props.id)?.getElementsByClassName('btn');
+
+    if(btns) {
+        Array.from(btns).forEach((b) => {
+            b.addEventListener('click', (e) => {
+                const scene = b.getAttribute("id");
+                showScene(scene?? "");
+            });
+        });
+    }
+});
+
+
+
+const showScene = (scene: string) => {
+    console.log('event', scene);
+    if(svg.value) {
+        const scenes = document.getElementById(props.id)?.getElementsByClassName('scene');
+        if(scenes) {
+            Array.from(scenes).forEach((s) => {
+                if (s.classList.contains(`scene-${scene}`)) {
+                    s.classList.remove('hidden', animationType.value);
+                    s.classList.add(animationType.value);
+                } else {
+                    if(!props.multiple && !s.classList.contains('hidden')) {
+                        s.classList.add('hidden');
+                        s.classList.remove(animationType.value);
+                    }
+                }
+            });
+        }
+    }
+}
+
+
+
+</script>
+
+
+<template>
+    <!-- The buttons must have class "btn" and an unique id="<scene-name>"
+    The scenes elements must have class "scene" and "scene-<scene-name>" -->
+    <div :id="id" v-html="svg"></div>
+</template>

package/src/components/medias/EpCardLink.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useRouter } from 'vue-router';
 import EpCard from '../basics/EpCard.vue';
 import type { MaxWidth } from "../../types/Hover";
 import { mdiChevronRight } from "@mdi/js";
@@ -11,67 +12,71 @@ interface Props {
     color?: string | null;
     src?: string | null;
     svg?: string;
-    maxWidth?:MaxWidth;
-    center?:boolean;
-    content?:string;
-    iconlink?:string;
-    to?:string;
-    nuxtLink?:boolean;
-    isExternal?:boolean
+    maxWidth?: MaxWidth;
+    center?: boolean;
+    content?: string;
+    iconlink?: string;
+    to?: string;
+    nuxtLink?: boolean;
+    isExternal?: boolean;
+    disabled?:boolean;
 }
 
 
-const props = withDefaults(defineProps<Props>(),{
+const props = withDefaults(defineProps<Props>(), {
     //defaults ? ...
-    svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>dog</title><path d="M18,4C16.29,4 15.25,4.33 14.65,4.61C13.88,4.23 13,4 12,4C11,4 10.12,4.23 9.35,4.61C8.75,4.33 7.71,4 6,4C3,4 1,12 1,14C1,14.83 2.32,15.59 4.14,15.9C4.78,18.14 7.8,19.85 11.5,20V15.72C10.91,15.35 10,14.68 10,14C10,13 12,13 12,13C12,13 14,13 14,14C14,14.68 13.09,15.35 12.5,15.72V20C16.2,19.85 19.22,18.14 19.86,15.9C21.68,15.59 23,14.83 23,14C23,12 21,4 18,4M4.15,13.87C3.65,13.75 3.26,13.61 3,13.5C3.25,10.73 5.2,6.4 6.05,6C6.59,6 7,6.06 7.37,6.11C5.27,8.42 4.44,12.04 4.15,13.87M9,12A1,1 0 0,1 8,11C8,10.46 8.45,10 9,10A1,1 0 0,1 10,11C10,11.56 9.55,12 9,12M15,12A1,1 0 0,1 14,11C14,10.46 14.45,10 15,10A1,1 0 0,1 16,11C16,11.56 15.55,12 15,12M19.85,13.87C19.56,12.04 18.73,8.42 16.63,6.11C17,6.06 17.41,6 17.95,6C18.8,6.4 20.75,10.73 21,13.5C20.75,13.61 20.36,13.75 19.85,13.87Z" /></svg>',
-    maxWidth:"max-w-md",
-    center:false,
-    iconlink:mdiChevronRight,
-    nuxtLink:false,
-    to:'/',
-    isExternal:false
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>dog</title><path d="M18,4C16.29,4 15.25,4.33 14.65,4.61C13.88,4.23 13,4 12,4C11,4 10.12,4.23 9.35,4.61C8.75,4.33 7.71,4 6,4C3,4 1,12 1,14C1,14.83 2.32,15.59 4.14,15.9C4.78,18.14 7.8,19.85 11.5,20V15.72C10.91,15.35 10,14.68 10,14C10,13 12,13 12,13C12,13 14,13 14,14C14,14.68 13.09,15.35 12.5,15.72V20C16.2,19.85 19.22,18.14 19.86,15.9C21.68,15.59 23,14.83 23,14C23,12 21,4 18,4M4.15,13.87C3.65,13.75 3.26,13.61 3,13.5C3.25,10.73 5.2,6.4 6.05,6C6.59,6 7,6.06 7.37,6.11C5.27,8.42 4.44,12.04 4.15,13.87M9,12A1,1 0 0,1 8,11C8,10.46 8.45,10 9,10A1,1 0 0,1 10,11C10,11.56 9.55,12 9,12M15,12A1,1 0 0,1 14,11C14,10.46 14.45,10 15,10A1,1 0 0,1 16,11C16,11.56 15.55,12 15,12M19.85,13.87C19.56,12.04 18.73,8.42 16.63,6.11C17,6.06 17.41,6 17.95,6C18.8,6.4 20.75,10.73 21,13.5C20.75,13.61 20.36,13.75 19.85,13.87Z" /></svg>',
+    maxWidth: "max-w-md",
+    center: false,
+    iconlink: mdiChevronRight,
+    nuxtLink: false,
+    to: '/',
+    isExternal: false,
+    disabled:false
 })
 
-const centerCard = computed(()=> {
-   if(props.center){
-    return 'mx-auto'
-   }
-   return ''
+const centerCard = computed(() => {
+    if (props.center) {
+        return 'mx-auto'
+    }
+    return ''
 })
 
+const router = useRouter();
+
+const navigate = (to: string) => {
+    if (!props.isExternal && !props.disabled) {
+        router.push(to);
+    }
+};
+
 
 </script>
 
-<template> 
+<template>
     <div :class="`${centerCard} ${maxWidth}`">
         <a v-if="isExternal" :href="to" target="_blank" rel="noopener noreferrer">
-            <EpCard
-                :title="title"
-                :subtitle="subtitle"
-                :src="src"
-                :svg="svg"
-                :maxWidth="maxWidth"
-                :icon="iconlink"
-                isLink
-            />   
+            <EpCard 
+              :title="title" 
+              :subtitle="subtitle" 
+              :src="src" 
+              :svg="svg" 
+              :maxWidth="maxWidth" 
+              :icon="iconlink"
+                isLink />
         </a>
-        <component 
-        :is="nuxtLink ? 'NuxtLink' : 'RouterLink'" 
-        :to="to" 
-        v-else
-    >
-        <EpCard
-            :title="title"
-            :subtitle="subtitle"
-            :src="src"
-            :svg="svg"
-            :maxWidth="maxWidth"
-            :icon="iconlink"
-            isLink
-        />   
-        </component>
+        <div @click="navigate(to)" v-else>
+            <EpCard 
+              :title="title" 
+              :subtitle="subtitle" 
+              :src="src" 
+              :svg="svg" 
+              :maxWidth="maxWidth" 
+              :icon="iconlink"
+              isLink />
+        </div>
 
 
     </div>
-    
+
 </template>

package/src/components/medias/EpCarousel.vue

@@ -3,15 +3,18 @@ import { toRefs, ref, computed } from "vue";
 import { mdiChevronLeftCircleOutline } from "@mdi/js";
 import { mdiChevronRightCircleOutline } from "@mdi/js";
 import { type MediaCarousel } from "../../types/MediaCarousel";
-import { type SizeThumbnail } from "../../types/Image";
+import { InfoModal, type SizeThumbnail } from "../../types/Image";
 import EpIcon from "../basics/EpIcon.vue";
 import EpBtn from "../basics/EpBtn.vue";
 import EpModal from "../interactions/EpModal.vue";
 import EpImg from "../basics/EpImg.vue";
+import EpImgCarousel from "../basics/EpImgCarousel.vue";
 
 interface Props {
   carrouselImg: MediaCarousel[];
+  title?: string;
   gallery?: boolean;
+  puzzle?: boolean;
   sizeThumbnail?: SizeThumbnail;
   isCenter?:boolean;
   labelClose?:string;
@@ -22,6 +25,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   gallery: false,
   isCenter:false,
+  puzzle:false,
   sizeThumbnail: "medium",
   labelRef:"Référence",
   labelClose:"Fermer",
@@ -29,6 +33,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 
+// Logique Carousel normal
 const currentIndex = ref<number>(0);
 const dialog = ref<boolean>(false);
 
@@ -48,19 +53,53 @@ const nextSlide = () => {
 
 const isCenterStyle = computed(()=> {
   return props.isCenter ? 'justify-center':''
-})
+});
+
+
+
+// Logique Carousel gallery
+const managedIndex = ref(0);
+const managedInfoModal = ref({ src: '', caption: '', bib: ''} as InfoModal);
+
+
+const newFocus = (index: number) => {
+  managedIndex.value = index;
+  managedInfoModal.value = { src: props.carrouselImg[index].src, caption: props.carrouselImg[index].caption, bib: props.carrouselImg[index].bib };
+}
+
+const managedPrevSlide = () => {
+  const isFirstSlide = managedIndex.value === 0;
+  const newIndex = isFirstSlide
+    ? props.carrouselImg.length - 1
+    : managedIndex.value - 1;
+  managedIndex.value = newIndex;
+  managedInfoModal.value = { src: props.carrouselImg[newIndex].src, caption: props.carrouselImg[newIndex].caption, bib: props.carrouselImg[newIndex].bib };
+}
+
+const managedNextSlide = () => {
+  const isTheLastSlide = managedIndex.value === props.carrouselImg.length - 1;
+  const newIndex = isTheLastSlide ? 0 : managedIndex.value + 1;
+  managedIndex.value = newIndex;
+  managedInfoModal.value = { src: props.carrouselImg[newIndex].src, caption: props.carrouselImg[newIndex].caption, bib: props.carrouselImg[newIndex].bib };
+}
+
+
 
 const { carrouselImg, sizeThumbnail } = toRefs(props);
 </script>
 
 <template>
+
+  <h2 v-if="props.title" class="text-xl font-semibold mt-10 mb-4 text-center">{{ props.title }}</h2>
+
+
   <div v-if="!gallery">
     <div class="flex items-center justify-center mb-2">
-      <button @click="prevSlide">
+      <button class="p-2" @click="prevSlide">
         <EpIcon :icon-path="mdiChevronLeftCircleOutline"></EpIcon>
       </button>
       {{ currentIndex + 1 }}/{{ carrouselImg.length }}
-      <button @click="nextSlide">
+      <button class="p-2" @click="nextSlide">
         <EpIcon :icon-path="mdiChevronRightCircleOutline"></EpIcon>
       </button>
     </div>
@@ -77,12 +116,12 @@ const { carrouselImg, sizeThumbnail } = toRefs(props);
       <img
         :src="carrouselImg[currentIndex].src"
         alt="image"
-        class="rounded-sm"
+        class="rounded-sm m-auto"
       />
 
       <div
         v-if="carrouselImg[currentIndex]?.caption"
-        class="mt-2 text-sm text-base-dark dark:text-white"
+        class="mt-2 text-sm text-center text-base-dark dark:text-white"
       >
         {{ carrouselImg[currentIndex].caption }}
       </div>
@@ -99,19 +138,43 @@ const { carrouselImg, sizeThumbnail } = toRefs(props);
       </div>
     </EpModal>
   </div>
-  <div v-else :class="`flex flex-wrap ${isCenterStyle}`">
-    <template v-for="image in carrouselImg" :key="`image-${image?.uid}`">
-      <EpImg
+
+  <div v-else-if="!puzzle" :class="`flex flex-wrap ${isCenterStyle}`">
+    <template v-for="(image, index) in carrouselImg" :key="`image-${image?.uid}`">
+      <EpImgCarousel
         :src="image.src"
         :bib="image.bib"
         :caption="image.caption"
         :label-ref="labelRef"
         :label-close="labelClose"
-        thumbnail
         :size-thumbnail="sizeThumbnail"
-      ></EpImg>
+        managed-modal
+        @new-focus="newFocus(index)"
+        :info-modal="managedInfoModal"
+        @prev-slide="managedPrevSlide"
+        @next-slide="managedNextSlide"
+      ></EpImgCarousel>
+    </template>
+  </div>
+
+  <div v-else-if="puzzle" :class="`columns-3xs mx-5 gap-2`">
+    <template v-for="(image, index) in carrouselImg" :key="`image-${image?.uid}`">
+      <EpImgCarousel
+        :src="image.src"
+        :bib="image.bib"
+        :caption="image.caption"
+        :label-ref="labelRef"
+        :label-close="labelClose"
+        puzzle
+        managed-modal
+        @new-focus="newFocus(index)"
+        :info-modal="managedInfoModal"
+        @prev-slide="managedPrevSlide"
+        @next-slide="managedNextSlide"
+      ></EpImgCarousel> 
     </template>
   </div>
+
 </template>
 
 <style scoped>

package/dist/BgAudio-B8TWhPS4.js

@@ -1,4 +0,0 @@
-import { a5 as f } from "./index-DDAVtT-Z.js";
-export {
-  f as default
-};

package/dist/DisplayBox-CVjM7CIK.js

@@ -1,4 +0,0 @@
-import { a6 as f } from "./index-DDAVtT-Z.js";
-export {
-  f as default
-};