PluginProbe ʕ •ᴥ•ʔ
EmbedPress – PDF Embedder, Embed PDF viewer, YouTube Videos, 3D FlipBook, Social feeds & more / 4.2.7
EmbedPress – PDF Embedder, Embed PDF viewer, YouTube Videos, 3D FlipBook, Social feeds & more v4.2.7
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
vendor 7 years ago admin.js 1 year ago ads.js 1 year ago carousel.js 1 year ago carousel.min.js 2 years ago documents-viewer-script.js 3 years ago embed-ui.min.js 1 year ago front.js 1 year ago gallery-justify.js 1 year ago glider.js 1 year ago glider.min.js 2 years ago gutneberg-script.js 1 year ago index.html 7 years ago initCarousel.js 2 years ago initplyr.js 2 years ago instafeed.js 2 years ago license.js 2 years ago pdfobject.js 1 year ago plyr.js 1 year ago plyr.polyfilled.js 3 years ago preview.js 3 years ago settings.js 6 years ago vimeo-player.js 2 years ago ytiframeapi.js 2 years ago
instafeed.js
405 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 if (instaItem) {
146
147 const postData = instaItem.dataset.postdata;
148
149 const postid = instaItem.getAttribute('data-insta-postid');
150 const postIndex = instaItem.getAttribute('data-postindex');
151 const tkey = instaItem.parentElement.parentElement.getAttribute('data-tkey');
152
153 const closestPopup = event.target.closest('.ose-instagram-feed').querySelector('.insta-popup');
154 closestPopup.style.display = 'block';
155
156 event.target.closest('.ose-instagram-feed').querySelector('.popup-is-initialized').innerHTML = getPopupTemplate(postData);
157
158 if (!document.querySelector(`#post-${postid}`).classList.contains('carousel-is-initialized')) {
159 const carousel = new CgCarousel(`#post-${postid}`, { slidesPerView: 1, loop: true }, {});
160
161 // const plyer = new Plyr(`#post-${postid} video`);
162 // console.log(plyer);
163
164 const next = document.querySelector(`#post-${postid} .js-carousel__next-1`);
165 next?.addEventListener('click', () => carousel.next());
166
167 const prev = document.querySelector(`#post-${postid} .js-carousel__prev-1`);
168 prev?.addEventListener('click', () => carousel.prev());
169
170 document.querySelector(`#post-${postid}`).classList.add('carousel-is-initialized');
171 }
172
173 }
174 });
175 }
176
177
178 const instaContainers = document.querySelectorAll('.embedpress-gutenberg-wrapper .insta-gallery');
179 if (instaContainers.length > 0) {
180 instaContainers.forEach((container) => {
181 instaGlobals.instaPopup(container);
182 });
183 }
184
185 $('.popup-close').click(function (e) {
186 // Hide the popup by setting display to none
187 $('.insta-popup').hide();
188 $('.popup-container').remove();
189 });
190
191
192 const instafeeds = document.querySelectorAll('.ose-instagram-feed');
193
194 instaGlobals.initializeTabs = (containerEl) => {
195
196 // Initial tab selection
197 showItems('ALL');
198
199 containerEl.addEventListener('click', function (event) {
200 const clickedElement = event.target;
201 if (!clickedElement) {
202 return; // No element clicked, ignore the event
203 }
204
205 // Handle tab click
206 if (clickedElement.matches('.tabs li')) {
207 if (clickedElement.classList.contains('active')) {
208 return;
209 } else {
210 const mediaType = clickedElement.getAttribute('data-media-type');
211 showItems(mediaType);
212
213 const tabs = containerEl.querySelectorAll('.tabs li');
214 tabs.forEach(t => t.classList.remove('active'));
215 clickedElement.classList.add('active');
216 }
217 }
218
219 });
220
221 function showItems(mediaType) {
222 const items = containerEl.getElementsByClassName('insta-gallery-item');
223 for (let i = 0; i < items.length; i++) {
224 const item = items[i];
225 if (mediaType === 'ALL' || item.getAttribute('data-media-type') === mediaType) {
226 console.log(item.getAttribute('data-media-type'));
227 console.log(mediaType);
228 item.style.display = 'block';
229 } else {
230 item.style.display = 'none';
231 }
232 }
233 }
234 }
235
236 instaGlobals.instaLoadMore = () => {
237 $('.insta-load-more-button').on('click', function (e) {
238 const loadmoreBtn = $(this).closest('.load-more-button-container');
239 const tkey = loadmoreBtn.data('loadmorekey');
240 const connectedAccount = $(`[data-tkey="${tkey}"]`).data('connected-acc-type');
241 const feedType = $(`[data-tkey="${tkey}"]`).data('feed-type');
242 const hashtagId = $(`[data-tkey="${tkey}"]`).data('hashtag-id');
243 const userId = $(`[data-tkey="${tkey}"]`).data('uid');
244 let loadedPosts = loadmoreBtn.data('loaded-posts') || 0;
245 let postsPerPage = loadmoreBtn.data('posts-per-page') || 0;
246
247 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>`;
248
249 $(this).append(spinicon);
250
251 var data = {
252 'action': 'loadmore_data_handler',
253 'insta_transient_key': tkey,
254 'loaded_posts': loadedPosts,
255 'user_id': userId,
256 'posts_per_page': postsPerPage,
257 'feed_type': feedType,
258 'connected_account_type': connectedAccount
259 };
260
261 if (feedType === 'hashtag_type') {
262 data.hashtag_id = hashtagId;
263 }
264
265 jQuery.post(eplocalize.ajaxurl, data, function (response) {
266 if (response.total_feed_posts >= response.next_post_index) {
267 var $responseHtml = $(response.html);//
268 $(`[data-tkey="${tkey}"] .insta-gallery`).append($responseHtml);
269 $responseHtml.animate({ opacity: 1 }, 1000);
270 $('.insta-loadmore-spinicon').remove();
271 loadedPosts = response.next_post_index;
272 loadmoreBtn.data('loaded-posts', loadedPosts);
273
274 // After loading more items, reinitialize the tabs for the specific container
275 const containerEl = loadmoreBtn.closest('.ose-instagram-feed')[0];
276 console.log(containerEl);
277 instaGlobals.initializeTabs(containerEl);
278
279 if (response.total_feed_posts == response.next_post_index) {
280 loadmoreBtn.hide();
281 }
282 } else {
283 loadmoreBtn.hide();
284 }
285 });
286 });
287
288 }
289
290 if (instafeeds.length > 0) {
291 instafeeds.forEach(function (feed) {
292 instaGlobals.initializeTabs(feed);
293 });
294 }
295
296 instaGlobals.instaLoadMore();
297
298
299 })(jQuery);
300
301
302 document.addEventListener('DOMContentLoaded', function () {
303
304 instaGlobals.initCarousel = (carouselSelector, options, carouselId) => {
305
306 const carouselOptions = {
307 slidesPerView: options.slideshow,
308 spacing: options.spacing,
309 loop: options.loop,
310 autoplay: options.autoplay,
311 transitionSpeed: options.transitionspeed,
312 autoplaySpeed: options.autoplayspeed,
313 arrows: options.arrows,
314 breakpoints: {
315 768: {
316 slidesPerView: parseInt(options.slideshow) - 1
317 },
318 1024: {
319 slidesPerView: parseInt(options.slideshow)
320 }
321 }
322 };
323
324 // INIT CAROUSEL
325 const carousel = new CgCarousel(carouselSelector, carouselOptions, {});
326
327 // Navigation
328 const next = document.querySelector(`[data-carouselid="${carouselId}"] #js-carousel__next-1`);
329 next.addEventListener('click', () => carousel.next());
330
331 const prev = document.querySelector(`[data-carouselid="${carouselId}"] #js-carousel__prev-1`);
332 prev.addEventListener('click', () => carousel.prev());
333 }
334
335 const instaWrappers = document.querySelectorAll('.ep-embed-content-wraper');
336
337 if (instaWrappers.length > 0) {
338 instaWrappers.forEach((wrapper) => {
339 const carouselId = wrapper.getAttribute('data-carouselid');
340
341 if (!carouselId) return;
342
343 let options = wrapper.getAttribute(`data-carousel-options`);
344
345 options = JSON.parse(options);
346 const carouselSelector = `[data-carouselid="${carouselId}"] .embedpress-insta-container`;
347
348 if (options.arrows) {
349 document.querySelector(`[data-carouselid="${carouselId}"] .cg-carousel__btns`).classList.remove('hidden');
350 }
351
352 instaGlobals.initCarousel(carouselSelector, options, carouselId);
353
354 });
355 }
356
357
358
359 });
360
361
362
363 jQuery(window).on("elementor/frontend/init", function () {
364
365 var filterableGalleryHandler = function ($scope, $) {
366
367 const instaWrappers = document.querySelectorAll('.ep-embed-content-wraper');
368
369 if (instaWrappers.length > 0) {
370 instaWrappers.forEach((wrapper) => {
371 const carouselId = wrapper.getAttribute('data-carouselid');
372
373 if (!carouselId) return;
374
375 let options = wrapper.getAttribute(`data-carousel-options`);
376
377 options = JSON.parse(options);
378 const carouselSelector = `[data-carouselid="${carouselId}"] .embedpress-insta-container`;
379
380 if (options.arrows) {
381 document.querySelector(`[data-carouselid="${carouselId}"] .cg-carousel__btns`).classList.remove('hidden');
382 }
383
384 instaGlobals.initCarousel(carouselSelector, options, carouselId);
385
386 });
387 }
388
389 const instaFeed = document.querySelector(`${selectorEl} .ose-instagram-feed`);
390 const instaGallery = document.querySelector(`${selectorEl} .insta-gallery`);
391 if (instaFeed) {
392 instaGlobals.initializeTabs(instaFeed);
393 }
394 if (instaFeed) {
395 instaGlobals.instaPopup(instaFeed);
396
397 }
398
399 };
400 elementorFrontend.hooks.addAction("frontend/element_ready/embedpres_elementor.default", filterableGalleryHandler);
401 });
402
403
404
405