fcad-core-dragon 2.0.0-beta.2 → 2.0.0-beta.3

package/src/mixins/$pageMixins.js

@@ -1,415 +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: {
-    AppCompQuiz: () => import('../components/AppCompQuiz.vue')
-  },
-
-  data: () => {
-    return {
-      userInteraction: {},
-      state: null,
-      anchorEnable: true,
-      anchorInfo: null,
-      drModeActive: null,
-      error: null,
-      notes: null,
-      credits: 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.$store.dispatch('updateCurrentnoteCredit', 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)
-
-    this.$bus.$on('media-viewed', this.setMediaViewed)
-    this.$bus.$on('manage-media-players', this.managePlayingMedia)
-  },
-  beforeDestroy() {
-    this.$bus.$off('branch-page-viewed', this.completePageBranching)
-    this.$bus.$off('media-viewed', this.setMediaViewed)
-    this.$bus.$off('manage-media-players', this.managePlayingMedia)
-    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)
-    },
-
-    /**
-     * @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
-      )
-    },
-
-    /**
-     * @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 {}
-    },
-
-    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 (import.meta.env.DEV)
-                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)
-    },
-    /**
-     * @description Send to the bd that the media have been view by the user- Add the id of the media to the
-     * userInteraction of the page
-     */
-    setMediaViewed(mediaID) {
-      // Should get the userData to check if current mediaElement has entry
-      const { userInteraction } =
-        this.getUserInteraction[this.activityRef][this.id]
-      let { mediasViewed } = userInteraction
-
-      // Should create entry for medias viewed in userInteraction if none
-      if (!mediasViewed) {
-        mediasViewed = []
-
-        this.$set(userInteraction, 'mediasViewed', mediasViewed)
-      }
-      //Should add ID in media viewed list if viewed for the 1st time
-      if (mediasViewed.includes(mediaID)) return
-
-      mediasViewed.push(mediaID)
-      this.$set(userInteraction, 'mediasViewed', mediasViewed) //Update the userInteraction data of the page
-    }, //
-
-    /**
-     * @description - Method to manage the playing state of media element in the page.
-     *                Only one media should play at a time. When receives signal of new media playing
-     *                get the reference of the previous media in play from the store and
-     *                put it in stop state.
-     * @param {HTMLElement} media - the actual media that is playing
-     */
-    managePlayingMedia(media) {
-      if (!media) return
-      //Should get all the media of the page from store
-      const { mElements } = this.getCurrentPage
-      if (!mElements || !mElements.length) return
-
-      // Should stop any media playing
-      mElements.forEach((m) => {
-        if (m.id == media.id) return
-
-        const attrKeys = Object.keys(m) //
-        //Check if the media is playing to stop it. Playing state is given by the instance of the target play-bar
-        if (m[attrKeys[3]].isPlaying) {
-          m[attrKeys[1]].pause() // target the HTMLmediaElement to control it state
-          m[attrKeys[3]].isPlaying = false //change this isPlaying value of the instance
-        }
-      })
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'getUserInteraction',
-      'getCurrentPage',
-      'getModuleInfo',
-      'getAllActivities',
-      'getAllCompleted',
-      'getConnectionInfo',
-      'getAnchorsForActivity',
-      'getBifChoice',
-      'getDataFromServer'
-    ]),
-
-    pageMedias() {
-      const { mElements, timeline } = this.$store.getters.getCurrentPage
-      return { mElements, timeline }
-    },
-    console() {
-      return console
-    },
-    window() {
-      return window
-    },
-    alert() {
-      return alert
-    },
-
-    isBranchingPage() {
-      return this.buttonData || this.cardData ? true : false
-    }
-  }
-}
-export default $extendsPage