fcad-core-dragon 2.0.0-beta.1 → 2.0.0-beta.10

package/src/mixins/$pageMixins.js

@@ -1,459 +0,0 @@
-import { mapGetters } from 'vuex'
-/*
-@ Description: Mixins to extends general fonctionnalities in a page of an activity.
-@ Note: Must be used  along component AppBasePage When creating  page of an activity.
-*        some data and information will not be correctly tracked if this mixins not used
-*        when creating a page.
-*/
-const $extendsPage = {
-  // lazy laoding of components
-  components: {
-    AppCompMediaPlayer: () =>
-      import(
-        /* webpackChunkName: "MediaPlayerCompnent" */
-        '../components/AppCompMediaPlayer.vue'
-      ),
-    AppCompMenuItem: () =>
-      import(
-        /* webpackChunkName: "MenuItemCompenent" */
-        '../components/AppCompMenuItem.vue'
-      ),
-    AppCompQuiz: () =>
-      import(
-        /* webpackChunkName: "QuizComponent" */
-        '../components/AppCompQuiz.vue'
-      )
-  },
-
-  data: () => {
-    return {
-      userInteraction: {},
-      state: null,
-      anchorEnable: true,
-      anchorInfo: null,
-      drModeActive: null,
-      error: null,
-      credits: null,
-      notes: null
-    }
-  },
-  watch: {
-    userInteraction: {
-      handler(newValue) {
-        /**
-         * Objserve changes in the number of poperties to dispatch updates in the userdata in the Store
-         */
-        if (newValue && Object.entries(this.userInteraction).length) {
-          const { activityRef, id, userInteraction } = this.$data
-          this.$store.dispatch('updateUserMetaData', {
-            activityRef,
-            id,
-            userInteraction
-          })
-        }
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  mounted() {
-    this.userInteraction = this.getProgress() // Get the progress for the page
-
-    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' &&
-      this.userInteraction.state !== 'completed'
-    ) {
-      this.state = 'completed' // set menu page state to completed
-    } else this.state = 'started' // set the default state to started
-
-    this.$set(this.userInteraction, 'state', this.state) // add the state to the userInteraction
-
-    if (
-      document.documentElement.scrollHeight <=
-        document.documentElement.clientHeight + 20 &&
-      this.type !== 'pg_branch'
-    ) {
-      this.completePage()
-    }
-
-    if (this.type === 'pg_branch') {
-      this.$store.commit('UPDATE_CURRENT_BRANCH_PAGE', this.$data)
-    }
-
-    // get the data  for note and credit
-    let data = {
-      note: this.notes,
-      credit: this.credits
-    }
-
-    // give notes and credit information must be in tick because of life cycle
-    this.$nextTick(function() {
-      this.$bus.$emit('credit-note', data)
-    })
-    if (this.type == 'pg_branch') return //do not proceed to add listner when branch page
-
-    window.addEventListener('scroll', this.onFirstScroll, { once: true }) //listener is removed when event fired
-  },
-
-  created() {
-    if (this.type == 'pg_branch')
-      this.$bus.$on('branch-page-viewed', this.completePageBranching)
-    if (this.isBranchingPage)
-      this.$store.commit('UPDATE_CURRENT_BRANCHING', this.$data)
-  },
-
-  beforeDestroy() {
-    this.$bus.$off('branch-page-viewed', this.completePageBranching)
-    window.removeEventListener('scroll', this.onFirstScroll, { once: true }) //in case user did not scroll
-    window.removeEventListener('scroll', this.handleScroll)
-  },
-
-  methods: {
-    onFirstScroll() {
-      window.addEventListener('scroll', this.handleScroll)
-    },
-    /**
-     * @description to handle the complete state for the gauge
-     */
-
-    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.
-       * ref:https://javascript.info/size-and-scroll-window
-       */
-
-      let scrollHeight = null
-      let clientHeight = null
-      let scrollTop = null
-      scrollHeight = Math.max(
-        document.body.scrollHeight,
-        document.documentElement.scrollHeight,
-        document.body.offsetHeight,
-        document.documentElement.offsetHeight,
-        document.body.clientHeight,
-        document.documentElement.clientHeight
-      )
-      clientHeight = document.documentElement.clientHeight
-      scrollTop = window.scrollY
-
-      // //Set scroll limit reached at 150px above the document height.
-      let scrollLimit = scrollHeight - 150
-      let fullyScrolled = Math.round(clientHeight + scrollTop)
-
-      //consider page completed when scolled value has reached or passed set limit
-      if (fullyScrolled >= scrollLimit && this.state !== 'completed') {
-        this.completePage()
-      }
-    },
-    /**
-     * @description set the state of the page to complete
-     * @fires send-xapi-statement to AppBaseModule.vue
-     */
-    completePage() {
-      if (
-        this.type == 'pg_menu' ||
-        this.state == 'completed' ||
-        this.isBranchingPage ||
-        this.type == 'pg_branch'
-      )
-        return
-      this.state = 'completed'
-
-      this.$set(this.userInteraction, 'state', this.state)
-      this.sendCompletionToServer()
-    },
-
-    /**
-     * @description set the state of the branching page to complete
-     * @fires send-xapi-statement to AppBaseModule.vue
-     */
-    completePageBranching() {
-      //Get the current branching from the  store
-      const currentBranching = this.$store.getters.getCurrentBranching
-      if (currentBranching.id !== this.$route.meta.id) return
-      if (currentBranching.state === 'completed') return
-
-      const children = this.$route.meta.children
-      let count = 0
-      children.forEach((c) => {
-        let progress = this.getProgress(c._ref)
-
-        if (progress.state == 'completed') count += 1
-      })
-
-      if (count !== children.length) return
-      currentBranching.state = 'completed' //set the state of the page to completed
-      //update the userinteraction state
-      this.$set(
-        currentBranching.userInteraction,
-        'state',
-        currentBranching.state
-      )
-
-      this.sendCompletionToServer()
-    },
-
-    /**
-     * @description - Send xapi statement to indicate the completion of an activity
-     */
-    sendCompletionToServer() {
-      /*
-       * Send xapi statement to indicate the completion of an activity
-       * Send completion of activity when all pages in Activity are completed and the page is last page of activity
-       * Send completion statement for lesson if this is the last page of the last activity in lesson
-       */
-
-      if (this.getModuleInfo.packageType !== 'xapi') return
-      if (!this.getConnectionInfo) return
-      if (!this.getConnectionInfo.remote || !this.getConnectionInfo.actor)
-        return
-
-      //Get the current acitivty reference from store
-      const currentActivity = this.getAllActivities.list.get(
-        this.getCurrentPage.activityRef
-      )
-
-      const activity_id = `${this.getConnectionInfo.activity_id}/${this.getCurrentPage.activityRef}`
-
-      const record = this.$xapi._getProgress(
-        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        activity_id,
-        'completed'
-      )
-
-      //Send a completion statement for the current activity
-      //When all pages of the activity are completed and the activity recorded is as completed
-      if (
-        this.getAllCompleted[this.getCurrentPage.activityRef] &&
-        this.getAllCompleted[this.getCurrentPage.activityRef].length ===
-          currentActivity.size &&
-        !record[this.getCurrentPage.activityRef]
-      ) {
-        let aTitle
-
-        //Custom name of the activity
-        if (this.getCurrentPage.activityRef === 'A00')
-          aTitle = this.$t('text.introduction')
-        else if (this.getCurrentPage.activityRef === 'A99')
-          aTitle = this.$t('text.conclusion')
-        aTitle = `${this.$t('text.activity')} ${
-          this.getCurrentPage.activityRef
-        }`
-
-        //Custom text for description and definition
-        let text
-        this.$i18n.locale == 'fr'
-          ? (text = `L'${aTitle} de ${this.getModuleInfo.id}`)
-          : (text = `The ${aTitle} of ${this.getModuleInfo.id}`)
-
-        // Retrive only user data in lessons front its interaction that we want to send to the LRS
-        const { isFistTime, userSettings, ...data } = this.getUserInteraction
-
-        //Dispatch a send statement event
-        this.$bus.$emit('send-xapi-statement', {
-          verb: (() => {
-            //set the verbe to complete if all the state of the pages of the activity are
-            if (
-              this.getAllCompleted[this.getCurrentPage.activityRef] &&
-              this.getAllCompleted[this.getCurrentPage.activityRef].length ===
-                currentActivity.size
-            )
-              return 'completed'
-            else return 'suspended'
-          })(),
-          id: this.getCurrentPage.activityRef,
-          definition: text,
-          description: text,
-          extension: [
-            {
-              id: 'user-data',
-              content: data
-            }
-          ]
-        })
-      }
-    },
-    /**
-     * @description Get the user progress for the current page
-     * @param {string} id (Otpional) - the id of the targeted page
-     * @return {Oject} - the existing user data for the current page
-     */
-    getProgress(id) {
-      id = id || this.id
-
-      const record = this.$store.getters.getUserInteraction
-      if (
-        Object.entries(record).length &&
-        record[this.activityRef] &&
-        record[this.activityRef][id]
-      ) {
-        const { userInteraction } = record[this.activityRef][id]
-        return userInteraction
-      }
-      return {}
-    },
-
-    //**** SEE TO DELETE */
-    anchorProgress() {
-      const anchors = document.querySelectorAll('.anchor') // look for anchor
-      const options = {
-        root: null,
-        threshold: 0
-      }
-
-      let anchorsComplete
-      let indexStrt
-      let anchorString
-      let indexEnd
-      let anchorComplete
-
-      let target = document.querySelector('#App-base')
-      // get anchor already seen
-      anchorsComplete = this.getAnchorComplete()
-
-      const observer = new IntersectionObserver((entries) => {
-        // everytime the page passes a anchor
-        observer.observe(target)
-
-        entries.forEach((entry) => {
-          // when it's visable in the page
-
-          if (entry.isIntersecting) {
-            // get the target
-
-            this.anchorInfo = entry.target.classList
-            indexStrt = this.anchorInfo.value.indexOf('anchor-')
-            // work the string to get juste the anchor tag
-            // must be the same as the class
-            if (indexStrt == -1) {
-              return
-            }
-
-            anchorString = this.anchorInfo.value.substring(indexStrt)
-
-            indexEnd = anchorString.indexOf(' ')
-            if (indexEnd != -1) {
-              anchorComplete = anchorString.slice(0, indexEnd)
-            } else {
-              anchorComplete = anchorString
-            }
-
-            //get all the anchors of the current activity
-            const anchors_list = this.getAnchorsForActivity(this.activityRef)
-
-            //search for the current ancor
-            const anc = anchors_list.find((a) => a.anchorTag === anchorComplete)
-            //dispatch the  current anchor to the store
-            if (anc) {
-              // update the store value for current section
-              this.$store.dispatch('updateCurrentSection', anc)
-              // Ask bread scrumb to update its information
-
-              this.$bus.$emit('anchor-seen', anchorComplete)
-            } else {
-              if (process.env.NODE_ENV === 'development')
-                console.warn(
-                  `%c WARNING!>>> Anchor handeling: 👉${anchorComplete}👈 doesn't exist. Please provide a valid anchor.`,
-                  'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-                )
-
-              return
-            }
-
-            // if you didn't aldreay seen anchors
-            if (anchorsComplete != undefined) {
-              // look if you already saw this anchor
-              if (anc && !anchorsComplete.includes(anchorComplete)) {
-                // push it in the array them in the store
-                anchorsComplete.push(anchorComplete)
-                this.$set(this.userInteraction, 'anchors', anchorsComplete)
-              }
-            } else {
-              // if you never saw any anchor
-              // push it in the array them in the store
-              anchorsComplete = []
-              if (anc) anchorsComplete.push(anchorComplete)
-              this.$set(this.userInteraction, 'anchors', anchorsComplete)
-            }
-          }
-        })
-      }, options)
-
-      // observer call llok for each anchor in page
-      anchors.forEach((anchor) => {
-        observer.observe(anchor)
-      })
-    },
-    getAnchorComplete() {
-      const userInteraction = this.getUserInteraction
-      let completeAnchor
-
-      // Verify if the element existe
-      if (
-        userInteraction[this.activityRef] &&
-        userInteraction[this.activityRef][this.id] &&
-        userInteraction[this.activityRef][this.id].userInteraction.anchors
-      ) {
-        // if you already saw anchors return them
-        completeAnchor =
-          userInteraction[this.activityRef][this.id].userInteraction.anchors
-        return completeAnchor
-      }
-    },
-    showChoiceBif(data) {
-      // check if you made a choice
-      if (
-        typeof this.getBifChoice === 'undefined' ||
-        Object.keys(this.getBifChoice).length === 0
-      ) {
-        return data['A']
-      } else {
-        if (this.getBifChoice.choix) {
-          // get the choise from store
-          if (data.hasOwnProperty(this.getBifChoice.choix)) {
-            let choice = data[this.getBifChoice.choix]
-            //return choice
-            return choice
-          }
-        }
-      }
-    },
-    openPopup(data) {
-      this.$bus.$emit('open-popup', data)
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'getUserInteraction',
-      'getCurrentPage',
-      'getModuleInfo',
-      'getAllActivities',
-      'getAllCompleted',
-      'getConnectionInfo',
-      'getAnchorsForActivity',
-      'getBifChoice'
-    ]),
-
-    pageMedia() {
-      return this.$store.getters.getCurrentPage
-    },
-    console() {
-      return console
-    },
-    window() {
-      return window
-    },
-    alert() {
-      return alert
-    },
-
-    isBranchingPage() {
-      return this.buttonData || this.cardData ? true : false
-    }
-  }
-}
-export default $extendsPage