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

package/src/components/AppCompPlayBarProgress.vue

@@ -0,0 +1,73 @@
+<!--@ 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>
+      </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>

package/src/components/AppCompPopUp.vue

@@ -9,25 +9,24 @@
         :content-class="[pType, pName]"
         :no-fade="animationOff"
         :header-close-label="$t('button.alert_close')"
-        v-bind="pContent.$bvArgs"
+        v-bind="{ ...pContent.$bvArgs }"
         @cancel="$cancel(pContent.cb_$cancel)"
         @ok="$confirm(pContent.cb_$confirm)"
         @hidden="$close(pContent.cb_$close)"
       >
-        <template v-slot:default>
+        <template #default>
           <div class="box-content-popUp" v-html="pContent.hypertext" />
         </template>
       </b-modal>
       <!----------------------- OTHER POPUP  ---------------------------->
-
-      +
       <b-modal
         v-show="isPopupCustom === false"
-        :id="getAppState"
+        :id="dynamicID"
         ref="someModal"
         :header-close-label="$t('button.alert_close')"
         :hide-footer="true"
-        :content-class="[pType, pName, typeRetro, getAppState]"
+        v-bind="pContent.$bvArgs"
+        :content-class="[pType, pName, typeRetro, dynamicID]"
         :no-fade="animationOff"
         @hidden="$close(pContent.cb_$close)"
       >
@@ -38,13 +37,8 @@
           <h4 v-html="pTitle"></h4>
         </div>
 
-        <div v-if="contentLength > 0" class="box-content-popUp">
-          <div
-            v-for="(content, _key, index) of pContent"
-            :id="`col-ref-${_key}`"
-            :key="`ref_${_key}_${content}`"
-            class="col-popUp"
-          >
+        <template v-if="contentLength > 0" class="box-content-popUp">
+          <template v-for="(content, _key, index) of pContent">
             <!-------- Create TEXT element -------------->
             <p
               v-if="_key.includes('text') && !_key.includes('hyper')"
@@ -58,7 +52,7 @@
             <div
               v-else-if="_key.includes('hypertext')"
               :id="`${_key}_${index}`"
-              :key="_key"
+              :key="`hyp_${_key}`"
               v-html="content"
             />
 
@@ -66,8 +60,8 @@
             <img
               v-else-if="_key.includes('image')"
               :id="`${_key}_${index}`"
-              :key="_key"
-              :src="require(`@/assets/${content.path}`)"
+              :key="`img_${_key}`"
+              :src="content.path"
               :alt="content.label || 'image'"
             />
 
@@ -75,7 +69,7 @@
             <a
               v-else-if="_key.includes('link')"
               :id="`${_key}_${index}`"
-              :key="_key"
+              :key="`lnk_${_key}`"
               :href="content.ref"
               target="_blank"
               :title="`${content.label}`"
@@ -87,8 +81,8 @@
             <video
               v-else-if="_key.includes('video')"
               :id="`${_key}_${index}`"
-              :key="_key"
-              :src="require(`@/assets/${content}`)"
+              :key="`vid_${_key}`"
+              :src="content"
               controls
               disablepictureinpicture
               controlslist="nofullscreen nodownload"
@@ -98,15 +92,15 @@
             <audio
               v-else-if="_key.includes('audio')"
               :id="`${_key}_${index}`"
-              :key="_key"
-              :src="require(`@/assets/${content}`)"
+              :key="`aud_${_key}`"
+              :src="content"
               controls
               controlslist="nodownload"
             />
-          </div>
-        </div>
+          </template>
+        </template>
         <!--------Default Button of Pop up --------------->
-        <div v-show="pType === 'popup-avert'" class="col-bouton">
+        <div v-if="pType === 'popup-avert'" class="col-bouton">
           <app-base-button
             id="btn-cancel-popup"
             :name-acces="'Annuler'"
@@ -114,7 +108,7 @@
             :title="$t('button.cancel_pop')"
             @click="$cancel(pContent.cb_$cancel)"
           >
-            {{ $t('button.cancel_pop') }}
+            {{ $t('button.cancel_pop') }} toto
           </app-base-button>
           <app-base-button
             id="btn-confirm-popup"
@@ -126,11 +120,15 @@
             {{ $t('button.confirm_pop') }}
           </app-base-button>
         </div>
-        <div v-if="pType === 'popup-info'" id="popup-bottom-buttons">
+        <div v-if="pType === 'popup-info'" class="popup-bottom-buttons">
           {{ pType }}
