fcad-core-dragon 2.1.2 → 2.2.0-beta.2

package/package.json

@@ -1,33 +1,12 @@
 {
-  "name": "fcad-core-dragon",
-  "version": "2.1.2",
-  "private": false,
-  "type": "module",
-  "main": "./src/main.js",
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite",
-    "docs:build": "vitepress build documentation",
-    "docs:dev": "vitepress dev documentation",
-    "docs:preview": "vitepress preview documentation",
-    "lintfix": "eslint --fix src",
-    "lintreport": "eslint ./src",
-    "preview": "vite preview",
-    "reset": "rm -rf ./node_modules package-lock.json .cache dist && npm i && npm run watch",
-    "test:unit": "vitest",
-    "vue": "vue",
-    "watch": "nodemon -e js,vue,html,json -x yalc publish --push",
-    "format": "prettier --write src/",
-    "test-ct": "playwright test -c playwright-ct.config.js"
-  },
-  "config": {
-    "projname": ""
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not dead"
   ],
+  "config": {
+    "projname": ""
+  },
   "dependencies": {
     "axios": "^1.6.8",
     "gsap": "^3.12.5",
@@ -44,23 +23,47 @@
     "@playwright/test": "^1.56.1",
     "@types/node": "^24.10.0",
     "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/coverage-v8": "^4.0.15",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.38.0",
     "eslint-plugin-cypress": "^5.1.0",
     "eslint-plugin-vue": "~10.3.0",
     "globals": "^16.4.0",
+    "happy-dom": "^20.0.10",
     "jsdom": "^25.0.1",
     "nodemon": "^3.1.0",
     "prettier": "^3.6.2",
     "sass-embedded": "^1.91.0",
     "vitepress": "^1.6.3",
-    "vitest": "^3.2.4",
+    "vitest": "^4.0.15",
     "vue-i18n": "^11.1.12",
     "vue-router": "^4.4.5",
     "vuetify": "^3.10.10"
   },
   "engines": {
     "node": ">0.11.9"
-  }
+  },
+  "main": "./src/main.js",
+  "name": "fcad-core-dragon",
+  "private": false,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "docs:build": "vitepress build documentation",
+    "docs:dev": "vitepress dev documentation",
+    "docs:preview": "vitepress preview documentation",
+    "format": "prettier --write src/",
+    "lintfix": "eslint --fix src",
+    "lintreport": "eslint ./src",
+    "preview": "vite preview",
+    "reset": "rm -rf ./node_modules package-lock.json .cache dist && npm i && npm run watch",
+    "test-ct": "playwright test -c playwright-ct.config.js",
+    "test:unit": "vitest",
+    "test:unit:coverage": "vitest --coverage",
+    "vue": "vue",
+    "watch": "nodemon -e js,vue,html,json -x yalc publish --push"
+  },
+  "type": "module",
+  "version": "2.2.0-beta.2"
 }

package/src/components/AppBasePage.vue

@@ -11,7 +11,6 @@
       <div class="ctn">
         Activity info: Route : {{ $route.path }}
         <br />
-
         Activity id : {{ getDebugModeInfo.id }}
         <br />
         Nombre de page : {{ getDebugModeInfo.size }}
