fcad-core-dragon 2.0.1 → 2.0.2-beta.2

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

@@ -76,10 +76,9 @@
               )
             "
           >
-            <svg>
+            <svg aria-hidden="true" focusable="false">
               <use href="#close-square-icon" />
             </svg>
-            <span class="sr-only">{{ $t('button.closePopUp') }}</span>
           </app-base-button>
         </div>
 
@@ -151,7 +150,6 @@ export default {
       customContentVisible: false,
       customContent: null,
       lessonCompletionStatus: false,
-      checkedDataFromServer: 0,
       rightSidebarEvent: new CustomEvent('sidebarEvent', {
         bubbles: true,
         detail: {
@@ -175,9 +173,10 @@ export default {
       'getMenuSettings',
       'getRouteHistory',
       'getOnboardingEnabled',
-      'getDataFromServer',
       'getApplicationSettings',
-      'getCompStatusTracker'
+      'getCompStatusTracker',
+      'getLessonPosition',
+      'getCompletionState'
     ]),
     isMenu() {
       return this.$route.name === 'menu'
@@ -385,14 +384,13 @@ export default {
     getAllCompleted: {
       handler() {
         // Check once the server to set the completion status of the lesson
-        if (this.getDataFromServer && this.checkedDataFromServer < 1) {
-          const { completedState } = this.getDataFromServer
+        if (this.getCompletionState) {
+          const completedState = this.getCompletionState
 
           this.lessonCompletionStatus =
             !completedState || !completedState.completion
               ? false
               : completedState.completion
-          this.checkedDataFromServer += 1
         }
 
         if (!this.lessonCompletionStatus) this.sendCompletionStatus('LESSON')
@@ -412,10 +410,9 @@ export default {
           this.getModuleInfo.packageType === 'xapi' &&
           this.getConnectionInfo &&
           this.getConnectionInfo.actor &&
-          this.getConnectionInfo.remote &&
-          this.getDataFromServer
+          this.getConnectionInfo.remote
         ) {
-          const { lessonPosition } = this.getDataFromServer
+          const lessonPosition = this.getLessonPosition
 
           const lastReached = lessonPosition.length ? lessonPosition[0] : ''
 
@@ -568,8 +565,8 @@ export default {
       'updateCurrentTimeline',
       'updateCurrentMediaElements',
       'updateCurrentPage',
-      'updateDataFetchFromServer',
       'updatesideBIsOpen',
+      'setCompletionState',
       'updatepopIsOpen'
     ]),
     onNavMouseleave() {
@@ -1352,7 +1349,6 @@ export default {
         !this.getConnectionInfo ||
         !this.getConnectionInfo.actor ||
         !this.getConnectionInfo.remote ||
-        !this.getDataFromServer ||
         !context
       )
         return
@@ -1370,9 +1366,8 @@ export default {
             thisActivityProgressLength,
             thisActivityLength
 
-          const { userProgress } = this.getDataFromServer
           const thisActivityServerState =
-            userProgress[this.$route.meta.activity_ref]
+            this.getUserInteraction[this.$route.meta.activity_ref]
 
           if (thisActivityServerState)
             recordInServerLength = Object.keys(thisActivityServerState).length
@@ -1497,9 +1492,7 @@ export default {
               duration: this.lessonDuration,
               completion: this.lessonCompletionStatus
             }
-            this.updateDataFetchFromServer({
-              completedState
-            })
+            this.setCompletionState(completedState)
           }
 
           break
@@ -1517,7 +1510,7 @@ export default {
      */
 
     sendStartStatement(a) {
-      if (!a || !this.getDataFromServer) return
+      if (!a) return
       const { id } = a
       let aName = null
 
@@ -1544,8 +1537,10 @@ export default {
       /*
        *Determine if activity as been initialized. Activity is initialized when it is in the serverRecords
        */
-      const { userProgress } = this.getDataFromServer
-      const thisActivityServerState = userProgress[id] ? userProgress[id] : {}
+
+      const thisActivityServerState = this.getUserInteraction[id]
+        ? this.getUserInteraction[id]
+        : {}
       const recordInServerLength = Object.keys(thisActivityServerState).length
 
       const stmt = {

package/src/components/AppBasePage.vue

@@ -83,6 +83,7 @@ export default {
     //Getting initial existing userIntaction from store
     const { userInteraction: previousInteraction = {} } =
       store.getPageInteraction(activityRef, pageID)
+
     return { store, previousInteraction, pageID, pageType }
   },
 
@@ -124,6 +125,9 @@ export default {
     getUserInteraction() {
       return this.store.getUserInteraction
     },
+    getPageInteraction() {
+      return this.store.getPageInteraction
+    },
 
     getCurrentPage() {
       return this.store.getCurrentPage
@@ -153,10 +157,6 @@ export default {
       return this.store.getBifChoice
     },
 
-    getDataFromServer() {
-      return this.store.getDataFromServer
-    },
-
     isBranchingPage() {
       return this.$route.meta.type === 'branching' && this.type !== 'pg_branch'
     },
@@ -332,13 +332,13 @@ export default {
   },
   watch: {
     userInteraction: {
-      handler(newValue) {
+      async handler(newValue) {
         /**
-         * Objserve changes in the number of poperties to dispatch updates in the userdata in the Store
+         * Observe changes in the number of poperties to dispatch updates in the userdata in the Store
          */
 
         if (newValue && Object.entries(this.userInteraction).length) {
-          this.store.updateUserMetaData({
+          await this.store.updateUserMetaData({
             activityRef: this.pageData.activityRef,
             id: this.pageData.id,
             userInteraction: { ...this.userInteraction }
@@ -347,6 +347,14 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    'store.userDataLoaded': {
+      async handler() {
+        if (!this.store.userDataLoaded) return
+        this.userInteraction = await this.setInitialInteraction()
+      },
+      immediate: true,
+      deep: true
     }
   },
   created() {
@@ -367,7 +375,6 @@ export default {
       // Handeling presence of animation in the page
       if (this.pageData.animation) {
         // update the store with the information of currentTimeline
-        //this.store.updateCurrentTimeline(this.$gsap.timeline({ paused: true }))
       }
 
       if (this.type == 'pg_branch')
@@ -378,6 +385,7 @@ export default {
     this.$bus.$on('media-viewed', this.setMediaViewed)
     this.$bus.$on('manage-media-players', this.managePlayingMedia)
     this.$bus.$on('video-transcript-toggle', this.onVideoTranscriptToggle)
+    this.$bus.$on('save-quiz-answers', this.saveQuizAnswers)
   },
   mounted() {
     //Fix for firefox not updating aria-labelledby (was stuck saying Activite 1, page 1 on every pages)
@@ -424,6 +432,7 @@ export default {
     this.$bus.$off('media-viewed', this.setMediaViewed)
     this.$bus.$off('manage-media-players', this.managePlayingMedia)
     this.$bus.$off('video-transcript-toggle', this.onVideoTranscriptToggle)
+    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)
   },
@@ -440,7 +449,10 @@ export default {
     handleScroll(event) {
       event
       /*
-       * DocumentElement properties does not alway work properly on all Browser. To Ensure reliable value of its properties on all * Broswer we will calculate the Document Height by taking the maximum of body and documentElement height poperties.
+       * DocumentElement properties does not alway work properly on all Browser.
+       * To Ensure reliable value of its properties on all.
+       * Browser we will calculate the Document Height by taking the maximum of
+       * body and documentElement height poperties.
        * ref:https://javascript.info/size-and-scroll-window
        */
 
@@ -515,10 +527,7 @@ export default {
     getProgress(id) {
       id = id || this.pageData.id
 
-      const record = this.store.getPageInteraction(
-        this.pageData.activityRef,
-        id
-      )
+      const record = this.getPageInteraction(this.pageData.activityRef, id)
 
       if (Object.entries(record).length) {
         const { userInteraction } = record
@@ -620,7 +629,7 @@ export default {
       })
     },
     getAnchorComplete() {
-      const records = this.store.getPageInteraction(
+      const records = this.getPageInteraction(
         this.pageData.activityRef,
         this.pageData.id
       )
@@ -671,6 +680,7 @@ export default {
 
         this.userInteraction.mediasViewed = mediasViewed
       }
+
       //Should add ID in media viewed list if viewed for the 1st time
       if (mediasViewed.includes(mediaID)) return
 
@@ -729,6 +739,27 @@ export default {
         const playbarInstance = m[attrKeys[3]]
         playbarInstance.otherVideoTranscriptShown = transcriptShown
       })
+    },
+    setInitialInteraction() {
+      const { activityRef, id: pageID } = this.pageData
+      const { userInteraction: previousInteraction = {} } =
+        this.getPageInteraction(activityRef, pageID)
+
+      return previousInteraction
+    },
+    saveQuizAnswers(el, quiz) {
+      if (!this.userInteraction.quizAnswers)
+        return (this.userInteraction.quizAnswers = { ...quiz })
+      const quizID = Object.keys(quiz)[0]
+
+      if (!this.userInteraction.quizAnswers[quizID])
+        return (this.userInteraction.quizAnswers = {
+          ...this.userInteraction.quizAnswers,
+          ...quiz
+        })
+      const quizValue = Object.values(quiz)[0]
+      this.userInteraction.quizAnswers[quizID] = quizValue
+      // const {}
     }
   }
 }

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

@@ -0,0 +1,45 @@
+<!--
+ @ Description: This component is used to display skeleton screens while content is loading.
+
+-->
+
+<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>
+</template>
+
+<script>
+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
+  }
+}
+</script>
+
+<style lang="scss">
+.skeleton-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 8px;
+}
+skeleton-text {
+  font-size: larger;
+}
+.skeleton-line {
+  height: 25px;
+  background: linear-gradient(90deg, #ddd, #eee, #ddd);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.2s infinite linear;
+  border-radius: 4px;
+}
+@keyframes skeleton-loading {
+  to {
+    background-position-x: -200%;
+  }
+}
+</style>

package/src/components/AppCompAudio.vue

@@ -29,7 +29,7 @@
       <div v-show="!isLoading && !hasSourceLoadingError" class="audio-content">
         <img v-if="mPoster" class="audio-img" :src="mPoster" :alt="mAlt" />
         <div class="audio-media">
-          <h5>{{ mTitle }}</h5>
+          <span>{{ mTitle }}</span>
           <div class="audio-media-player">
             <audio
               :id="id"
@@ -174,13 +174,17 @@ export default {
 </script>
 <style scoped lang="scss">
 .audio-card {
-  // --primary100: #deeff8;
-  // --primary700: #005c8d;
   position: relative;
   border-radius: 4px;
   padding: 24px;
+  min-width: 425px;
   max-width: 600px;
   box-shadow: 0px 3px 6px rgb(26 25 25 / 0.16);
+
+  @media screen and (max-width: 1000px) {
+    display: flex;
+    flex-direction: column;
+  }
   .audio-img {
     width: 128px;
     margin-right: 24px;
@@ -190,6 +194,11 @@ export default {
     flex-direction: row;
     align-items: center;
     padding-bottom: 24px;
+
+    @media screen and (max-width: 1000px) {
+      display: flex;
+      flex-direction: column;
+    }
     .audio-media {
       width: 100%;
       h5 {

package/src/components/AppCompButtonProgress.vue

@@ -3,7 +3,10 @@
     <app-base-button
       :id="`btn_branch_${branchData.id}`"
       :target-ref="branchData.id"
+      aria-controls="right-sidebar"
       :title="btnTitle || $t('text.place_holder.for_title_btn_progress')"
+      :aria-label="btnTitle || $t('text.place_holder.for_title_btn_progress')"
+      :aria-expanded="isActive"
       :class="
         branchData.state === status.COMPLETE
           ? 'branch-btn-default branche-complete'
@@ -11,10 +14,18 @@
       "
       @click="openBranch(branchData.id)"
     >
-      <svg v-if="branchData.state === status.COMPLETE">
+      <svg
+        v-if="branchData.state === status.COMPLETE"
+        aria-hidden="true"
+        focusable="false"
+      >
         <use href="#check-icon"></use>
       </svg>
-      <svg v-if="branchData.state != status.COMPLETE">
+      <svg
+        v-if="branchData.state != status.COMPLETE"
+        aria-hidden="true"
+        focusable="false"
+      >
         <use href="#navigate-next-icon"></use>
       </svg>
     </app-base-button>