ep-lib-ts 1.0.42 → 1.0.44

package/dist/types/Draggable.d.ts

@@ -0,0 +1,15 @@
+export interface Answer {
+    name: string;
+    src?: string;
+    isImg?: boolean;
+}
+export interface Sockets {
+    xPos: number;
+    yPos: number;
+    correctAnswer: string;
+}
+export interface Choice {
+    choice: Answer[];
+    expected: string;
+    allowPut: boolean;
+}

package/dist/types/Image.d.ts

@@ -4,4 +4,9 @@ export declare const sizeThumbnailStyle: {
     large: string;
 };
 export declare const cols_img: string[];
+export interface InfoModal {
+    src: string;
+    caption?: string;
+    bib?: string;
+}
 export type SizeThumbnail = keyof typeof sizeThumbnailStyle;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.42",
+  "version": "1.0.44",
   "files": [
     "dist",
     "src/components/"
@@ -39,11 +39,13 @@
     "three": "^0.170.0",
     "vee-validate": "^4.13.2",
     "vue": "^3.2.45",
+    "vue-draggable-next": "^2.2.1",
     "vue-router": "^4.4.5",
     "vue3-apexcharts": "1.6.0"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.9",
+    "@types/aframe": "^1.2.8",
     "@types/katex": "^0.16.7",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.12.7",
@@ -55,7 +57,7 @@
     "typescript": "^5.6.2",
     "vite": "^5.4.5",
     "vite-plugin-dts": "^3.9.0",
-    "vue-tsc": "^2.2.8"
+    "vue-tsc": "^2.2.10"
   },
   "peerDependencies": {
     "vue": "^3.2.45"

package/src/components/basics/EpCard.vue

@@ -52,7 +52,7 @@ const borderColor = computed(() => {
 
 const isLinkStyle = computed(()=> {
     if(props.isLink){
-        return 'dark:hover:border-white hover:border-primary hover:border hover:border-2 rounded-md cursor-pointer'
+        return 'dark:hover:border-white hover:border-primary hover:border hover:border rounded-md cursor-pointer'
     }
     return ''
 })

package/src/components/basics/EpImg.vue

@@ -159,4 +159,4 @@ const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } =
       </div>
     </EpModal>
   </div>
-</template>
+</template>

package/src/components/basics/EpImgCarousel.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { toRefs, ref, computed } from "vue";
+import { type SizeThumbnail, sizeThumbnailStyle, InfoModal } from "../../types/Image";
+import { useImage } from "@vueuse/core";
+import EpModal from "../interactions/EpModal.vue";
+import EpIcon from "../basics/EpIcon.vue";
+import EpBtn from "./EpBtn.vue";
+import { mdiArrowExpandAll, mdiChevronLeftCircleOutline, mdiChevronRightCircleOutline } from "@mdi/js";
+import { useRenderText } from "../../composables/useRenderText";
+
+interface Props {
+    src: string;
+    alt?: string;
+    height?: string | number;
+    width?: string | number;
+    sizeThumbnail?: SizeThumbnail;
+    caption?: string;
+    bib?: string;
+    title?: string;
+    noModal?: boolean;
+    cols?: string | number; //posible type à venir => basis-1/12... or 1 | "1" | 2 | "2" ...12
+    labelClose?:string;
+    labelRef?:string;
+    labelRefLib?:string;
+
+    puzzle?: boolean;
+    managedModal?: boolean;
+    infoModal?: InfoModal;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    alt: "Image snfas",
+    cols: "6",
+    noModal: false,
+    puzzle: false,
+    sizeThumbnail: "medium",
+    labelClose:"Fermer",
+    labelRef:"Référence",
+    labelRefLib:"Référence bibliographique",
+
+    managedModal: false,
+});
+
+
+const renderBib = computed(() => {
+    if (props.managedModal && props.infoModal) {
+        return useRenderText(props.infoModal.bib? props.infoModal.bib : '');
+    }
+    if (props.bib) {
+        return useRenderText(props.bib);
+    }
+    return "";
+});
+
+const showModal = ref<boolean>(false);
+
+const toggleModal = (): void => {
+    if (props.noModal) {
+        return;
+    }
+    showModal.value = !showModal.value;
+
+    if(props.managedModal) {
+        emits('newFocus');
+    }
+};
+
+const showBib = ref<boolean>(false);
+
+const toggleBib = (): void => {
+    showBib.value = !showBib.value;
+};
+
+const styleSizeThumbnail = computed(() => {
+    return sizeThumbnailStyle[props.sizeThumbnail];
+});
+
+const { src, alt, title, caption, bib, sizeThumbnail } =
+    toRefs(props);
+
+
+const emits = defineEmits<{
+    newFocus: [],
+    nextSlide: [],
+    prevSlide: [],
+}>();
+
+
+
+</script>
+
+<template>
+    <div class="inline-block" >
+        <div :class="`relative group ${!puzzle ? 'inline-block m-2' : 'h-full mb-1'}`">
+            <img
+                :class="`${!puzzle ? styleSizeThumbnail : 'h-full w-full justify-self-stretch'} object-cover object-center group-hover:opacity-30 `"
+                :src="src"
+                :alt="alt"
+            />
+            <div
+                :class="`absolute top-0 left-0 ${!puzzle ? styleSizeThumbnail : 'h-full w-full'} bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer`"
+                @click="toggleModal"
+            >
+                <div
+                class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center"
+                >
+                <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
+                </div>
+            </div>
+        </div>
+
+        <EpModal v-model="showModal">
+            <div v-if="managedModal" class="flex items-center justify-center mb-2">
+                <button class="p-2" @click="emits('prevSlide')">
+                    <EpIcon :icon-path="mdiChevronLeftCircleOutline"></EpIcon>
+                </button>
+                <button class="p-2" @click="emits('nextSlide')">
+                    <EpIcon :icon-path="mdiChevronRightCircleOutline"></EpIcon>
+                </button>
+            </div>
+            <img
+                class="object-cover object-center h-5/6 w-5/6 mx-auto dark:bg-white"
+                :src="(managedModal && infoModal)? infoModal.src : src"
+                :alt="alt"
+                @click="toggleModal"
+            />
+            <div class="px-4 py-2">
+                <h2 class="text-2xl dark:text-white font-bold">{{ title }}</h2>
+                <p class="text-gray-500 dark:text-white text-sm mt-4 text-center">{{ (managedModal && infoModal)? infoModal.caption : caption }}</p>
+                <div
+                class="text-gray-700 dark:text-white mt-4"
+                v-html="renderBib"
+                ></div>
+            </div>
+        </EpModal>
+        <EpModal v-model="showBib" :title="labelRefLib">
+            <div class="text-gray-700 dark:text-white mt-4" v-html="renderBib"></div>
+            <div class="flex justify-end">
+                <EpBtn @click="toggleBib" size="small" type="error" outlined>{{
+                labelClose
+                }}</EpBtn>
+            </div>
+        </EpModal>
+    </div>
+</template>

package/src/components/basics/EpText.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, toRefs, h, defineAsyncComponent} from "vue";
+import { computed, toRefs, h, defineAsyncComponent } from "vue";
 import { isHtml } from "../../composables/isHtml";
 import { useMarkdown } from "../../composables/useMarkdown";
 import EpAccordeon from "../interactions/EpAccordeon.vue";
