1/** 2 * @package EmbedPress 3 * @author EmbedPress <[email protected]> 4 * @copyright Copyright (C) 2023 EmbedPress. All rights reserved. 5 * @license GPLv2 or later 6 * @since 1.7.0 7 */ 8 9 10 11let instaGlobals = {}; 12 13(function ($) { 14 'use strict'; 15 16 // Get the insta-gallery container element 17 const getPopupTemplate = (instPost) => { 18 19 let instaPostData = JSON.parse(instPost); 20 21 let likeIcon = '<svg aria-label="Like" class="x1lliihq x1n2onr6" color="#262626" fill="#262626" height="24" viewBox="0 0 24 24" width="24"><path d="M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 0 1 3.679-1.938m0-2a6.04 6.04 0 0 0-4.797 2.127 6.052 6.052 0 0 0-4.787-2.127A6.985 6.985 0 0 0 .5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 0 0 3.518 3.018 2 2 0 0 0 2.174 0 45.263 45.263 0 0 0 3.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 0 0-6.708-7.218Z"/></svg>'; 22 23 if (instaPostData.like_count > 0) { 24 likeIcon = '<svg aria-label="Unlike" class="x1lliihq x1n2onr6" color="#FF3040" fill="#FF3040" height="24" viewBox="0 0 48 48" width="24"><path d="M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z"/></svg>'; 25 } 26 27 const commentsIcon = '<svg aria-label="Comment" class="x1lliihq x1n2onr6" color="#000" height="24" viewBox="0 0 24 24" width="24"><path d="M20.656 17.008a9.993 9.993 0 1 0-3.59 3.615L22 22Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"/></svg>'; 28 29 const shareIcon = '<svg aria-label="Share Post" class="x1lliihq x1n2onr6" color="#000" fill="#737373" height="24" viewBox="0 0 24 24" width="24"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M22 3 9.218 10.083m2.48 10.251L22 3.001H2l7.218 7.083 2.48 10.25z"/></svg>'; 30 31 const instaIcon = '<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" xml:space="preserve" width="20" height="20"><style>.st0{fill:none;stroke:#000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}</style><path class="st0" d="M14.375 19.375h-8.75c-2.75 0-5-2.25-5-5v-8.75c0-2.75 2.25-5 5-5h8.75c2.75 0 5 2.25 5 5v8.75c0 2.75-2.25 5-5 5z"/><path class="st0" d="M14.375 10A4.375 4.375 0 0 1 10 14.375 4.375 4.375 0 0 1 5.625 10a4.375 4.375 0 0 1 8.75 0zm1.25-5.625A.625.625 0 0 1 15 5a.625.625 0 0 1-.625-.625.625.625 0 0 1 1.25 0z"/></svg>'; 32 33 const instaUserInfo = instPost.user_info; 34 35 let getDate = new Date(instaPostData.timestamp); 36 getDate = getDate.toLocaleString('en-US', { day: 'numeric', month: 'short', year: 'numeric' }); 37 38 let getTime = new Date(instaPostData.timestamp); 39 getTime = getTime.toLocaleString('en-US', { hour12: false, hour: 'numeric', minute: 'numeric', second: 'numeric' }); 40 41 let captionText = instaPostData.caption ? instaPostData.caption : ''; 42 const tagRegex = /(#\w+)/g; 43 44 let tagUrl = 'https://www.instagram.com/explore/tags/$1'; 45 46 tagUrl = tagUrl.replace(/#/g, ''); 47 48 const wrapTag = `<span class="tag-wrapper"><a target="_blank" href="${tagUrl}">$1</a></span>`; 49 50 captionText = captionText.replace(tagRegex, wrapTag); 51 52 let carouselTemplate = ''; 53 if (instaPostData.media_type === 'CAROUSEL_ALBUM') { 54 carouselTemplate += `<div class="popup-carousel"><div class="cg-carousel__track js-carousel__track">`; 55 56 instaPostData.children.data?.map((item) => { 57 console.log(item); 58 if (item.media_type?.toLowerCase() === 'video') { 59 carouselTemplate += `<video width="630" class="popup-media-image cg-carou
59sel__slide js-carousel__slide" controls src="${item.media_url || ''}" alt="${item.caption || ''}" controlsList="nodownload"></video>`; 60 } 61 else { 62 carouselTemplate += `<img width="630" class="popup-media-image cg-carousel__slide js-carousel__slide" src="${item.media_url || ''}" alt="${item.caption || ''}" />`; 63 console.log(item); 64 } 65 }); 66 67 carouselTemplate += `</div></div>`; 68 69 carouselTemplate += `<div class="cg-carousel__btns"> 70 <button class="cg-carousel__btn js-carousel__prev-1"><svg width="20" height="30" viewBox="-5 0 23 23" xmlns="http://www.w3.org/2000/svg"><path d="M11.24.29.361 10.742l-.06.054a.97.97 0 0 0-.301.642v.124a.97.97 0 0 0 .3.642l.054.044L11.239 22.71a1.061 1.061 0 0 0 1.459 0 .964.964 0 0 0 0-1.402l-10.15-9.746 10.15-9.87a.964.964 0 0 0 0-1.402 1.061 1.061 0 0 0-1.459 0Z" fill="#fff"/></svg></button> 71 72 <button class="cg-carousel__btn js-carousel__next-1"><svg width="20" height="30" viewBox="-5 0 23 23" xmlns="http://www.w3.org/2000/svg"><path d="m1.76.29 10.879 10.452.06.054a.97.97 0 0 1 .301.642v.124a.97.97 0 0 1-.3.642l-.054.044L1.761 22.71a1.061 1.061 0 0 1-1.459 0 .964.964 0 0 1 0-1.402l10.15-9.746-10.15-9.87a.964.964 0 0 1 0-1.402 1.061 1.061 0 0 1 1.459 0Z" fill="#fff"/></svg></button> 73 </div>` 74 } 75 else { 76 if (instaPostData.media_type?.toLowerCase() === 'video') { 77 carouselTemplate += `<video width="630" class="popup-media-image" controls src="${instaPostData.media_url || ''}" alt="${instaPostData.caption || ''}"></video>`; 78 } 79 else { 80 carouselTemplate += `<img width="630" class="popup-media-image" src="${instaPostData.media_url || ''}" alt="${instaPostData.caption || ''}" />`; 81 } 82 } 83 84 85 let popupHtml = ''; 86 popupHtml += ` 87 <div class="popup-container"> 88 <div class="popup-md-9 white"> 89 <div class="embedpress-popup-block embedpress-popup-img" id="post-${instaPostData.id}"> 90 ${carouselTemplate} 91 </div> 92 </div> 93 <div class="popup-md-3 red"> 94 <div class="embedpress-popup-block embedpress-popup-info"> 95 <div class="embedpress-popup-header"> 96 <div class="embedpress-popup-header-img"> <a target="_blank" href="https://www.instagram.com/${instaPostData.username}/" 97 target="_blank" class="embedpress-href"> <img decoding="async" loading="lazy" 98 class="embedpress-popup-round" 99 src="http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=150&d=mm&r=g" 100 width="30" height="30"> <span class="embedpress-popup-username">${instaPostData.username}</span> 101 </a> 102 </div> 103 <div class="insta-followbtn"> 104 <a target="_new" href="https://www.instagram.com/${instaPostData.username}/" type="button" class="btn btn-primary">Follow</a> 105 </div> 106 </div> 107 <div class="embedpress-popup-text">${captionText}</div> 108 <div class="embedpress-popup-stats"> 109 <div class="embedpress-inline"><a target="_blank" href="${instaPostData.permalink}">${likeIcon} ${instaPostData.like_count || 0}</a></div> <div 110 class="embedpress-inline"><a target="_blank" href="${instaPostData.permalink}">${commentsIcon} ${instaPostData.comments_count || 0}</a></div><div class="embedpress-inline"> 111 <p class="embedpress-popup-share-buttons hidden"> <a 112 href="https://www.facebook.com/sharer/sharer.php?u=${instaPostData.permalink}"><span 113 class="fa fa-facebook-square shr-btn shr-btn-fcbk"></span></a> <a 114 href="https://twitter.com/home?status=${instaPostData.permalink}" 115 target="_blank"><span class="fa fa-twitter-square shr-btn"></span></a> <a 116 href="https://plus.google.com/share?url=${instaPostData.permalink}" 117 target="_blank"><span class="fa fa-google-plus-square shr-btn"></span></a> <a 118 href="https://www.linkedin.com/shareArticle?mini=true&url=${instaPostData.permalink}" 119 target="_blank"><span class="fa fa-linkedin-square shr-btn"></span></a> <a 120 href="https://pinterest.com/pin/create/button/?url=${instaPostData.permalink}" 121 target="_blank"><span class="fa fa-pinterest-square shr-btn"></span></a></p> 122 <div class="embedpress-href embedpress-popup-share">${shareIcon}</div> 123 </div><div class="embedpress-inline"><a 124 href="${instaPostData.permalink}" target="_blank" 125 class="embedpress-href">${instaIcon}</a></div> 126 </div> 127 128 </div> 129 </div> 130 </div> 131 `; 132 133 // INIT CAROUSEL 134 135 136 return popupHtml; 137 } 138 139 // Add a click event listener to the insta-gallery container 140 instaGlobals.instaPopup = (container) => { 141 container?.addEventListener('click', function (event) { 142 // Check if the clicked element has the class insta-gallery-item 143 const instaItem = event.target.closest('.insta-gallery-item'); 144 145 146 if (instaItem) { 147 148 const postData = instaItem.dataset.postdata; 149 150 const postid = instaItem.getAttribute('data-insta-postid'); 151 const postIndex = instaItem.getAttribute('data-postindex'); 152 const tkey = instaItem.parentElement.parentElement.getAttribute('data-tkey'); 153
154 console.log(event.target.closest('.source-provider-InstagramFeed')); 155 156 157 const closestPopup = event.target.closest('.source-provider-InstagramFeed').querySelector('.insta-popup'); 158 159 160 closestPopup.style.display = 'block'; 161 162 event.target.closest('.source-provider-InstagramFeed').querySelector('.popup-is-initialized').innerHTML = getPopupTemplate(postData); 163 164 if (!document.querySelector(`#post-${postid}`).classList.contains('carousel-is-initialized')) { 165 const carousel = new CgCarousel(`#post-${postid}`, { slidesPerView: 1, loop: true }, {}); 166 167 // const plyer = new Plyr(`#post-${postid} video`); 168 // console.log(plyer); 169 170 const next = document.querySelector(`#post-${postid} .js-carousel__next-1`); 171 next?.addEventListener('click', () => carousel.next()); 172 173 const prev = document.querySelector(`#post-${postid} .js-carousel__prev-1`); 174 prev?.addEventListener('click', () => carousel.prev()); 175 176 document.querySelector(`#post-${postid}`).classList.add('carousel-is-initialized'); 177 } 178 179 } 180 }); 181 } 182 183 184 const instaContainers = document.querySelectorAll('.embedpress-gutenberg-wrapper .insta-gallery'); 185 if (instaContainers.length > 0) { 186 instaContainers.forEach((container) => { 187 instaGlobals.instaPopup(container); 188 }); 189 } 190 191 $('.popup-close').click(function (e) { 192 // Hide the popup by setting display to none 193 $('.insta-popup').hide(); 194 $('.popup-container').remove(); 195 }); 196 197 198 const instafeeds = document.querySelectorAll('.source-provider-InstagramFeed'); 199 200 instaGlobals.initializeTabs = (containerEl) => { 201 202 // Initial tab selection 203 showItems('ALL'); 204 205 containerEl.addEventListener('click', function (event) { 206 const clickedElement = event.target; 207 if (!clickedElement) { 208 return; // No element clicked, ignore the event 209 } 210 211 // Handle tab click 212 if (clickedElement.matches('.tabs li')) { 213 if (clickedElement.classList.contains('active')) { 214 return; 215 } else { 216 const mediaType = clickedElement.getAttribute('data-media-type'); 217 showItems(mediaType); 218 219 const tabs = containerEl.querySelectorAll('.tabs li');
220 tabs.forEach(t => t.classList.remove('active')); 221 clickedElement.classList.add('active'); 222 } 223 } 224 225 }); 226 227 function showItems(mediaType) { 228 const items = containerEl.getElementsByClassName('insta-gallery-item'); 229 for (let i = 0; i < items.length; i++) { 230 const item = items[i]; 231 if (mediaType === 'ALL' || item.getAttribute('data-media-type') === mediaType) { 232 console.log(item.getAttribute('data-media-type')); 233 console.log(mediaType); 234 item.style.display = 'block'; 235 } else { 236 item.style.display = 'none'; 237 } 238 } 239 } 240 } 241 242 instaGlobals.instaLoadMore = () => { 243 $('.insta-load-more-button').on('click', function (e) { 244 const loadmoreBtn = $(this).closest('.load-more-button-container'); 245 const tkey = loadmoreBtn.data('loadmorekey'); 246 const connectedAccount = $(`[data-tkey="${tkey}"]`).data('connected-acc-type'); 247 const feedType = $(`[data-tkey="${tkey}"]`).data('feed-type'); 248 const hashtagId = $(`[data-tkey="${tkey}"]`).data('hashtag-id'); 249 const userId = $(`[data-tkey="${tkey}"]`).data('uid'); 250 let loadedPosts = loadmoreBtn.data('loaded-posts') || 0; 251 let postsPerPage = loadmoreBtn.data('posts-per-page') || 0; 252 253 const spinicon = `<svg class="insta-loadmore-spinicon" width="18" height="18" fill="${'#fff'}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_GuJz{transform-origin:center;animation:spinner_STY6 1.5s linear infinite}@keyframes spinner_STY6{100%{transform:rotate(360deg)}}</style><g class="spinner_GuJz"><circle cx="3" cy="12" r="2"/><circle cx="21" cy="12" r="2"/><circle cx="12" cy="21" r="2"/><circle cx="12" cy="3" r="2"/><circle cx="5.64" cy="5.64" r="2"/><circle cx="18.36" cy="18.36" r="2"/><circle cx="5.64" cy="18.36" r="2"/><circle cx="18.36" cy="5.64" r="2"/></g></svg>`; 254 255 $(this).append(spinicon); 256 257 var data = { 258 'action': 'loadmore_data_handler', 259 'insta_transient_key': tkey, 260 'loaded_posts': loadedPosts, 261 'user_id': userId, 262 'posts_per_page': postsPerPage, 263 'feed_type': feedType, 264 'connected_account_type': connectedAccount 265 }; 266 267 if (feedType === 'hashtag_type') { 268 data.hashtag_id = hashtagId; 269 } 270 271 jQuery.post(embedpressFrontendData.ajaxurl, data, function (response) { 272 if (response.total_feed_posts >= response.next_post_index) { 273 var $responseHtml = $(response.html);// 274 $(`[data-tkey="${tkey}"] .insta-gallery`).append($responseHtml); 275 $responseHtml.animate({ opacity: 1 }, 1000); 276 $('.insta-loadmore-spinicon').remove(); 277 loadedPosts = response.next_post_index; 278 loadmoreBtn.data('loaded-posts', loadedPosts); 279 280 // After loading more items, reinitialize the tabs for the specific container 281 const containerEl = loadmoreBtn.closest('.source-provider-InstagramFeed')[0]; 282 console.log(containerEl); 283 instaGlobals.initializeTabs(containerEl); 284 285 if (response.total_feed_posts == response.next_post_index) { 286 loadmoreBtn.hide(); 287 } 288 } else { 289 loadmoreBtn.hide(); 290 } 291 }); 292 }); 293 294 } 295 296 if (instafeeds.length > 0) { 297 instafeeds.forEach(function (feed) { 298 instaGlobals.initializeTabs(feed); 299 }); 300 } 301 302 instaGlobals.instaLoadMore(); 303 304 305})(jQuery); 306 307 308document.addEventListener('DOMContentLoaded', function () { 309 310 instaGlobals.initCarousel = (carouselSelector, options, carouselId) => { 311 312 const carouselOptions = { 313 slidesPerView: options.slideshow, 314 spacing: options.spacing, 315 loop: options.loop, 316 autoplay: options.autoplay, 317 transitionSpeed: options.transitionspeed, 318 autoplaySpeed: options.autoplayspeed, 319 arrows: options.arrows, 320 breakpoints: { 321 768: { 322 slidesPerView: parseInt(options.slideshow) - 1 323 }, 324 1024: { 325 slidesPerView: parseInt(options.slideshow) 326 } 327 } 328 }; 329 330 // INIT CAROUSEL 331 const carousel = new CgCarousel(carouselSelector, carouselOptions, {}); 332 333 // Navigation 334 const next = document.querySelector(`[data-carouselid="${carouselId}"] #js-carousel__next-1`); 335 next.addEventListener('click', () => carousel.next()); 336 337 const prev = document.querySelector(`[data-carouselid="${carouselId}"] #js-carousel__prev-1`); 338 prev.addEventListener('click', () => carousel.prev()); 339 } 340 341 const instaWrappers = document.querySelectorAll('.ep-embed-content-wraper'); 342 343 if (instaWrappers.length > 0) {
344 instaWrappers.forEach((wrapper) => { 345 const carouselId = wrapper.getAttribute('data-carouselid'); 346 347 if (!carouselId) return; 348 349 let options = wrapper.getAttribute(`data-carousel-options`); 350 351 options = JSON.parse(options); 352 const carouselSelector = `[data-carouselid="${carouselId}"] .embedpress-insta-container`; 353 354 if (options.arrows) { 355 document.querySelector(`[data-carouselid="${carouselId}"] .cg-carousel__btns`).classList.remove('hidden'); 356 } 357 358 instaGlobals.initCarousel(carouselSelector, options, carouselId); 359 360 }); 361 } 362 363 364 365}); 366 367 368 369jQuery(window).on("elementor/frontend/init", function () { 370 371 var filterableGalleryHandler = function ($scope, $) { 372 373 const instaWrappers = document.querySelectorAll('.ep-embed-content-wraper'); 374 375 if (instaWrappers.length > 0) { 376 instaWrappers.forEach((wrapper) => { 377 const carouselId = wrapper.getAttribute('data-carouselid'); 378 379 if (!carouselId) return; 380 381 let options = wrapper.getAttribute(`data-carousel-options`); 382 383 options = JSON.parse(options); 384 const carouselSelector = `[data-carouselid="${carouselId}"] .embedpress-insta-container`; 385 386 if (options.arrows) { 387 document.querySelector(`[data-carouselid="${carouselId}
387"] .cg-carousel__btns`).classList.remove('hidden'); 388 } 389 390 instaGlobals.initCarousel(carouselSelector, options, carouselId); 391 392 }); 393 } 394 395 const instaFeed = $scope.find('.source-provider-InstagramFeed')[0]; 396 const instaGallery = $scope.find('.insta-gallery')[0]; 397 if (instaFeed) { 398 instaGlobals.initializeTabs(instaFeed); 399 } 400 if (instaFeed) { 401 instaGlobals.instaPopup(instaFeed); 402 403 } 404 405 }; 406 elementorFrontend.hooks.addAction("frontend/element_ready/embedpres_elementor.default", filterableGalleryHandler); 407}); 408 409 410
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.