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

package/src/components/AppBaseFlipCard.vue

@@ -1,84 +1,84 @@
-<template>
-  <!--
-     inspire by : https://vuejsexamples.com/generic-flip-card-in-vue-that-allows-completely-arbitrary-content-on-each-side/
-    -->
-  <div class="flip-card" role="button" aria-pressed="false" @click="fnClick">
-    <div class="inside-card" :class="{ flip: isFlipped }">
-      <div class="front-card" name="front-card">
-        <slot name="front-card" />
-      </div>
-      <div class="back-card">
-        <slot name="back-card" />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click'],
-  data() {
-    return {
-      isFlipped: false
-    }
-  },
-  methods: {
-    /**
-     * @fires click to parent componant or page
-     */
-    fnClick() {
-      this.$emit('click', this.$el)
-      this.isFlipped = !this.isFlipped
-    }
-  }
-}
-</script>
-<style lang="scss">
-.flip-card {
-  height: auto;
-  cursor: pointer;
-
-  /***** Parameretre modifiable *****/
-  perspective: 100%;
-  width: 90%;
-
-  .inside-card {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    /***** Parameretre modifiable *****/
-    transform-style: preserve-3d;
-    transition: transform 0.5s;
-
-    &.flip {
-      /***** Parameretre modifiable *****/
-      transform: rotateY(180deg);
-    }
-
-    .front-card,
-    .back-card {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      -webkit-backface-visibility: hidden;
-      backface-visibility: hidden;
-
-      .img-flip-card {
-        width: 90%;
-        height: auto;
-      }
-    }
-
-    .back-card {
-      /***** Parameretre modifiable *****/
-      transform: rotateY(180deg);
-    }
-  }
-}
-</style>
+<template>
+  <!--
+     inspire by : https://vuejsexamples.com/generic-flip-card-in-vue-that-allows-completely-arbitrary-content-on-each-side/
+    -->
+  <div class="flip-card" role="button" aria-pressed="false" @click="fnClick">
+    <div class="inside-card" :class="{ flip: isFlipped }">
+      <div class="front-card" name="front-card">
+        <slot name="front-card" />
+      </div>
+      <div class="back-card">
+        <slot name="back-card" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click'],
+  data() {
+    return {
+      isFlipped: false
+    }
+  },
+  methods: {
+    /**
+     * @fires click to parent componant or page
+     */
+    fnClick() {
+      this.$emit('click', this.$el)
+      this.isFlipped = !this.isFlipped
+    }
+  }
+}
+</script>
+<style lang="scss">
+.flip-card {
+  height: auto;
+  cursor: pointer;
+
+  /***** Parameretre modifiable *****/
+  perspective: 100%;
+  width: 90%;
+
+  .inside-card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    /***** Parameretre modifiable *****/
+    transform-style: preserve-3d;
+    transition: transform 0.5s;
+
+    &.flip {
+      /***** Parameretre modifiable *****/
+      transform: rotateY(180deg);
+    }
+
+    .front-card,
+    .back-card {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+
+      .img-flip-card {
+        width: 90%;
+        height: auto;
+      }
+    }
+
+    .back-card {
+      /***** Parameretre modifiable *****/
+      transform: rotateY(180deg);
+    }
+  }
+}
+</style>

package/src/components/AppBaseModule.vue

@@ -7,11 +7,11 @@
 
 <template>
   <div fluid class="module">
-    <div
+    <span
       id="page_info_section"
       class="sr-only"
       aria-labelledby="page_info"
-    ></div>
+    ></span>
     <a class="skip-link" href="" @click.prevent="skipToMain">
       {{ $t('message.skip_content') }}
     </a>
@@ -108,13 +108,13 @@ import { mapState, mapActions } from 'pinia'
 import { useAppStore } from '../module/stores/appStore'
 import BaseModule from './BaseModule.vue'
 import { timerMixin } from '../mixins/timerMixin'
