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

package/src/components/AppCompTableOfContent.vue

@@ -11,10 +11,13 @@
   <div v-if="error" id="sidebar-submenu" :class="{ isOpen: open }">
     <app-base-button
       id="close-toc"
+      class="btn-ghost"
       :title="$t('button.closePopUp')"
       @click="close()"
     >
-      X
+      <svg>
+        <use href="#close-square-icon" />
+      </svg>
     </app-base-button>
 
     <p class="t-act" v-html="title"></p>
@@ -29,7 +32,7 @@
     <div class="box-anchor">
       <p class="t-toc">{{ $t('text.toc') }}</p>
 
-      <b-link
+      <a
         v-for="(anchor, index) of anchors"
         :key="anchor.title"
         class="toc-item"
@@ -37,10 +40,20 @@
         @click="closeAndNextPage(anchor.path)"
       >
         <div class="box-text-anchor">
-          <p class="anchor-t" v-html="anchor.title"></p>
-          <p class="state">{{ $t('text.complete') }}</p>
+          <div class="text-anchor">
+            <p class="anchor-t" v-html="anchor.title"></p>
+            <p class="state">
+              <svg>
+                <use href="#check-toc" />
+              </svg>
+              {{ $t('text.complete') }}
+            </p>
+          </div>
+          <svg>
+            <use href="#chevronD-icon" />
+          </svg>
         </div>
-      </b-link>
+      </a>
     </div>
   </div>
   <div v-else id="sidebar-submenu" :class="{ isOpen: open }">
