{"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 this.feedVersion = this.dataset.feedVersion;\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 return this.feedVersion === 'v1' ? json : json.posts;\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 { mediaType, mediaUrl, permalink } = post;\n const { width, height } = this.feedVersion === 'v1' ? post.dimensions : post.sizes.medium;\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 { mediaType, mediaUrl, permalink } = post;\n const { width, height } = this.feedVersion === 'v1' ? post.dimensions : post.sizes.medium;\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 Your browser does not support the video tag.\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) => {\n const { mediaType, mediaUrl } = post;\n const { width, height } = this.feedVersion === 'v1' ? post.dimensions : post.sizes.medium;\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","feedVersion","swiperOptions","threshold","loop","roundLengths","slidesPerView","spaceBetween","slidesOffsetAfter","watchSlidesProgress","breakpoints","swiperInstance","onSlideChange","displayInstagramSlider","handleDesignModeEvents","fetchInstagramSlider","response","fetch","json","status","Error","message","posts","error","console","instagramPosts","removeAllSlides","forEach","post","i","addSlide","mediaType","buildImagePost","buildVideoPost","buildCarouselAlbumPost","swiperCarouselAlbums","querySelectorAll","length","swiperCarouselAlbum","initCarouselAlbumSwiper","slides","slide","handleVideoAutoplay","mediaUrl","permalink","width","height","dimensions","sizes","medium","mediaUrlType","split","lastDotInUrl","lastIndexOf","slice","children","buildCarouselAlbumChildPosts","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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"}