-import AppCompTranscript from './AppCompTranscript.vue'
+import AppCompContainer from './AppCompContainer.vue'
 import { defineAsyncComponent } from 'vue'
 //import
 export default {
   components: {
     BaseModule,
-    AppCompTranscript
+    AppCompContainer
   },
   mixins: [timerMixin],
   props: {
@@ -154,6 +154,8 @@ export default {
       transcriptContent: null,
       transcriptContainer: null,
       branchingVisible: false,
+      customContentVisible: false,
+      customContent: null,
       lessonCompletionStatus: false,
       checkedDataFromServer: 0,
       rightSidebarEvent: new CustomEvent('sidebarEvent', {
@@ -179,8 +181,8 @@ export default {
       'getMenuSettings',
       'getRouteHistory',
       'getOnboardingEnabled',
-      'getApplicationSettings',
       'getDataFromServer',
+      'getApplicationSettings',
       'getCompStatusTracker'
     ]),
     isMenu() {
@@ -264,50 +266,120 @@ export default {
       return mainEl
     },
 
+    // dynamicSidebarContent() {
+    //   if (!this.transcriptVisible && !this.branchingVisible) return null
+    //   let sidebarSettings = {}
+    //   let _label = null
+
+    //   if (this.transcriptVisible) {
+    //     _label =
+    //       this.$i18n.locale === 'fr'
+    //         ? 'Contenu de la transcription'
+    //         : 'Content of the transcript'
+
+    //     sidebarSettings = {
+    //       _component: AppCompContainer,
+    //       _comProps: {
+    //         content: this.transcriptContent
+    //       },
+    //       _context: 'ctxTranscript',
+    //       _container: this.transcriptContainer,
+    //       _label,
+    //       _id: 'transcript'
+    //     }
+    //   } else if (this.branchingVisible) {
+    //     if (this.$route.meta.type !== 'branching' || !this.compID) return null
+
+    //     const componentName = this.compID
+    //     const { activityRef } = this.getCurrentPage //get activity id from current page
+
+    //     _label =
+    //       this.$i18n.locale === 'fr'
+    //         ? "contenu de l'embranchement"
+    //         : 'content of the branching'
+
+    //     sidebarSettings = {
+    //       _component: defineAsyncComponent(
+    //         async () =>
+    //           await import(`@/module/${activityRef}/${componentName}.vue`)
+    //       ),
+
+    //       _comProps: false,
+    //       _context: 'ctxBranching',
+    //       _label,
+    //       _id: componentName
+    //     }
+    //   }
+    //   return sidebarSettings
+    // },
     dynamicSidebarContent() {
-      if (!this.transcriptVisible && !this.branchingVisible) return null
+      if (
+        !this.transcriptVisible &&
+        !this.branchingVisible &&
+        !this.customContentVisible
+      )
+        return null
       let sidebarSettings = {}
       let _label = null
+      //=========================================
+      switch (true) {
+        case this.transcriptVisible:
+          _label =
+            this.$i18n.locale === 'fr'
+              ? 'Contenu de la transcription'
+              : 'Content of the transcript'
+
+          sidebarSettings = {
+            _component: AppCompContainer,
+            _comProps: {
+              content: this.transcriptContent,
+              id: 'transcript-content'
+            },
+            _context: 'ctxTranscript',
+            _container: this.transcriptContainer,
+            _label,
+            _id: 'transcript'
+          }
+          break
 
-      if (this.transcriptVisible) {
-        _label =
-          this.$i18n.locale === 'fr'
-            ? 'Contenu de la transcription'
-            : 'Content of the transcript'
-
-        sidebarSettings = {
-          _component: AppCompTranscript,
-          _comProps: {
-            content: this.transcriptContent
-          },
-          _context: 'ctxTranscript',
-          _container: this.transcriptContainer,
-          _label,
-          _id: 'transcript'
-        }
-      } else if (this.branchingVisible) {
-        if (this.$route.meta.type !== 'branching' || !this.compID) return null
-
-        const componentName = this.compID
-        const { activityRef } = this.getCurrentPage //get activity id from current page
-
-        _label =
-          this.$i18n.locale === 'fr'
-            ? "contenu de l'embranchement"
-            : 'content of the branching'
-
-        sidebarSettings = {
-          _component: defineAsyncComponent(
-            async () =>
-              await import(`@/module/${activityRef}/${componentName}.vue`)
-          ),
-
-          _comProps: false,
-          _context: 'ctxBranching',
-          _label,
-          _id: componentName
+        case this.branchingVisible: {
+          if (this.$route.meta.type !== 'branching' || !this.compID) return null
+
+          const componentName = this.compID
+          const { activityRef } = this.getCurrentPage //get activity id from current page
+
+          _label =
+            this.$i18n.locale === 'fr'
+              ? "contenu de l'embranchement"
+              : 'content of the branching'
+
+          sidebarSettings = {
+            _component: defineAsyncComponent(
+              async () =>
+                await import(`@/module/${activityRef}/${componentName}.vue`)
+            ),
+
+            _comProps: false,
+            _context: 'ctxBranching',
+            _label,
+            _id: componentName
+          }
+          break
         }
+
+        case this.customContentVisible:
+          sidebarSettings = {
+            _component: AppCompContainer,
+            _comProps: {
+              content: this.customContent
+            },
+            _context: 'ctxCustomContent',
+            _label,
+            _id: 'custom-content'
+          }
+          break
       }
+
       return sidebarSettings
     },
 
@@ -532,12 +604,6 @@ export default {
     }, 800)
   },
   mounted() {
-    //A11Y: Bring back the focus on the body element after each navigation
-    document.body.setAttribute('tabindex', -1) //needed to use .focus()
-    this.$router.afterEach(() => {
-      document.body.focus()
-    })
-
     let nav = document.getElementById('navTool')
 
     if (nav) nav.addEventListener('mouseleave', this.onNavMouseleave)
@@ -623,6 +689,9 @@ export default {
 
           this.openBranchContent(content)
           break
+        case 'ctxCustomContent':
+          this.displayCustomContent(content, wrapper)
+          break
       }
       //delay animation
       this.rightSidebarVisible = true
@@ -661,10 +730,16 @@ export default {
           this.closeBranchContent()
           break
 
+        case 'ctxCustomContent':
+          this.closeCostumContent()
+          break
+
         default:
           this.branchingVisible = false
           this.transcriptVisible = false
+          this.customContentVisible = false
           this.transcriptContent = null
+          this.customContent = null
           this.compID = null
       }
       this.updatesideBIsOpen(this.rightSidebarVisible)
@@ -732,10 +807,11 @@ export default {
      * @fires 'transcript-hidden'  to AppCompPlaybar
      */
     closeTranscript(container = this.transcriptContainer) {
+      let t = this.customContentVisible ? 10 : 200
       setTimeout(() => {
         this.transcriptContent = null
         this.transcriptVisible = false
-      }, 300)
+      }, t)
       this.$bus.$emit('transcript-hidden')
       this.$bus.$emit('resize-media', 'lg', container)
     },
@@ -784,6 +860,21 @@ export default {
       this.$bus.$emit('branching-hidden')
     },
 
+    displayCustomContent(c, container) {
+      if (!c) return (this.customContentVisible = false)
+      //Change transcript content
+      if (this.transcriptVisible) this.closeTranscript()
+      //Change transcript content
+      this.customContent = c
+      this.customContentContainer = container
+      this.customContentVisible = true
+    },
+
+    closeCostumContent() {
+      this.customContentContainer = null
+      this.customContentVisible = false
+    },
+
     /**
      * @description reset the values of state (currentTimeline,currentMedialement, currentPage, media duration, appStatus')in the store
      */
@@ -874,25 +965,14 @@ export default {
               this.$scorm.setValue('cmi.core.lesson_status', 'incomplete') // set the lesson status to in complete
               this.$scorm.Commit() // persist data
             }
+            //Redirect to current page or to menu if route is module
+            this.$route.name && this.$route.name !== 'module'
+              ? this.$router.push({ name: this.$route.name })
+              : this.$router.push({ name: 'menu' })
 
-            // check for the bookmark existance in LMS
-            const bookmark = this.$scorm.GetValue(
-              'cmi.core.lesson_location',
-              false
-            )
-
-            // if none stored in the LMS redirect to the 1st page
-            if (bookmark === '' || bookmark === undefined) {
-              //Redirect to current page or to menu if route is module
-              this.$route.name && this.$route.name !== 'module'
-                ? this.$router.push({ name: this.$route.name })
-                : this.$router.push({ name: 'menu' })
-            } else if (bookmark) {
-              this.$router.push({ name: bookmark })
-            }
             // set the current page
             this.fetchPage()
-            this.$scorm.getScormAPI()
+
             break
           }
           case 'xapi':
@@ -917,53 +997,31 @@ export default {
       arg = arg || null
       let existingRecord // hold record record
       let toBeSaved // hold data to send to scorm
+
       if (this.$scorm.initialized) {
         if (this.$scorm.GetValue('cmi.suspend_data') !== '')
           existingRecord = JSON.parse(this.$scorm.GetValue('cmi.suspend_data')) // try convert the scorm record to JSON Obiect
         // create entry for user data if there is no record in Scorm
         if (!existingRecord) existingRecord = {}
-        // There is a passed arg
-        if (arg !== null) {
-          // update only the user record
-          if (arg === 'userInteraction') {
-            // create new entry for user data if does not existe
-            if (!existingRecord['userData']) existingRecord['userData'] = {}
-            // update value of user data
-            if (this.getUserInteraction)
-              existingRecord.userData = this.getUserInteraction
-            toBeSaved = JSON.stringify(existingRecord) // convert to JSON string format
-          }
-          // update only the module record
-          else if (arg === 'module') {
-            // create new entry for module data if does not existe
-            if (!existingRecord['moduleData']) existingRecord['moduleData'] = {}
-            // update value for module data
-            toBeSaved = JSON.stringify(existingRecord) // convert to JSON string format
-          }
-          // no valid arg
-          else return
-        }
-        // Update module & user record
-        else {
-          // create entry for module and user data if does not existe
-          if (
-            !existingRecord['userData'] &&
-            !existingRecord['moduleData'] &&
-            !existingRecord['routeHistory']
-          ) {
-            existingRecord['moduleData'] = {}
-            existingRecord['userData'] = {}
-            existingRecord['routeHistory'] = []
-          }
-          // update values for module and user data
-          existingRecord.userData = this.getUserInteraction
-          existingRecord.routeHistory = this.routeData
-          // update value of user data
-          existingRecord.moduleConfig = JSON.stringify({}) // update value of module data
-          toBeSaved = JSON.stringify(existingRecord)
-        }
+
+        // create new entry for user data if does not existe
+        existingRecord.userData = this.getUserInteraction || {}
+        existingRecord.userSettings = this.getApplicationSettings || {}
+        // existingRecord.routeHistory = this.getRouteHistory || []
+        existingRecord.routeHistory = (() => {
+          const history = this.getRouteHistory.toReversed() //get the route history from the last
+
+          history[0] = this.$route.meta // change the last recored route to the current route
+
+          return history.toReversed()
+        })()
+        // update value of user data
+
+        toBeSaved = JSON.stringify(existingRecord) // convert to JSON string format
+
         this.$scorm.SetValue('cmi.suspend_data', toBeSaved) // converte to serialized string and save to scorm
         this.$scorm.Commit() // persist data in LMS
+        if (arg === 'disconnect') this.$scorm.Finish()
       }
     },
     /**

package/src/components/AppBasePage.vue

@@ -15,9 +15,12 @@
       :error-text="`Vous avez une/des erreur(s) dans la création de votre PAGE. Veuillez
             corriger les erreurs ci-dessous:`"
     />
-    <span id="page_info" class="sr-only" aria-hidden="true">
-      {{ A11yPageInfo }}
-    </span>
+    <span
+      id="page_info"
+      ref="page_info"
+      class="sr-only"
+      aria-hidden="true"
+    ></span>
     <div id="hiddenAlertContainer" role="alert" class="sr-only"></div>
   </div>
 </template>
@@ -100,7 +103,11 @@ export default {
     }
   },
   computed: {
-    ...mapState(useAppStore, ['getDataNoteCredit', 'getAllActivities']),
+    ...mapState(useAppStore, [
+      'getDataNoteCredit',
+      'getAllActivities',
+      'getApplicationSettings'
+    ]),
     getRouteHistory() {
       return this.store.getRouteHistory
     },
@@ -373,6 +380,9 @@ export default {
     this.$bus.$on('video-transcript-toggle', this.onVideoTranscriptToggle)
   },
   mounted() {
+    //Fix for firefox not updating aria-labelledby (was stuck saying Activite 1, page 1 on every pages)
+    this.$refs['page_info'].innerHTML = this.A11yPageInfo
+
     setTimeout(() => {
       if (this.pageData && this.type === 'pg_branch') return //Prevent scrolling to top of Parent when branching page are being viewed
       this.$bus.$emit('move-to-target', 'page_info_section')

package/src/components/AppBasePopover.vue

@@ -1,41 +1,41 @@
-<!--
- @ Description: This component is used to create a popover that is accessible via keyboard navigation (tab + space/enter)
--->
-<template>
-  <v-tooltip
-    ref="tooltip"
-    v-bind="$attrs"
-    v-model="show"
-    transition="false"
-    :open-on-click="true"
-    :persistent="false"
-  >
-    <slot></slot>
-  </v-tooltip>
-</template>
-
-<script>
-export default {
-  name: 'AppBasePopover',
-  data() {
-    return {
-      show: false,
-      alertContainer: null
-    }
-  },
-  watch: {
-    show: {
-      handler(newValue) {
-        if (newValue) {
-          const content = this.$refs.tooltip.contentEl.textContent
-          this.alertContainer.textContent = ''
-          this.alertContainer.textContent = content
-        }
-      }
-    }
-  },
-  mounted() {
-    this.alertContainer = document.getElementById('hiddenAlertContainer')
-  }
-}
-</script>
+<!--
+ @ Description: This component is used to create a popover that is accessible via keyboard navigation (tab + space/enter)
+-->
+<template>
+  <v-tooltip
+    ref="tooltip"
+    v-bind="$attrs"
+    v-model="show"
+    transition="false"
+    :open-on-click="true"
+    :persistent="false"
+  >
+    <slot></slot>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'AppBasePopover',
+  data() {
+    return {
+      show: false,
+      alertContainer: null
+    }
+  },
+  watch: {
+    show: {
+      handler(newValue) {
+        if (newValue) {
+          const content = this.$refs.tooltip.contentEl.textContent
+          this.alertContainer.textContent = ''
+          this.alertContainer.textContent = content
+        }
+      }
+    }
+  },
+  mounted() {
+    this.alertContainer = document.getElementById('hiddenAlertContainer')
+  }
+}
+</script>