@@ -52,8 +65,8 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
 export default {
   data() {
     return {
@@ -67,7 +80,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
+    ...mapState(useAppStore, [
       'getMenuSettings',
       'getAnchorsForActivity',
       'getBifChoice',
@@ -86,6 +99,7 @@ export default {
     this.$bus.$on('info-activity', this.onInfoActivity)
   },
   methods: {
+    ...mapActions(useAppStore, ['updateWidgetOpen']),
     onInfoActivity(data) {
       //should be condition to avoid event fireing multiple time on call
 
@@ -103,15 +117,15 @@ export default {
     },
     onCloseWidget(data) {
       this.open = false
-      this.$store.dispatch('updateWidgetOpen', false)
+      this.updateWidgetOpen(false)
       this.reset()
     },
     onToggleWidget(data) {
       if (data == 'toc') {
         this.open = !this.open
-        this.$store.dispatch('updateWidgetOpen', true)
+        this.updateWidgetOpen(true)
       } else {
-        this.$store.dispatch('updateWidgetOpen', false)
+        this.updateWidgetOpen(false)
         this.open = false
       }
     },
@@ -133,17 +147,11 @@ export default {
         nb = activity.substr(2)
       else nb = activity.substr(1)
 
-      this.title = `${this.$t('text.activity')} ${nb} : ${
-        menuInfo[activity].subTitle
-      }`
-
-      let count = 0
+      this.title = `${this.$t('text.activity')} ${nb} : ${menuInfo[activity].subTitle}`
 
       //create anchors title and path
       if (menuInfo[activity] && menuInfo[activity].anchors) {
         menuInfo[activity].anchors.forEach((element) => {
-          count++
-
           //
           let _path = null
           let b = null
@@ -219,12 +227,12 @@ export default {
     },
     close() {
       this.open = !this.open
-      this.$store.dispatch('updateWidgetOpen', this.open)
+      this.updateWidgetOpen(this.open)
     },
     closeAndNextPage(NextPage) {
-      this.$router.push({ name: NextPage })
       this.open = !this.open
-      this.$store.dispatch('updateWidgetOpen', this.open)
+      this.updateWidgetOpen(this.open)
+      this.$router.push({ name: NextPage })
     },
     reset() {
       this.anchors = []
@@ -292,33 +300,61 @@ export default {
   position: absolute;
   left: 75px;
   top: 0;
+  max-height: 592px;
+  width: 476px;
   transition: left 0.5s ease-in-out;
 
-  &::before {
-    content: '';
+  &.isOpen {
     display: block;
-    width: 0;
-    height: 0;
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid transparent;
-    border-right: 10px solid;
+  }
 
+  #close-toc {
     position: absolute;
-    left: -10px;
-    top: 10px;
+    right: 24px;
+    margin-bottom: 0;
+    padding: 11px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+
+    &:focus {
+      box-shadow: inherit !important;
+    }
   }
 
-  &.isOpen {
-    display: block;
-  }
+  .box-prog-act {
+    width: 319px;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 16px;
+
+    p {
+      position: relative;
+      width: 100%;
 
-  .b-sidebar-header {
-    display: none;
-    pointer-events: none;
+      span {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
   }
 
   .box-anchor {
+    max-height: 366px;
+    overflow-y: auto;
+    padding: 0 4px;
+
+    .t-toc {
+      margin-bottom: 16px;
+    }
+
     .toc-item {
+      display: block;
+      width: 95%;
+      margin-bottom: 8px;
+
       .state {
         display: none;
       }
@@ -327,52 +363,18 @@ export default {
           display: block;
         }
       }
-    }
-
-    .box-time {
-      width: 100%;
-      padding: 10px 20px;
-    }
-
-    .box-contenu {
-      padding: 20px;
-      @media screen and (max-width: 1100px) {
-        padding: 0;
-      }
-
-      .box-ttl {
-        @media screen and (max-width: 1100px) {
-          padding: 15px 0px 10px 20px;
-        }
-      }
-
-      .container-anchor {
-        margin-top: 35px;
-        margin-left: 35px;
-        padding-left: 24px;
-        padding-top: 14px;
-        max-height: 75vh;
-        overflow-y: auto;
-
-        @media screen and (max-width: 1100px) {
-          padding: 0;
-          margin: 0;
-        }
-
-        .box-sa {
-          margin-bottom: 16px;
 
-          @media screen and (max-width: 1100px) {
-            padding: 19px 20px 19px 47px;
-            margin-bottom: 0;
-          }
-        }
+      .box-text-anchor {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
       }
     }
   }
 }
 
-.navbar {
+.app-nav {
   &.show,
   &:hover {
     .ctn-w {

package/src/components/AppCompTranscript.vue

@@ -13,7 +13,12 @@ export default {
 </script>
 
 <style lang="scss">
+.b-sidebar-body {
+  width: 100%;
+}
+
 #transcript-container {
+  width: 100%;
   padding: 30px;
 }
 </style>

package/src/components/AppCompVideoPlayer.vue

@@ -13,30 +13,13 @@
     :class="[{ FS: fullScreen }, CCBrowser]"
     aria-label="Video"
   >
-    <b-row v-if="hasErr.length" class="warning-error">
-      <b-col class="box-error">
-        <div class="yellow-box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Erreur: COMPOSANT VIDEO
-          </h2>
-        </div>
-        <div class="box">
-          <p>
-            Vous avez une/des erreur(s) pour la création de votre composant.
-            Veuillez corriger les erreurs ci-dessous:
-            <br />
-          </p>
-          <ul>
-            <li
-              v-for="(err, index) in hasErr"
-              :key="`error_type_${index}`"
-              v-html="err"
-            />
-          </ul>
-        </div>
-      </b-col>
-    </b-row>
+    <app-base-error-display
+      v-if="hasErr.length"
+      :error-group="'component'"
+      :error-title="'ERREUR: COMPOSANT DE VIDEO'"
+      :errors-list="hasErr"
+    />
+
     <!------------------video section --------------------------->
 
     <template v-else>
@@ -75,7 +58,7 @@
           />
         </video>
       </div>
-      <app-comp-play-bar
+      <app-comp-play-bar-next
         v-if="$vidElement && !isLoading && !hasSourceLoadingError"
         :ref="`plyr_${id}`"
         :media-to-play="$vidElement"
@@ -86,10 +69,13 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
 import { validateVideoData } from '../shared/validators'
+import AppCompPlayBarNext from './AppCompPlayBarNext.vue'
 
 export default {
+  components: { AppCompPlayBarNext },
   props: {
     vidData: {
       type: Object,
@@ -122,7 +108,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['getCurrentBrowser', 'getCurrentPage']),
+    ...mapState(useAppStore, ['getCurrentBrowser', 'getCurrentPage']),
     //Return true if the video is loading (to show the loading display)
     isLoading() {
       if (!this.isSet && !this.hasSourceLoadingError) return true
@@ -168,6 +154,7 @@ export default {
   },
 
   methods: {
+    ...mapActions(useAppStore, ['updateCurrentMediaElements']),
     errorHandling(e) {
       this.hasSourceLoadingError = true
     },
@@ -190,12 +177,15 @@ export default {
      */
     updateMediaData(e) {
       //dispatch loading status of for this component
+
       this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'loading')
       this.$bus.$emit('update-media-duration')
       //Should Check that the the media Element is unique im Media Liste
       const { mElements } = this.getCurrentPage
 
-      const hasEntry = mElements.findIndex((media) => media.id === e.target.id)
+      const hasEntry = mElements.findLastIndex(
+        (media) => media.id === e.target.id
+      )
 
       if (hasEntry !== -1) {
         // Should report Error to Console and Component template about this media
@@ -210,7 +200,7 @@ export default {
         return this.hasErr.push(errmsg)
       }
 
-      this.$store.dispatch('updateCurrentMediaElements', e.target).then(() => {
+      this.updateCurrentMediaElements(e.target).then(() => {
         this.isSet = true
         this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
       })
@@ -222,18 +212,17 @@ export default {
      */
     runPlaybackAnimation() {
       //this.isPlaying = !this.$vidElement.mElement.paused
-
-      let animation = this.$gsap.fromTo(
-        '.playback-animation',
-        { opacity: 1, scale: 0.8 },
-        {
-          opacity: 0,
-          scale: 1.3,
-          duration: 0.8,
-          ease: 'power2.out'
-        }
-      )
-      animation.play()
+      // let animation = this.$gsap.fromTo(
+      //   '.playback-animation',
+      //   { opacity: 1, scale: 0.8 },
+      //   {
+      //     opacity: 0,
+      //     scale: 1.3,
+      //     duration: 0.8,
+      //     ease: 'power2.out'
+      //   }
+      // )
+      // animation.play()
     },
 
     /**
@@ -300,7 +289,6 @@ export default {
     spaceKeyPreventDefault(evt) {
       let { code } = evt
       if (code == 'Space') {
-        //console.log('\x1b[43mspace i')
         evt.preventDefault()
         this.handlePlayBack('spacebar')
       }

package/src/components/BaseModule.vue

@@ -54,6 +54,7 @@ export default {
   width: 100%;
   height: 100%;
   min-height: 100vh;
+  padding: 0 145px;
 }
 .overlay-close-widget {
   position: absolute;

package/src/composables/useQuiz.js

@@ -0,0 +1,206 @@
+//This composable sould Extend the functionality of a the quiz
+
+import i18n from '@/i18n' //Must import directly the local from project app because vue-18in does not work in legacy mode with composable
+
+export function useQuiz(quiz) {
+  const { quizType, solution, showSolution, quizInputType } = quiz
+  const { t } = i18n.global
+
+  // /**
+  //  * @param {String} inputId
+  //  * @returns {Array} the class
+  //  */
+  function classInput(inputId, optSelected = null) {
+    let theClass = []
+
+    switch (true) {
+      case ['choix_unique', 'reponse_ouverte'].includes(quizType.value):
+        if (inputId == quizInputType.value) {
+          theClass.push('reponseSelectionner')
+        }
+        break
+
+      case quizType.value == 'choix_mult':
+        if (containsValue(quizInputType.value, inputId)) {
+          theClass.push('reponseSelectionner')
+        }
+    }
+
+    if (showSolution.value) {
+      if (solution.value !== null) {
+        switch (true) {
+          case ['choix_unique', 'reponse_ouverte'].includes(quizType.value):
+            if (inputId == solution.value) {
+              theClass.push('correct_answer')
+            } else {
+              theClass.push('wrong_answer')
+            }
+            break
+
+          case quizType.value == 'choix_mult':
+            if (containsValue(solution.value, inputId)) {
+              theClass.push('correct_answer')
+            } else {
+              theClass.push('wrong_answer')
+            }
+            break
+          case quizType.value == 'dropdown':
+            if (!optSelected || !optSelected[inputId]) return
+            if (solution.value[inputId] == optSelected[inputId]) {
+              theClass.push('correct_answer')
+            } else {
+              theClass.push('wrong_answer')
+            }
+            break
+
+          case quizType.value == 'texte_troue_select':
+            if (typeof optSelected[inputId] !== 'undefined') {
+              if (
+                Object.values(solution.value[inputId])[0] ==
+                optSelected[inputId]
+              ) {
+                theClass.push('correct_answer')
+              } else {
+                theClass.push('wrong_answer')
+              }
+            }
+            break
+
+          case quizType.value == 'texte_tableau':
+            if (
+              containsValue(
+                solution.value[inputId].reponse_value,
+                optSelected[inputId]
+              )
+            ) {
+              theClass.push('correct_answer')
+            } else {
+              theClass.push('wrong_answer')
+            }
+            break
+          case quizType.value == 'texte_troue':
+            if (typeof optSelected[inputId] !== 'undefined') {
+              if (
+                containsValue(
+                  Object.values(solution.value[inputId])[0],
+                  optSelected[inputId]
+                )
+              ) {
+                theClass.push('correct_answer')
+              } else {
+                theClass.push('wrong_answer')
+              }
+            }
+            break
+        }
+      }
+    }
+    return theClass
+  }
+
+  function messageAccessibility(inputId, optSelected = null) {
+    let mess = ''
+    if (showSolution.value) {
+      if (solution.value !== null) {
+        switch (true) {
+          case ['choix_unique', 'reponse_ouverte'].includes(quizType.value):
+            if (inputId == solution.value) {
+              mess = `${t('quizState.goodAnswer')}`
+            } else {
+              mess = `${t('quizState.badAnswer')}`
+            }
+            break
+
+          case quizType.value == 'choix_mult':
+            if (containsValue(solution.value, inputId)) {
+              mess = `${t('quizState.goodAnswer')}`
+            } else {
+              mess = `${t('quizState.badAnswer')}`
+            }
+            break
+          case quizType.value == 'dropdown':
+            if (solution[inputId.value] == optSelected[inputId.value]) {
+              mess = `${t('quizState.goodAnswer')}`
+            } else {
+              mess = `${t('quizState.badAnswer')}`
+            }
+            break
+
+          case quizType.value == 'texte_troue_select':
+            if (typeof optSelected[inputId] !== 'undefined') {
+              if (
+                Object.values(solution.value[inputId])[0] ==
+                optSelected[inputId]
+              ) {
+                mess = `${t('quizState.goodAnswer')}`
+              } else {
+                mess = `${t('quizState.badAnswer')}`
+              }
+            }
+            break
+
+          case quizType.value == 'texte_tableau':
+            if (
+              containsValue(
+                solution.value[inputId].reponse_value,
+                optSelected[inputId]
+              )
+            ) {
+              mess = `${t('quizState.goodAnswer')}`
+            } else {
+              mess = `${t('quizState.badAnswer')}`
+            }
+            break
+          case quizType.value == 'texte_troue':
+            if (typeof optSelected[inputId] !== 'undefined') {
+              if (
+                containsValue(
+                  Object.values(solution.value[inputId])[0],
+                  optSelected[inputId]
+                )
+              ) {
+                mess = `${t('quizState.goodAnswer')}`
+              } else {
+                mess = `${t('quizState.badAnswer')}`
+              }
+            }
+            break
+        }
+      }
+    }
+    return mess
+  }
+
+  /**
+   * @description check if a values exists in a array
+   * @param {Array} array
+   * @param value
+   * @returns {Boolean}
+   */
+  function containsValue(array, value) {
+    return array.includes(value)
+  }
+
+  /**
+   * @description shuffles an array used to randomized the option order if shuffleAnswers is true
+   * @param {Array} array
+   * @returns {Array}
+   */
+  function shuffleArray(array) {
+    let newArray = []
+    let newArray2 = []
+
+    for (let i = 0; i < array.length; i++) {
+      const element = array[i]
+      newArray.push(element)
+    }
+    while (newArray.length > 0) {
+      let pos = Math.floor(newArray.length * Math.random())
+      newArray2.push(newArray[pos])
+      newArray.splice(pos, 1)
+    }
+    return newArray2
+  }
+
+  return { containsValue, shuffleArray, classInput, messageAccessibility }
+}

package/src/externalComps/ModuleView.vue

@@ -0,0 +1,22 @@
+<template>
+  <app-base-module :module-config="$data" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      id: 'module_99',
+      consigneBehavior: 'onHover', //Controle the behavior of desplaying instruction
+      bookmarkActive: true, // Controle the use of saved point
+      allowNavigationToActivity: null
+
+      //main:''// Edit to define the ID of the node that will be main. When skipping to main content in the page.
+    }
+  },
+  created() {
+    this.allowNavigationToActivity =
+      this.$helper.getSettingsFromStore('auto_next_activity')
+  }
+}
+</script>