{"version":3,"file":"DynamicList-B2SeLtMw.js","sources":["../../src/webapp/components/blocs_dynamiques/DynamicAnimation.vue","../../src/webapp/components/blocs_dynamiques/DynamicCarousel.vue","../../src/webapp/components/blocs_dynamiques/DynamicView.vue","../../src/webapp/components/blocs_dynamiques/DynamicList.vue"],"sourcesContent":["<template>\n  <div :class=\"emplacement\" class=\"dynamic-animation\">\n    <!-- Les images sont toutes préchargées dans le DOM et affichées alternativement,\n    car il y en a peu et elles sont légères. Elles tournent en boucle donc pas la peine de les recharger à chaque cycle,\n    on évite ainsi un hit sur le serveur chaque fois qu'on change d'image. -->\n    <img v-for=\"(item, index) in liste\" :key=\"item.pk\" :src=\"item.url\" v-show=\"index === currentIndex\" />\n  </div>\n</template>\n\n<script setup>\nimport { onBeforeUnmount, onMounted, ref } from 'vue'\n\nconst props = defineProps({\n  emplacement: {\n    type: String,\n    required: false,\n    default: 'empl-defaut',\n  },\n  liste: { // Tableau des images\n    type: Array,\n    required: true,\n  },\n  delaiParImage: {\n    type: Number,\n    required: true,\n  },\n})\n\nconst currentIndex = ref(0)\nconst intervalle = ref(null)\n\n\nonMounted(() => {\n  intervalle.value = setInterval(() => {\n    if (currentIndex.value >= props.liste.length - 1) {\n      currentIndex.value = 0\n    } else {\n      currentIndex.value++\n    }\n  }, props.delaiParImage)\n})\n\nonBeforeUnmount(() => {\n  clearInterval(intervalle.value)\n})\n</script>\n\n<style lang=\"scss\" scoped>\n.dynamic-animation {\n  img {\n    display: block;\n    margin: 0 auto;\n    margin-bottom: 1rem;\n  \n    object-fit: contain;\n    width: 80%;\n    max-width: 300px;\n    max-height: 300px;\n  }\n}\n</style>\n","<template>\n  <div class=\"dynamic-carousel\" :class=\"emplacement\">\n    <div class=\"carrousel-wrapper\">\n\n      <div class=\"bouton-navigation\" @click=\"previousSlide\" :style=\"currentIndex > 0 ? '' : 'visibility: hidden;'\">\n        <span class=\"icon\">\n          <i class=\"fas fa-chevron-left\"></i>\n        </span>\n      </div>\n  \n      <div class=\"images-defilantes\">\n        <TransitionGroup name=\"carrouselfade\" mode=\"out-in\">\n          <img\n            v-for=\"(uneImage, uneImageIndex) in props.liste\" :key=\"uneImageIndex\"\n            v-show=\"uneImageIndex === currentIndex\"\n            :src=\"uneImage.url\"\n          />\n        </TransitionGroup>\n      </div>\n  \n      <div class=\"bouton-navigation\" @click=\"nextSlide\" :style=\"currentIndex < liste.length - 1 ? '' : 'visibility: hidden;'\">\n        <span class=\"icon\">\n          <i class=\"fas fa-chevron-right\"></i>\n        </span>\n      </div>\n\n    </div>\n</div>\n</template>\n\n<script setup>\n/*\nCe composant est plus ou moins deprecated.\nOn ne peut pas slider en glissant le doigt, car il est destiné à être inséré\ndans les slides d'exercice qui utilisent déjà le \"glisser pour passer au précédent/suivant\".\n*/\n\nimport { ref } from 'vue'\n\nconst props = defineProps({\n  emplacement: {\n    type: String,\n    required: false,\n    default: 'empl-defaut',\n  },\n  liste: { // Tableau des images\n    type: Array,\n    required: true,\n  },\n})\n\nconst currentIndex = ref(0)\n\nconst previousSlide = () => {\n  if (currentIndex.value <= 0) {\n    currentIndex.value = props.liste.length - 1\n  } else {\n    currentIndex.value--\n  }\n}\n\nconst nextSlide = () => {\n  if (currentIndex.value >= props.liste.length - 1) {\n    currentIndex.value = 0\n  } else {\n    currentIndex.value++\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// STYLES GLOBAUX\n\n.dynamic-carousel {\n  width: 100%;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  margin-bottom: 1rem;\n  .carrousel-wrapper {\n    width: 100%;\n\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  \n    height: 25vh;\n  \n    .bouton-navigation {\n      font-size: 1.5rem;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: .2rem;\n      margin: 5px;\n      border-radius: 2rem;\n      text-align: center;\n      &:first-child {\n        padding-right: .4rem;\n      }\n      &:last-child {\n        padding-left: .4rem;\n      }\n  \n      &:active {\n        background-color: dimgray;\n        color: white;\n        cursor: pointer;\n      }\n    }\n  \n    .images-defilantes {\n      flex: 1;\n  \n      position: relative;\n  \n      width: 70%;\n      height: 100%;\n  \n      img {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n      \n        object-fit: contain;\n    \n        user-select: none;\n      }\n    }\n  }\n}\n\n// HOVER POUR LES APPAREILS QUI LE SUPPORTENT\n\n@media (hover: hover) {\n  .bouton-navigation:hover {\n      background-color: dimgray;\n      color: white;\n      cursor: pointer;\n    }\n}\n\n// ANIMATION DE TRANSITION ENTRE LES SLIDES\n\n.carrouselfade-enter-active,\n.carrouselfade-leave-active {\n  transition: opacity 0.1s ease;\n}\n\n.carrouselfade-enter-from,\n.carrouselfade-leave-to {\n  opacity: 0;\n}\n</style>\n","<template>\n  <div :class=\"[emplacement, classeRetrait]\" class=\"dynamic-view\" ref=\"currentView\">\n    <DynamicComponentRenderer :emplacement=\"emplacement\" :contenu=\"contenu\" />\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue'\nimport DynamicComponentRenderer from 'src/webapp/components/DynamicComponentRenderer.vue'\n\ndefineProps({\n  emplacement: {\n    type: String,\n    required: false,\n    default: 'empl-defaut',\n  },\n  contenu: {\n    type: Array,\n    required: false, // au cas où il n'y aurait pas de blocs dedans...\n  },\n})\n\nconst currentView = ref(null)\n\n\n// APPLICATION DE STYLES GLOBAUX SELON LA PROFONDEUR DU COMPOSANT\n// Voir frontend/css/nested_blocks.scss\n\n// Renvoie retrait-* selon le nombre de blocs parents pouvant contenir des blocs (list ou view)\n// rencontrés dans le DOM\nconst classeRetrait = computed(() => {\n  if (!currentView.value) return ''\n  let count = 0\n  let currentElement = currentView.value\n  while (currentElement !== document.body) {\n    if (currentElement.classList.contains('dynamic-list') || currentElement.classList.contains('dynamic-view')) {\n      count++\n    }\n    currentElement = currentElement.parentNode\n  }\n  return 'retrait-' + count.toString()\n})\n</script>\n\n<style lang=\"scss\" scoped>\n</style>\n","<template>\n  <div class=\"dynamic-list\" :class=\"[emplacement, classeRetrait, classeListeNiveau]\" ref=\"currentList\">\n    <DynamicComponentRenderer :emplacement=\"emplacement\" :contenu=\"contenu\" />\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue'\nimport DynamicComponentRenderer from 'src/webapp/components/DynamicComponentRenderer.vue'\n\ndefineProps({\n  emplacement: {\n    type: String,\n    required: false,\n    default: 'empl-defaut',\n  },\n  contenu: {\n    type: Array,\n    required: false, // au cas où il n'y aurait pas de blocs dedans...\n  },\n})\n\nconst currentList = ref(null)\n\n\n// APPLICATION DE STYLES GLOBAUX SELON LA PROFONDEUR DU COMPOSANT\n// Voir frontend/css/nested_blocks.scss\n\n// Renvoie retrait-* selon le nombre de blocs parents pouvant contenir des blocs (list ou view)\n// rencontrés dans le DOM\nconst classeRetrait = computed(() => {\n  if (!currentList.value) return ''\n  let count = 0\n  let currentElement = currentList.value\n  while (currentElement !== document.body) {\n    if (currentElement.classList.contains('dynamic-list') || currentElement.classList.contains('dynamic-view')) {\n      count++\n    }\n    currentElement = currentElement.parentNode\n  }\n  return 'retrait-' + count.toString()\n})\n\n// Renvoie liste-niveau-* selon le niveau de profondeur de la liste\nconst classeListeNiveau = computed(() => {\n  if (!currentList.value) return ''\n  let count = 0\n  let currentElement = currentList.value\n  while (currentElement !== document.body) {\n    if (currentElement.classList.contains('dynamic-list')) {\n      count++\n    }\n    currentElement = currentElement.parentNode\n  }\n  return 'liste-niveau-' + count.toString()\n})\n</script>\n\n\n<style lang=\"scss\" scoped>\n</style>\n"],"names":["props","__props","currentIndex","ref","intervalle","onMounted","onBeforeUnmount","previousSlide","nextSlide","currentView","classeRetrait","computed","count","currentElement","currentList","classeListeNiveau"],"mappings":"isGAYA,MAAMA,EAAQC,EAgBRC,EAAeC,EAAI,CAAC,EACpBC,EAAaD,EAAI,IAAI,EAG3B,OAAAE,EAAU,IAAM,CACdD,EAAW,MAAQ,YAAY,IAAM,CAC/BF,EAAa,OAASF,EAAM,MAAM,OAAS,EAC7CE,EAAa,MAAQ,EAErBA,EAAa,OAEnB,EAAKF,EAAM,aAAa,CACxB,CAAC,EAEDM,EAAgB,IAAM,CACpB,cAAcF,EAAW,KAAK,CAChC,CAAC,uoBCLD,MAAMJ,EAAQC,EAYRC,EAAeC,EAAI,CAAC,EAEpBI,EAAgB,IAAM,CACtBL,EAAa,OAAS,EACxBA,EAAa,MAAQF,EAAM,MAAM,OAAS,EAE1CE,EAAa,OAEjB,EAEMM,EAAY,IAAM,CAClBN,EAAa,OAASF,EAAM,MAAM,OAAS,EAC7CE,EAAa,MAAQ,EAErBA,EAAa,OAEjB,ijCC7CA,MAAMO,EAAcN,EAAI,IAAI,EAQtBO,EAAgBC,EAAS,IAAM,CACnC,GAAI,CAACF,EAAY,MAAO,MAAO,GAC/B,IAAIG,EAAQ,EACRC,EAAiBJ,EAAY,MACjC,KAAOI,IAAmB,SAAS,OAC7BA,EAAe,UAAU,SAAS,cAAc,GAAKA,EAAe,UAAU,SAAS,cAAc,IACvGD,IAEFC,EAAiBA,EAAe,WAElC,MAAO,WAAaD,EAAM,SAAU,CACtC,CAAC,4+ECnBD,MAAME,EAAcX,EAAI,IAAI,EAQtBO,EAAgBC,EAAS,IAAM,CACnC,GAAI,CAACG,EAAY,MAAO,MAAO,GAC/B,IAAIF,EAAQ,EACRC,EAAiBC,EAAY,MACjC,KAAOD,IAAmB,SAAS,OAC7BA,EAAe,UAAU,SAAS,cAAc,GAAKA,EAAe,UAAU,SAAS,cAAc,IACvGD,IAEFC,EAAiBA,EAAe,WAElC,MAAO,WAAaD,EAAM,SAAU,CACtC,CAAC,EAGKG,EAAoBJ,EAAS,IAAM,CACvC,GAAI,CAACG,EAAY,MAAO,MAAO,GAC/B,IAAIF,EAAQ,EACRC,EAAiBC,EAAY,MACjC,KAAOD,IAAmB,SAAS,MAC7BA,EAAe,UAAU,SAAS,cAAc,GAClDD,IAEFC,EAAiBA,EAAe,WAElC,MAAO,gBAAkBD,EAAM,SAAU,CAC3C,CAAC"}