{"version":3,"file":"comparisonChart-D-d0UwYa.js","sources":["../../../app/javascript/components/shared/SegmentedControlWithContent.vue","../../../app/javascript/components/listings/ComparisonChart.vue","../../../app/javascript/modules/comparisonChart.js"],"sourcesContent":["<template>\n  <div class=\"flex flex-col items-center md:mx-auto\">\n    <h2\n      v-if=\"title\"\n      class=\"typeset-2 mb-6 md:mb-7 text-center\">\n      {{ title }}\n    </h2>\n    <div\n      class=\"w-full segmented-control-container flex flex-col flex-1\"\n      :class=\"containerClasses\"\n      :style=\"heightStyles\">\n      <div\n        v-if=\"options.length > 1\"\n        :class=\"headerWidthClasses\"\n        class=\"flex items-center justify-center text-center pb-4 md:pb-0 cursor-pointer mx-auto\">\n        <h3\n          v-for=\"(option, index) in options\"\n          :key=\"index\"\n          class=\"md:p-5 typeset-4\"\n          :class=\"[textColour(index)]\"\n          :style=\"tabWidth\"\n          @click=\"selectTab(index)\">\n          {{ option }}\n        </h3>\n      </div>\n      <div\n        v-if=\"options.length > 1\"\n        :class=\"headerWidthClasses\"\n        class=\"tab-track h-2 relative mb-6 md:mb-6 mx-auto\">\n        <div\n          ref=\"tabIndicator\"\n          :style=\"tabWidth\"\n          class=\"tab-indicator bg-paper-6 absolute top-0 left-0 bottom-0\"></div>\n      </div>\n      <div class=\"md:mt-3 min-height-0 h-full flex-1 relative\">\n        <fade-transition\n          v-if=\"useFadeTransition\"\n          cross-fade>\n          <slot></slot>\n        </fade-transition>\n        <slot v-else></slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Hammer from \"hammerjs\";\nimport FadeTransition from \"@/app/javascript/components/transitions/FadeTransition.vue\";\n\nexport default {\n  name: \"SegmentedControlWithContent\",\n  components: {\n    FadeTransition\n  },\n  props: {\n    options: {\n      type: Array,\n      default: () => []\n    },\n    title: {\n      type: String,\n      default: \"\"\n    },\n    preventSwipeNavigation: {\n      type: Boolean,\n      default: false\n    },\n    activeIndex: {\n      type: Number,\n      default: 0\n    },\n    containerClasses: {\n      type: Array,\n      default: () => [\"bg-paper\", \"p-6\", \"md:px-8\"]\n    },\n    headerWidthClasses: {\n      type: Array,\n      default: () => [\"w-full\"]\n    },\n    useFadeTransition: {\n      type: Boolean,\n      default: false\n    },\n    applyCustomHeight: {\n      type: Boolean,\n      default: true\n    }\n  },\n  emits: [\"update:activeIndex\"],\n  computed: {\n    textColour() {\n      return index => (index === this.activeIndex ? null : \"text-ink-3\");\n    },\n    tabWidth() {\n      return {\n        width: `${100 / this.options.length}%`\n      };\n    },\n    heightStyles() {\n      if (this.applyCustomHeight) {\n        return {\n          maxHeight: \"1000px\",\n          height: \"673.5px\",\n          minHeight: \"673.5px\"\n        };\n      }\n      return {};\n    }\n  },\n  watch: {\n    activeIndex() {\n      this.positionTabIndicator();\n    }\n  },\n  mounted() {\n    this.positionTabIndicator();\n\n    if (!this.preventSwipeNavigation) {\n      const swipeableEl = document.querySelector(\n        \".segmented-control-container\"\n      );\n      this.hammer = Hammer(swipeableEl);\n      this.hammer.on(\"swipeleft\", () => this.nextPage());\n      this.hammer.on(\"swiperight\", () => this.prevPage());\n    }\n  },\n  methods: {\n    prevPage() {\n      if (this.activeIndex > 0) {\n        this.setActiveIndex(this.activeIndex - 1);\n      }\n    },\n    nextPage() {\n      if (this.activeIndex < this.options.length - 1) {\n        this.setActiveIndex(this.activeIndex + 1);\n      }\n    },\n    selectTab(index) {\n      this.setActiveIndex(index);\n    },\n    setActiveIndex(index) {\n      this.$emit(\"update:activeIndex\", index);\n    },\n    positionTabIndicator() {\n      if (!this.$refs.tabIndicator) return;\n\n      const el = this.$refs.tabIndicator;\n      el.style.transform = `translateX(${100 * this.activeIndex}%)`;\n    }\n  }\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.tab-track {\n  background-color: rgba($color: #a99a78, $alpha: 0.24);\n}\n\n.tab-indicator {\n  transition: transform 0.2s ease-in-out;\n}\n\n.min-height-0 {\n  min-height: 0;\n}\n</style>\n","<template>\n  <segmented-control-with-content\n    id=\"comparison-chart\"\n    v-model:active-index=\"activeIndex\"\n    class=\"py-7\"\n    bg-colour=\"bg-paper\"\n    :title=\"comparisonChartTitle\"\n    :options=\"segmentedControlOptions\"\n    :apply-custom-height=\"false\"\n    use-fade-transition>\n    <div\n      :key=\"activeIndex\"\n      class=\"flex items-start justify-between flex-col md:flex-row gap-7 w-full\">\n      <div class=\"md:w-1/2\">\n        <div\n          v-for=\"(info, index) in activeProduct.info\"\n          :key=\"index\">\n          <p\n            class=\"typeset-6\"\n            :class=\"info.subheading ? 'mb-3' : 'mb-6'\">\n            {{ info.heading }}\n          </p>\n          <p\n            v-if=\"info.subheading\"\n            class=\"typeset-7\"\n            :class=\"isLastItem(index) ? 'mb-4' : 'mb-6'\"\n            v-html=\"info.subheading\"></p>\n        </div>\n        <a\n          v-if=\"activeProduct.url\"\n          :href=\"activeProduct.url\"\n          class=\"underline\"\n          @click=\"triggerAnalyticsEvent(activeProduct.name)\">\n          {{\n            t(\"product.comparison-chart.link-text\", {\n              product: activeProduct.pluralised_name\n            })\n          }}\n        </a>\n      </div>\n      <div class=\"md:w-1/2 w-full md:pb-5\">\n        <img\n          height=\"254\"\n          width=\"452\"\n          :src=\"activeProduct.image\"\n          class=\"aspect-ratio-16x9 img-responsive w-full\" />\n      </div>\n    </div>\n  </segmented-control-with-content>\n</template>\n\n<script>\nimport SegmentedControlWithContent from \"@/app/javascript/components/shared/SegmentedControlWithContent.vue\";\n\nexport default {\n  name: \"ComparisonChart\",\n  components: { SegmentedControlWithContent },\n  props: {\n    productTypeName: {\n      type: Object,\n      required: true\n    },\n    products: {\n      type: Array,\n      default: () => []\n    },\n    comparisonGroup: {\n      type: String,\n      required: true\n    }\n  },\n  data() {\n    return {\n      key: 0,\n      activeIndex: 0\n    };\n  },\n  computed: {\n    segmentedControlOptions() {\n      return this.rearrangedProducts.map(product => product.pluralised_name);\n    },\n    rearrangedProducts() {\n      if (this.comparisonGroup === \"photo_book\") {\n        return this.products;\n      }\n\n      const currentProduct = this.products[this.findProductIndex];\n      const otherProducts = this.products.filter(p => p !== currentProduct);\n\n      return [currentProduct, ...otherProducts];\n    },\n    comparisonChartTitle() {\n      if (this.comparisonGroup === \"journal\") {\n        return this.t(\"product.comparison-chart.journal-title\");\n      }\n      if (this.comparisonGroup === \"photo_book\") {\n        return this.t(\"product.comparison-chart.photo-book-title\");\n      }\n      return this.t(\"product.comparison-chart.diary-title\");\n    },\n    activeProduct() {\n      return this.rearrangedProducts[this.activeIndex];\n    },\n    findProductIndex() {\n      return this.products.findIndex(product =>\n        product.ids.includes(this.productTypeName.id)\n      );\n    },\n    isLastItem() {\n      return index => index === this.activeProduct.info.length - 1;\n    }\n  },\n  mounted() {\n    const activeIndex = this.rearrangedProducts.findIndex(product =>\n      product.ids.includes(this.productTypeName.id)\n    );\n    this.activeIndex = activeIndex;\n  },\n  methods: {\n    triggerAnalyticsEvent(name) {\n      analytics.track(\"Clicked Comparison Chart Category\", {\n        value: name\n      });\n    }\n  }\n};\n</script>\n","import { createApp } from \"vue\";\n\nimport I18n from \"../plugins/i18n\";\nimport ComparisonChart from \"../components/listings/ComparisonChart.vue\";\n\nconst comparisonChart = () => {\n  window.setupComparisonChart = () => {\n    const nodes = document.querySelectorAll(\".comparison-chart-app\");\n    if (!nodes.length) return;\n\n    nodes.forEach(node => {\n      if (node.hasAttribute(\"data-v-app\")) return;\n\n      const props = JSON.parse(node.dataset.props);\n      const translations = JSON.parse(node.dataset.translations);\n\n      const app = createApp(ComparisonChart, props);\n\n      app.use(I18n, translations);\n\n      app.mount(node);\n      window.vueApps.push(app);\n    });\n  };\n\n  window.setupComparisonChart();\n};\nexport default comparisonChart;\n"],"names":["_sfc_main","FadeTransition","index","swipeableEl","Hammer","el","_hoisted_1","_hoisted_3","_hoisted_4","_openBlock","_createElementBlock","$props","_hoisted_2","_toDisplayString","_createCommentVNode","_createElementVNode","_normalizeClass","_normalizeStyle","$options","_Fragment","_renderList","option","$event","_createBlock","_component_fade_transition","_withCtx","_renderSlot","_ctx","SegmentedControlWithContent","product","currentProduct","otherProducts","p","activeIndex","name","_hoisted_5","_component_segmented_control_with_content","$data","_cache","info","comparisonChart","nodes","node","props","translations","app","createApp","ComparisonChart","I18n"],"mappings":"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"}