fcad-core-dragon 2.1.0-beta.4 → 2.1.1

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

@@ -29,6 +29,8 @@
       />
     </nav>
     <base-module :m-data="$data">
+          
+
       <v-container
         id="wrapper-content"
         fluid
@@ -184,7 +186,6 @@ export default {
     appReady() {
       return this.getAppStatus === 'ready' ? true : false
     },
-
     hasMedia() {
       return typeof this.hasMediaElOrTimeline === 'object'
     },
@@ -203,7 +204,6 @@ export default {
         return true
       else return false
     },
-
     /**
      * @description Set the id the module
      */
@@ -233,7 +233,6 @@ export default {
         description = this.moduleConfig.description
       return description
     },
-
     /**
      * @description set Previous/Next can allow navigation between activities.
      *
@@ -338,7 +337,6 @@ export default {
 
       return sidebarSettings
     },
-
     navigationHistory() {
       return this.getRouteHistory
     }
@@ -521,7 +519,7 @@ export default {
     lessonLabel = this.$t('text.lesson')
     lessonNumber = this.moduleConfig.id.replace('module_', '')
     lessonTitle = this.theTitle
-    titleString = lessonLabel + ' ' + lessonNumber + ' : ' + lessonTitle
+    titleString = lessonLabel + ' ' + lessonNumber + ' – ' + lessonTitle
 
     //Remove prefix for introduction or conclusion, according to isIntroConclu setting in Module.vue
     if (typeof this.moduleConfig.isIntroConclu !== 'undefined') {
@@ -626,7 +624,7 @@ export default {
     async handleKeyboardControls(evt) {
       let { code } = evt
 
-      if (code === 'Escape' && this.rightSidebarVisible){
+      if (code === 'Escape' && this.rightSidebarVisible) {
         this.closeSidebar(this.dynamicSidebarContent._context)
       }
     },
@@ -661,15 +659,15 @@ export default {
       //delay animation
       this.rightSidebarVisible = true
       this.updatesideBIsOpen(this.rightSidebarVisible)
-      setTimeout(() => {
-        const rightSidebarContent = this.getRightSidebar() // Emelent displayed in the sidebar-body
-        if (!rightSidebarContent) return
-        rightSidebarContent.scrollTop = 0
-        const rSidebar = document.querySelector('#right-sidebar') // the sidebar
-        rSidebar.dispatchEvent(this.rightSidebarEvent)
-        rSidebar.setAttribute('tabindex', -1)
-        this.resetFocus(rSidebar) //set focus on the sidebar
-      }, 100)
+      // setTimeout(() => {
+      const rightSidebarContent = this.getRightSidebar() // Emelent displayed in the sidebar-body
+      if (!rightSidebarContent) return
+      rightSidebarContent.scrollTop = 0
+      const rSidebar = document.querySelector('#right-sidebar') // the sidebar
+      rSidebar.dispatchEvent(this.rightSidebarEvent)
+      rSidebar.setAttribute('tabindex', -1)
+      this.resetFocus(rSidebar) //set focus on the sidebar
+      // }, 100)
     },
     /**
      * @description close the right sidebar component
@@ -682,6 +680,7 @@ export default {
       this.rightSidebarVisible = false //
       setTimeout(() => {
         const rSidebar = document.querySelector('#right-sidebar') // the sidebar
+        if (!rSidebar) return
         rSidebar.setAttribute('style', 'display:none')
         rSidebar.dispatchEvent(this.rightSidebarEvent) //this will allow to run the animation of sidebar closing 1rst
       }, 100)
@@ -785,7 +784,6 @@ export default {
     openBranchContent(branchID) {
       this.branchingVisible = true
       this.compID = branchID //set compenent ID
-
       setTimeout(() => {
         const rightSidebar = this.getRightSidebar()
         //Should indicate that page is completed when the Rightsidebar content heigh is less then window height
@@ -847,7 +845,7 @@ export default {
 
       return new Promise((res) => {
         this.$bus.$emit('set-comp-status', 'appBaseModule', 'loading')
-        this.updateCurrentTimeline('')
+        this.updateCurrentTimeline(null)
         this.updateCurrentMediaElements([])
         // this.updateCurrentPage({})
         this.$bus.$emit('set-comp-status', 'appBaseModule', 'ready')

package/src/components/AppBasePage.vue

@@ -6,6 +6,24 @@
 -->
 <template>
   <div :id="pageData.id" :key="pageData.id" class="app-page" role="main">
+    <div v-if="appDebugMode" class="debug-pageInfo" :class="{ open: push }">
+      <button class="w-btn" @click="push = !push">&lt;</button>
+      <div class="ctn">
+        Activity info: Route : {{ $route.path }}
+        <br />
+
+        Activity id : {{ getDebugModeInfo.id }}
+        <br />
+        Nombre de page : {{ getDebugModeInfo.size }}
+        <br />
+        Page complete :
+        <ul>
+          <li v-for="(value, key) in getDebugModeInfo.progression" :key="key">
+            {{ value }}
+          </li>
+        </ul>
+      </div>
+    </div>
     <slot v-if="!errorPage.length" name="content">Page</slot>
     <app-base-error-display
       v-else
@@ -98,7 +116,8 @@ export default {
       drModeActive: null,
       error: null,
       id: this.pageID,
-      type: this.pageType
+      type: this.pageType,
+      push: false
 
       //======== End PageMisins values ===================
     }
@@ -107,8 +126,13 @@ export default {
     ...mapState(useAppStore, [
       'getDataNoteCredit',
       'getAllActivities',
-      'getApplicationSettings'
+      'getApplicationSettings',
+      'getAppDebugMode'
     ]),
+
+    appDebugMode() {
+      return this.getAppDebugMode
+    },
     getRouteHistory() {
       return this.store.getRouteHistory
     },
@@ -130,7 +154,6 @@ export default {
     },
 
     getCurrentPage() {
-      console.log('📘 ', this.store.getCurrentPage)
       return this.store.getCurrentPage
     },
 
@@ -329,6 +352,25 @@ export default {
         A11YTxt = A11YTxt.replace('activite', this.$t('text.activity'))
 
       return A11YTxt.toLowerCase()
+    },
+
+    getDebugModeInfo() {
+      const allActivitiesState = JSON.parse(
+        JSON.stringify(this.getAllActivitiesState)
+      )
+      let size = allActivitiesState[this.pageData.activityRef]
+        ? allActivitiesState[this.pageData.activityRef].size
+        : 0
+
+      let Pprogress = allActivitiesState[this.pageData.activityRef].progressions
+
+      let info = {
+        id: this.pageData.activityRef,
+        size: size,
+        progression: Pprogress
+      }
+
+      return info
     }
   },
   watch: {
@@ -394,11 +436,12 @@ export default {
     //Fix for firefox not updating aria-labelledby (was stuck saying Activite 1, page 1 on every pages)
     this.$refs['page_info'].innerHTML = this.A11yPageInfo
 
-    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')
+    // scrolling to top of only when is normal page
+    if (this.pageData && this.type === 'pg_normal')
+      this.$bus.$emit('move-to-target', 'page_info_section')
 
+    // set the state of the page when page is mounted : started or completed
     if (this.userInteraction && this.userInteraction.state)
-      // set the state of the page to existing record if any
       this.state = this.userInteraction.state
     else if (
       this.type === 'pg_menu' &&
@@ -408,7 +451,7 @@ export default {
     } else this.state = 'started' // set the default state to started
 
     this.userInteraction['state'] = this.state // add the state to the userInteraction
-
+    // handle completion status of the page.
     if (
       document.documentElement.scrollHeight <=
         document.documentElement.clientHeight + 20 &&
@@ -421,15 +464,19 @@ export default {
       this.updateCurrentBranchPage(this.$data)
     }
 
-    if (this.type == 'pg_branch') return //do not proceed to add listner when branch page
+    if (this.type == 'pg_branch') return //do not proceed to add listener when branch page
 
     window.addEventListener('scroll', this.onFirstScroll, { once: true }) //listener is removed when event fired
   },
   unmounted() {
+    //cleaning up all the event listener
     this.$bus.$off('branch-page-viewed', this.completePageBranching)
     this.$bus.$off('media-viewed', this.setMediaViewed)
     this.$bus.$off('manage-media-players', this.managePlayingMedia)
     this.$bus.$off('video-transcript-toggle', this.onVideoTranscriptToggle)
+    if (!this.isBranchingPage && this.type !== 'pg_branch')
+      this.updateCurrentBranching(null) //unset current branching when leaving a branching page
+    if (this.type == 'pg_branch') this.updateCurrentBranchPage(null) //unset current branch page when leaving a branch page
     this.$bus.$off('save-quiz-answers', this.saveQuizAnswers)
     window.removeEventListener('scroll', this.onFirstScroll, { once: true }) //in case user did not scroll
     window.removeEventListener('scroll', this.handleScroll)
@@ -780,4 +827,40 @@ export default {
     }
   }
 }
+
+.debug-pageInfo {
+  position: fixed;
+  right: -250px;
+  bottom: 20px;
+
+  color: #333;
+  background-color: rgba(#eaabb6b3, 0.9);
+
+  display: flex;
+  flex-direction: row;
+
+  &.open {
+    right: 0;
+  }
+
+  .w-btn {
+    padding: 10px;
+    height: 100%;
+    cursor: pointer;
+    background: rgba(#fff, 0.05);
+
+    &:hover {
+      background: rgba(#fff, 0.1);
+    }
+  }
+
+  .ctn {
+    padding: 24px;
+    width: 250px;
+
+    ul {
+      margin-left: 15px;
+    }
+  }
+}
 </style>

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>

package/src/components/AppBaseSkeleton.vue

@@ -6,7 +6,27 @@
 <template>
   <div class="skeleton-wrapper">
     <div v-if="skeletonText" class="skeleton-text">{{ skeletonText }}</div>
-    <div v-for="line in skeletonLines" :key="line" class="skeleton-line"></div>
+    <div v-for="line in skeletonLines" :key="line" class="skeleton-line" />
+
+    <div v-show="skeletonType == `quiz-choix`">
+      <v-skeleton-loader
+        type="heading, avatar,paragraph,
+      "
+      ></v-skeleton-loader>
+      <v-skeleton-loader type="avatar,paragraph"></v-skeleton-loader>
+      <v-skeleton-loader type="avatar,paragraph"></v-skeleton-loader>
+    </div>
+
+    <div v-show="skeletonType == `quiz-texte`">
+      <v-skeleton-loader
+        type="heading, image,
+      "
+      ></v-skeleton-loader>
+    </div>
+
+    <div v-show="skeletonType == `quiz-recall`">
+      <v-skeleton-loader type="heading, paragraph,image"></v-skeleton-loader>
+    </div>
   </div>
 </template>
 
@@ -14,8 +34,9 @@
 export default {
   name: 'AppBaseSkeleton',
   props: {
-    skeletonLines: { type: Number, default: 1 }, //number of skeleton lines to display
-    skeletonText: { type: String, default: `⏳ LOADING...` } //number of skeleton lines to display
+    skeletonLines: { type: Number, default: 0 }, //number of skeleton lines to display
+    skeletonText: { type: String, default: `` }, //number of skeleton lines to display
+    skeletonType: { type: String, default: `line` }
   }
 }
 </script>

package/src/components/AppCompAudio.vue

@@ -27,7 +27,12 @@
       </div>
       <!--Audio content-->
       <div v-show="!isLoading && !hasSourceLoadingError" class="audio-content">
-        <img v-if="mPoster" class="audio-img" :src="mPoster" :alt="mAlt" />
+        <img
+          v-if="mPoster"
+          class="audio-img"
+          :src="mPoster"
+          aria-hidden="true"
+        />
         <div class="audio-media">
           <span>{{ mTitle }}</span>
           <div class="audio-media-player">
@@ -88,7 +93,6 @@ export default {
       mSources: this.audData.mSources,
       mTranscript: this.audData.mTranscript,
       mPoster: this.audData.mPoster,
-      mAlt: this.audData.mAlt ? this.audData.mAlt : ' ',
       isSet: false,
       hasSourceLoadingError: false,
       hasErr: validateAudioData(this.audData)
@@ -243,4 +247,10 @@ export default {
     top: 0;
   }
 }
+
+.debug {
+  &:focus {
+    border: 5px solid rgba(#fff, 0.05);
+  }
+}
 </style>

package/src/components/AppCompInputCheckBoxNx.vue

@@ -11,7 +11,7 @@
         v-for="(choixReponse, index) in inputData"
         :Key="`div_chx_${id}_${choixReponse.id}`"
       >
-        <div class="box-checkbox" role="group">
+        <div class="box-checkbox">
           <label
             :key="`lbl_chx_${id}-${choixReponse.id}`"
             :for="`boxchx_${id}_${choixReponse.id}`"
@@ -36,7 +36,6 @@
             <span
               :id="`span_${id}_${choixReponse.id}`"
               class="checkbox-contenu"
-              aria-hidden="true"
               v-html="choixReponse.value"
             ></span>
             <span

package/src/components/AppCompInputRadioNx.vue

@@ -13,7 +13,7 @@
         v-for="(choixReponse, index) in quizInputDataValue"
         :Key="`div_chx_${id}-${choixReponse.id}`"
       >
-        <div class="box-radio" role="group">
+        <div class="box-radio">
           <label
             :key="`lbl_chx_${id}_${choixReponse.id}`"
             :for="`chx_${id}_${choixReponse.id}`"
@@ -37,7 +37,6 @@
 
             <span
               :id="`span_${id}_${choixReponse.id}`"
-              aria-hidden="true"
               class="radio-contenu"
               v-html="choixReponse.value"
             />
@@ -275,4 +274,11 @@ export default {
 fieldset {
   border: inherit;
 }
+
+.radio-label {
+  //position: relative;
+  span {
+    width: 90%;
+  }
+}
 </style>