fcad-core-dragon 2.1.0-beta.1 → 2.1.0-beta.3

package/src/main.js

@@ -27,6 +27,7 @@ import AppBaseSkeleton from './components/AppBaseSkeleton.vue'
 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 { scormPlugin } from './plugins/scorm'
 import { xapiPlugin } from './plugins/xapi'
@@ -470,5 +471,6 @@ export default {
     //mergeLocales
     mergeLocales(options.i18n.global)
     app.use(helper, '$helper')
+    app.use(analytics, '$analytics')
   }
 }

package/src/module/stores/appStore.js

@@ -10,7 +10,7 @@ export const useAppStore = defineStore('$appStore', {
       status: '',
       anchorStatus: null,
       thisModule: { activities: mappedFiles },
-      appDebugMode: false,
+      appDebugMode: false, //
       currentActivity: null,
       currentPage: null,
       currentBranchPage: null,
@@ -125,7 +125,9 @@ export const useAppStore = defineStore('$appStore', {
      * @description: Getter to return the app status
      */
     getAppStatus: (state) => {
-      return state.compStatusTracker.length ? 'loading' : 'ready'
+      return !state.userDataLoaded || state.compStatusTracker.length
+        ? 'loading'
+        : 'ready'
     },
 
     /**
@@ -286,15 +288,11 @@ export const useAppStore = defineStore('$appStore', {
      * @returns: page {Object}
      */
     getCurrentPage: (state) => {
-      let page = null
       if (state.currentPage !== null) {
-        page = {
-          ...state.currentPage
-        }
-        page.mElements = state.currentPageMediaElements
-        page.timeline = state.currentPageTimeline
+        state.currentPage['mElements'] = state.currentPageMediaElements
+        state.currentPage['timeline'] = state.currentPageTimeline
       }
-      return page
+      return state.currentPage
     },
     /**
      * @description: Getter to return the current branching page
@@ -722,7 +720,7 @@ export const useAppStore = defineStore('$appStore', {
       this.currentBranchPage = data
     },
     /* set/update  page information*/
-    updateCurrentPage({ activity_Id, page_Id }) {
+    updateCurrentPage({ activity_Id, page_Id }, caller = null) {
       if (activity_Id && page_Id) {
         let page
         //id type case PXX_EXX_PXX
@@ -748,6 +746,7 @@ export const useAppStore = defineStore('$appStore', {
         }
         this.currentPage = page
       } else this.currentPage = {}
+      if (caller) console.log('🤙 updateCurrentPage called by', caller)
     },
     /**
       @description update the module data.
@@ -826,11 +825,7 @@ export const useAppStore = defineStore('$appStore', {
              * and create entry for user interaction
              * */
             _keys.forEach((key) => {
-              // if (key !== _keys[0] && key !== _keys[1]) {
-              //   Vue.set(activity, [page], {
-              //     [key]: data[key]
-              //   })
-              // }
+
               if (key !== _keys[0] && key !== _keys[1]) {
                 activity[page] = {
                   [key]: data[key]
@@ -890,18 +885,6 @@ export const useAppStore = defineStore('$appStore', {
       }
     },
 
-    // SET_SHOW_PRIMARY_CONTROL(state, bool) {
-    //   state.showPrimaryCtrl = bool
-    // },
-
-    // SET_SHOW_NAV_LEFT_CONTROL(state, bool) {
-    //   state.showNavLeftCtrl = bool
-    // },
-
-    // SET_SHOW_NAV_RIGHT_CONTROL(state, bool) {
-    //   state.showNavRightCtrl = bool
-    // },
-
     setLrsConfig(data) {
       if (data) this.lrsConfig = data
     },
@@ -922,13 +905,6 @@ export const useAppStore = defineStore('$appStore', {
       this.sideBIsOpen = data
     },
 
-    // async updateDataFetchFromServer(data) {
-    //   if (!data || data.constructor !== Object) return
-    //   Object.keys(data).forEach((k) => {
-    //     this.dataFromServer = { ...this.dataFromServer, [k]: data[k] }
-    //   })
-    // },
-
     updatePreviousActivity(data) {
       this.prevActivity = data
     },

package/src/module/xapi/ADL.js

@@ -74,6 +74,7 @@ export default class ADL {
     statements.forEach((statement) => {
       const withResult =
         statement.verb.id.includes('answered') ||
+        statement.verb.id.includes('played') ||
         statement.verb.id.includes('suspended') ||
         statement.verb.id.includes('completed')
 

package/src/plugins/analytics.js

@@ -0,0 +1,34 @@
+import { event } from 'vue-gtag'
+import VueGtag from 'vue-gtag'
+
+export default function analytics(app, name) {
+  Object.defineProperty(app.config.globalProperties, name, {
+    value: {
+      analyticsEnabled: false,
+      //Initialize the vue-gtag plugin if a valid analytics id is provided in App.vue
+      init(analytics_id, router) {
+        if (typeof analytics_id !== 'undefined' && analytics_id.length > 1) {
+          const pluginConfig = {
+            config: { id: analytics_id }
+          }
+          app.use(VueGtag, pluginConfig, router)
+          this.analyticsEnabled = true
+        } else {
+          console.log(
+            'no valid analytics_id provided in App.vue : analytics disabled'
+          )
+        }
+      },
+      //track an event
+      sendEvent(name, params) {
+        if (this.analyticsEnabled) {
+          console.log(`GA|track event named: ${name}`)
+          if (params) {
+            console.log(`GA|with params:`, params)
+          }
+          event(name, params)
+        }
+      }
+    }
+  })
+}

package/src/plugins/i18n.js

@@ -5,40 +5,22 @@ import _ from 'lodash'
  * @param {Object} i18n - vue-i18n internalization object.
  */
 export default function mergeLocales(i18n) {
-  //const deep = import('lodash') // provide deep merge of Object cf: https://attacomsian.com/blog/javascript-merge-objects
-
-  /* I18n internal methods for mutating messages property
-   * mergeLocaleMessage: ƒ mergeLocaleMessage(locale, message)// will merge message with new message object. But does not do a deep merge of object
-   * setLocaleMessage: ƒ setLocaleMessage(locale, message)// set the message with new message object
-   */
-
-  // This library locales files
-  // const thisLocales = require.context(
-  //   '../$locales',
-  //   true,
-  //   /[A-Za-z0-9-_,\s]+\.json$/i
-  // )
-
-  const thisLocales = import.meta.glob('../$locales/*.json', { eager: true })
+  const thisLocales = import.meta.glob('../$locales/*.json', {
+    import: 'default',
+    eager: true
+  })
   for (const path in thisLocales) {
     const matched = path.match(/([A-Za-z0-9-_]+)\./i)
     if (matched && matched.length > 1) {
       const locale = matched[1]
+
       // Using lodash to deeply merge objects
-      const messagesDeepCopy = JSON.parse(JSON.stringify(i18n.messages[locale]))
-      const mergedMessages = _.merge(messagesDeepCopy, thisLocales[path])
+      const coreMessages = JSON.parse(JSON.stringify(thisLocales[path]))
+      const templateMessages = JSON.parse(JSON.stringify(i18n.messages[locale]))
+      const mergedMessages = _.merge(coreMessages, templateMessages)
+
       // Since merLocalMessage will do a shallow merge of the object. We will use setLocalMessage to replace the message with new message object
       i18n.setLocaleMessage(locale, mergedMessages)
     }
   }
-  // thisLocales.keys().forEach((key) => {
-  //   const matched = key.match(/([A-Za-z0-9-_]+)\./i)
-  //   if (matched && matched.length > 1) {
-  //     const locale = matched[1]
-  //     // Using lodash to deeply merge objects
-  //     const mergedMessages = deep.merge(i18n.messages[locale], thisLocales(key))
-  //     // Since merLocalMessage will do a shallow merge of the object. We will use setLocalMessage to replace the message with new message object
-  //     i18n.setLocaleMessage(locale, mergedMessages)
-  //   }
-  // })
 }

package/src/router/index.js

@@ -26,20 +26,23 @@ router.beforeResolve((to, from, next) => {
   const { getWidgetOpen, getPopupIsOpen, getSidebarIsOpen } = appStore
   const noNavigationToMenu = appStore.getSettingsFromStore('no_menu')
 
+  if (to.name == 'module') return next({ name: 'menu' }) //redirect to 404 if trying to access module directly
+
   if (getWidgetOpen) app.config.globalProperties.$bus.$emit('close-widget') //close opened widget
   if (getPopupIsOpen) app.config.globalProperties.$bus.$emit('close-popup') //close the popup
   if (getSidebarIsOpen) app.config.globalProperties.$bus.$emit('close-sidebar') //close the sidebar
 
   if (from.name !== 'module')
     app.config.globalProperties.$bus.$emit('update-route-history', from)
-  app.config.globalProperties.$bus.$emit('update-content', to, from, next)
+
+  app.config.globalProperties.$bus.$emit('update-content', to) //update the content of the current page
   //hidle detector should be stopped in menu
   if (to.name == 'menu') {
-    app.config.globalProperties.$bus.$emit('timer-stop')
+    app.config.globalProperties.$bus.$emit('stop-app-timer')
     app.config.globalProperties.$bus.$emit('stop-idle-detector')
   }
 
-  if (noNavigationToMenu && to.name == 'menu') {
+  if ((noNavigationToMenu && to.name == 'menu') || to.name == 'module') {
     const r = app.config.globalProperties.$helper.getRoutesFromVueRouter() //This return all the routes defined for the module
     let safeRoute = r.meta.children[0] //get the first navigable route from the module routes
 

package/src/components/AppCompPlayBarProgress.vue

@@ -1,82 +0,0 @@
-<!--@ Description: This component is used to display the playbar associate with the videoPlayer
- @ What it does: The component is used to interacted with the videoPlayer via buttons.
- v-media class is used to identified which html elements trigger the playBar to be appear (with focus/click)-->
-<template>
-  <!--------------------------------- PLAY-BAR Progress  -------------------------------------->
-  <div ref="$playbar-timeline" class="pb-timeline">
-    <div ref="$progress-area" class="progress-area">
-      <div
-        id="progress-bar"
-        ref="$progress-bar"
-        draggable="false"
-        tabindex="0"
-        class="v-media pb-progress-bar"
-        role="slider"
-        aria-valuemin="0"
-        :aria-label="mediaA11Y.label"
-        :aria-valuenow="mediaA11Y.valNow"
-        :aria-valuemax="mediaA11Y.valMax"
-        :aria-valuetext="mediaA11Y.valueText"
-        @focus="changeFocusState('progressBar', true)"
-        @blur="changeFocusState('progressBar', false)"
-      >
-        <!--Class progress-animation is apply when we are not using the thumb to change the progression-->
-        <div
-          id="progress-indicator"
-          ref="$progress-indicator"
-          draggable="false"
-          class="progress-indicator"
-          :class="{ 'progress-animation': !progressThumbDown }"
-          :style="{ width: progressBarPercentage + '%' }"
-        >
-          <!--Mousedown validate if the thumb is cliqued (if yes, the mouse is follow to modify the progress)
-             MouseOver/MouseOut deactivate click event on progressBar if the mouse hovered the thumb-->
-          <!-- <div
-            ref="$progress-thumb"
-            draggable="false"
-            class="progress-thumb"
-            style="z-index: 9"
-            @mousedown="
-              savedIsPlaying = isPlaying
-              progressThumbDown = true
-            "
-            @mouseover="progressThumbHover = true"
-            @mouseleave="progressThumbHover = false"
-          ></div> -->
-
-          <div
-            ref="$progress-thumb"
-            draggable="false"
-            class="progress-thumb"
-            style="z-index: 9"
-            @mouseover="progressThumbHover = true"
-            @mouseleave="progressThumbHover = false"
-          ></div>
-        </div>
-      </div>
-      <div
-        v-if="tooTipTimeCode"
-        id="seek-tooltip"
-        ref="$seek-tooltip"
-        aria-hidden="true"
-        class="seek-tooltip"
-      >
-        {{ tooTipTimeCode }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import $extendsMedia from '../mixins/$mediaMixins'
-
-export default {
-  mixins: [$extendsMedia],
-  data() {
-    return {
-      tooTipTimeCode: null
-    }
-  },
-  mounted() {}
-}
-</script>