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

package/src/components/AppCompToolTip.vue

@@ -1,94 +0,0 @@
-<template>
-  <b-popover
-    ref="tooltip_1"
-    :show.sync="isShown"
-    :target="target"
-    :title="option.title"
-    triggers="manual"
-    placement="auto"
-    @hidden="onHidden()"
-  >
-    <div class="box-content-tooltip" v-html="option.content" />
-    <div>
-      <app-base-button
-        id="btn-cancel-tooltip"
-        :name-acces="'Annuler'"
-        class="btn-cancel"
-        :title="$t('button.cancel_pop')"
-        @click="$cancel(option.cb_$cancel)"
-      >
-        {{ $t('button.cancel_pop') }}
-      </app-base-button>
-      <app-base-button
-        id="btn-confirm-tooltip"
-        :name-acces="'Confirmer'"
-        class="btn-confirm"
-        :title="$t('button.confirm_pop')"
-        @click="$confirm(option.cb_$confirm)"
-      >
-        {{ $t('button.confirm_pop') }}
-      </app-base-button>
-    </div>
-  </b-popover>
-</template>
-
-<script>
-//https://bootstrap-vue.org/docs/components/popover
-export default {
-  name: 'AppCompToolTip',
-  props: {
-    target: { type: String, default: '' }
-  },
-  data() {
-    return {
-      option: {},
-      confirmFunction: false,
-      isShown: false
-    }
-  },
-  computed: {},
-  mounted() {
-    this.$bus.$on('tooltip-close', () => {
-      this.isShown = false
-    })
-
-    this.$bus.$on('tooltip-open', (e) => {
-      if (e) {
-        this.option = e
-        this.isShown = true
-      }
-    })
-  },
-  methods: {
-    /**
-     * @description - method for action confirm
-     * @param {Function} cb
-     */
-    $confirm(cb) {
-      this.confirmFunction = cb
-      this.isShown = false
-    },
-
-    /**
-     * @description - method for action cancel
-     * @param {Function} cb
-     */
-    $cancel(cb) {
-      this.confirmFunction = false
-      cb = cb || null
-      this.isShown = false
-      if (cb && typeof cb === 'function') cb()
-    },
-
-    /**
-     * @description action to do when tooltip is hidden
-     */
-    onHidden() {
-      //check if closed with confirm
-      let cb = this.confirmFunction
-      //calls close
-      if (cb && typeof cb === 'function') cb()
-    }
-  }
-}
-</script>

package/src/mixins/$pageMixins.js

@@ -1,381 +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,
-      error: null,
-      scrollLimit: 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.completePage()
-      }
-
-
-    window.addEventListener('scroll', this.onFirstScroll, { once: true }) //listener is removed when event fired
-  },
-
-  created() {
-  },
-
-  beforeDestroy() {
-    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 = Math.max(
-        document.body.scrollHeight,
-        document.documentElement.scrollHeight,
-        document.body.offsetHeight,
-        document.documentElement.offsetHeight,
-        document.body.clientHeight,
-        document.documentElement.clientHeight
-      )
-
-      //Set scroll limit reached at 200px above the document height.
-      let scrollLimit = scrollHeight - 200
-      let fullyScrolled = Math.round(
-        document.documentElement.clientHeight + window.pageYOffset
-      )
-
-      //consider page completed when scolled value has reached or passed set limit
-      if (fullyScrolled >= scrollLimit) {
-        this.completePage()
-      }
-    },
-    /**
-     * @description set the state of the page to complete
-     * @fires send-xapi-statement to AppBaseModule.vue
-     */
-    completePage() {
-      //Set completion state of the page when not the menu page
-      if (this.type !== 'pg_menu')
-        this.$set(this.userInteraction, 'state', 'completed')
-
-      window.removeEventListener('scroll', this.handleScroll)
-
-      /*
-       * 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
-          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
-     * @return {oject} - the existing user data for the current page
-     */
-    getProgress() {
-      const { id, activity_ref } = this.$route.meta
-
-      const record = this.$store.getters.getUserInteraction
-      if (
-        Object.entries(record).length &&
-        record[activity_ref] &&
-        record[activity_ref][id]
-      ) {
-        const { userInteraction } = record[activity_ref][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)
-              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
-    }
-  }
-}
-export default $extendsPage