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

package/src/components/AppBaseModule.vue

@@ -81,7 +81,6 @@
             </svg>
           </app-base-button>
         </div>
-
         <div id="right-sidebar-body">
           <component
             :is="dynamicSidebarContent._component"
@@ -111,7 +110,7 @@ export default {
     BaseModule,
     AppCompContainer
   },
-  inject: ['elapsedIdleTime', 'timerCurrentState', 'lessonDuration'],
+  inject: ['elapsedIdleTime', 'lessonDuration', 'appTimer'],
   props: {
     moduleConfig: {
       type: Object,
@@ -156,7 +155,8 @@ export default {
           text: () => 'this is a test',
           name: 'sidebarEvent'
         }
-      })
+      }),
+      lessonStarted: false
     }
   },
   computed: {
@@ -190,9 +190,15 @@ export default {
     },
     activityHasChanged() {
       const rd = this.routeData.toReversed()
+
+      const routeWasMenu =
+        this.$router.options.history.state.back &&
+        this.$router.options.history.state.back.includes('menu')
+
       if (
         rd.length <= 1 ||
-        rd[1].activity_ref !== this.$route.meta.activity_ref
+        rd[0].activity_ref !== this.$route.meta.activity_ref ||
+        routeWasMenu
       )
         return true
       else return false
@@ -346,7 +352,7 @@ export default {
       immediate: true
     },
     $route: {
-      handler() {
+      handler(newValue) {
         this.getFocusables().then((r) => {
           //Pressing Tab or Shit + tab should make it possible to cycle focus through them
           if (!r) return
@@ -361,16 +367,20 @@ export default {
          *Start Timer on New activities
          */
 
-        const trackedRouteType = ['introduction', 'conclusion', 'normal']
-
+        const trackedRouteType = [
+          'introduction',
+          'conclusion',
+          'normal',
+          'branching'
+        ]
         if (trackedRouteType.includes(this.$route.meta.type)) {
-          if (this.$route.name.includes('.')) return
+          //Navigation should only trigger timer and xapi statement when app is ready and activity has changed
+          if (!this.activityHasChanged || !this.appReady) return
 
-          //Start the timer every time that there is a new activity
+          //Start the timer every time route is a new activity
           this.$bus.$emit('start-timer')
           //Send statement when activity as changed
-          if (this.activityHasChanged)
-            this.sendStartStatement({ id: this.$route.meta.activity_ref })
+          this.sendStartStatement({ id: this.$route.meta.activity_ref })
         }
         this.transcriptVisible = false
       },
@@ -378,6 +388,19 @@ export default {
       immediate: true
     },
 
+    appReady: {
+      async handler(newValue) {
+        //Should only start timer when the app has fully loaded
+
+        if (!this.lessonStarted) this.initLesson()
+
+        if (this.activityHasChanged && newValue) {
+          this.$bus.$emit('start-timer')
+        }
+      },
+      immediate: true
+    },
+
     /**
      * @description Defined in Store Watch all completed activities to send a lesson completion statement
      */
@@ -403,7 +426,8 @@ export default {
      */
     elapsedIdleTime: {
       handler() {
-        if (this.timerCurrentState !== 'started') return
+        if (this.appTimer.getTimerState() !== 'started') return
+
         //send a statement every x time (second)
         if (
           this.elapsedIdleTime % 500 === 0 &&
@@ -451,7 +475,7 @@ export default {
                       : this.$route.name)()
                 }
               ],
-              duration: this.lessonDuration
+              duration: this.appTimer.ISOTimeParser(this.lessonDuration)
             }
 
             this.$bus.$emit('send-xapi-statement', stmt)
@@ -459,6 +483,7 @@ export default {
           }
         }
       },
+      immediate: true,
       deep: true
     }
   },
@@ -541,10 +566,6 @@ export default {
     this.$bus.$on('send-completion-event', this.sendCompletionStatus)
     this.$bus.$on('send-starting-event', this.sendStartStatement)
 
-    this.initLesson().then(() => {
-      this.$bus.$emit('start-idle-detector')
-    })
-
     if (this.navigationHistory.length != 0) {
       this.routeData = this.navigationHistory
     }
@@ -605,8 +626,9 @@ export default {
     async handleKeyboardControls(evt) {
       let { code } = evt
 
-      if (code === 'Escape' && this.rightSidebarVisible)
-        return (this.rightSidebarVisible = false)
+      if (code === 'Escape' && this.rightSidebarVisible){
+        this.closeSidebar(this.dynamicSidebarContent._context)
+      }
     },
 
     /**
@@ -781,8 +803,10 @@ export default {
 
     /**
      * @description Close the branch page in the right sidebar
-     * * @summary When call remove listner for scroll event in the sidebar , reset compID and branch visibility
-     * * @fires 'branching-hidden' to AppCompButtonProgress
+     * and update the current page data with the parent of the branch page
+     *
+     * @summary When call remove listner for scroll event in the sidebar , reset compID and branch visibility
+     * @fires 'branching-hidden' to AppCompButtonProgress
      */
     closeBranchContent() {
       const rightSidebar = this.getRightSidebar()
@@ -796,6 +820,7 @@ export default {
         this.branchingVisible = false
       }, 300)
       this.$bus.$emit('branching-hidden')
+      this.updateContent(this.$route) // update the content of the current page
     },
 
     displayCustomContent(c, container) {
@@ -817,29 +842,19 @@ export default {
      * @description reset the values of state (currentTimeline,currentMedialement, currentPage, media duration, appStatus')in the store
      */
     async unload() {
+      if (!this.getCurrentPage || Object.keys(this.getCurrentPage).length == 0)
+        return
+
       return new Promise((res) => {
         this.$bus.$emit('set-comp-status', 'appBaseModule', 'loading')
         this.updateCurrentTimeline('')
         this.updateCurrentMediaElements([])
-        this.updateCurrentPage({})
+        // this.updateCurrentPage({})
         this.$bus.$emit('set-comp-status', 'appBaseModule', 'ready')
         res(this.getCompStatusTracker)
       })
     },
 
-    /**
-     * @description fetch a page from the store
-     */
-    async fetchPage() {
-      this.$bus.$emit('set-comp-status', 'appBaseModule', 'loading')
-      const fetched = await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve(this.getCurrentPage)
-          this.$bus.$emit('set-comp-status', 'appBaseModule', 'ready')
-        }, 200)
-      })
-      return fetched
-    },
     /**
      * @description get User data
      */
@@ -889,43 +904,44 @@ export default {
         }
       } else return false
     },
+    /**
+     * @description Initialize the lesson
+     * - check the package type and launch the lesson accordingly
+     * - update the content of the current page in the store with data of the page requested
+     */
     async initLesson() {
-      await this.unload().then(() => {
-        const packageType = this.getModuleInfo.packageType
-        switch (packageType) {
-          case 'scorm': {
-            // launching the lesson (if the lesson is not already completed)
-            const lessonStatus = this.$scorm.GetValue(
-              'cmi.core.lesson_status',
-              true
-            )
-            if (lessonStatus === 'unknown') {
-              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
+      if (this.lessonStarted) return
+
+      const packageType = this.getModuleInfo.packageType
+      switch (packageType) {
+        case 'scorm': {
+          // launching the lesson (if the lesson is not already completed)
+          const lessonStatus = this.$scorm.GetValue(
+            'cmi.core.lesson_status',
+            true
+          )
+          if (lessonStatus === 'unknown') {
+            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' })
+          break
+        }
+        case 'xapi':
+          {
             this.$route.name && this.$route.name !== 'module'
               ? this.$router.push({ name: this.$route.name })
               : this.$router.push({ name: 'menu' })
-
-            // set the current page
-            this.fetchPage()
-
-            break
           }
-          case 'xapi':
-            {
-              this.$route.name && this.$route.name !== 'module'
-                ? this.$router.push({ name: this.$route.name })
-                : this.$router.push({ name: 'menu' })
-
-              this.fetchPage()
-              // }
-            }
-            break
-        }
-      })
+          break
+      }
+      this.lessonStarted = true
+      await this.updateContent(this.$route)
     },
+    //=============================================================================
 
     /**
      * @description save interaction or Module state to scrom suspend_data
@@ -945,16 +961,12 @@ export default {
         // 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
@@ -963,55 +975,28 @@ export default {
       }
     },
     /**
-     * @param {Object} to
-     * @param {Object} from unused
-     * @param {Function} next
+     * @description update content when route change or a page change is requested
+     * - update the information of the current page in the store with data of the page requested
+     *
+     * @param {Object} to destination route
      */
-    updateContent(to, from, next) {
+    async updateContent(to, caller = null) {
+      this.$bus.$emit('set-comp-status', 'appBaseModule', 'loading')
       if (this.getModuleInfo.packageType === 'scorm')
         this.saveToScorm('userInteraction') //save to scorm
 
-      this.unload().then((res) => {
-        if (res.length) {
-          //======== Handle redirect to correct path when user enter incorrect  path for existing route ====//
-          let toName = null
-          if (!to.name) {
-            toName = to.fullPath.replace(/\//g, ' ').trim() //clean route name
+      await this.unload()
+      const { activity_ref: activity_Id, id: page_Id } = to.meta ? to.meta : to
 
-            //apply apply correct format for routes that concerne an activity
-            if (toName.includes('activite-')) {
-              toName = toName.split(' ')[0].replace('-', '_')
-            }
-            //Go to menu when introactive is false other wise will navigate to introduction
-            else if (
-              toName.includes('introduction') &&
-              !this.theIntroIsActivated
-            )
-              toName = 'menu'
-          }
-          //When User inter path to module
-          else if (to.name === 'module') {
-            toName = 'menu'
-          }
-          //Default redirection
-          else {
-            false
-            // next()
-          }
-          //===================== Handeling a page request from Store=========================== ====//
-          //get the page from store
-          this.fetchPage().then((res) => {
-            //Save current page has bookmark in scorm
-            if (
-              this.getModuleInfo.packageType === 'scorm' &&
-              this.$scorm.initialized
-            )
-              this.$scorm.setBookMark(this.$route.name)
-          })
-        }
-      })
+      await this.updateCurrentPage({ activity_Id, page_Id }, caller)
+      this.$bus.$emit('set-comp-status', 'appBaseModule', 'ready')
     },
 
+    /**
+     * @description update the route history when navigation happen
+     * @param {Object} from - origin route
+     *
+     */
     updateRouteHistory(from) {
       //The route is not in the history: should be push at the end of the history
       const targetIndex = this.routeData.findIndex((r) => {
@@ -1139,6 +1124,8 @@ export default {
         left: 0,
         behavior: 'auto'
       })
+
+      this.$analytics.sendEvent('skip_to_main_content')
     },
 
     /**
@@ -1421,7 +1408,7 @@ export default {
           // Note: User Settings are sent on a different URI and statement
           const { isFistTime, userSettings, ...lessonsData } =
             this.getUserInteraction
-
+          const activityDuration = this.appTimer.getTime()
           stmt = {
             id: this.getCurrentPage.activityRef,
             verb: 'completed',
@@ -1436,7 +1423,7 @@ export default {
                 }
               }
             ],
-            duration: this.activityDuration,
+            duration: this.appTimer.ISOTimeParser(activityDuration),
             completion: true
           }
 
@@ -1484,12 +1471,12 @@ export default {
                   }
                 }
               ],
-              duration: this.lessonDuration,
+              duration: this.appTimer.ISOTimeParser(this.lessonDuration),
               completion: true
             }
             this.lessonCompletionStatus = true // set the status of this lesson as completed
             let completedState = {
-              duration: this.lessonDuration,
+              duration: this.appTimer.ISOTimeParser(this.lessonDuration),
               completion: this.lessonCompletionStatus
             }
             this.setCompletionState(completedState)

package/src/components/AppBasePage.vue

@@ -130,6 +130,7 @@ export default {
     },
 
     getCurrentPage() {
+      console.log('📘 ', this.store.getCurrentPage)
       return this.store.getCurrentPage
     },
 
@@ -367,18 +368,20 @@ export default {
      */
 
     if (this.pageData && this.errorPage === false) {
-      // Update the store with the current page information
-      this.store.updateCurrentPage({
-        activity_Id: this.pageData.activityRef,
-        page_Id: this.pageData.id
-      })
       // Handeling presence of animation in the page
       if (this.pageData.animation) {
         // update the store with the information of currentTimeline
       }
 
-      if (this.type == 'pg_branch')
+      if (this.type == 'pg_branch') {
+        // Update the store with the current page information when branching page is created
+        // Note: Branching doesn't trigger router navigation so is done directly here
+        this.store.updateCurrentPage({
+          activity_Id: this.pageData.activityRef,
+          page_Id: this.pageData.id
+        })
         this.$bus.$on('branch-page-viewed', this.completePageBranching)
+      }
     }
 
     if (this.isBranchingPage) this.updateCurrentBranching(this.$data)
@@ -391,12 +394,8 @@ 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
 
-    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')
-    }, 100)
-
-    //==============================================================
+    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')
 
     if (this.userInteraction && this.userInteraction.state)
       // set the state of the page to existing record if any
@@ -427,7 +426,6 @@ export default {
     window.addEventListener('scroll', this.onFirstScroll, { once: true }) //listener is removed when event fired
   },
   unmounted() {
-    //this.pageData = null
     this.$bus.$off('branch-page-viewed', this.completePageBranching)
     this.$bus.$off('media-viewed', this.setMediaViewed)
     this.$bus.$off('manage-media-players', this.managePlayingMedia)
@@ -718,6 +716,8 @@ export default {
         if (playbarInstance.isPlaying) {
           HTMLmediaElement.pause() // target the HTMLmediaElement to control it state
           playbarInstance.isPlaying = false //change this isPlaying value of the instance
+
+          playbarInstance.timer.pause() // pause the timer of the instance
         }
       })
     },

package/src/components/AppCompMenu.vue

@@ -333,7 +333,7 @@ export default {
   justify-content: center;
   margin: 25px;
   padding: 20px;
-  background-color: #eaabb685;
+  background-color: #eaabb6b3;
   border-block: dotted yellow 5px;
   p {
     padding: 15px;
@@ -343,6 +343,7 @@ export default {
   button {
     background-color: #8dff95;
     font-size: 1.3em;
+    padding: 5px 12px;
   }
   #resetOverlay {
     position: absolute;