fcad-core-dragon 2.1.1 → 2.2.0-beta.1

package/src/components/AppCompCarousel.vue

@@ -1,336 +1,342 @@
-<!--
- @ Description: This component is used to display a carousel.
- @ What it does: Create an html element including an array of slides. These slides are objects including required property (imgSrc) and optional properties (imgAlt, Title, Hypertext).
--->
-
-<template v-if="slides">
-  <section id="carousel" :aria-label="$t('text.carousel')">
-    <app-base-error-display
-      v-if="errorsSlider.length"
-      :error-group="'component'"
-      :error-title="'ERREUR: CRÉATION CAROUSEL'"
-      :errors-list="errorsSlider"
-    ></app-base-error-display>
-    <template v-else>
-      <div class="carousel-inner">
-        <div id="mycarousel-slides" class="carousel-slides" aria-live="polite">
-          <div
-            v-for="(slide, index) in slides"
-            :key="index"
-            class="carousel-slide"
-            :class="{
-              current: currentSlide == index + 1,
-              prev: currentSlide >= index + 2,
-              next: currentSlide <= index
-            }"
-            role="group"
-            :aria-hidden="!(currentSlide == index + 1)"
-          >
-            <span class="sr-only">
-              {{
-                $t('text.slide') +
-                ' ' +
-                (index + 1) +
-                ' ' +
-                $t('text.of') +
-                ' ' +
-                slideLength
-              }}
-            </span>
-            <div
-              class="carousel-image"
-              :class="{ 'full-width': !(slide.title || slide.hypertext) }"
-            >
-              <img
-                :src="slide.imgSrc"
-                :alt="slide.imgAlt"
-                :aria-hidden="
-                  slide.imgAlt == ' ' || !slide.imgAlt ? true : false
-                "
-              />
-            </div>
-            <div v-if="slide.title || slide.hypertext" class="carousel-text">
-              <p v-if="slide.title" class="carousel-slide-title">
-                {{ slide.title }}
-              </p>
-              <div v-html="slide.hypertext"></div>
-            </div>
-          </div>
-        </div>
-
-        <div class="carousel-controls">
-          <app-base-button
-            id="carousel-btn-prev"
-            class="carousel-btn"
-            :aria-label="$t('button.carousel_prev')"
-            aria-controls="mycarousel-slides"
-            :title="$t('button.carousel_prev')"
-            :aria-disabled="disablePrev"
-            :is-disabled="disablePrev"
-            :disabled="disablePrev"
-            @click="prevSlide()"
-          >
-            <svg aria-hidden="true" focusable="false">
-              <use href="#fleche-gauche-icon"></use>
-            </svg>
-          </app-base-button>
-          <app-base-button
-            id="carousel-btn-next"
-            class="carousel-btn"
-            :aria-label="$t('button.carousel_next')"
-            aria-controls="mycarousel-slides"
-            :title="$t('button.carousel_next')"
-            :aria-disabled="disableNext"
-            :is-disabled="disableNext"
-            :disabled="disableNext"
-            @click="nextSlide()"
-          >
-            <svg aria-hidden="true" focusable="false">
-              <use href="#fleche-droite-icon"></use>
-            </svg>
-          </app-base-button>
-        </div>
-      </div>
-    </template>
-    <div class="carousel-index">
-      <p aria-hidden="true">{{ sliderPagination }}</p>
-    </div>
-  </section>
-</template>
-
-<script>
-import AppBaseErrorDisplay from './AppBaseErrorDisplay.vue'
-import { mapState } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-export default {
-  name: 'AppCompSlider',
-  components: { AppBaseErrorDisplay },
-  props: {
-    slides: { type: Array, required: true }, //Array of slides {imgSrc, imgAlt, title, hypertext}
-    name: { type: String, default: 'Sooo cool' }
-  },
-  data() {
-    return {
-      currentSlide: null, //Slide management
-      requiredProperties: ['imgSrc'], //For slides validation
-      optionalProperties: ['title', 'imgAlt', 'hypertext'], //For slides validation
-      errorsSlider: []
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, ['getAppConfigs']),
-    disablePrev() {
-      return !(this.currentSlide > 1)
-    },
-    disableNext() {
-      return !(this.currentSlide < this.slideLength)
-    },
-    slideLength() {
-      return this.slides ? this.slides.length : 0
-    },
-    sliderPagination() {
-      return this.getAppConfigs.lang.toLowerCase() == 'en'
-        ? `${this.currentSlide}/${this.slideLength}`
-        : `${this.currentSlide} / ${this.slideLength}`
-    }
-  },
-  created() {
-    this.currentSlide = this.slides && this.slides.length ? 1 : 0
-  },
-  mounted() {
-    this.validateCarousel()
-  },
-  methods: {
-    prevSlide() {
-      if (this.currentSlide > 1) {
-        this.currentSlide--
-      }
-    },
-    nextSlide() {
-      if (this.currentSlide < this.slideLength) {
-        this.currentSlide++
-      }
-    },
-    validateCarousel() {
-      //Validating slides
-
-      if (Array.isArray(this.slides) && this.slideLength > 0) {
-        //Validate properties for all the slides
-        for (const slide of this.slides) {
-          this.validateProperties(
-            this.requiredProperties,
-            this.optionalProperties,
-            slide
-          )
-        }
-      } else {
-        let msg = `Le corrousel doit avoit au moins un element.`
-        this.errorsSlider.push(msg)
-        console.warn(
-          `%c WARNING!>>> AppCompSlider : slides must be an array of at least one item`,
-          'background: orange; color: white; display: block; margin:5px;'
-        )
-      }
-    },
-    //Validate the properties of a specific object (currentObject)
-    validateProperties(requiredProperties, optionalProperties, currentObject) {
-      let allProperties = requiredProperties.concat(optionalProperties)
-      let currentProperties = Object.keys(currentObject)
-      let wrongProperties = this.checkerWrong(allProperties, currentProperties)
-      let missingRequired = this.checkerMissing(
-        requiredProperties,
-        currentProperties
-      )
-
-      //Validate if all properties in currentObject are valid
-      if (wrongProperties.length > 0) {
-        console.warn(
-          `%c WARNING!>>> AppCompSlider : slides ${wrongProperties} invalid. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
-          'background: orange; color: white; display: block; margin:5px;'
-        )
-        let msg = `Attribut(s) invalide(s): <i>${wrongProperties}</i> .  Consultez la console pour plus de details.`
-        this.errorsSlider.push(msg)
-      }
-      //Validate if all required properties are present in currentObject
-      if (missingRequired.length > 0) {
-        console.warn(
-          `%c WARNING!>>>  AppCompQuizSlider : slides missing required ${missingRequired} property. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
-          'background: orange; color: white; display: block; margin:5px;'
-        )
-        let msg = `Une/certaines propriété(s) sont manquante(s). Consultez la console pour plus de details.`
-        this.errorsSlider.push(msg)
-      }
-    },
-    //Get all the invalids properties from the object
-    /*Add element from target array that are NOT in arr to the wrongArray*/
-    checkerWrong(arr, target) {
-      let wrongArray = []
-      target.every((v) => {
-        if (arr.includes(v)) {
-          return true
-        } else {
-          wrongArray.push(v)
-          return true
-        }
-      })
-      return wrongArray
-    },
-    //Get all the required properties that are missing from the object
-    /*Add element from the arr that are NOT in target arr to the missingArray*/
-    checkerMissing(arr, target) {
-      let missingArray = []
-      arr.every((v) => {
-        if (target.includes(v)) {
-          return true
-        } else {
-          missingArray.push(v)
-          return true
-        }
-      })
-      return missingArray
-    }
-  }
-}
-</script>
-<style lang="scss">
-#carousel {
-  width: max(100%, 350px);
-}
-
-.carousel-inner {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  overflow: initial;
-}
-
-.carousel-slides {
-  position: relative;
-  height: 100%;
-  width: calc(
-    100% - 136px
-  ); //add 68px each side of the carousel for the buttons
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-}
-
-.carousel-slide {
-  min-width: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  opacity: 0.5;
-  transition: all 0.6s ease-out;
-  position: relative;
-  @media screen and (max-width: 1000px) {
-    flex-direction: column;
-  }
-  &.current {
-    opacity: 1;
-  }
-  &.prev {
-    margin-left: -100%;
-  }
-}
-
-.carousel-image {
-  width: 60%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  &.full-width {
-    width: 100%;
-  }
-  @media screen and (max-width: 1000px) {
-    width: 100%;
-    max-height: 250px;
-  }
-  img {
-    max-width: 100%;
-    width: 100%;
-    min-height: 300px;
-    object-fit: contain;
-    @media screen and (max-width: 1000px) {
-      min-height: 250px;
-      max-height: 250px;
-    }
-  }
-}
-
-.carousel-text {
-  width: 40%;
-  height: 100%;
-  padding: 48px 24px 32px 24px;
-
-  @media screen and (max-width: 1000px) {
-    width: 100%;
-  }
-}
-
-.carousel-index {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-}
-
-.carousel-controls {
-  position: absolute;
-  width: 75%;
-  top: calc(50% - 25px); //Center buttons
-
-  @media screen and (min-width: 510px) {
-    width: 100%;
-  }
-  & {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    z-index: 3;
-    user-select: none;
-    min-width: 300px;
-  }
-}
-</style>
+<!--
+ @ Description: This component is used to display a carousel.
+ @ What it does: Create an html element including an array of slides. These slides are objects including required property (imgSrc) and optional properties (imgAlt, Title, Hypertext).
+-->
+
+<template v-if="slides">
+  <section id="carousel" :aria-label="$t('text.carousel')">
+    <app-base-error-display
+      v-if="errorsSlider.length"
+      :error-group="'component'"
+      :error-title="'ERREUR: CRÉATION CAROUSEL'"
+      :errors-list="errorsSlider"
+    ></app-base-error-display>
+    <template v-else>
+      <div class="carousel-inner">
+        <div id="mycarousel-slides" class="carousel-slides" aria-live="polite">
+          <div
+            v-for="(slide, index) in slides"
+            :key="index"
+            class="carousel-slide"
+            :class="{
+              current: currentSlide == index + 1,
+              prev: currentSlide >= index + 2,
+              next: currentSlide <= index
+            }"
+            role="group"
+            :aria-hidden="!(currentSlide == index + 1)"
+          >
+            <span class="sr-only">
+              {{
+                $t('text.slide') +
+                ' ' +
+                (index + 1) +
+                ' ' +
+                $t('text.of') +
+                ' ' +
+                slideLength
+              }}
+            </span>
+            <div
+              class="carousel-image"
+              :class="{ 'full-width': !(slide.title || slide.hypertext) }"
+            >
+              <img
+                :src="slide.imgSrc"
+                :alt="slide.imgAlt"
+                :aria-hidden="
+                  slide.imgAlt == ' ' || !slide.imgAlt ? true : false
+                "
+              />
+            </div>
+            <div v-if="slide.title || slide.hypertext" class="carousel-text">
+              <p v-if="slide.title" class="carousel-slide-title">
+                {{ slide.title }}
+              </p>
+              <div v-html="slide.hypertext"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="carousel-controls">
+          <app-base-button
+            id="carousel-btn-prev"
+            class="carousel-btn"
+            :aria-label="$t('button.carousel_prev')"
+            aria-controls="mycarousel-slides"
+            :title="$t('button.carousel_prev')"
+            :aria-disabled="disablePrev"
+            :is-disabled="disablePrev"
+            :disabled="disablePrev"
+            @click="prevSlide()"
+          >
+            <svg aria-hidden="true" focusable="false">
+              <use href="#fleche-gauche-icon"></use>
+            </svg>
+          </app-base-button>
+          <app-base-button
+            id="carousel-btn-next"
+            class="carousel-btn"
+            :aria-label="$t('button.carousel_next')"
+            aria-controls="mycarousel-slides"
+            :title="$t('button.carousel_next')"
+            :aria-disabled="disableNext"
+            :is-disabled="disableNext"
+            :disabled="disableNext"
+            @click="nextSlide()"
+          >
+            <svg aria-hidden="true" focusable="false">
+              <use href="#fleche-droite-icon"></use>
+            </svg>
+          </app-base-button>
+        </div>
+      </div>
+    </template>
+    <div class="carousel-index">
+      <p aria-hidden="true">{{ sliderPagination }}</p>
+    </div>
+  </section>
+</template>
+
+<script>
+import AppBaseErrorDisplay from './AppBaseErrorDisplay.vue'
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  name: 'AppCompSlider',
+  components: { AppBaseErrorDisplay },
+  props: {
+    slides: { type: Array, required: true }, //Array of slides {imgSrc, imgAlt, title, hypertext}
+    name: { type: String, default: 'Sooo cool' }
+  },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  data() {
+    return {
+      currentSlide: null, //Slide management
+      requiredProperties: ['imgSrc'], //For slides validation
+      optionalProperties: ['title', 'imgAlt', 'hypertext'], //For slides validation
+      errorsSlider: []
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, ['getAppConfigs']),
+    disablePrev() {
+      return !(this.currentSlide > 1)
+    },
+    disableNext() {
+      return !(this.currentSlide < this.slideLength)
+    },
+    slideLength() {
+      return this.slides ? this.slides.length : 0
+    },
+    sliderPagination() {
+      return this.getAppConfigs.lang.toLowerCase() == 'en'
+        ? `${this.currentSlide}/${this.slideLength}`
+        : `${this.currentSlide} / ${this.slideLength}`
+    }
+  },
+  created() {
+    this.currentSlide = this.slides && this.slides.length ? 1 : 0
+  },
+  mounted() {
+    this.validateCarousel()
+  },
+  methods: {
+    prevSlide() {
+      if (this.currentSlide > 1) {
+        this.currentSlide--
+      }
+    },
+    nextSlide() {
+      if (this.currentSlide < this.slideLength) {
+        this.currentSlide++
+      }
+    },
+    validateCarousel() {
+      //Validating slides
+
+      if (Array.isArray(this.slides) && this.slideLength > 0) {
+        //Validate properties for all the slides
+        for (const slide of this.slides) {
+          this.validateProperties(
+            this.requiredProperties,
+            this.optionalProperties,
+            slide
+          )
+        }
+      } else {
+        let msg = `Le corrousel doit avoit au moins un element.`
+        this.errorsSlider.push(msg)
+        console.warn(
+          `%c WARNING!>>> AppCompSlider : slides must be an array of at least one item`,
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+      }
+    },
+    //Validate the properties of a specific object (currentObject)
+    validateProperties(requiredProperties, optionalProperties, currentObject) {
+      let allProperties = requiredProperties.concat(optionalProperties)
+      let currentProperties = Object.keys(currentObject)
+      let wrongProperties = this.checkerWrong(allProperties, currentProperties)
+      let missingRequired = this.checkerMissing(
+        requiredProperties,
+        currentProperties
+      )
+
+      //Validate if all properties in currentObject are valid
+      if (wrongProperties.length > 0) {
+        console.warn(
+          `%c WARNING!>>> AppCompSlider : slides ${wrongProperties} invalid. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+        let msg = `Attribut(s) invalide(s): <i>${wrongProperties}</i> .  Consultez la console pour plus de details.`
+        this.errorsSlider.push(msg)
+      }
+      //Validate if all required properties are present in currentObject
+      if (missingRequired.length > 0) {
+        console.warn(
+          `%c WARNING!>>>  AppCompQuizSlider : slides missing required ${missingRequired} property. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+        let msg = `Une/certaines propriété(s) sont manquante(s). Consultez la console pour plus de details.`
+        this.errorsSlider.push(msg)
+      }
+    },
+    //Get all the invalids properties from the object
+    /*Add element from target array that are NOT in arr to the wrongArray*/
+    checkerWrong(arr, target) {
+      let wrongArray = []
+      target.every((v) => {
+        if (arr.includes(v)) {
+          return true
+        } else {
+          wrongArray.push(v)
+          return true
+        }
+      })
+      return wrongArray
+    },
+    //Get all the required properties that are missing from the object
+    /*Add element from the arr that are NOT in target arr to the missingArray*/
+    checkerMissing(arr, target) {
+      let missingArray = []
+      arr.every((v) => {
+        if (target.includes(v)) {
+          return true
+        } else {
+          missingArray.push(v)
+          return true
+        }
+      })
+      return missingArray
+    }
+  }
+}
+</script>
+<style lang="scss">
+#carousel {
+  width: max(100%, 350px);
+}
+
+.carousel-inner {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  overflow: initial;
+}
+
+.carousel-slides {
+  position: relative;
+  height: 100%;
+  width: calc(
+    100% - 136px
+  ); //add 68px each side of the carousel for the buttons
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.carousel-slide {
+  min-width: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  opacity: 0.5;
+  transition: all 0.6s ease-out;
+  position: relative;
+  @media screen and (max-width: 1000px) {
+    flex-direction: column;
+  }
+  &.current {
+    opacity: 1;
+  }
+  &.prev {
+    margin-left: -100%;
+  }
+}
+
+.carousel-image {
+  width: 60%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  &.full-width {
+    width: 100%;
+  }
+  @media screen and (max-width: 1000px) {
+    width: 100%;
+    max-height: 250px;
+  }
+  img {
+    max-width: 100%;
+    width: 100%;
+    min-height: 300px;
+    object-fit: contain;
+    @media screen and (max-width: 1000px) {
+      min-height: 250px;
+      max-height: 250px;
+    }
+  }
+}
+
+.carousel-text {
+  width: 40%;
+  height: 100%;
+  padding: 48px 24px 32px 24px;
+
+  @media screen and (max-width: 1000px) {
+    width: 100%;
+  }
+}
+
+.carousel-index {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.carousel-controls {
+  position: absolute;
+  width: 75%;
+  top: calc(50% - 25px); //Center buttons
+
+  @media screen and (min-width: 510px) {
+    width: 100%;
+  }
+  & {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    z-index: 3;
+    user-select: none;
+    min-width: 300px;
+  }
+}
+</style>