@@ -9,20 +9,20 @@ interface Props {
   content: string;
   title?: string | null;
   compact?: boolean;
-  labelDefinition?: string;  
-  labelDomain?:string;      
-  labelVariations?: string;  
-  labelRelations?: string; 
-  labelClose?:string; 
+  labelDefinition?: string;
+  labelDomain?: string;
+  labelVariations?: string;
+  labelRelations?: string;
+  labelClose?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   compact: false,
   labelDefinition: "Définition",
-  labelDomain:"Domaine",
+  labelDomain: "Domaine",
   labelVariations: "Variations",
   labelRelations: "Relations",
-  labelClose:"Fermer"
+  labelClose: "Fermer"
 });
 
 const renderTitle = computed(() => {
@@ -39,7 +39,7 @@ const renderText = computed(() => {
   if (!isHtml(props.content)) {
     return useMarkdown(props.content);
   }
-  if(!props.glossary){
+  if (!props.glossary) {
     return props.content
   }
   //return props.content
@@ -62,22 +62,24 @@ const renderText = computed(() => {
     ///check every term and replace it
     glossaryTerms.forEach((item) => {
       //get id
-     
+
       const id = item.getAttribute("data-id");
       //get content text
       const render_word = item.innerHTML;
       //find in the glossary their equivalent
       let _glossary = [];
       if (props.glossary) {
-        _glossary = props.glossary;
+        _glossary = props.glossary.map(item => ({
+          ...item,
+          id: item.documentId ?? item.id, // fallback only if documentId missing
+        }))
       }
       const term = _glossary.find((word) => word.id === id);
       //if was found
       if (term) {
         ///add the new values to the array
-       
         const word = item.outerHTML;
-       // console.log(word)
+        // console.log(word)
         //check if the term has relations
         const foundedRelations = _glossary.filter((x) =>
           x.relation.some((item: string) => {
@@ -109,7 +111,7 @@ const renderText = computed(() => {
           </div>`;
         //replace output string
         newStr = newStr.replace(word, replaceWord);
-       
+
       }
     });
   }
@@ -122,7 +124,7 @@ const renderText = computed(() => {
 const myRenderComponent = () => {
   const r = {
     components: {
-       epterm: defineAsyncComponent(()=>import('../medias/EpTerm.vue')),
+      epterm: defineAsyncComponent(() => import('../medias/EpTerm.vue')),
     },
     template: `${renderText.value}`,
   };
@@ -135,10 +137,10 @@ const { compact } = toRefs(props);
 </script>
 
 <template>
- <div class="px-2 text-black dark:text-white ">
-   <myRenderComponent v-if="!compact"></myRenderComponent>
+  <div class="px-2 text-black dark:text-white ">
+    <myRenderComponent v-if="!compact"></myRenderComponent>
     <EpAccordeon outlined :title="renderTitle" v-else>
       <myRenderComponent></myRenderComponent>
     </EpAccordeon>
- </div>
+  </div>
 </template>

package/src/components/educationals/EpBranchingScenario.vue

@@ -18,6 +18,7 @@ interface Option {
 interface Props {
     scenarioTitle: string;
     initialInstruction?: string | null;
+    generalFeedback?: string;
     bgColor?: string;
     decisionTree: {
         rootQuestion: string;
@@ -151,12 +152,20 @@ const getChoices = (itinerary: number[]) => {
                 <!-- End of the scenario -->
                 <div :class="`flex-grow flex flex-col items-center ${transitionAnimation}`" v-else>
                     <div class="flex-grow flex flex-col items-center">
-                        <h1 class="my-2 font-bold text-3xl">Vous avez terminé le scénario!</h1>
-                        <p>Voici votre parcours</p>
-                        <div class="flex flex-col relative w-full gap-4 px-5 py-5 items-start overflow-auto border-l-4 border-gray-700" style="max-width: 600px; height: 300px;">
-                            <div v-for="(question, index) in getChoices(itinerary)" :key="index" class="path-item rounded bg-blue-500 text-white py-2 px-4 flex flex-col items-center">
-                                <u>{{ question.question }}</u>
-                                <p>{{ question.choice }}</p>
+                        <h1 class="my-4 font-bold text-3xl">Vous avez terminé le scénario!</h1>
+                        <div class="grid grid-cols-2 gap-2">
+                            <div class="col-span-1 flex flex-col items-center">
+                                <h3 class="font-bold">Voici votre parcours</h3>
+                                <div class="flex flex-col relative w-full gap-4 px-5 py-5 items-start overflow-auto border-l-4 border-gray-700" style="max-width: 600px; height: 300px;">
+                                    <div v-for="(question, index) in getChoices(itinerary)" :key="index" class="path-item rounded bg-blue-500 text-white py-2 px-4 flex flex-col items-center">
+                                        <u>{{ question.question }}</u>
+                                        <p>{{ question.choice }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex flex-col col-span-1 justify-center items-center px-4 border-l-2 border-gray-700 overflow-auto">
+                                <h3 class="font-bold">Feedback général</h3>
+                                <p class="text-center">{{ generalFeedback }}</p>
                             </div>
                         </div>
                     </div>

package/src/components/educationals/EpReading.vue

@@ -102,11 +102,11 @@ const errorImg = (event:Event)=>{
 </script>
 
 <template>
-  <div class="flex rounded-lg overflow-hidden bg-white dark:bg-dark md:flex-row " v-if="!compact">
+  <div class="flex shadow-sm rounded-lg overflow-hidden bg-white dark:bg-dark md:flex-row " v-if="!compact">
     <template v-if="!hideCover">
       <div
         v-if="hasCover"
-        class="h-96 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg flex justify-center items-center text-gray-300"
+        class="h-96 mr-2 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg flex justify-center items-center text-gray-300"
       >
         <img :src="cover" :alt="`image de la lecture ${title}`" @error="errorImg" />
       </div>
@@ -118,7 +118,7 @@ const errorImg = (event:Event)=>{
         <EpIcon :icon-path="mdiBookOpenPageVariant" size="95"></EpIcon>
       </div>
     </template>
-    <div class="flex flex-col w-full">
+    <div class="flex py-3 flex-col w-full">
       <EpEdu :title="labelCard" :labelIntentions="labelIntentions" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" :mandateLevel="mandateLevel">
         <template #intentions v-if="intentions">
           <div v-html="useRenderText(intentions)"></div>

package/src/components/interactions/Ep360Image.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 // DO NOT DELETE. IMPORTANT FOR VIDEO NAVIGATION : this.el.object3D.getWorldPosition(position);
 import { ref, onMounted } from "vue";
-import * as AFRAME from "aframe";
+//import * as AFRAME from "aframe";
+import "aframe";
 import { Object3D, Quaternion, Vector3 } from "three";
 import type { Pin, Scene } from "../../types/image360";
 
 interface Props {
     scenes:Scene[];
+    id?: string;
 }
 
 const props = defineProps<Props>();
@@ -17,6 +19,9 @@ const currentSceneIndex = ref(0);
 const hoveredPin = ref<Pin | null>(null);
 const clickedPin = ref<Pin | null>(null);
 
+const AFRAME = window.AFRAME;
+
+
 if (!AFRAME.components["rotation-reader"]) {
     AFRAME.registerComponent("rotation-reader", {
         schema: {},
@@ -66,6 +71,9 @@ function handleMouseLeave(pin: Pin | null, event: Event): void {
 
     if (pin?.event === "onHover" || !pin?.event) {
         const target = event.target as HTMLElement;
+        
+        console.log("children:", target.children);
+
         if (clickedPin.value == pin) {
             target.setAttribute("material", "opacity: 1; transparent: true");
         }
@@ -133,11 +141,14 @@ function createTickFunction() {
         el: { object3D: InstanceType<typeof Object3D>; sceneEl: any };
     }) {
         updateCameraQuaternion(this.el.object3D, quaternion);
-        updatePinsRotation(quaternion);
+
+        const sceneEl = this.el.sceneEl;
+        //console.log("scene active", sceneEl.getAttribute("id"));
+        updatePinsRotation(quaternion, sceneEl);
 
         this.el.object3D.getWorldPosition(cameraPosition);
 
-        document.querySelectorAll(".pin-marker").forEach((pinElement) => {
+        sceneEl.querySelectorAll(".pin-marker").forEach((pinElement: any) => {
             const pinObject = (pinElement as any).object3D;
             if (pinObject) {
                 pinObject.getWorldPosition(objectPosition);
@@ -147,7 +158,7 @@ function createTickFunction() {
             }
         });
 
-        document.querySelectorAll(".frame").forEach((frameElement) => {
+        sceneEl.querySelectorAll(".frame").forEach((frameElement: any) => {
             const frameObject = (frameElement as any).object3D;
             if (frameObject) {
                 frameObject.getWorldPosition(objectPosition);
@@ -173,14 +184,14 @@ function updateCameraQuaternion(
     object3D.getWorldQuaternion(quaternion);
 }
 
-function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>) {
-    document.querySelectorAll(".pin-marker").forEach((pinElement) => {
+function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>, sceneEl: any) {
+    sceneEl.querySelectorAll(".pin-marker").forEach((pinElement: any) => {
         const pinObject = (pinElement as any).object3D;
         if (pinObject) {
             pinObject.setRotationFromQuaternion(quaternion);
         }
     });
-    document.querySelectorAll(".frame").forEach((pinElement) => {
+    sceneEl.querySelectorAll(".frame").forEach((pinElement: any) => {
         const pinObject = (pinElement as any).object3D;
         if (pinObject) {
             pinObject.setRotationFromQuaternion(quaternion);
@@ -207,7 +218,7 @@ function getPinColor(pin: Pin): string {
             margin: auto;
         "
     >
-        <a-scene embedded>
+        <a-scene :id="id" embedded>
             <a-assets>
                 <img
                     v-for="scene in props.scenes"
@@ -241,14 +252,24 @@ function getPinColor(pin: Pin): string {
                 <a-circle
                     class="pin-marker"
                     :color="getPinColor(pin)"
-                    radius="0.25"
+                    radius="0.15"
                     shader="flat"
                     :material="`opacity: ${getPinOpacity(
                         pin.id
-                    )}; transparent: true`"
+                    )}; transparent: true;`"
                     @click="(event: Event) => handleMarkerClick(pin, event)"
                     @mouseenter="(event: Event) => handleMouseEnter(pin, event)"
-                ></a-circle>
+                >
+
+                    <!-- Cercle intérieur -->
+                    <a-circle
+                        position="0 0 0.01"
+                        color="#FFF" 
+                        radius="0.05" 
+                        material="opacity: 0;"
+                    ></a-circle>
+
+                </a-circle>
             </a-entity>
 
             <a-entity

package/src/components/interactions/Ep360Video.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import * as AFRAME from "aframe";
+// import * as AFRAME from "aframe";
+import "aframe";
 import { Object3D, Quaternion, Vector3 } from "three";
 import type { Pin, Scene } from "../../types/video360";
 
@@ -15,6 +16,8 @@ const hoveredPin = ref<Pin | null>(null);
 const clickedPin = ref<Pin | null>(null);
 const isPlaying = ref(false);
 
+const AFRAME = window.AFRAME;
+
 if (!AFRAME.components["rotation-reader"]) {
     AFRAME.registerComponent("rotation-reader", {
         schema: {},
@@ -242,7 +245,7 @@ function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>) {
                 <a-circle
                     class="pin-marker"
                     :color="getPinColor(pin)"
-                    radius="0.25"
+                    radius="0.15"
                     shader="flat"
                     :material="`opacity: ${getPinOpacity(
                         pin.id
@@ -250,7 +253,16 @@ function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>) {
                     @click="(event: Event) => handleMarkerClick(pin, event)"
                     @mouseenter="(event: Event) => handleMouseEnter(pin, event)"
                     @mouseleave="(event: Event) => handleMouseLeave(pin, event)"
-                ></a-circle>
+                >
+                    <!-- Cercle intérieur -->
+                    <a-circle
+                        position="0 0 0.01"
+                        color="#FFF" 
+                        radius="0.05" 
+                        material="opacity: 0;"
+                    ></a-circle>
+                    
+                </a-circle>
             </a-entity>
 
             <!-- HOVERED PINS INFO BOX -->