+
           <button
             id="popup-retro-close-btn"
+            type="button"
             :title="$t('button.alert_close')"
+            aria-label="Close"
+            class="close"
             @click="$close(pContent.cb_$close)"
           >
             {{ $t('button.alert_close') }}
@@ -141,7 +139,7 @@
           ></portal-target>
         </div>
         <!----------------------------------------------------------------->
-        <div v-if="pType === 'popup-endActivity'">
+        <div v-if="pType === 'popup-endActivity'" class="popup-bottom-buttons">
           <portal-target
             id="end-activity"
             name="wrap-end-activity"
@@ -192,18 +190,14 @@ export default {
        */
       let id
       if (this.isPopupCustom) id = 'popup-custom'
-      else id = `${this.getAppState}`
+      else id = `${this.dynamicID}`
       const p = this.$bvModal._vm.$children.find((p) => p.id === id)
       return p
     },
-    getAppState() {
-      let toto
-      if (!this.$store.state.$appStore.isDr) {
-        toto = 'not-popup-custom  full '
-      } else {
-        toto = 'not-popup-custom lites '
-      }
-      return toto
+    dynamicID() {
+      let c
+      c = 'not-popup-custom  full'
+      return c
     }
   },
   mounted() {
@@ -215,11 +209,15 @@ export default {
     this.$bus.$on('popup-close', (options, cb) => {
       this.$close(options, cb)
     })
-
     this.$bus.$on('retro-type', (b) => {
       this.retroType(b)
     })
   },
+  beforeUnmount() {
+    this.$bus.$off('popup-open')
+    this.$bus.$off('popup-close')
+    this.$bus.$off('retro-type')
+  },
   methods: {
     /**
      * @description - Validate the data for the component
@@ -261,14 +259,14 @@ export default {
           validObject = true
         if (validObject) {
           let KeywordsList
-          switch (data.type) {
-            case 'popup-custom':
+          switch (true) {
+            case data.type === 'popup-custom':
               KeywordsList = ['hypertext', '$bvArgs'] // accepted keyword in value declartion for pop-up custom
 
               for (const key of Object.keys(data.value)) {
                 // search if key match lists
                 if (![...KeywordsList, ...callbacksFunctionList].includes(key))
-                  this.errors.push('Invalid key declaration in value')
+                  this.errors.push(`Invalid key declaration in value : ${key}`)
 
                 // Validating content of hypertext key
                 if (
@@ -328,42 +326,87 @@ export default {
                 'audio_',
                 'link_',
                 'hypertext_',
-                'object'
+                'object',
+                'cb_$',
+                '$bvArgs'
               ] // accepted keyword in value declaration for pop-up custom
 
               for (let key of Object.keys(data.value)) {
-                const savedKey = key // backup key
+                let expectedKey = key
 
+                // search if key match lists
                 if (key.includes('_') && !key.includes('cb_$'))
-                  key = `${key.split('_')[0]}_`
+                  expectedKey = `${key.split('_')[0]}_`
+
+                //===============================================
+                const test = (regexp) => regexp.test(key) //defining the testing function
+
+                switch (true) {
+                  case ![...KeywordsList, ...callbacksFunctionList].includes(
+                    expectedKey
+                  ):
+                    this.errors.push(`Invalid key declaration in value: ${key}`)
+                    break
+
+                  case test(/\$bvArgs/):
+                    // validating content of $bvArgs keys. Must be an array.
+                    // validating content of $bvArgs. Content in $bvArgs must be objects
+                    if (
+                      data.value[key].constructor !== Array ||
+                      data.value[key].length < 1
+                    )
+                      this.errors.push(
+                        `Invalid assignment for ${key}. Must be an Array of Objects`
+                      )
+                    else {
+                      let count = 0
+                      data.value[key].forEach((element) => {
+                        if (element.constructor !== Object && count < 1) {
+                          this.errors.push(
+                            `Invalid value(s) found in ${key}. Must be an Array of Objects`
+                          )
+                          count++
+                        }
+                      })
+                    }
+                    break
 
-                // search if key match lists
-                if (![...KeywordsList, ...callbacksFunctionList].includes(key))
-                  this.errors.push(`Invalid key declaration in value: ${key}`)
+                  case test(/link/):
+                    // Validating content of link element
+                    if (!data.value[key].ref) {
+                      this.errors.push('Missing ref for link')
+                    }
+                    break
 
-                // Validating content of link element
-                if (key.includes('link') && !data.value[savedKey].ref) {
-                  this.errors.push('Missing ref for link')
-                }
+                  case test(/image/):
+                    // Validating content of link element
+                    if (!data.value[key].path) {
+                      this.errors.push('Missing path for image')
+                    }
+                    break
 
-                // validating content of image element
-                if (key.includes('image') && !data.value[savedKey].path)
-                  this.errors.push('Missing path for image')
+                  case test(/cb_\$/):
+                    // validating content of cb_$ keys to be a function
+                    if (data.value[key].constructor != Function)
+                      this.errors.push(
+                        `Invalid assignment for ${key}. Must be a Function`
+                      )
+                    break
 
-                // validating content of cb_$ keys
-                if (
-                  key.includes('cb_$') &&
-                  data.value[key].constructor != Function
-                )
-                  this.errors.push(
-                    `Invalid assignment for ${key}. Must be a Function`
-                  )
+                  default: {
+                    if (data.value[key].constructor != String) {
+                      this.errors.push(
+                        'Invalid assignment for hypertext. Must be a String'
+                      )
+                    }
+                  }
+                }
               }
           }
         } else this.errors.push('Invalid object declaration for value')
       } else this.errors.push('Missing argument - value')
 
-      if (process.env.NODE_ENV === 'development') {
+      if (import.meta.env.DEV) {
         for (const err of this.errors)
           console.warn(
             `%c WARNING!>>> POP-UP: ${err} `,
@@ -446,74 +489,92 @@ export default {
 .modal {
   .modal-dialog {
     max-width: 100% !important;
-    height: 100%;
     margin: 0 0 !important;
-
-    // DR pop-up
-    .lites {
-      width: 450px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+
+    .popup-info,
+    .popup-noanswer {
+      width: 660px;
       margin: 10% auto;
-
       .modal-header {
         border-bottom: 0 solid transparent;
       }
-
-      #popup-bottom-buttons {
-        display: none;
-      }
     }
 
-    // full minou pop-up
-    .full {
-      &.popup-retro {
-        width: 50%;
-        height: 100%;
-        position: relative;
-        border-radius: 0;
-        border-width: 0;
-
-        .modal-header {
-          position: absolute;
-          top: 0;
-          right: 0;
-          z-index: 2;
-          border-bottom: 0 solid transparent;
-        }
+    .popup-endActivity {
+      justify-content: center;
+      align-items: center;
+      border-radius: 0;
 
-        .modal-body {
-          #popup-bottom-buttons {
-            position: absolute;
-            bottom: 0;
-            margin-bottom: 65px;
-
-            #popup-retro-close-btn {
-              display: inline-block;
-              vertical-align: top;
-            }
+      .modal-header {
+        width: 100%;
+        border: 0 solid transparent;
 
-            #popup_retro_nav_wrapper {
-              display: inline-block;
-              vertical-align: top;
-            }
-          }
+        .close {
+          padding: 1rem 1.5rem;
+          margin: -1rem -1rem -1rem auto;
         }
       }
 
-      &.popup-info,
-      &.popup-noanswer {
-        width: 660px;
-        margin: 10% auto;
-        .modal-header {
-          border-bottom: 0 solid transparent;
+      .modal-body {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        .popup-bottom-buttons {
+          margin-left: auto;
+          margin-right: auto;
+          margin-top: 32px;
+          margin-bottom: 25px;
         }
 
-        #popup_retro_nav_wrapper {
-          display: inline-block;
-          order: 1;
+        #hypertext_1_0 {
+          display: flex;
+          justify-content: center;
+
+          p {
+            font-size: 1.5rem;
+            font-weight: bold;
+          }
         }
 
-        #popup-retro-close-btn {
-          order: 2;
+        .popUp-title,
+        #end-activity {
+          display: flex;
+
+          .popup_primary_nav_btn {
+            border: #005ea1 solid 2px;
+            margin: 0 12px;
+
+            &:nth-child(1) {
+              color: #005ea1;
+            }
+
+            &:nth-child(2) {
+              background: #005ea1;
+              color: #ffffff;
+            }
+
+            &:hover {
+              border: #ffffff solid 2px;
+              background: #0898ff;
+              color: #ffffff;
+            }
+
+            &:active {
+              background: #00406e;
+              outline: 1px solid #00406e !important;
+              color: #ffffff;
+            }
+          }
         }
       }
     }