{"version":3,"file":"instagram-slider.js","sources":["../../dev/js/instagram-slider.js"],"sourcesContent":["(async () => {\n if (!customElements.get('instagram-slider')) {\n const { default: Swiper, A11y, Manipulation } = await import('swiper');\n\n Swiper.use([A11y, Manipulation]);\n\n class InstagramSlider extends HTMLElement {\n constructor() {\n super();\n\n this.feedUrl = this.dataset.feedUrl;\n this.numberOfPosts = parseInt(this.dataset.numberOfPosts);\n\n this.swiper = this.querySelector('.swiper');\n\n // Default to improve user experience\n this.swiperOptions = {\n threshold: 10,\n loop: false,\n roundLengths: true,\n slidesPerView: 1.5,\n spaceBetween: 8,\n slidesOffsetAfter: 8,\n watchSlidesProgress: true,\n breakpoints: {\n 480: {\n slidesPerView: 2.5,\n spaceBetween: 8,\n slidesOffsetAfter: 8,\n },\n 768: {\n slidesPerView: 3.5,\n spaceBetween: 16,\n slidesOffsetAfter: 16,\n },\n 1024: {\n slidesPerView: 3.5,\n spaceBetween: 24,\n slidesOffsetAfter: 24,\n },\n },\n };\n\n // Call swiper with selected swiper element and options\n this.swiperInstance = new Swiper(this.swiper, this.swiperOptions);\n\n this.onSlideChange();\n this.displayInstagramSlider();\n this.handleDesignModeEvents();\n }\n\n /**\n * Fetch Instagram feed\n * @returns json (feed)\n */\n async fetchInstagramSlider() {\n if (!this.feedUrl) return;\n try {\n const response = await fetch(this.feedUrl);\n const json = await response.json();\n\n // Catch error status and throw error\n if (json.status === 'error') throw new Error(json.message);\n\n return json;\n } catch (error) {\n console.error(error);\n return;\n }\n }\n\n /**\n * Display the Instagram feed\n * @returns void\n */\n async displayInstagramSlider() {\n if (!this.feedUrl) return;\n const instagramPosts = await this.fetchInstagramSlider();\n\n // If feed is empty, return\n if (!instagramPosts) return;\n\n // Remove all slides\n this.swiperInstance.removeAllSlides();\n\n await instagramPosts.forEach((post, i) => {\n // Break if index is higher than number of posts\n if (i > this.numberOfPosts) return;\n\n // Add the slides\n this.swiperInstance.addSlide(\n i,\n post.mediaType === 'IMAGE'\n ? this.buildImagePost(post)\n : post.mediaType === 'VIDEO'\n ? this.buildVideoPost(post)\n : this.buildCarouselAlbumPost(post)\n );\n });\n\n // Init Carousel Album slider\n const swiperCarouselAlbums = this.querySelectorAll('.swiper-carousel-album');\n\n if (swiperCarouselAlbums.length) {\n swiperCarouselAlbums.forEach((swiperCarouselAlbum) => {\n this.initCarouselAlbumSwiper(swiperCarouselAlbum);\n });\n }\n\n // Handle video autoplay for visible slides\n this.swiperInstance.slides.forEach((slide) => this.handleVideoAutoplay(slide));\n }\n\n /**\n * Build image node\n * @param {Object} post\n * @returns image node\n */\n buildImagePost(post) {\n const { dimensions, mediaType, mediaUrl, permalink } = post;\n\n return `\n
\n \n
\n \n
\n \n
\n `;\n }\n\n /**\n * Build video node\n * @param {Object} post\n * @returns video node\n */\n buildVideoPost(post) {\n const { dimensions, mediaType, mediaUrl, permalink } = post;\n\n // Get media url type (.mp4 etc.)\n let mediaUrlType = mediaUrl.split('?')[0];\n const lastDotInUrl = mediaUrlType.lastIndexOf('.');\n mediaUrlType = mediaUrlType.slice(lastDotInUrl + 1);\n\n return `\n
\n \n
\n \n
\n \n
\n `;\n }\n\n /**\n * Build carousel album node\n * @param {Object} post\n * @returns nested slider node\n */\n buildCarouselAlbumPost(post) {\n const { children, dimensions, permalink } = post;\n\n return `\n
\n \n
\n
\n ${this.buildCarouselAlbumChildPosts(children, dimensions)}\n
\n
\n \n
\n `;\n }\n\n /**\n * Build video node\n * @param {Object} children\n * @returns video node\n */\n buildCarouselAlbumChildPosts(posts) {\n let slides = [];\n\n posts.forEach((post, dimensions) => {\n const { mediaType, mediaUrl } = post;\n\n const slide = `\n
\n
\n \n
\n
\n `;\n\n slides.push(slide);\n });\n\n return slides.join('');\n }\n\n initCarouselAlbumSwiper(albumSwiper) {\n this.swiperCarouselAlbumInstance = new Swiper(albumSwiper, {\n autoplay: {\n delay: 3000,\n },\n effect: 'fade',\n fadeEffect: {\n crossFade: true,\n },\n allowTouchMove: false,\n });\n }\n\n /**\n * Handle slide changes\n */\n onSlideChange() {\n if (!this.feedUrl) return;\n this.swiperInstance.on('slideChange', () => {\n this.swiperInstance.slides.forEach((slide) => {\n this.handleVideoAutoplay(slide);\n });\n });\n }\n\n /**\n * Handle video autoplay\n * @param {Node} slide\n * @returns void\n */\n handleVideoAutoplay(slide) {\n const video = slide.querySelector('video');\n if (!video) return;\n slide.classList.contains('swiper-slide-visible') ? video.play() : video.pause();\n }\n\n /**\n * Handles the theme editor block change/edit event\n * @param {Object} event\n */\n handleBlockSelect({ dataset }) {\n // Check if the slide index is set\n if (!('swiperSlideIndex' in dataset)) return;\n\n // Set the slide index based on loop settings or not\n let swipeToSlideIndex = parseInt(dataset.swiperSlideIndex) - 1;\n if (this.swiperOptions.loop) swipeToSlideIndex = parseInt(dataset.swiperSlideIndex) + 1;\n\n // Slide to slide based on the data attribute from the target\n this.swiperInstance.slideTo(swipeToSlideIndex, 1000);\n }\n\n /**\n * Handle design mode events\n * @returns void\n */\n handleDesignModeEvents() {\n if (!Shopify.designMode) return;\n\n // Update the swiper when the section event is triggered\n ['shopify:section:load', 'shopify:block:select', 'shopify:block:deselect'].forEach(\n (inputEvent) => {\n window.addEventListener(inputEvent, (event) => {\n this.swiperInstance.update();\n\n if (this.swiperOptions.navigation) {\n this.swiperInstance.navigation.init();\n this.swiperInstance.navigation.update();\n }\n\n if (inputEvent === 'shopify:block:select' || inputEvent === 'shopify:block:deselect')\n this.handleBlockSelect(event.target);\n });\n }\n );\n }\n }\n\n window.InstagramSlider = InstagramSlider;\n customElements.define('instagram-slider', InstagramSlider);\n }\n})();\n"],"names":["customElements","get","default","Swiper","A11y","Manipulation","import","use","InstagramSlider","HTMLElement","constructor","super","this","feedUrl","dataset","numberOfPosts","parseInt","swiper","querySelector","swiperOptions","threshold","loop","roundLengths","slidesPerView","spaceBetween","slidesOffsetAfter","watchSlidesProgress","breakpoints","swiperInstance","onSlideChange","displayInstagramSlider","handleDesignModeEvents","fetchInstagramSlider","response","fetch","json","status","Error","message","error","console","instagramPosts","removeAllSlides","forEach","post","i","addSlide","mediaType","buildImagePost","buildVideoPost","buildCarouselAlbumPost","swiperCarouselAlbums","querySelectorAll","length","swiperCarouselAlbum","initCarouselAlbumSwiper","slides","slide","handleVideoAutoplay","dimensions","mediaUrl","permalink","width","height","mediaUrlType","split","lastDotInUrl","lastIndexOf","slice","children","buildCarouselAlbumChildPosts","posts","push","join","albumSwiper","swiperCarouselAlbumInstance","autoplay","delay","effect","fadeEffect","crossFade","allowTouchMove","on","video","classList","contains","play","pause","handleBlockSelect","swipeToSlideIndex","swiperSlideIndex","slideTo","Shopify","designMode","inputEvent","window","addEventListener","event","update","navigation","init","target","define"],"mappings":"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"}