fcad-core-dragon 2.0.0-beta.5 → 2.0.0-beta.7

package/src/components/AppCompAudio.vue

@@ -34,7 +34,7 @@
             <audio
               :id="id"
               ref="m-audio"
-              @loadedmetadata="updateMediaData($event)"
+              @loadedmetadata="updateMediaDataAudio($event.target)"
             >
               <source
                 v-for="(aSource, index) in mSources"
@@ -128,75 +128,47 @@ export default {
 
   methods: {
     ...mapActions(useAppStore, ['updateCurrentMediaElements']),
+    /**
+     * @description search the DOM for medias with duplicated ID declaration in the page
+     * @return return Array of all DOM MediaElement with same id
+     */
+    checkDuplicatedID() {
+      const mediaList = document.querySelectorAll('.__media-container')
+      const duplicate = Array.from(mediaList).filter((media) =>
+        media.id.includes(this.id)
+      )
+      return duplicate
+    },
     /**
      * @description update the information for the mediaElement in the store
      * @param {htmlElement} e
      * @fires update-page to AppBaseModule.vue
      */
-    updateMediaData(e) {
+    updateMediaDataAudio(e) {
       //dispatch loading status of for this component
-      this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'loading')
+      this.$bus.$emit('set-comp-status', 'AppCompAudioPlayer', 'loading')
       this.$bus.$emit('update-media-duration')
 
-      //Should Check that the the media Element is unique im Media Liste
-      const { mElements } = this.getCurrentPage
-
-      const hasEntry = mElements.findLastIndex(
-        (media) => media.id === e.target.id
-      )
-
-      if (hasEntry !== -1) {
-        // Should report Error to Console and Component template about this media
-        const errmsg = `Cet élément a le même ID q'un autre media. Vous ne devez pas avoir de médias avec le même ID dans une page.`
+      if (this.checkDuplicatedID().length > 1) {
+        const errmsg = `Cet élément a le même ID <b>${this.id}</b>q'un autre media. Vous ne devez pas avoir de médias avec le même ID dans une page.`
 
         console.warn(
-          `%c WARNING!>>> You cannot use the same ID in your media elements for your page.`,
+          `%c WARNING!>>> You cannot use the same ID (${this.id}) in your media elements for your page.`,
           'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
         )
 
-        this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
+        this.$bus.$emit('set-comp-status', 'AppCompAudioPlayer', 'ready')
         return this.hasErr.push(errmsg)
       }
 
-      this.updateCurrentMediaElements(e.target).then(() => {
+      this.updateCurrentMediaElements(e).then(() => {
         this.isSet = true
-        this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
+        this.$bus.$emit('set-comp-status', 'AppCompAudioPlayer', 'ready')
       })
     },
     errorHandling(e) {
       this.hasSourceLoadingError = true
-    },
-    // ===================================TEST TRANSCRIP================================================
-    /**
-     * @description Fetching method for transcript
-     * @summary Fetch a transcript from HTML file to display. File URL is defined in the media data
-     *  and return its content for display
-     * @return {String} HTML string
-     */
-    async fetchTranscript() {
-      try {
-        //const tFile = 'exemple_transcript2.html'
-        const { mTranscript } = this.mediaToPlay
-        const tFile = mTranscript
-        if (!tFile) throw new Error('Missing transcript File!')
-
-        // validate file types. Only .html are allowed
-        if (!tFile.endsWith('.html'))
-          throw new Error(
-            'Invalid valid transcript file. \n Expecting .html file'
-          )
-
-        const fileUrl = !tFile.includes('/') ? `./${tFile}` : tFile //allow passing file in Public folder
-        // const fileUrl = new URL(tFile, import.meta.url))
-        const res = await axios.get(fileUrl, { responseType: 'blob' })
-        const content = await res.data.text()
-
-        return content
-      } catch (err) {
-        console.warn("YOU'VE GOT AN ERROR!\n", err)
-      }
     }
-    // ===================================TEST TRANSCRIP================================================
   }
 }
 </script>

package/src/components/AppCompBranchButtons.vue

@@ -68,10 +68,8 @@ Si la composante est appelée sans prop, les boutons par défaut seront génér
           <v-card class="mx-auto" max-width="15rem">
             <v-img :src="branch.imgFile" :alt="`${branch.imgAlt}`" cover />
 
-            <v-card-title>{{ branch.title }}</v-card-title>
-            <v-card-text>
-              {{ branch.text }}
-            </v-card-text>
+            <v-card-title v-html="branch.title"></v-card-title>
+            <v-card-text v-html="branch.text"></v-card-text>
 
             <app-comp-button-progress
               :set-target="sidebar"
@@ -136,35 +134,6 @@ export default {
                 break
               }
             }
-            //Start validation of required keys
-            if (isValid) {
-              const requiredKeys = ['imgFile', 'title', 'text', 'brchName']
-
-              for (let el of dataArray) {
-                //Validate that require key exist for each element in card
-                for (let k of requiredKeys) {
-                  let index = dataArray.indexOf(el)
-
-                  if (!el[k]) {
-                    isValid = false
-                    errMsg = `\n 💥 Missing 👉 ${k} 👈 in object ${
-                      index + 1
-                    } in ➡ card \n  🚩Allowed indexes are: 👉 ${requiredKeys}`
-                    break
-                  } else {
-                    if (el[k].constructor !== String) {
-                      errMsg = `\n 💥 Invalid 👉 ${k} 👈 declaration in ➡ object ${
-                        index + 1
-                      } ➡ of card. \n  🚩 Must be of type {String}`
-                      isValid = false
-                      break
-                    }
-                  }
-                  if (!isValid) break
-                }
-                if (!isValid) break
-              }
-            }
           }
 
           if (errMsg) console.error(`🧱 app-comp-branch-buttons \n  ${errMsg}`)
@@ -317,7 +286,11 @@ export default {
             btnTitle
           }
 
-          if (typeof branchData.imgAlt === 'undefined' && import.meta.env.DEV) {
+          if (
+            typeof branchData.imgAlt === 'undefined' &&
+            branchData.imgFile === 'undefined' &&
+            import.meta.env.DEV
+          ) {
             branchData.imgAlt = ''
             console.warn(
               `Bouton d’embranchement: ALT image sans valeur définie pour ${branchData.id}`
@@ -407,27 +380,8 @@ export default {
             }
             //Start validation of required keys
             if (isValid) {
-              const requiredKeys = ['imgFile', 'title', 'text', 'brchName']
-
               for (let el of this.cards) {
                 let index = this.cards.indexOf(el)
-                //Validate that require key exist for each element in card
-                for (let k of requiredKeys) {
-                  if (!el[k]) {
-                    isValid = false
-                    errMsg = `l'Attribut 👉 ${k} 👈 pour la carte ${index + 1} n'as pas été défini`
-                    break
-                  } else {
-                    if (el[k].constructor !== String) {
-                      errMsg = `l'Attribut 👉 ${k} 👈  pour la carte  ${
-                        index + 1
-                      } doit être de type {String}`
-                      isValid = false
-                      break
-                    }
-                  }
-                  if (!isValid) break
-                }
 
                 // Start validation of existing branch for this element
                 let searchEl = this.branchs.find((b) =>

package/src/components/{AppCompTranscript.vue → AppCompContainer.vue}

@@ -1,13 +1,20 @@
 <template>
-  <div id="transcript-container" v-html="content"></div>
+  <div :id="id" v-html="content"></div>
 </template>
 <script>
 export default {
   props: {
+    id: {
+      type: String,
+      default: 'shadow-container'
+    },
     content: {
       type: String,
       default: `Hello Wolrd!`
     }
+  },
+  mounted() {
+    console.log('😶‍🌫️ ', this.$props.id)
   }
 }
 </script>

package/src/components/AppCompInputRadioNext.vue

@@ -1,152 +1,152 @@
-<!-- About this Component--
- * Renders a RADIO BUTTON input to display choices of response for the Quiz component
- * Related Quiz to question: REPONSE_UNIQUE
- * Receives the a data object defined by user
- * Used by AppCompQuizNext
- * Uses useQuiz composable
--->
-
-<template>
-  <div class="input-box">
-    <fieldset>
-      <legend
-        :id="`lgd_${inputDataId}`"
-        class="sr-only"
-        tabindex="-1"
-        v-html="$t('quizState.answers')"
-      />
-
-      <template
-        v-for="choixReponse in quizInputDataValue"
-        :Key="`div_chx_${inputDataId}-${choixReponse.id}`"
-      >
-        <div class="box-radio" role="group">
-          <label
-            :key="`lbl_chx_${inputDataId}_${choixReponse.id}`"
-            :for="`chx_${inputDataId}_${choixReponse.id}`"
-            :class="classInput(choixReponse.id)"
-            class="radio-label"
-          >
-            <input
-              :id="`chx_${inputDataId}_${choixReponse.id}`"
-              :key="`chx_${inputDataId}_${choixReponse.id}`"
-              v-model="inputUniqueValue"
-              :disabled="quizLimitActive"
-              type="radio"
-              :value="choixReponse.id"
-              :name="`btn-radios-${inputDataId}`"
-              class="radio-input"
-              :aria-labelledby="`span_${inputDataId}_${choixReponse.id}`"
-            />
-
-            <span
-              :id="`span_${inputDataId}_${choixReponse.id}`"
-              aria-hidden="true"
-              class="radio-contenu"
-              v-html="choixReponse.value"
-            />
-            <span
-              :id="`${inputDataId}_${choixReponse.id}-msg-erreur`"
-              :key="`msg_chx_${inputDataId}_${choixReponse.id}`"
-              class="sr-only"
-            >
-              {{ messageAccessibility(choixReponse.id) }}
-            </span>
-          </label>
-        </div>
-      </template>
-    </fieldset>
-  </div>
-</template>
-<script>
-import { useQuiz } from '../composables/useQuiz'
-import { toRefs } from 'vue'
-export default {
-  name: 'AppCompInputRadioNext',
-
-  props: {
-    quizType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-
-    inputData: {
-      type: Array,
-      default: () => []
-    },
-    quizInputType: {
-      type: String,
-      default: ''
-    },
-    solution: {
-      type: String,
-      default: ''
-    }, //may be null
-    showSolution: {
-      type: Boolean,
-      default: false
-    },
-    shuffleAnswers: {
-      type: Boolean,
-      default: false
-    },
-    quizLimitActive: {
-      type: Boolean,
-      default: false
-    }, //use to set if quiz should be active or not
-
-    quizSubmit: {
-      type: Boolean,
-      default: false
-    } //use to call a submit
-  },
-  emits: ['input-change'],
-  setup(props) {
-    const { shuffleArray, classInput, messageAccessibility } = useQuiz(
-      toRefs(props)
-    )
-
-    return { shuffleArray, classInput, messageAccessibility }
-  },
-  data() {
-    return {
-      quizInputDataValue: [],
-      inputUniqueValue: null //not using quizInputUnique because quizInputUnique is a prop
-    }
-  },
-
-  computed: {},
-
-  watch: {
-    // /**
-    //  * @description to pass value to AppCompQuiz
-    //  * @fires input-change to AppCompQuiz.vue
-    //  */
-    inputUniqueValue: {
-      deep: true,
-      handler(newValue) {
-        this.$emit('input-change', newValue)
-      }
-    }
-  },
-
-  mounted() {
-    this.initQuiz()
-  },
-
-  methods: {
-    initQuiz() {
-      this.inputUniqueValue = this.quizInputType
-      if (this.shuffleAnswers) {
-        this.quizInputDataValue = this.shuffleArray(this.inputData)
-      } else {
-        this.quizInputDataValue = this.inputData
-      }
-    }
-  }
-}
-</script>
+<!-- About this Component--
+ * Renders a RADIO BUTTON input to display choices of response for the Quiz component
+ * Related Quiz to question: REPONSE_UNIQUE
+ * Receives the a data object defined by user
+ * Used by AppCompQuizNext
+ * Uses useQuiz composable
+-->
+
+<template>
+  <div class="input-box">
+    <fieldset>
+      <legend
+        :id="`lgd_${inputDataId}`"
+        class="sr-only"
+        tabindex="-1"
+        v-html="$t('quizState.answers')"
+      />
+
+      <template
+        v-for="choixReponse in quizInputDataValue"
+        :Key="`div_chx_${inputDataId}-${choixReponse.id}`"
+      >
+        <div class="box-radio" role="group">
+          <label
+            :key="`lbl_chx_${inputDataId}_${choixReponse.id}`"
+            :for="`chx_${inputDataId}_${choixReponse.id}`"
+            :class="classInput(choixReponse.id)"
+            class="radio-label"
+          >
+            <input
+              :id="`chx_${inputDataId}_${choixReponse.id}`"
+              :key="`chx_${inputDataId}_${choixReponse.id}`"
+              v-model="inputUniqueValue"
+              :disabled="quizLimitActive"
+              type="radio"
+              :value="choixReponse.id"
+              :name="`btn-radios-${inputDataId}`"
+              class="radio-input"
+              :aria-labelledby="`span_${inputDataId}_${choixReponse.id}`"
+            />
+
+            <span
+              :id="`span_${inputDataId}_${choixReponse.id}`"
+              aria-hidden="true"
+              class="radio-contenu"
+              v-html="choixReponse.value"
+            />
+            <span
+              :id="`${inputDataId}_${choixReponse.id}-msg-erreur`"
+              :key="`msg_chx_${inputDataId}_${choixReponse.id}`"
+              class="sr-only"
+            >
+              {{ messageAccessibility(choixReponse.id) }}
+            </span>
+          </label>
+        </div>
+      </template>
+    </fieldset>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { toRefs } from 'vue'
+export default {
+  name: 'AppCompInputRadioNext',
+
+  props: {
+    quizType: {
+      type: String,
+      default: ''
+    },
+    inputDataId: {
+      type: String,
+      default: ''
+    },
+
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    quizInputType: {
+      type: String,
+      default: ''
+    },
+    solution: {
+      type: String,
+      default: ''
+    }, //may be null
+    showSolution: {
+      type: Boolean,
+      default: false
+    },
+    shuffleAnswers: {
+      type: Boolean,
+      default: false
+    },
+    quizLimitActive: {
+      type: Boolean,
+      default: false
+    }, //use to set if quiz should be active or not
+
+    quizSubmit: {
+      type: Boolean,
+      default: false
+    } //use to call a submit
+  },
+  emits: ['input-change'],
+  setup(props) {
+    const { shuffleArray, classInput, messageAccessibility } = useQuiz(
+      toRefs(props)
+    )
+
+    return { shuffleArray, classInput, messageAccessibility }
+  },
+  data() {
+    return {
+      quizInputDataValue: [],
+      inputUniqueValue: null //not using quizInputUnique because quizInputUnique is a prop
+    }
+  },
+
+  computed: {},
+
+  watch: {
+    // /**
+    //  * @description to pass value to AppCompQuiz
+    //  * @fires input-change to AppCompQuiz.vue
+    //  */
+    inputUniqueValue: {
+      deep: true,
+      handler(newValue) {
+        this.$emit('input-change', newValue)
+      }
+    }
+  },
+
+  mounted() {
+    this.initQuiz()
+  },
+
+  methods: {
+    initQuiz() {
+      this.inputUniqueValue = this.quizInputType
+      if (this.shuffleAnswers) {
+        this.quizInputDataValue = this.shuffleArray(this.inputData)
+      } else {
+        this.quizInputDataValue = this.inputData
+      }
+    }
+  }
+}
+</script>