PluginProbe ʕ •ᴥ•ʔ
EmbedPress – PDF Embedder, Embed PDF viewer, YouTube Videos, 3D FlipBook, Social feeds & more / 4.4.3
EmbedPress – PDF Embedder, Embed PDF viewer, YouTube Videos, 3D FlipBook, Social feeds & more v4.4.3
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 9 months ago vendor 8 months ago admin.build.js 9 months ago admin.js 9 months ago analytics-tracker.js 9 months ago analytics.build.js 8 months ago blocks.build.js 8 months ago carousel.js 1 year ago documents-viewer-script.js 3 years ago front.js 9 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 9 months ago license.js 9 months ago preview.js 8 months ago settings.js 9 months ago sponsored.js 9 months ago
instafeed.js
411 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 console.log(item);
58 if (item.media_type?.toLowerCase() === 'video') {
59 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>`;
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&amp;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
308 document.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
369 jQuery(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}"] .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
411