{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/productFeatureImage.ts"],"names":["ProductFeatureImage","Component","el","__publicField","links","images","link","imagesContainer","span","image","target","newIndex","item","reverse","border","heading","description","sequence","timeline"],"mappings":"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","file":"scripts/8732.1d5f07cb3d6d7299e270.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { timeline } from 'motion';\nimport { TimelineDefinition } from '@motionone/dom/types/timeline/types';\n\nclass ProductFeatureImage extends Component {\n isReversed = false;\n activeIndex = 0;\n breakpoint = window.matchMedia('(min-width: 1024px)');\n\n constructor(el: HTMLElement) {\n super(el);\n\n if (this.el.classList.contains('product-feature-image--image-left')) {\n this.isReversed = true;\n }\n\n this.addAnimationElements();\n\n const links = [...(this.dom.links as NodeListOf)];\n const images = [...(this.dom.animatedImages as NodeListOf)];\n\n this.activateItem(links[this.activeIndex], images[this.activeIndex]);\n }\n\n setupDefaults() {\n this.dom = {\n imagesContainer: this.el.querySelector(\n '.product-feature-image__images'\n ),\n items: this.el.querySelectorAll('.product-feature-image__link'),\n images: this.el.querySelectorAll('.product-feature-image__link .picture'),\n links: this.el.querySelectorAll(\n '.product-feature-image__link a, .product-feature-image__link-inner-container'\n )\n };\n }\n\n addListeners() {\n (this.dom.links as NodeListOf).forEach(link => {\n link.addEventListener('mouseenter', this.handleMouseEnter.bind(this));\n link.addEventListener('focus', this.handleMouseEnter.bind(this));\n });\n }\n\n addAnimationElements() {\n const links = this.dom.links as NodeListOf;\n const imagesContainer = this.dom.imagesContainer as HTMLDivElement;\n const images = this.dom.images as NodeListOf;\n\n links.forEach(link => {\n const span = document.createElement('span');\n span.classList.add('product-feature-image__link-animation');\n link.append(span);\n });\n\n images.forEach(image => {\n imagesContainer.appendChild(image.cloneNode(true));\n });\n\n this.dom.animatedImages = imagesContainer.querySelectorAll('.picture');\n }\n\n handleMouseEnter(e: Event) {\n if (!this.breakpoint.matches) return;\n const links = [...(this.dom.links as NodeListOf)];\n const images = [...(this.dom.animatedImages as NodeListOf)];\n const target = (e as MouseEvent).currentTarget as HTMLAnchorElement;\n const newIndex = links.indexOf(target);\n\n if (this.activeIndex === newIndex) return;\n\n this.deactivateItem(\n links[this.activeIndex],\n images[this.activeIndex],\n newIndex > this.activeIndex\n );\n this.activateItem(\n links[newIndex],\n images[newIndex],\n this.activeIndex > newIndex\n );\n this.activeIndex = newIndex;\n }\n\n activateItem(\n item: HTMLAnchorElement,\n image: HTMLDivElement,\n reverse = false\n ) {\n const border = item.querySelector(\n '.product-feature-image__link-animation'\n );\n const heading = item.querySelector('h3');\n const description = item.querySelector('p');\n\n const sequence: TimelineDefinition = [];\n\n if (heading) {\n sequence.push([\n heading,\n { x: 30 },\n { duration: 0.5, at: reverse ? 0.1 : 0, easing: 'ease-in' }\n ]);\n }\n\n if (description) {\n sequence.push([\n description,\n { x: 30 },\n { duration: 0.5, at: reverse ? 0 : 0.1, easing: 'ease-in' }\n ]);\n }\n\n if (border) {\n sequence.push([\n border,\n { y: reverse ? ['102%', 0] : ['-102%', 0] },\n { duration: 0.5, at: 0, easing: 'ease-in' }\n ]);\n }\n\n sequence.push([\n image,\n { opacity: [0, 1], x: [this.isReversed ? '-50%' : '50%', 0] },\n { duration: 0.8, at: 0.2, easing: 'ease-in' }\n ]);\n\n return timeline(sequence, { duration: 0.4 });\n }\n\n deactivateItem(\n item: HTMLAnchorElement,\n image: HTMLDivElement,\n reverse = false\n ) {\n const border = item.querySelector(\n '.product-feature-image__link-animation'\n );\n const heading = item.querySelector('h3');\n const description = item.querySelector('p');\n\n const sequence: TimelineDefinition = [];\n\n if (heading) {\n sequence.push([\n heading,\n { x: 0 },\n { duration: 0.5, at: 0.1, easing: 'ease-in' }\n ]);\n }\n\n if (description) {\n sequence.push([\n description,\n { x: 0 },\n { duration: 0.5, at: reverse ? 0.2 : 0, easing: 'ease-in' }\n ]);\n }\n\n if (border) {\n sequence.push([\n border,\n { y: reverse ? [0, '102%'] : [0, '-102%'] },\n { duration: 0.5, at: 0, easing: 'ease-in' }\n ]);\n }\n\n sequence.push([\n image,\n { opacity: 0, x: this.isReversed ? '-50%' : '50%' },\n { duration: 0.8, at: 0, easing: 'ease-in' }\n ]);\n\n return timeline(sequence, { duration: 0.4 });\n }\n}\n\nexport default ProductFeatureImage;\n"],"sourceRoot":""}