{"version":3,"file":"js/petition-carousel-035c130542448d73617e.chunk.js","mappings":"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","sources":["webpack://agra/./app/javascript/petition/carousel.vue","webpack://agra/./app/javascript/petition/carousel.vue?8bf8","webpack://agra/./app/javascript/components/progress-bar.vue","webpack://agra/./app/javascript/components/progress-bar.vue?e82e"],"sourcesContent":["<template>\n  <div class=\"carousel-container\">\n    <div class=\"splide\" role=\"group\">\n      <div class=\"splide__track\">\n        <ul class=\"splide__list\">\n          <li v-for=\"petition in petitions\" :key=\"petition.slug\" class=\"splide__slide\">\n            <a :href=\"petition.url\" class=\"petition\">\n              <div class=\"splide__slide__container\">\n                <div v-if=\"petition.successful\" class=\"successful-petition-wrapper\">\n                  <i class=\"icon-ok-circled\" />\n                </div>\n                <div class=\"image-container\">\n                  <img v-if=\"petition.imageUrl\" :src=\"petition.imageUrl\" class=\"petition-image mx-auto d-block\">\n                  <div v-else class=\"petition-image\" />\n                </div>\n                <div class=\"row\">\n                  <div class=\"col-7\">\n                    <progress-bar :percentage-done=\"petitionProgress(petition)\" class=\"petition-progress-bar\" />\n                  </div>\n                  <div class=\"col-5\">\n                    <span class=\"petition-progress-label\">{{ petitionProgressLabel(petition) }}</span>\n                  </div>\n                </div>\n              </div>\n              <span class=\"title d-block fw-bold\">{{ petition.title }}</span>\n              <p class=\"why\">{{ petition.why }}</p>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport '@splidejs/splide/css'\n\nimport ajax from '@/helpers/ajax'\nimport { nextTick } from 'vue'\nimport ProgressBar from '@/components/progress-bar'\nimport Splide from '@splidejs/splide'\n\nconst PETITIONS_CAROUSEL_PAGE_SIZE = 3\n\nexport default {\n  components: { ProgressBar },\n\n  props: {\n    petitionsListPath: {\n      type: String,\n      required: true\n    }\n  },\n\n  data() {\n    return {\n      fetchingPetitions: false,\n      lastPageFetched: 0,\n      petitions: [],\n      splide: null,\n      totalPetitionPages: null\n    }\n  },\n\n  mounted() {\n    this.fetchPetitions().then(() => {\n      nextTick(() => {\n        // Wait until the list is rendered before initializing the carousel\n        this.setupCarousel()\n      })\n    })\n  },\n\n  methods: {\n    fetchPetitions() {\n      // Avoid race conditions by only allowing one fetch at a time\n      if (this.fetchingPetitions) {\n        return Promise.resolve()\n      }\n\n      this.fetchingPetitions = true\n\n      return ajax.get({\n        url: this.petitionsListPath,\n        params: {\n          page: this.lastPageFetched + 1\n        },\n        successHandler: (resp) => {\n          this.petitions = this.petitions.concat(resp.results)\n          this.lastPageFetched = resp.currentPage\n          this.totalPetitionPages = resp.totalPages\n        }\n      }).then(() => {\n        this.fetchingPetitions = false\n      })\n    },\n\n    petitionProgress(petition) {\n      return Math.floor((petition.signatureCount * 100) / petition.goal)\n    },\n\n    petitionProgressLabel(petition) {\n      return this.i18n.t('public.petitions.progress_bar.signatures_count_label', {count: petition.signatureCount})\n    },\n\n    setupCarousel() {\n      const direction = this.i18n.isRtl() ? 'rtl' : 'ltr'\n      const options = {\n        breakpoints: {\n          768: {\n            perPage: 1,\n            gap: '1rem'\n          },\n          992: {\n            perPage: 2,\n            gap: '1rem'\n          }\n        },\n        classes: {\n          arrows: 'splide__arrows arrows',\n          arrow : 'splide__arrow arrow',\n          prev  : 'splide__arrow--prev arrow-prev',\n          next  : 'splide__arrow--next arrow-next'\n        },\n        direction: direction,\n        gap: '2rem',\n        i18n: {\n          carousel: this.i18n.t('public.petitions.carousel.description'),\n          next: this.i18n.t('public.petitions.carousel.next'),\n          prev: this.i18n.t('public.petitions.carousel.previous'),\n          slideLabel: this.i18n.t('public.petitions.carousel.slide_index')\n        },\n        pagination: false,  // Don't show page dots\n        paginationDirection: direction,\n        perPage: PETITIONS_CAROUSEL_PAGE_SIZE,\n        perMove: 1,\n        rewind: false // Don't allow the carousel to loop\n      }\n\n      this.splide = new Splide('.splide', options).mount()\n\n      // Lazy load petitions as user moves along the carousel\n      // The newIndex argument is an integer with the value of the left-most slide currently being displayed\n      // (see https://splidejs.com/guides/events/#moved for details)\n      this.splide.on('moved', (newIndex) => {\n        // Calculate what's the next page for the one we're currently displaying elements\n        const nextPage = Math.floor((newIndex + 2) / PETITIONS_CAROUSEL_PAGE_SIZE) + 2\n        // Now calculate how many elements we should have fetched to be able to display the next page entirely\n        const petitionsCountReadyForDisplay = PETITIONS_CAROUSEL_PAGE_SIZE * nextPage\n\n        // If there are additional petitions to be fetched, and we haven't retrieved the petitions for the next page yet,\n        // fetch the petitions\n        if (this.totalPetitionPages > this.lastPageFetched && petitionsCountReadyForDisplay >= this.petitions.length) {\n          this.fetchPetitions().then(() => {\n            nextTick(() => {\n              // Wait until the new elements are added to the list before refreshing the carousel\n              this.splide.refresh()\n            })\n          })\n        }\n      })\n    }\n  }\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use \"~common_styles/breakpoints\" as breakpoints;\n\n// Set a fixed height to avoid automated scrolling when re-rendering the carousel on refresh\n.carousel-container {\n  height: 450px;\n}\n\n.successful-petition-wrapper {\n  position: absolute;\n  right: 0;\n  font-size: 2em;\n\n  i {\n    display: block;\n    margin-top: -6px;\n    margin-right: -4px;\n  }\n}\n\n::v-deep(.arrow) {\n  height: 55px;\n  width: 30px;\n  background: #000000;\n  border-radius: 0;\n  opacity: 1;\n\n  &:disabled {\n    opacity: 20%;\n  }\n\n  svg {\n    fill: white;\n  }\n}\n\n::v-deep(.arrows:not(.splide__arrows--rtl)) {\n  .arrow-prev {\n    left: -50px !important;\n  }\n\n  .arrow-next {\n    right: -50px !important;\n  }\n}\n\n::v-deep(.splide__arrows--rtl) {\n  .arrow-prev {\n    right: -50px !important;\n  }\n\n  .arrow-next {\n    left: -50px !important;\n  }\n}\n\n@include breakpoints.screen-mobile-only {\n  // On mobiles, where the arrow butons are displayed on top the items,\n  // align them with the image's bottom\n  ::v-deep(.arrow) {\n    top: 125px;\n  }\n\n  ::v-deep(.arrows:not(.splide__arrows--rtl)) {\n    .arrow-prev {\n      left: 0 !important;\n    }\n    .arrow-next {\n      right: 0 !important;\n    }\n  }\n\n  ::v-deep(.splide__arrows--rtl) {\n    .arrow-prev {\n      right: 0 !important;\n    }\n\n    .arrow-next {\n      left: 0 !important;\n    }\n  }\n}\n\na.petition {\n  &:hover {\n    text-decoration: none;\n  }\n}\n.image-container {\n  background: #f4f5f7;\n}\n.petition-image {\n  height: 160px;\n  width: auto;\n  max-width: 100%;\n  object-fit: cover;\n}\n.title {\n  margin: 10px 0;\n  color: #333;\n  font-size: 19px;\n}\n\n.why {\n  color: #333;\n  font-size: 14px;\n}\n\n.petition-progress-bar {\n  margin: 0;\n  border-radius: 0;\n  height: 20px;\n}\n\n.petition-progress-label {\n  display: block;\n  width: 100%;\n  font-size: 12px;\n  text-align: right;\n  margin: auto 0;\n  margin-right: 15px;\n  color: #333;\n}\n</style>\n","import { render } from \"./carousel.vue?vue&type=template&id=b6423cf8&scoped=true\"\nimport script from \"./carousel.vue?vue&type=script&lang=js\"\nexport * from \"./carousel.vue?vue&type=script&lang=js\"\n\nimport \"./carousel.vue?vue&type=style&index=0&id=b6423cf8&scoped=true&lang=scss\"\n\nimport exportComponent from \"../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-b6423cf8\"]])\n\nexport default __exports__","<template>\n  <div class=\"progress\">\n    <div class=\"progress-bar\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" :aria-valuenow=\"percentageDone\" :style=\"progressBarStyle\" />\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    percentageDone: {\n      type: Number,\n      required: true\n    }\n  },\n  computed: {\n    progressBarStyle() {\n      return {\n        width: `${this.percentageDone}%`\n      }\n    }\n  }\n}\n</script>\n","import { render } from \"./progress-bar.vue?vue&type=template&id=7fb8ac49\"\nimport script from \"./progress-bar.vue?vue&type=script&lang=js\"\nexport * from \"./progress-bar.vue?vue&type=script&lang=js\"\n\nimport exportComponent from \"../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__"],"names":["class","role","key","components","ProgressBar","props","petitionsListPath","type","String","required","data","fetchingPetitions","lastPageFetched","petitions","splide","totalPetitionPages","mounted","this","fetchPetitions","then","nextTick","setupCarousel","methods","Promise","resolve","ajax","get","url","params","page","successHandler","resp","concat","results","currentPage","totalPages","petitionProgress","petition","Math","floor","signatureCount","goal","petitionProgressLabel","i18n","t","count","direction","isRtl","options","breakpoints","perPage","gap","classes","arrows","arrow","prev","next","carousel","slideLabel","pagination","paginationDirection","perMove","rewind","Splide","mount","on","newIndex","petitionsCountReadyForDisplay","length","refresh","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_hoisted_4","_Fragment","_renderList","$data","slug","href","_hoisted_6","successful","_hoisted_7","_cache","_createCommentVNode","_createTextVNode","_hoisted_8","imageUrl","src","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_createVNode","_component_progress_bar","$options","_hoisted_13","_hoisted_14","_toDisplayString","_hoisted_15","title","_hoisted_16","why","_hoisted_5","percentageDone","Number","computed","progressBarStyle","width","$props","style","_normalizeStyle"],"sourceRoot":""}