/** * @package EmbedPress * @author EmbedPress * @copyright Copyright (C) 2023 EmbedPress. All rights reserved. * @license GPLv2 or later * @since 1.7.0 */ let instaGlobals = {}; (function ($) { 'use strict'; // Get the insta-gallery container element const getPopupTemplate = (instPost) => { let instaPostData = JSON.parse(instPost); let likeIcon = ''; if (instaPostData.like_count > 0) { likeIcon = ''; } const commentsIcon = ''; const shareIcon = ''; const instaIcon = ''; const instaUserInfo = instPost.user_info; let getDate = new Date(instaPostData.timestamp); getDate = getDate.toLocaleString('en-US', { day: 'numeric', month: 'short', year: 'numeric' }); let getTime = new Date(instaPostData.timestamp); getTime = getTime.toLocaleString('en-US', { hour12: false, hour: 'numeric', minute: 'numeric', second: 'numeric' }); let captionText = instaPostData.caption ? instaPostData.caption : ''; const tagRegex = /(#\w+)/g; let tagUrl = 'https://www.instagram.com/explore/tags/$1'; tagUrl = tagUrl.replace(/#/g, ''); const wrapTag = `$1`; captionText = captionText.replace(tagRegex, wrapTag); let carouselTemplate = ''; if (instaPostData.media_type === 'CAROUSEL_ALBUM') { carouselTemplate += ``; carouselTemplate += `

` } else { if (instaPostData.media_type?.toLowerCase() === 'video') { carouselTemplate += `

`; } else { carouselTemplate += ``; } } let popupHtml = ''; popupHtml += ` `; // INIT CAROUSEL return popupHtml; } // Add a click event listener to the insta-gallery container instaGlobals.instaPopup = (container) => { container?.addEventListener('click', function (event) { // Check if the clicked element has the class insta-gallery-item const instaItem = event.target.closest('.insta-gallery-item'); if (instaItem) { const postData = instaItem.dataset.postdata; const postid = instaItem.getAttribute('data-insta-postid'); const postIndex = instaItem.getAttribute('data-postindex'); const tkey = instaItem.parentElement.parentElement.getAttribute('data-tkey'); const closestPopup = event.target.closest('.source-provider-InstagramFeed').querySelector('.insta-popup'); closestPopup.style.display = 'block'; event.target.closest('.source-provider-InstagramFeed').querySelector('.popup-is-initialized').innerHTML = getPopupTemplate(postData); if (!document.querySelector(`#post-${postid}`).classList.contains('carousel-is-initialized')) { const carousel = new CgCarousel(`#post-${postid}`, { slidesPerView: 1, loop: true }, {}); // const plyer = new Plyr(`#post-${postid} video`); const next = document.querySelector(`#post-${postid} .js-carousel__next-1`); next?.addEventListener('click', () => carousel.next()); const prev = document.querySelector(`#post-${postid} .js-carousel__prev-1`); prev?.addEventListener('click', () => carousel.prev()); document.querySelector(`#post-${postid}`).classList.add('carousel-is-initialized'); } } }); } const instaContainers = document.querySelectorAll('.embedpress-gutenberg-wrapper .insta-gallery'); if (instaContainers.length > 0) { instaContainers.forEach((container) => { instaGlobals.instaPopup(container); }); } $('.popup-close').click(function (e) { // Hide the popup by setting display to none $('.insta-popup').hide(); $('.popup-container').remove(); }); const instafeeds = document.querySelectorAll('.source-provider-InstagramFeed'); instaGlobals.initializeTabs = (containerEl) => { // Initial tab selection showItems('ALL'); containerEl.addEventListener('click', function (event) { const clickedElement = event.target; if (!clickedElement) { return; // No element clicked, ignore the event } // Handle tab click if (clickedElement.matches('.tabs li')) { if (clickedElement.classList.contains('active')) { return; } else { const mediaType = clickedElement.getAttribute('data-media-type'); showItems(mediaType); const tabs = containerEl.querySelectorAll('.tabs li'); tabs.forEach(t => t.classList.remove('active')); clickedElement.classList.add('active'); } } }); function showItems(mediaType) { const items = containerEl.getElementsByClassName('insta-gallery-item'); for (let i = 0; i < items.length; i++) { const item = items[i]; if (mediaType === 'ALL' || item.getAttribute('data-media-type') === mediaType) { item.style.display = 'block'; } else { item.style.display = 'none'; } } } } instaGlobals.instaLoadMore = () => { $('.insta-load-more-button').on('click', function (e) { const loadmoreBtn = $(this).closest('.load-more-button-container'); const tkey = loadmoreBtn.data('loadmorekey'); const connectedAccount = $(`[data-tkey="${tkey}"]`).data('connected-acc-type'); const feedType = $(`[data-tkey="${tkey}"]`).data('feed-type'); const hashtagId = $(`[data-tkey="${tkey}"]`).data('hashtag-id'); const userId = $(`[data-tkey="${tkey}"]`).data('uid'); let loadedPosts = loadmoreBtn.data('loaded-posts') || 0; let postsPerPage = loadmoreBtn.data('posts-per-page') || 0; const spinicon = ``; $(this).append(spinicon); var data = { 'action': 'loadmore_data_handler', 'insta_transient_key': tkey, 'loaded_posts': loadedPosts, 'user_id': userId, 'posts_per_page': postsPerPage, 'feed_type': feedType, 'connected_account_type': connectedAccount }; if (feedType === 'hashtag_type') { data.hashtag_id = hashtagId; } jQuery.post(embedpressFrontendData.ajaxurl, data, function (response) { if (response.total_feed_posts >= response.next_post_index) { var $responseHtml = $(response.html);// $(`[data-tkey="${tkey}"] .insta-gallery`).append($responseHtml); $responseHtml.animate({ opacity: 1 }, 1000); $('.insta-loadmore-spinicon').remove(); loadedPosts = response.next_post_index; loadmoreBtn.data('loaded-posts', loadedPosts); // After loading more items, reinitialize the tabs for the specific container const containerEl = loadmoreBtn.closest('.source-provider-InstagramFeed')[0]; instaGlobals.initializeTabs(containerEl); if (response.total_feed_posts == response.next_post_index) { loadmoreBtn.hide(); } } else { loadmoreBtn.hide(); } }); }); } if (instafeeds.length > 0) { instafeeds.forEach(function (feed) { instaGlobals.initializeTabs(feed); }); } instaGlobals.instaLoadMore(); })(jQuery); document.addEventListener('DOMContentLoaded', function () { instaGlobals.initCarousel = (carouselSelector, options, carouselId) => { const carouselOptions = { slidesPerView: options.slideshow, spacing: options.spacing, loop: options.loop, autoplay: options.autoplay, transitionSpeed: options.transitionspeed, autoplaySpeed: options.autoplayspeed, arrows: options.arrows, breakpoints: { 0: { slidesPerView: 1 }, 768: { slidesPerView: Math.max(1, parseInt(options.slideshow, 10) - 1) }, 1024: { slidesPerView: Math.max(1, parseInt(options.slideshow, 10)) } } }; // INIT CAROUSEL const carousel = new CgCarousel(carouselSelector, carouselOptions, {}); // Navigation const next = document.querySelector(`[data-carouselid="${carouselId}"] #js-carousel__next-1`); next.addEventListener('click', () => carousel.next()); const prev = document.querySelector(`[data-carouselid="${carouselId}"] #js-carousel__prev-1`); prev.addEventListener('click', () => carousel.prev()); } const instaWrappers = document.querySelectorAll('.ep-embed-content-wraper'); if (instaWrappers.length > 0) { instaWrappers.forEach((wrapper) => { const carouselId = wrapper.getAttribute('data-carouselid'); if (!carouselId) return; let options = wrapper.getAttribute(`data-carousel-options`); options = JSON.parse(options); const carouselSelector = `[data-carouselid="${carouselId}"] .embedpress-insta-container`; if (options.arrows) { document.querySelector(`[data-carouselid="${carouselId}"] .cg-carousel__btns`).classList.remove('hidden'); } instaGlobals.initCarousel(carouselSelector, options, carouselId); }); } }); jQuery(window).on("elementor/frontend/init", function () { var filterableGalleryHandler = function ($scope, $) { const instaWrappers = document.querySelectorAll('.ep-embed-content-wraper'); if (instaWrappers.length > 0) { instaWrappers.forEach((wrapper) => { const carouselId = wrapper.getAttribute('data-carouselid'); if (!carouselId) return; let options = wrapper.getAttribute(`data-carousel-options`); options = JSON.parse(options); const carouselSelector = `[data-carouselid="${carouselId}"] .embedpress-insta-container`; if (options.arrows) { document.querySelector(`[data-carouselid="${carouselId}"] .cg-carousel__btns`).classList.remove('hidden'); } instaGlobals.initCarousel(carouselSelector, options, carouselId); }); } const instaFeed = $scope.find('.source-provider-InstagramFeed')[0]; const instaGallery = $scope.find('.insta-gallery')[0]; if (instaFeed) { instaGlobals.initializeTabs(instaFeed); } if (instaFeed) { instaGlobals.instaPopup(instaFeed); } }; elementorFrontend.hooks.addAction("frontend/element_ready/embedpres_elementor.default", filterableGalleryHandler); });