@@ -96,6 +95,7 @@ export default {
     }
   },
   setup(props) {
+    //console.log('dans setup')
     const store = useAppStore()
     const { activityRef, id: pageID, type: pageType } = props.pageData
     const { t } = useI18n()
@@ -167,35 +167,29 @@ export default {
     getModuleInfo() {
       return this.store.getModuleInfo
     },
-
     getAllActivities() {
       return this.store.getAllActivities()
     },
     getConnectionInfo() {
       return this.store.getConnectionInfo
     },
-
     getAnchorsForActivity() {
       return this.store.getAnchorsForActivity()
     },
     getBifChoice() {
       return this.store.getBifChoice
     },
-
     isBranchingPage() {
       return this.$route.meta.type === 'branching' && this.type !== 'pg_branch'
     },
-
     //================================================
     settingsOptions() {
       return this.settingsOptionsELPlus
     },
-
     settingsSelected() {
       const setting = this.getApplicationSettings
       return setting
     },
-
     errorPage() {
       let err = false
       if (import.meta.env.DEV) {
@@ -380,7 +374,8 @@ export default {
         /**
          * Observe changes in the number of poperties to dispatch updates in the userdata in the Store
          */
-
+        // console.log('ici')
+        //console.log(this.userInteraction)
         if (newValue && Object.entries(this.userInteraction).length) {
           await this.store.updateUserMetaData({
             activityRef: this.pageData.activityRef,

package/src/components/AppCompAudio.vue

@@ -107,11 +107,11 @@ export default {
     ...mapState(useAppStore, ['getCurrentBrowser', 'getCurrentPage']),
     $audElement() {
       if (!this.isSet) return null
+      const { id, mTranscript } = this.audData
       return {
-        id: this.id,
-        mTranscript: null,
+        id,
+        mTranscript,
         mType: 'audio',
-        mSubtitles: null,
         mElement: this.$refs['m-audio']
       }
     },

package/src/components/AppCompBranchButtons.vue

@@ -250,6 +250,7 @@ export default {
     this.isCard = this.cards && Object.keys(this.cards).length != 0
     this.idActivity = this.$router.currentRoute.value.meta.activity_ref
     this.branchs = this.$router.currentRoute.value.meta.children
+
     this.getbranchsData()
   },
   methods: {
@@ -271,7 +272,7 @@ export default {
         branchData.progression = progression
         if (isNaN(branchData.progression)) branchData.progression = 0
 
-        if (this.isCard) {
+        if (this.isCard && this.getMatchingElement(branchData.id)) {
           const { title, text, imgFile, imgAlt, btnTitle } =
             this.getMatchingElement(branchData.id)
 
@@ -476,12 +477,14 @@ export default {
      * @return {Object}  Matching element from
      */
     getMatchingElement(id) {
+      let matchingBranch = null
       if (this.isCustomButton) {
-        return this.customButtons.find((c) => c.brchName === id)
+        matchingBranch = this.customButtons.find((c) => c.brchName === id)
       }
       if (this.isCard) {
-        return this.cards.find((c) => c.brchName === id)
+        matchingBranch = this.cards.find((c) => c.brchName === id)
       }
+      return matchingBranch ? matchingBranch : null
     }
   }
 }

package/src/components/AppCompInputCheckBoxNx.vue

@@ -168,7 +168,8 @@ export default {
         )
         const { errorList, errorInConsole } = errors
 
-        if (errorList.length || errorInConsole.length) return errors
+        if (!errorList || !errorInConsole) return null
+        return errors
       }
 
       return errors

package/src/components/AppCompInputDropdownNx.vue

@@ -29,6 +29,7 @@
             :items="getItemOptions(index)"
             :open-text="`${$t('message.dropdown_list')}_${singleDropdown.ennonce}`"
             :aria-describedby="`${id}_${singleDropdown.id}-msg-erreur`"
+            menu-icon="mdi-chevron-down"
             @update:model-value="onSelectUpdate($event, index)"
           ></v-select>
 
@@ -169,11 +170,10 @@ export default {
           null,
           `liste déroulante #${i + 1}`
         )
-
-        if (e.errorInConsole.length && e.errorList.length) {
-          errors.errorInConsole.push(e.errorInConsole[0])
-          errors.errorList.push(e.errorList[0])
-        }
+        if (!e || !e.errorList || !e.errorInConsole) return null
+        const { errorList, errorInConsole } = e
+        if (errorInConsole.length) errors.errorInConsole.push(errorInConsole[0])
+        if (errorList.length) errors.errorList.push(errorList[0])
       }
 
       return errors

package/src/components/AppCompInputRadioNx.vue

@@ -197,7 +197,8 @@ export default {
         )
         const { errorList, errorInConsole } = errors
 
-        if (errorList.length || errorInConsole.length) return errors
+        if (!errorList || !errorInConsole) return null
+        return errors
       }
 
       return errors

package/src/components/AppCompInputTextNx.vue

@@ -99,9 +99,7 @@ export default {
   methods: {
     validateInputData() {
       let errors = null //array for errors dectected
-
       if (this.inputData != undefined) return errors
-
       return errors
     },
     /**

package/src/components/AppCompInputTextTableNx.vue

@@ -129,10 +129,10 @@ export default {
           `texte tableau #${i + 1}`
         )
 
-        if (e.errorInConsole.length && e.errorList.length) {
-          errors.errorInConsole.push(e.errorInConsole[0])
-          errors.errorList.push(e.errorList[0])
-        }
+        if (!e || !e.errorList || !e.errorInConsole) return null
+        const { errorList, errorInConsole } = e
+        if (errorInConsole.length) errors.errorInConsole.push(errorInConsole[0])
+        if (errorList.length) errors.errorList.push(errorList[0])
       }
 
       return errors

package/src/components/AppCompInputTextToFillDropdownNx.vue

@@ -34,6 +34,7 @@
             :items="getItemOptions(textInput.index)"
             :aria-describedby="`${id}_${textInput.id}-msg-erreur`"
             :aria-labelledby="`${id}_${textInput.id}-label`"
+            menu-icon="mdi-chevron-down"
             @update:model-value="onSelectUpdate($event, textInput.index)"
           />
           <span
@@ -173,7 +174,7 @@ export default {
       let splittedText = str.split(regex)
       let listInput = []
 
-      for (let i = 0; i < splittedText.length - 1; i++) {
+      for (let i = 0; i < splittedText.length; i++) {
         listInput.push({
           id: `text-${i}`,
           type: 'text',
@@ -183,9 +184,10 @@ export default {
         if (i < splittedText.length - 1)
           listInput.push({ id: `select-${i}`, type: 'select', index: i })
       }
+
       let lI = listInput.findLast((element) => element.type == 'select')
-      this.inputCount = lI.index + 1
 
+      this.inputCount = lI.index + 1
       this.inputElements = listInput
     },
     /**
@@ -299,14 +301,11 @@ fieldset {
 div.texteatrou {
   display: inline !important;
 
-  
   .cnt-input {
     display: inline;
     .v-input {
       display: inline-block !important;
 
-      
-
       :deep(.v-input__control),
       :deep(.v-field) {
         width: 240px !important;
@@ -339,5 +338,4 @@ div.texteatrou {
     }
   }
 }
-
 </style>

package/src/components/AppCompInputTextToFillNx.vue

@@ -132,29 +132,6 @@ export default {
   mounted() {},
 
   methods: {
-    /**
-     * @description validate the raw data received by the component to render is view
-     * @returns {Object} errors - errorList: to display in view and errorConsole, to be displayed in console
-     */
-    validateInputData() {
-      let errors = null //array for errors dectected
-      let stringType = ['id', 'value']
-
-      if (!this.inputData.length) return errors
-      for (let i = 0; i < this.inputData.length; i++) {
-        errors = validateObjType(
-          this.inputData[i],
-          { stringType },
-          null,
-          `choix_reponse #${i + 1}`
-        )
-        const { errorList, errorInConsole } = errors
-
-        if (errorList.length || errorInConsole.length) return errors
-      }
-
-      return errors
-    },
     /**
      * @description create the object to genate the text and inputs
      * @param {String} str the text with holes to fill
@@ -165,7 +142,7 @@ export default {
       let splittedText = str.split(regex)
       let listInput = []
 
-      for (let i = 0; i < splittedText.length - 1; i++) {
+      for (let i = 0; i < splittedText.length; i++) {
         listInput.push({
           id: `text-${i}`,
           type: 'text',

package/src/components/AppCompNoteCredit.vue

@@ -26,7 +26,7 @@
         :error-text="`Vous avez une/des erreur(s) dans la création des notes/crédits.`"
       ></app-base-error-display>
       <template v-else>
-        <div v-if="notes" class="ctn-note">
+        <div v-if="hasNotes" class="ctn-note">
           <p class="t-note">{{ $t('text.title_note') }}</p>
           <div id="notes-list">
             <template
@@ -62,7 +62,7 @@
             </template>
           </div>
         </div>
-        <div v-if="credits" class="ctn-credit">
+        <div v-if="hasCredits" class="ctn-credit">
           <p class="t-crdt">{{ $t('text.title_credit') }}</p>
 
           <ul id="credits-list">
@@ -109,7 +109,13 @@ export default {
       'getCurrentPage',
       'getNotes',
       'getCredits'
-    ])
+    ]),
+    hasNotes() {
+      return this.notes && this.notes.length
+    },
+    hasCredits() {
+      return this.credits && this.credits.length
+    }
   },
   created() {},
   beforeUnmount() {
@@ -414,10 +420,6 @@ export default {
     }
   }
 
-  // .note-txt {
-  //   pointer-events: none;
-  // }
-
   .box-nc {
     margin-top: 54px;
     overflow-y: auto;

package/src/components/AppCompPlayBarNext.vue

@@ -460,6 +460,7 @@ export default {
     const timer = reactive(new Timer(id)) // Making Timer instance reactive to be able to track changes
     const { t } = useI18n()
     return { id, store, timer, t }
+    //return { id, store, timer }
   },
   data() {
     return {
@@ -913,7 +914,7 @@ export default {
      * @description - handle all the listeners for medias
      */
     setMediaHandlers() {
-      if (this.mediaElement) {
+      if (this.mediaElement && this.mediaElement.addEventListener) {
         //Prevent default on keys used for navigation in the player (prevent scrollbar to be trigger when changing volume)
         this.pbContainer.addEventListener('keydown', this.keysPreventDefault)
         //progressBar events
@@ -921,7 +922,7 @@ export default {
         //window handlers for playbar progress
         window.addEventListener('mousemove', this.progressWindowMove)
         window.addEventListener('mouseup', this.progressWindowUp)
-
+        // console.log('⚠️--- TEST AppCompPlayBarNext---', this.mediaElement)
         //Update data when media as a timeupdate/ended
         this.mediaElement.addEventListener(
           'timeupdate',
@@ -1580,7 +1581,10 @@ export default {
      */
     setVideoHandlers() {
       //Tooltip
+      if (!this.progressArea || !this.progressArea.addEventListener) return
       this.progressArea.addEventListener('mousemove', this.updateSeekTooltip)
+
+      if (!this.mediaContainer || !this.mediaContainer.addEventListener) return
       //Fullscreen
       this.mediaContainer.addEventListener(
         'fullscreenchange',
@@ -1594,7 +1598,10 @@ export default {
      */
     removeVideoHandlers() {
       //Tooltip
+      if (!this.progressArea || !this.progressArea.addEventListener) return
       this.progressArea.removeEventListener('mousemove', this.updateSeekTooltip)
+      if (!this.mediaContainer || !this.mediaContainer.removeEventListener)
+        return
       //Fullscreen
       this.mediaContainer.removeEventListener(
         'fullscreenchange',
@@ -1628,7 +1635,7 @@ export default {
      */
     toggleFullScreen() {
       const fullscreenElement = this.mediaContainer
-      console.log(fullscreenElement)
+      //console.log(fullscreenElement)
 
       if (document.fullscreenElement) {
         // exitFullscreen is only available on the Document object.
@@ -1777,7 +1784,8 @@ export default {
      */
 
     hideControls() {
-      if (this.mediaElement.paused) return
+      //Always show playbar when paused or not in fullscreen mode
+      if (this.mediaElement.paused || !document.fullscreenElement) return
 
       this.hideTimer = setTimeout(() => {
         this.showControlsValue = false
@@ -1795,12 +1803,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .pb-container.video {
-  position: absolute;
   height: 100%;
   width: 100%;
   justify-content: center;
   display: flex;
-  margin-bottom: 78px;
 }
 
 .playback-button {
@@ -1808,7 +1814,7 @@ export default {
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 94%;
+  height: 100%;
   display: flex;
   flex-flow: column wrap;
   justify-content: center;
@@ -1837,8 +1843,6 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
-  position: absolute;
-  bottom: -78px;
   opacity: 0;
   z-index: 2;
 
@@ -2260,8 +2264,10 @@ export default {
 
 .FS {
   &:fullscreen {
-    .pb-wrapper {
-      bottom: -45px;
+    .pb-container {
+      position: absolute;
+      bottom: 0;
+      height: 78px;
     }
   }
 }

package/src/components/AppCompQuizRecall.vue

@@ -104,19 +104,14 @@ export default {
     getUserInteraction: {
       async handler(newValue) {
         if (!this.getUserInteraction) return
-
         const { activityId, pageId } = this.quizRecallData
         const interaction = this.getPageInteraction(
           activityId,
           pageId
         ).userInteraction
-
-        if (!interaction) return
         //Get quizRecall answer
         if (this.quizRecallData && this.quizData) {
           await this.getQuizRecallAnswer(interaction)
-        } else {
-          this.quizRecall.done == false
         }
       },
       immediate: true,
@@ -209,6 +204,13 @@ export default {
     //Get datas from quizRecallData and userData and add them to quizRecall object
     async getQuizRecallAnswer(userData) {
       await this.$nextTick() //wait for the DOM to update
+      //userData will be undefined if the page containing the target quiz was never visited
+      if (typeof userData === 'undefined') {
+        this.quizRecall.done = false //set quiz recall message (quiz not completed)
+        this.isReady = true //hide the skeleton
+        return
+      }
+
       const { quizId, hypertext_done, hypertext_undone, title, titletag } =
         this.quizRecallData
 
@@ -216,6 +218,7 @@ export default {
       if (hypertext_done) {
         this.quizRecall.hypertext_done = hypertext_done
       }
+
       if (hypertext_undone) {
         this.quizRecall.hypertext_undone = hypertext_undone
       }
@@ -231,6 +234,7 @@ export default {
         }
       }
       //Get the quiz answers from userData
+
       const answers = userData.quizAnswers || {}
       let quizAnswer = answers[quizId] || null
 
@@ -243,7 +247,6 @@ export default {
         this.quizRecall.answer = quizAnswer.value[0].filled || ''
         this.quizRecall.ennonce = this.quizData.ennonce
       }
-      this.quizRecall
       this.isReady = true //Set isReady to true to display the component
     },
 
@@ -301,6 +304,7 @@ export default {
         )
         this.hasError.push(msgErr)
       }
+
       //Validate if all required properties are present in quizRecallData
       if (missingRequired.length > 0) {
         let msgErr = `QuizRecallData missing required ${missingRequired} property`

package/src/components/AppCompVideoPlayer.vue

@@ -282,6 +282,7 @@ export default {
     resizeVideo(size, container) {
       let defaultSize = 100
       if (size == 'sm') defaultSize = 68
+
       //const videoElement = document.querySelector('.__media-container')
       const videoElement = this.$vidElement.mMediaContainer
       setTimeout(() => {
@@ -304,7 +305,7 @@ $widthVideo: 100%;
 
 .app-video-player {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: wrap;
   position: relative;
   align-items: center;

package/src/main.js

@@ -28,7 +28,7 @@ import GsapPlugin from './plugins/gsap'
 import eventBus from './plugins/bus'
 import helper from './plugins/helper'
 import analytics from './plugins/analytics'
-import mergeLocales from './plugins/i18n'
+import initLocalisation from './plugins/i18n'
 import { scormPlugin } from './plugins/scorm'
 import { xapiPlugin } from './plugins/xapi'
 import { $idb } from './plugins/idb'
@@ -41,19 +41,33 @@ import VueSafeTeleport from 'vue-safe-teleport'
 import { FocusTrap } from 'focus-trap-vue'
 import nvdaFix from './directives/nvdaFix.js'
 import pckg from '../package.json'
+import fcadRouter from './router/index.js'
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import { fr, en } from 'vuetify/locale'
+
 const pinia = createPinia()
 
 export default {
   install(app, options) {
+    app.use(fcadRouter)
     app.use(pinia)
     app.use(scormPlugin)
     app.use(GsapPlugin)
     app.use(xapiPlugin)
     app.use(VueSafeTeleport)
     app.component('FocusTrap', FocusTrap)
-
     app.use(eventBus)
     app.use($idb)
+    const vuetify = createVuetify({
+      locale: {
+        locale: 'fr',
+        fallback: 'en',
+        messages: { fr, en }
+      }
+    })
+    app.use(vuetify)
 
     app.component('AppBase', AppBase)
     app.component('AppBaseButton', AppBaseButton)
@@ -332,7 +346,6 @@ export default {
 
       let server = remote ? specification : 'local'
       //falback to idb when scorm and origin is localhost
-      //falback to idb when scorm and origin is localhost
       if (
         (specification == 'scorm' && window.location.hostname == 'localhost') ||
         !window.location.hostname.includes('cegepadistance.ca')
@@ -476,9 +489,10 @@ export default {
 
     appStore.applicationSettings = settingsOptions
     //=================================END SETTING PREFERENCES ====================================//
-
-    //mergeLocales
-    mergeLocales(options.i18n.global)
+    // const appi18b = options.i18n
+    // console.log('i18n options received in appBase plugin...', appi18b)
+    const i18n = initLocalisation(options.i18n)
+    app.use(i18n)
     app.use(helper)
     app.use(analytics)