PluginProbe ʕ •ᴥ•ʔ
EmbedPress – PDF Embedder, Embed PDF viewer, YouTube Videos, 3D FlipBook, Social feeds & more / 4.4.6
EmbedPress – PDF Embedder, Embed PDF viewer, YouTube Videos, 3D FlipBook, Social feeds & more v4.4.6
4.5.6 4.5.5 4.5.4 4.5.3 4.5.2 trunk 1.0.0 1.1.0 1.1.1 1.1.2 1.1.3 1.2.0 1.3.0 1.3.1 1.4.0 1.4.1 1.4.2 1.4.3 1.4.4 1.5.0 1.6.0 1.6.1 1.6.2 1.6.3 1.7.0 1.7.1 1.7.2 1.7.3 1.7.4 1.7.5 2.0.0 2.0.1 2.0.2 2.0.3 2.1.0 2.1.1 2.1.2 2.1.3 2.1.4 2.1.5 2.1.6 2.2.0 2.2.1 2.2.2 2.3.0 2.3.1 2.3.2 2.3.3 2.4.0 2.4.1 2.5.0 2.5.1 2.5.2 2.5.3 2.5.4 2.5.5 2.6.0 2.6.1 2.6.2 2.7.0 2.7.1 2.7.2 2.7.3 2.7.4 2.7.5 2.7.6 2.7.7 3.0.0 3.0.1 3.0.2 3.0.3 3.0.4 3.1.0 3.1.1 3.1.2 3.1.3 3.2.0 3.2.1 3.3.0 3.3.1 3.3.2 3.3.3 3.3.4 3.3.5 3.3.6 3.3.7 3.4.0 3.4.1 3.4.2 3.4.3 3.5.0 3.5.1 3.5.2 3.5.3 3.6.0 3.6.1 3.6.2 3.6.3 3.6.4 3.6.5 3.6.6 3.6.7 3.6.8 3.7.0 3.7.1 3.7.2 3.7.3 3.8.0 3.8.1 3.8.2 3.8.3 3.8.4 3.8.5 3.9.0 3.9.1 3.9.10 3.9.11 3.9.12 3.9.13 3.9.14 3.9.15 3.9.16 3.9.17 3.9.2 3.9.3 3.9.4 3.9.5 3.9.6 3.9.7 3.9.8 3.9.9 4.0.0 4.0.1 4.0.10 4.0.11 4.0.12 4.0.13 4.0.14 4.0.2 4.0.3 4.0.4 4.0.5 4.0.6 4.0.7 4.0.8 4.0.9 4.1.0 4.1.1 4.1.10 4.1.2 4.1.3 4.1.4 4.1.5 4.1.6 4.1.7 4.1.8 4.1.9 4.2.0 4.2.1 4.2.2 4.2.3 4.2.4 4.2.5 4.2.6 4.2.7 4.2.8 4.2.9 4.3.0 4.3.1 4.4.0 4.4.1 4.4.10 4.4.11 4.4.2 4.4.3 4.4.4 4.4.5 4.4.6 4.4.7 4.4.8 4.4.9 4.5.0 4.5.1
embedpress / assets / js / instafeed.js
embedpress / assets / js Last commit date
chunks 7 months ago vendor 8 months ago admin.build.js 7 months ago admin.js 9 months ago analytics-tracker.js 9 months ago analytics.build.js 7 months ago blocks.build.js 7 months ago carousel.js 1 year ago documents-viewer-script.js 3 years ago feature-notices.js 7 months ago front.js 7 months ago frontend.build.js 9 months ago gallery-justify.js 9 months ago gutneberg-script.js 1 year ago index.html 7 years ago initCarousel.js 2 years ago initplyr.js 8 months ago instafeed.js 7 months ago license.js 7 months ago preview.js 8 months ago settings.js 7 months ago sponsored.js 9 months ago
instafeed.js
406 lines
1 /**
2 * @package EmbedPress
3 * @author EmbedPress <help@embedpress.com>
4 * @copyright Copyright (C) 2023 EmbedPress. All rights reserved.
5 * @license GPLv2 or later
6 * @since 1.7.0
7 */
8
9
10
11 let 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 if (item.media_type?.toLowerCase() === 'video') {
58 carouselTemplate += `<video width="630" class="popup-media-image cg-carousel__slide js-carousel__slide" controls src="${item.media_url || ''}" alt="${item.caption || ''}" controlsList="nodownload"></video>`;
59 }
60 else {
61 carouselTemplate += `<img width="630" class="popup-media-image cg-carousel__slide js-carousel__slide" src="${item.media_url || ''}" alt="${item.caption || ''}" />`;
62 }
63 });
64
65 carouselTemplate += `</div></div>`;
66
67 carouselTemplate += `<div class="cg-carousel__btns">
68 <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>
69
70 <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>
71 </div>`
72 }
73 else {
74 if (instaPostData.media_type?.toLowerCase() === 'video') {
75 carouselTemplate += `<video width="630" class="popup-media-image" controls src="${instaPostData.media_url || ''}" alt="${instaPostData.caption || ''}"></video>`;
76 }
77 else {
78 carouselTemplate += `<img width="630" class="popup-media-image" src="${instaPostData.media_url || ''}" alt="${instaPostData.caption || ''}" />`;
79 }
80 }
81
82
83 let popupHtml = '';
84 popupHtml += `
85 <div class="popup-container">
86 <div class="popup-md-9 white">
87 <div class="embedpress-popup-block embedpress-popup-img" id="post-${instaPostData.id}">
88 ${carouselTemplate}
89 </div>
90 </div>
91 <div class="popup-md-3 red">
92 <div class="embedpress-popup-block embedpress-popup-info">
93 <div class="embedpress-popup-header">
94 <div class="embedpress-popup-header-img"> <a target="_blank" href="https://www.instagram.com/${instaPostData.username}/"
95 target="_blank" class="embedpress-href"> <img decoding="async" loading="lazy"
96 class="embedpress-popup-round"
97 src="http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=150&d=mm&r=g"
98 width="30" height="30"> <span class="embedpress-popup-username">${instaPostData.username}</span>
99 </a>
100 </div>
101 <div class="insta-followbtn">
102 <a target="_new" href="https://www.instagram.com/${instaPostData.username}/" type="button" class="btn btn-primary">Follow</a>
103 </div>
104 </div>
105 <div class="embedpress-popup-text">${captionText}</div>
106 <div class="embedpress-popup-stats">
107 <div class="embedpress-inline"><a target="_blank" href="${instaPostData.permalink}">${likeIcon} ${instaPostData.like_count || 0}</a></div> <div
108 class="embedpress-inline"><a target="_blank" href="${instaPostData.permalink}">${commentsIcon} ${instaPostData.comments_count || 0}</a></div><div class="embedpress-inline">
109 <p class="embedpress-popup-share-buttons hidden"> <a
110 href="https://www.facebook.com/sharer/sharer.php?u=${instaPostData.permalink}"><span
111 class="fa fa-facebook-square shr-btn shr-btn-fcbk"></span></a> <a
112 href="https://twitter.com/home?status=${instaPostData.permalink}"
113 target="_blank"><span class="fa fa-twitter-square shr-btn"></span></a> <a
114 href="https://plus.google.com/share?url=${instaPostData.permalink}"
115 target="_blank"><span class="fa fa-google-plus-square shr-btn"></span></a> <a
116 href="https://www.linkedin.com/shareArticle?mini=true&amp;url=${instaPostData.permalink}"
117 target="_blank"><span class="fa fa-linkedin-square shr-btn"></span></a> <a
118 href="https://pinterest.com/pin/create/button/?url=${instaPostData.permalink}"
119 target="_blank"><span class="fa fa-pinterest-square shr-btn"></span></a></p>
120 <div class="embedpress-href embedpress-popup-share">${shareIcon}</div>
121 </div><div class="embedpress-inline"><a
122 href="${instaPostData.permalink}" target="_blank"
123 class="embedpress-href">${instaIcon}</a></div>
124 </div>
125
126 </div>
127 </div>
128 </div>
129 `;
130
131 // INIT CAROUSEL
132
133
134 return popupHtml;
135 }
136
137 // Add a click event listener to the insta-gallery container
138 instaGlobals.instaPopup = (container) => {
139 container?.addEventListener('click', function (event) {
140 // Check if the clicked element has the class insta-gallery-item
141 const instaItem = event.target.closest('.insta-gallery-item');
142
143
144 if (instaItem) {
145
146 const postData = instaItem.dataset.postdata;
147
148 const postid = instaItem.getAttribute('data-insta-postid');
149 const postIndex = instaItem.getAttribute('data-postindex');
150 const tkey = instaItem.parentElement.parentElement.getAttribute('data-tkey');
151
152
153 const closestPopup = event.target.closest('.source-provider-InstagramFeed').querySelector('.insta-popup');
154
155
156 closestPopup.style.display = 'block';
157
158 event.target.closest('.source-provider-InstagramFeed').querySelector('.popup-is-initialized').innerHTML = getPopupTemplate(postData);
159
160 if (!document.querySelector(`#post-${postid}`).classList.contains('carousel-is-initialized')) {
161 const carousel = new CgCarousel(`#post-${postid}`, { slidesPerView: 1, loop: true }, {});
162
163 // const plyer = new Plyr(`#post-${postid} video`);
164
165 const next = document.querySelector(`#post-${postid} .js-carousel__next-1`);
166 next?.addEventListener('click', () => carousel.next());
167
168 const prev = document.querySelector(`#post-${postid} .js-carousel__prev-1`);
169 prev?.addEventListener('click', () => carousel.prev());
170
171 document.querySelector(`#post-${postid}`).classList.add('carousel-is-initialized');
172 }
173
174 }
175 });
176 }
177
178
179 const instaContainers = document.querySelectorAll('.embedpress-gutenberg-wrapper .insta-gallery');
180 if (instaContainers.length > 0) {
181 instaContainers.forEach((container) => {
182 instaGlobals.instaPopup(container);
183 });
184 }
185
186 $('.popup-close').click(function (e) {
187 // Hide the popup by setting display to none
188 $('.insta-popup').hide();
189 $('.popup-container').remove();
190 });
191
192
193 const instafeeds = document.querySelectorAll('.source-provider-InstagramFeed');
194
195 instaGlobals.initializeTabs = (containerEl) => {
196
197 // Initial tab selection
198 showItems('ALL');
199
200 containerEl.addEventListener('click', function (event) {
201 const clickedElement = event.target;
202 if (!clickedElement) {
203 return; // No element clicked, ignore the event
204 }
205
206 // Handle tab click
207 if (clickedElement.matches('.tabs li')) {
208 if (clickedElement.classList.contains('active')) {
209 return;
210 } else {
211 const mediaType = clickedElement.getAttribute('data-media-type');
212 showItems(mediaType);
213
214 const tabs = containerEl.querySelectorAll('.tabs li');
215 tabs.forEach(t => t.classList.remove('active'));
216 clickedElement.classList.add('active');
217 }
218 }
219
220 });
221
222 function showItems(mediaType) {
223 const items = containerEl.getElementsByClassName('insta-gallery-item');
224 for (let i = 0; i < items.length; i++) {
225 const item = items[i];
226 if (mediaType === 'ALL' || item.getAttribute('data-media-type') === mediaType) {
227 item.style.display = 'block';
228 } else {
229 item.style.display = 'none';
230 }
231 }
232 }
233 }
234
235 instaGlobals.instaLoadMore = () => {
236 $('.insta-load-more-button').on('click', function (e) {
237 const loadmoreBtn = $(this).closest('.load-more-button-container');
238 const tkey = loadmoreBtn.data('loadmorekey');
239 const connectedAccount = $(`[data-tkey="${tkey}"]`).data('connected-acc-type');
240 const feedType = $(`[data-tkey="${tkey}"]`).data('feed-type');
241 const hashtagId = $(`[data-tkey="${tkey}"]`).data('hashtag-id');
242 const userId = $(`[data-tkey="${tkey}"]`).data('uid');
243 let loadedPosts = loadmoreBtn.data('loaded-posts') || 0;
244 let postsPerPage = loadmoreBtn.data('posts-per-page') || 0;
245
246 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>`;
247
248 $(this).append(spinicon);
249
250 var data = {
251 'action': 'loadmore_data_handler',
252 'insta_transient_key': tkey,
253 'loaded_posts': loadedPosts,
254 'user_id': userId,
255 'posts_per_page': postsPerPage,
256 'feed_type': feedType,
257 'connected_account_type': connectedAccount
258 };
259
260 if (feedType === 'hashtag_type') {
261 data.hashtag_id = hashtagId;
262 }
263
264 jQuery.post(embedpressFrontendData.ajaxurl, data, function (response) {
265 if (response.total_feed_posts >= response.next_post_index) {
266 var $responseHtml = $(response.html);//
267 $(`[data-tkey="${tkey}"] .insta-gallery`).append($responseHtml);
268 $responseHtml.animate({ opacity: 1 }, 1000);
269 $('.insta-loadmore-spinicon').remove();
270 loadedPosts = response.next_post_index;
271 loadmoreBtn.data('loaded-posts', loadedPosts);
272
273 // After loading more items, reinitialize the tabs for the specific container
274 const containerEl = loadmoreBtn.closest('.source-provider-InstagramFeed')[0];
275 instaGlobals.initializeTabs(containerEl);
276
277 if (response.total_feed_posts == response.next_post_index) {
278 loadmoreBtn.hide();
279 }
280 } else {
281 loadmoreBtn.hide();
282 }
283 });
284 });
285
286 }
287
288 if (instafeeds.length > 0) {
289 instafeeds.forEach(function (feed) {
290 instaGlobals.initializeTabs(feed);
291 });
292 }
293
294 instaGlobals.instaLoadMore();
295
296
297 })(jQuery);
298
299
300 document.addEventListener('DOMContentLoaded', function () {
301
302 instaGlobals.initCarousel = (carouselSelector, options, carouselId) => {
303
304 const carouselOptions = {
305 slidesPerView: options.slideshow,
306 spacing: options.spacing,
307 loop: options.loop,
308 autoplay: options.autoplay,
309 transitionSpeed: options.transitionspeed,
310 autoplaySpeed: options.autoplayspeed,
311 arrows: options.arrows,
312 breakpoints: {
313 0: {
314 slidesPerView: 1
315 },
316 768: {
317 slidesPerView: Math.max(1, parseInt(options.slideshow, 10) - 1)
318 },
319 1024: {
320 slidesPerView: Math.max(1, parseInt(options.slideshow, 10))
321 }
322 }
323 };
324
325 // INIT CAROUSEL
326 const carousel = new CgCarousel(carouselSelector, carouselOptions, {});
327
328 // Navigation
329 const next = document.querySelector(`[data-carouselid="${carouselId}"] #js-carousel__next-1`);
330 next.addEventListener('click', () => carousel.next());
331
332 const prev = document.querySelector(`[data-carouselid="${carouselId}"] #js-carousel__prev-1`);
333 prev.addEventListener('click', () => carousel.prev());
334 }
335
336 const instaWrappers = document.querySelectorAll('.ep-embed-content-wraper');
337
338 if (instaWrappers.length > 0) {
339 instaWrappers.forEach((wrapper) => {
340 const carouselId = wrapper.getAttribute('data-carouselid');
341
342 if (!carouselId) return;
343
344 let options = wrapper.getAttribute(`data-carousel-options`);
345
346 options = JSON.parse(options);
347 const carouselSelector = `[data-carouselid="${carouselId}"] .embedpress-insta-container`;
348
349 if (options.arrows) {
350 document.querySelector(`[data-carouselid="${carouselId}"] .cg-carousel__btns`).classList.remove('hidden');
351 }
352
353 instaGlobals.initCarousel(carouselSelector, options, carouselId);
354
355 });
356 }
357
358
359
360 });
361
362
363
364 jQuery(window).on("elementor/frontend/init", function () {
365
366 var filterableGalleryHandler = function ($scope, $) {
367
368 const instaWrappers = document.querySelectorAll('.ep-embed-content-wraper');
369
370 if (instaWrappers.length > 0) {
371 instaWrappers.forEach((wrapper) => {
372 const carouselId = wrapper.getAttribute('data-carouselid');
373
374 if (!carouselId) return;
375
376 let options = wrapper.getAttribute(`data-carousel-options`);
377
378 options = JSON.parse(options);
379 const carouselSelector = `[data-carouselid="${carouselId}"] .embedpress-insta-container`;
380
381 if (options.arrows) {
382 document.querySelector(`[data-carouselid="${carouselId}"] .cg-carousel__btns`).classList.remove('hidden');
383 }
384
385 instaGlobals.initCarousel(carouselSelector, options, carouselId);
386
387 });
388 }
389
390 const instaFeed = $scope.find('.source-provider-InstagramFeed')[0];
391 const instaGallery = $scope.find('.insta-gallery')[0];
392 if (instaFeed) {
393 instaGlobals.initializeTabs(instaFeed);
394 }
395 if (instaFeed) {
396 instaGlobals.instaPopup(instaFeed);
397
398 }
399
400 };
401 elementorFrontend.hooks.addAction("frontend/element_ready/embedpres_elementor.default", filterableGalleryHandler);
402 });
403
404
405
406