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

package/src/components/AppCompInputTextToFillNext.vue

@@ -1,171 +1,171 @@
-<!-- About this Component--
-  * Renders a Series of inputs to collect input for the Quiz component.
-  * Related Quiz to question: TEXTE_TROUE
-  * Receives the a data object defined by user
-  * Used by AppCompQuizNext
-  * Uses useQuiz composable
--->
-<template>
-  <div class="input-box">
-    <div
-      v-for="textInput in theInputData"
-      :key="textInput.id"
-      class="texteatrou"
-    >
-      <span v-if="!textInput.type" v-html="textInput.content"></span>
-      <label
-        :for="`${inputDataId}_${textInput.id}-champ`"
-        style="display: none"
-      >
-        {{ $t('text.quiz') }}
-      </label>
-      <v-text-field
-        v-if="textInput.type == 'inputText'"
-        :id="`${inputDataId}_${textInput.id}-champ`"
-        v-model="quizInputTypeValue[textInput.id]"
-        :placeholder="$t('text.place_holder.for_textarea')"
-        :disabled="quizLimitActive"
-        no-resize
-        :class="classInput(textInput.id, quizInputTypeValue)"
-        class="input-textatrou"
-        :aria-describedby="`${inputDataId}_${textInput.id}-msg-erreur`"
-        :aria-labelledby="`${inputDataId}_${textInput.id}-label`"
-      />
-      <span :id="`${inputDataId}_${textInput.id}-msg-erreur`" class="sr-only">
-        {{ messageAccessibility(textInput.id, quizInputTypeValue) }}
-      </span>
-    </div>
-  </div>
-</template>
-<script>
-import { useQuiz } from '../composables/useQuiz'
-import { toRefs } from 'vue'
-export default {
-  name: 'AppCompInputTextToFillNext',
-  props: {
-    quizType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-    inputData: {
-      type: Array,
-      default: () => []
-    },
-    inputType: {
-      type: String,
-      default: ''
-    },
-    textBase: {
-      type: String,
-      default: ''
-    },
-    quizInputType: {
-      type: Array,
-      default: () => []
-    },
-    solution: {
-      type: Array,
-      default: () => []
-    },
-    showSolution: {
-      type: Boolean,
-      default: false
-    },
-    quizLimitActive: {
-      type: Boolean,
-      default: false
-    }, //use to set if quiz should be active or not
-    quizSubmit: {
-      type: Boolean,
-      default: false
-    } //use to call a submit
-  },
-  emits: ['input-change'],
-  setup(props) {
-    const { shuffleArray, classInput, messageAccessibility } = useQuiz(
-      toRefs(props)
-    )
-    return { shuffleArray, classInput, messageAccessibility }
-  },
-  data() {
-    return {
-      quizInputTypeValue: [], //not using quizInputType because quizInputType is a prop
-      theInputData: [], //to create the list of drop down and text mixed togeter
-      quizSolution: null
-    }
-  },
-
-  watch: {
-    /**
-     * @description to pass value to AppCompQuiz
-     * @fires input-change to AppCompQuiz.vue
-     */
-    quizInputTypeValue: {
-      deep: true,
-      handler(newValue) {
-        this.$emit('input-change', newValue)
-      }
-    }
-  },
-
-  mounted() {
-    this.initQuiz()
-  },
-
-  methods: {
-    initQuiz() {
-      this.quizSolution = this.solution
-      if (this.quizSolution !== null) {
-        this.quizSolution.sort(function (a, b) {
-          return a - b
-        })
-      }
-      let textChoices = []
-
-      const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
-      let matchAll = this.textBase.split(regex)
-
-      for (let i = 0; i < matchAll.length - 1; i++) {
-        textChoices.push('')
-      }
-      //apply previous answers
-      if (this.quizInputType && this.quizInputType.length == 0) {
-        this.quizInputTypeValue = textChoices
-      } else {
-        this.quizInputTypeValue = this.quizInputType
-      }
-      this.createTextWithInput(this.textBase)
-    },
-    /**
-     * @description create the object to genate the text and inputs
-     * @param {String} str the text with holes to fill
-     */
-    createTextWithInput(str) {
-      const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
-      let matchAll = str.split(regex)
-      let listInput = []
-      for (let i = 0; i < matchAll.length - 1; i++) {
-        listInput.push({ id: 't' + i, content: matchAll[i] })
-        listInput.push({ id: i, type: 'inputText' })
-      }
-      let lastItem = matchAll.length - 1
-      listInput.push({ id: 't' + lastItem, content: matchAll[lastItem] })
-      this.theInputData = listInput
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.texteatrou {
-  display: inline;
-  position: relative;
-}
-.texteatrou > input {
-  display: inline;
-  width: auto;
-}
-</style>
+<!-- About this Component--
+  * Renders a Series of inputs to collect input for the Quiz component.
+  * Related Quiz to question: TEXTE_TROUE
+  * Receives the a data object defined by user
+  * Used by AppCompQuizNext
+  * Uses useQuiz composable
+-->
+<template>
+  <div class="input-box">
+    <div
+      v-for="textInput in theInputData"
+      :key="textInput.id"
+      class="texteatrou"
+    >
+      <span v-if="!textInput.type" v-html="textInput.content"></span>
+      <label
+        :for="`${inputDataId}_${textInput.id}-champ`"
+        style="display: none"
+      >
+        {{ $t('text.quiz') }}
+      </label>
+      <v-text-field
+        v-if="textInput.type == 'inputText'"
+        :id="`${inputDataId}_${textInput.id}-champ`"
+        v-model="quizInputTypeValue[textInput.id]"
+        :placeholder="$t('text.place_holder.for_textarea')"
+        :disabled="quizLimitActive"
+        no-resize
+        :class="classInput(textInput.id, quizInputTypeValue)"
+        class="input-textatrou"
+        :aria-describedby="`${inputDataId}_${textInput.id}-msg-erreur`"
+        :aria-labelledby="`${inputDataId}_${textInput.id}-label`"
+      />
+      <span :id="`${inputDataId}_${textInput.id}-msg-erreur`" class="sr-only">
+        {{ messageAccessibility(textInput.id, quizInputTypeValue) }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { toRefs } from 'vue'
+export default {
+  name: 'AppCompInputTextToFillNext',
+  props: {
+    quizType: {
+      type: String,
+      default: ''
+    },
+    inputDataId: {
+      type: String,
+      default: ''
+    },
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    inputType: {
+      type: String,
+      default: ''
+    },
+    textBase: {
+      type: String,
+      default: ''
+    },
+    quizInputType: {
+      type: Array,
+      default: () => []
+    },
+    solution: {
+      type: Array,
+      default: () => []
+    },
+    showSolution: {
+      type: Boolean,
+      default: false
+    },
+    quizLimitActive: {
+      type: Boolean,
+      default: false
+    }, //use to set if quiz should be active or not
+    quizSubmit: {
+      type: Boolean,
+      default: false
+    } //use to call a submit
+  },
+  emits: ['input-change'],
+  setup(props) {
+    const { shuffleArray, classInput, messageAccessibility } = useQuiz(
+      toRefs(props)
+    )
+    return { shuffleArray, classInput, messageAccessibility }
+  },
+  data() {
+    return {
+      quizInputTypeValue: [], //not using quizInputType because quizInputType is a prop
+      theInputData: [], //to create the list of drop down and text mixed togeter
+      quizSolution: null
+    }
+  },
+
+  watch: {
+    /**
+     * @description to pass value to AppCompQuiz
+     * @fires input-change to AppCompQuiz.vue
+     */
+    quizInputTypeValue: {
+      deep: true,
+      handler(newValue) {
+        this.$emit('input-change', newValue)
+      }
+    }
+  },
+
+  mounted() {
+    this.initQuiz()
+  },
+
+  methods: {
+    initQuiz() {
+      this.quizSolution = this.solution
+      if (this.quizSolution !== null) {
+        this.quizSolution.sort(function (a, b) {
+          return a - b
+        })
+      }
+      let textChoices = []
+
+      const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
+      let matchAll = this.textBase.split(regex)
+
+      for (let i = 0; i < matchAll.length - 1; i++) {
+        textChoices.push('')
+      }
+      //apply previous answers
+      if (this.quizInputType && this.quizInputType.length == 0) {
+        this.quizInputTypeValue = textChoices
+      } else {
+        this.quizInputTypeValue = this.quizInputType
+      }
+      this.createTextWithInput(this.textBase)
+    },
+    /**
+     * @description create the object to genate the text and inputs
+     * @param {String} str the text with holes to fill
+     */
+    createTextWithInput(str) {
+      const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
+      let matchAll = str.split(regex)
+      let listInput = []
+      for (let i = 0; i < matchAll.length - 1; i++) {
+        listInput.push({ id: 't' + i, content: matchAll[i] })
+        listInput.push({ id: i, type: 'inputText' })
+      }
+      let lastItem = matchAll.length - 1
+      listInput.push({ id: 't' + lastItem, content: matchAll[lastItem] })
+      this.theInputData = listInput
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.texteatrou {
+  display: inline;
+  position: relative;
+}
+.texteatrou > input {
+  display: inline;
+  width: auto;
+}
+</style>

package/src/components/AppCompJauge.vue

@@ -1,74 +1,74 @@
-<template>
-  <div v-if="!error" class="box-g" :class="state">
-    <v-progress-linear
-      class="jauge"
-      :model-value="value"
-      :height="12"
-      :max="maxValue"
-      aria-hidden="true"
-    ></v-progress-linear>
-    <p class="prcnt">{{ getPourcent }} %</p>
-  </div>
-  <div v-else>
-    <div class="warning">
-      <p class="title">Attention</p>
-      <p class="info">
-        Attention les valeurs que vous donnez au composant ne sont pas des
-        nombres.
-      </p>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    // props Give value to show progress
-    state: {
-      type: String,
-      default: 'started'
-    },
-    maxValue: {
-      type: Number,
-      default: 100
-    },
-    value: { type: Number, default: 0 },
-    pourcent: { type: Boolean, default: false },
-    fraction: { type: Boolean, default: false }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    getPourcent() {
-      // Calculate on a 100%
-      let result = (this.value * 100) / this.maxValue
-      if (result > 100) return 100
-      else return Math.round(result)
-    },
-    error() {
-      if (typeof this.value != 'number' || typeof this.maxValue != 'number') {
-        return true
-      } else {
-        return false
-      }
-    }
-  },
-  methods: {}
-}
-</script>
-<style lang="scss">
-.box-g {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  .jauge {
-    width: 70%;
-  }
-
-  .prcnt {
-    margin-left: 10px;
-  }
-}
-</style>
+<template>
+  <div v-if="!error" class="box-g" :class="state">
+    <v-progress-linear
+      class="jauge"
+      :model-value="value"
+      :height="12"
+      :max="maxValue"
+      aria-hidden="true"
+    ></v-progress-linear>
+    <p class="prcnt">{{ getPourcent }} %</p>
+  </div>
+  <div v-else>
+    <div class="warning">
+      <p class="title">Attention</p>
+      <p class="info">
+        Attention les valeurs que vous donnez au composant ne sont pas des
+        nombres.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    // props Give value to show progress
+    state: {
+      type: String,
+      default: 'started'
+    },
+    maxValue: {
+      type: Number,
+      default: 100
+    },
+    value: { type: Number, default: 0 },
+    pourcent: { type: Boolean, default: false },
+    fraction: { type: Boolean, default: false }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    getPourcent() {
+      // Calculate on a 100%
+      let result = (this.value * 100) / this.maxValue
+      if (result > 100) return 100
+      else return Math.round(result)
+    },
+    error() {
+      if (typeof this.value != 'number' || typeof this.maxValue != 'number') {
+        return true
+      } else {
+        return false
+      }
+    }
+  },
+  methods: {}
+}
+</script>
+<style lang="scss">
+.box-g {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .jauge {
+    width: 70%;
+  }
+
+  .prcnt {
+    margin-left: 10px;
+  }
+}
+</style>

package/src/components/AppCompPlayBarProgress.vue

@@ -1,82 +1,82 @@
-<!--@ 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>
+<!--@ 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>