ep-lib-ts 1.0.43 → 1.0.45

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

@@ -1,44 +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>
-    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
-    
-    <!-- Buttons -->
-    <g class="btn-horse btn" onclick="showScene('horse')">
-        <rect x="10" y="10" width="80" height="30" />
-        <text x="20" y="30" font-size="14" fill="white">Horse</text>
-    </g>
-    <g class="btn-pig btn" onclick="showScene('pig')">
-        <rect x="110" y="10" width="80" height="30" />
-        <text x="130" y="30" font-size="14" fill="white">Pig</text>
-    </g>
-    <g class="btn-turkey btn" onclick="showScene('turkey')">
-        <rect x="210" y="10" width="80" height="30" />
-        <text x="220" y="30" font-size="14" fill="white">Turkey</text>
-    </g>
-    <g class="btn-rabbit btn" onclick="showScene('rabbit')">
-        <rect x="310" y="10" width="80" height="30" />
-        <text x="320" y="30" font-size="14" fill="white">Rabbit</text>
-    </g>
-    
-    <!-- Scenes -->
-    <g class="scene-horse scene" id="scene-horse" transform="translate(200, 250) scale(2)" >
-        <path d="M22 6V9.5L20.5 10L18.96 7.54C18.83 7.33 18.5 7.42 18.5 7.67V11.25C18.5 12.23 18.11 13.11 17.5 13.78V21H15V15C14.92 15 14.84 15 14.75 15C14.54 15 14.33 14.97 14.13 14.94L9.69 14.2L8.57 16.21L9.53 21H7L6 16.25C5.97 15.95 6 15.65 6.16 15.39L7.18 13.58C6.2 13.03 5.53 12 5.5 10.81C5.46 10.96 5.44 11.18 5.47 11.5C5.5 11.94 5.61 12.59 5.54 13.31C5.5 14.03 5.17 14.77 4.75 15.26C4.32 15.75 3.85 16.09 3.35 16.35L2.65 15.65C2.84 15.18 3.03 14.76 3.07 14.37C3.13 14 3.06 13.7 2.95 13.43L2.42 12.3C2.21 11.79 1.95 11.05 2 10.18C2.03 9.33 2.5 8.22 3.39 7.61C4.29 7 5.26 6.92 6.05 7.08C6.55 7.18 7.06 7.42 7.5 7.76C7.87 7.59 8.3 7.5 8.75 7.5H14.5V7C14.5 4.79 16.29 3 18.5 3H22L21.11 4.34C21.65 4.7 22 5.31 22 6Z" />
-    </g>
-    
-    <g class="scene-pig scene" id="scene-pig"transform="translate(200, 100) scale(2)">
-        <path d="M19.83 7.5L17.56 5.23C17.63 4.81 17.74 4.42 17.88 4.08C17.96 3.9 18 3.71 18 3.5C18 2.67 17.33 2 16.5 2C14.86 2 13.41 2.79 12.5 4H7.5C4.46 4 2 6.46 2 9.5S4.5 21 4.5 21H10V19H12V21H17.5L19.18 15.41L22 14.47V7.5H19.83" />
-    </g>
-    
-    <g class="scene-turkey scene" id="scene-turkey" transform="translate(200, 150) scale(2)">
-        <path d="M10.5 19.44C9.75 19.8 8.9 20 8 20C4.69 20 2 17.31 2 14V9C2 5.69 4.69 3 8 3L10.5 7.58C8.1 8.81 6.5 11 6.5 13.5C6.5 16 8.11 18.2 10.5 19.44M16 18.94V20H17C17.55 20 18 20.45 18 21S17.55 22 17 22H14C13.45 22 13 21.55 13 21S13.45 20 14 20V18.94C10.61 18.56 8 16.27 8 13.5C8 10.46 11.13 8 15 8C15.19 8 15.37 8 15.56 8C14.84 6.63 14 5.23 14 4C14 2.9 14.9 2 16 2C18.21 2 20 3.79 20 6H18C18 6 22 9 22 13.5C22 16.27 19.39 18.56 16 18.94M16 4C16 4.55 16.45 5 17 5S18 4.55 18 4 17.55 3 17 3 16 3.45 16 4M17 12C17 10.9 16.11 10 15 10C12.79 10 11 11.79 11 14H15C16.11 14 17 13.11 17 12Z" />
-    </g>
-    
-    <g class="scene-rabbit scene" id="scene-rabbit"transform="translate(200, 200) scale(2)">
-        <path d="M18.05,21L15.32,16.26C15.32,14.53 14.25,13.42 12.95,13.42C12.05,13.42 11.27,13.92 10.87,14.66C11.2,14.47 11.59,14.37 12,14.37C13.3,14.37 14.36,15.43 14.36,16.73C14.36,18.04 13.31,19.11 12,19.11H15.3V21H6.79C6.55,21 6.3,20.91 6.12,20.72C5.75,20.35 5.75,19.75 6.12,19.38V19.38L6.62,18.88C6.28,18.73 6,18.5 5.72,18.26C5.5,18.76 5,19.11 4.42,19.11C3.64,19.11 3,18.47 3,17.68C3,16.9 3.64,16.26 4.42,16.26L4.89,16.34V14.37C4.89,11.75 7,9.63 9.63,9.63H9.65C11.77,9.64 13.42,10.47 13.42,9.16C13.42,8.23 13.62,7.86 13.96,7.34C13.23,7 12.4,6.79 11.53,6.79C11,6.79 10.58,6.37 10.58,5.84C10.58,5.41 10.86,5.05 11.25,4.93L10.58,4.89C10.06,4.89 9.63,4.47 9.63,3.95C9.63,3.42 10.06,3 10.58,3H11.53C13.63,3 15.47,4.15 16.46,5.85L16.74,5.84C17.45,5.84 18.11,6.07 18.65,6.45L19.1,6.83C21.27,8.78 21,10.1 21,10.11C21,11.39 19.94,12.44 18.65,12.44L18.16,12.39V12.47C18.16,13.58 17.68,14.57 16.93,15.27L20.24,21H18.05M18.16,7.74C17.63,7.74 17.21,8.16 17.21,8.68C17.21,9.21 17.63,9.63 18.16,9.63C18.68,9.63 19.11,9.21 19.11,8.68C19.11,8.16 18.68,7.74 18.16,7.74Z" />
-    </g>
-    
-</svg>
+    <!-- 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/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/src/components/tools/TimelineItem.vue

@@ -102,7 +102,7 @@ const {  event } = toRefs(props)
 
 <template>
   <div
-    :class="`cursor-pointer ml-10 relative flex items-center p-2 ${colorEvent.border} border border-2 rounded-r-lg mb-8 flex-col md:flex-row space-y-4 md:space-y-0`"
+    :class="`cursor-pointer ml-10 relative flex items-center p-2 ${colorEvent.border} border-2 rounded-r-lg mb-8 flex-col md:flex-row space-y-4 md:space-y-0`"
     @click="toggleDivVisibility">
     <!-- Dot -->
     <div

package/dist/BgAudio-BxmV-0cC.js

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

package/dist/DisplayBox-CUpEsLPU.js

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