{"version":3,"file":"js/petition-carousel-ce8ca9ee5d7f47e03505.chunk.js","mappings":"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","sources":["webpack://agra/./app/javascript/components/progress-bar.vue","webpack://agra/./app/javascript/components/progress-bar.vue?e82e","webpack://agra/./app/javascript/petition/carousel.vue","webpack://agra/./app/javascript/petition/carousel.vue?8bf8"],"sourcesContent":["<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__","<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__"],"names":["class","props","percentageDone","type","Number","required","computed","progressBarStyle","width","this","_createElementBlock","_hoisted_1","_createElementVNode","role","$props","style","_normalizeStyle","$options","_hoisted_2","key","components","ProgressBar","petitionsListPath","String","data","fetchingPetitions","lastPageFetched","petitions","splide","totalPetitionPages","mounted","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","_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","_hoisted_13","_hoisted_14","_toDisplayString","_hoisted_15","title","_hoisted_16","why","_hoisted_5"],"sourceRoot":""}