PluginProbe
Photonic Gallery & Lightbox for Flickr, SmugMug & Others / 2.29
Photonic Gallery & Lightbox for Flickr, SmugMug & Others v2.29
3.36 3.35 3.34 3.33 2.19 2.20 2.21 2.22 2.23 2.24 2.25 2.26 2.27 2.28 2.29 2.30 2.31 2.32 2.33 2.34 2.40 2.41 2.42 2.43 2.44 All 141 releases
photonic / include / scripts / front-end / src / core / core.js

core.js in Photonic Gallery & Lightbox for Flickr, SmugMug & Others 2.29, at include/scripts/front-end/src/core/core.js

495 lines 18.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * photonic.js - Contains all custom JavaScript functions required by Photonic
3 */
4 var deep = location.hash, lastDeep, supportsSVG = !! document.createElementNS && !! document.createElementNS( 'http://www.w3.org/2000/svg', 'svg').createSVGRect;
5 var photonicLightbox;
6 var photonicLightboxList = {};
7 var photonicPrompterList = {};
8
9 if (!String.prototype.includes) {
10 String.prototype.includes = function(search, start) {
11 'use strict';
12 if (typeof start !== 'number') {
13 start = 0;
14 }
15
16 if (start + search.length > this.length) {
17 return false;
18 } else {
19 return this.indexOf(search, start) !== -1;
20 }
21 };
22 }
23
24 window.photonicHtmlDecode = function(value){
25 return $('<div/>').html(value).text();
26 };
27
28 window.photonicShowLoading = function() {
29 var loading = $('.photonic-loading');
30 if (loading.length > 0) {
31 loading = loading[0];
32 }
33 else {
34 loading = document.createElement('div');
35 }
36 loading.className = 'photonic-loading';
37 $(loading).appendTo($('body')).show();
38 };
39
40 window.photonicInitializePasswordPrompter = function(selector) {
41 var selectorNoHash = selector.replace(/^#+/g, '');
42 var prompter = new Modalise(selectorNoHash).attach();
43 photonicPrompterList[selector] = prompter;
44 prompter.show();
45 };
46
47 window.photonicDisplayLevel2 = function(provider, type, args) {
48 var identifier = args['panel_id'].substr(('photonic-' + provider + '-' + type + '-thumb-').length);
49 var panel = '#photonic-' + provider + '-panel-' + identifier;
50
51 if ($(panel).length === 0) {
52 if ($('#' + args['panel_id']).hasClass('photonic-' + provider + '-passworded')) {
53 var prompter = '#photonic-' + provider + '-' + type + '-prompter-' + identifier;
54 photonicInitializePasswordPrompter(prompter);
55 }
56 else {
57 photonicShowLoading();
58 photonicProcessRequest(provider, type, identifier, args);
59 }
60 }
61 else {
62 photonicShowLoading();
63 photonicRedisplayPopupContents(provider, identifier, panel, args);
64 }
65 };
66
67 window.photonicProcessRequest = function(provider, type, identifier, args) {
68 args['action'] = 'photonic_display_level_2_contents';
69 $.post(Photonic_JS.ajaxurl, args, function(data) {
70 if (data.substr(0, Photonic_JS.password_failed.length) === Photonic_JS.password_failed) {
71 $('.photonic-loading').hide();
72 var prompter = '#photonic-' + provider + '-' + type + '-prompter-' + identifier;
73 var prompterDialog = photonicPrompterList[prompter];
74 if (prompterDialog !== undefined && prompterDialog !== null) {
75 prompterDialog.show();
76 }
77 }
78 else {
79 if ('show' === args['popup']) {
80 photonicDisplayPopup(data, provider, type, identifier);
81 }
82 else {
83 if (data !== '') {
84 photonicBypassPopup(data);
85 }
86 else {
87 $('.photonic-loading').hide();
88 }
89 }
90 }
91 });
92 };
93
94 window.photonicProcessL3Request = function(clicked, container, args) {
95 args['action'] = 'photonic_display_level_3_contents';
96 photonicShowLoading();
97 $.post(Photonic_JS.ajaxurl, args, function(data){
98 var insert = $(data);
99 insert.insertAfter($(container));
100 var layout = insert.find('.photonic-level-2-container');
101 if (layout.hasClass('photonic-random-layout')) {
102 photonicJustifiedGridLayout(false);
103 }
104 else if (layout.hasClass('photonic-mosaic-layout')) {
105 photonicMosaicLayout(false);
106 }
107 else if (layout.hasClass('photonic-masonry-layout')) {
108 photonicMasonryLayout(false);
109 }
110 insert.find('.photonic-level-2').css({'display': 'inline-block'});
111 if (!$.fn.tooltip) {
112 photonicTooltip('[data-photonic-tooltip]', '.photonic-tooltip-container');
113 }
114 $('.photonic-loading').hide();
115 clicked.removeClass('photonic-level-3-expand-plus').addClass('photonic-level-3-expand-up').attr('title', Photonic_JS.minimize_panel === undefined ? 'Hide' : Photonic_JS.minimize_panel);
116 });
117 };
118
119 window.photonicLazyLoad = function() {
120 photonicShowLoading();
121 var clicked = this;
122 var shortcode = clicked.getAttribute('data-photonic-shortcode');
123 var args = {
124 'action' : 'photonic_lazy_load',
125 'shortcode': shortcode
126 };
127
128 $.post(Photonic_JS.ajaxurl, args, function(data) {
129 var div = document.createElement('div');
130 div.innerHTML = data;
131 div = div.firstChild;
132 var divId = div.getAttribute('id');
133 var divClass = divId.substring(0, divId.lastIndexOf('-'));
134
135 var streams = document.documentElement.querySelectorAll('.' + divClass);
136 var max = 0;
137 Array.prototype.forEach.call(streams, function(stream) {
138 var streamId = stream.getAttribute('id');
139 streamId = streamId.substring(streamId.lastIndexOf('-') + 1);
140 streamId = parseInt(streamId, 10);
141 max = Math.max(max, streamId);
142 });
143 max = max + 1;
144 var regex = new RegExp(divId, 'gi');
145 div.innerHTML = data.replace(regex, divClass + '-' + max)
146 .replace('photonic-slideshow-' + divId.substring(divId.lastIndexOf('-') + 1), 'photonic-slideshow-' + max);
147 div = div.firstChild;
148 clicked.insertAdjacentElement('afterend', div);
149
150 var newDivId = divClass + '-' + max;
151
152 photonicJustifiedGridLayout(false, '#' + newDivId + ' .photonic-random-layout');
153 photonicMasonryLayout(false, '#' + newDivId + ' .photonic-masonry-layout');
154 photonicMosaicLayout(false, '#' + newDivId + ' .photonic-mosaic-layout');
155 photonicSetupSlider(max, '#photonic-slideshow-' + max);
156
157
158 var standard = document.documentElement.querySelectorAll('#' + newDivId + ' .photonic-standard-layout .photonic-level-1, ' + '#' + newDivId + ' .photonic-standard-layout .photonic-level-2');
159 Array.prototype.forEach.call(standard, function(image) {
160 image.style.display = 'inline-block';
161 });
162
163
164 clicked.parentNode.removeChild(clicked);
165
166 $('.photonic-loading').hide();
167 });
168 };
169
170 window.photonicMoveHTML5External = function() {
171 var $videos = $('#photonic-html5-external-videos');
172 $videos = $videos.length ? $videos : $('<div style="display:none;" id="photonic-html5-external-videos"></div>').appendTo(document.body);
173 $('.photonic-html5-external').each(function() {
174 $(this).removeClass('photonic-html5-external').appendTo($videos);
175 });
176 };
177 photonicMoveHTML5External();
178
179 window.photonicSetupSlider = function(index, value) {
180 var $slideshow = $(value);
181 var slideAdjustment = Photonic_JS.slide_adjustment === undefined ? 'adapt-height-width' : Photonic_JS.slide_adjustment;
182 var fadeMode = $slideshow.data('photonicFx') === 'fade' && ($slideshow.data('photonicLayout') === 'strip-below') &&
183 ($slideshow.data('photonicColumns') === 'auto' || $slideshow.data('photonicColumns') === '');
184
185 var itemCount = ($slideshow.data('photonicColumns') === 'auto' || $slideshow.data('photonicColumns') === '' || isNaN(parseInt($slideshow.data('photonicColumns')))) ? 1 : parseInt($slideshow.data('photonicColumns'));
186 $slideshow.waitForImages(function() {
187 $slideshow.lightSlider({
188 gallery: $slideshow.data('photonicLayout') !== 'no-strip' && $slideshow.data('photonicStripStyle') === 'thumbs',
189 pager: $slideshow.data('photonicLayout') !== 'no-strip',
190 vertical: $slideshow.data('photonicLayout') === 'strip-right' || $slideshow.data('photonicLayout') === 'strip-left',
191 item: itemCount,
192 auto: Photonic_JS.slideshow_autostart,
193 loop: true,
194 currentPagerPosition: 'middle',
195 mode: fadeMode ? 'fade' : 'slide',
196 speed: $slideshow.data('photonicSpeed'),
197 pauseOnHover: $slideshow.data('photonicPause'),
198 pause: $slideshow.data('photonicTimeout'),
199 adaptiveHeight: slideAdjustment === 'adapt-height' || slideAdjustment === 'adapt-height-width',
200 autoWidth: slideAdjustment === 'start-next',
201 controls: $slideshow.data('photonicControls') === 'show',
202 responsive : [
203 {
204 breakpoint:800,
205 settings: {
206 item: itemCount !== 1 ? 2 : 1,
207 slideMove: 1
208 }
209 },
210 {
211 breakpoint:480,
212 settings: {
213 item: 1,
214 slideMove: 1
215 }
216 }
217 ],
218 onSliderLoad: function(el) {
219 // photonicLightbox.initializeForSlideshow('#' + $slideshow.attr('id'), el);
220 }
221 });
222
223 var layout = $slideshow.attr('data-photonic-layout');
224 if (layout === 'strip-above') {
225 var gallery = $slideshow.parents('.lSSlideOuter');
226 gallery.find('.lSGallery').insertBefore(gallery.find('.lSSlideWrapper'));
227 }
228 });
229 };
230
231 if ($.fn.lightSlider !== undefined) {
232 $('ul.photonic-slideshow-content').each(photonicSetupSlider);
233 }
234 else if (console !== undefined && $('ul.photonic-slideshow-content').length > 0) {
235 console.error('LightSlider not found! Please ensure that the LightSlider script is available and loaded before Photonic.');
236 }
237
238 $(document).on('click', '.photonic-level-2-thumb', function(e){
239 e.preventDefault();
240 var $clicked = $(this);
241 var provider = $clicked.data('photonicProvider');
242 var singular = $clicked.data('photonicSingular');
243 var args = {"panel_id": $clicked.attr('id'), "popup": $clicked.data('photonicPopup'), "photo_count": $clicked.data('photonicPhotoCount'), "photo_more": $clicked.data('photonicPhotoMore')};
244 if (provider === 'google' || provider === 'zenfolio') args.thumb_size = $clicked.data('photonicThumbSize');
245 if (provider === 'flickr' || provider === 'smug' || provider === 'google' || provider === 'zenfolio') {
246 args.overlay_size = $clicked.data('photonicOverlaySize');
247 args.overlay_video_size = $clicked.data('photonicOverlayVideoSize');
248 }
249 if (provider === 'google') { args.overlay_crop = $clicked.data('photonicOverlayCrop'); }
250 photonicDisplayLevel2(provider, singular, args);
251 });
252
253 $(document).on('click', '.photonic-password-submit', function(e) {
254 e.preventDefault();
255 var album_id = $(this).parents('.photonic-password-prompter').attr('id');
256 var components = album_id.split('-');
257 var provider = components[1];
258 var singular_type = components[2];
259 var album_key = components.slice(4).join('-');
260
261 var password = $(this).parent().parent().find('input[name="photonic-' + provider + '-password"]');
262 password = password[0].value;
263
264 var thumb_id = 'photonic-' + provider + '-' + singular_type + '-thumb-' + album_key;
265 var thumb = $('#' + thumb_id);
266
267 var prompter = photonicPrompterList['#photonic-' + provider + '-' + singular_type + '-prompter-' + album_key];
268 if (prompter !== undefined && prompter !== null) {
269 prompter.hide();
270 }
271
272 photonicShowLoading();
273 var args = {'panel_id': thumb_id, "popup": thumb.data('photonicPopup'), "photo_count": thumb.data('photonicPhotoCount'), "photo_more": thumb.data('photonicPhotoMore') };
274 if (provider === 'smug') {
275 args.password = password;
276 args.overlay_size = thumb.data('photonicOverlaySize');
277 }
278 else if (provider === 'zenfolio') {
279 args.password = password;
280 args.realm_id = thumb.data('photonicRealm');
281 args.thumb_size = thumb.data('photonicThumbSize');
282 args.overlay_size = thumb.data('photonicOverlaySize');
283 }
284 photonicProcessRequest(provider, singular_type, album_key, args);
285 });
286
287 $('.photonic-flickr-stream a, a.photonic-flickr-set-thumb, a.photonic-flickr-gallery-thumb, .photonic-google-stream a, .photonic-smug-stream a, .photonic-instagram-stream a, .photonic-zenfolio-stream a, a.photonic-zenfolio-set-thumb').each(function() {
288 if (!($(this).parent().hasClass('photonic-header-title'))) {
289 var title = $(this).attr('title');
290 $(this).attr('title', photonicHtmlDecode(title));
291 }
292 });
293
294 $('a.photonic-level-3-expand').on('click', function(e) {
295 e.preventDefault();
296 var current = $(this);
297 var header = current.parent().parent().parent();
298 if (current.hasClass('photonic-level-3-expand-plus')) {
299 photonicProcessL3Request(current, header, {'view': 'collections', 'node': current.data('photonicLevel-3'), 'layout': current.data('photonicLayout')});
300 }
301 else if (current.hasClass('photonic-level-3-expand-up')) {
302 header.next('.photonic-stream').slideUp();
303 current.removeClass('photonic-level-3-expand-up').addClass('photonic-level-3-expand-down').attr('title', Photonic_JS.maximize_panel === undefined ? 'Show' : Photonic_JS.maximize_panel);
304 }
305 else if (current.hasClass('photonic-level-3-expand-down')) {
306 header.next('.photonic-stream').slideDown();
307 current.removeClass('photonic-level-3-expand-down').addClass('photonic-level-3-expand-up').attr('title', Photonic_JS.minimize_panel === undefined ? 'Hide' : Photonic_JS.minimize_panel);
308 }
309 });
310
311 $(document).on('click', 'a.photonic-more-button.photonic-more-dynamic', function(e) {
312 e.preventDefault();
313 var clicked = $(this);
314 var container = clicked.parent().find('.photonic-level-1-container, .photonic-level-2-container');
315 var query = container.data('photonicStreamQuery');
316 var provider = container.data('photonicStreamProvider');
317 var level = container.hasClass('photonic-level-1-container') ? 'level-1' : 'level-2';
318 var containerId = container.attr('id');
319
320 photonicShowLoading();
321 $.post(Photonic_JS.ajaxurl, { 'action': 'photonic_load_more', 'provider': provider, 'query': query }, function(data) {
322 var ret = $(data);
323 var images = ret.find('.photonic-' + level);
324 var more_button = ret.find('.photonic-more-button');
325 var one_existing = container.find('a.photonic-launch-gallery')[0];
326
327 images.children().attr('rel', $(one_existing).attr('rel'));
328 if (Photonic_JS.slideshow_library === 'lightcase') images.children().attr('data-rel', 'lightcase:' + $(one_existing).attr('rel'));
329
330 images.appendTo(container);
331 photonicMoveHTML5External();
332
333 if (images.length === 0) {
334 $('.photonic-loading').hide();
335 clicked.fadeOut().remove();
336 }
337
338 var lightbox;
339 if (Photonic_JS.slideshow_library === 'imagelightbox') {
340 lightbox = photonicLightboxList['a[rel="' + $(one_existing).attr('rel') + '"]'];
341 if (level === 'level-1') {
342 lightbox.addToImageLightbox(images.find('a'));
343 }
344 }
345 else if (Photonic_JS.slideshow_library === 'lightcase') {
346 photonicLightbox.initialize('a[data-rel="' + $(one_existing).attr('data-rel') + '"]');
347 }
348 else if (Photonic_JS.slideshow_library === 'lightgallery') {
349 photonicLightbox.initialize(container);
350 }
351 else if (Photonic_JS.slideshow_library === 'featherlight') {
352 photonicLightbox.initialize(container);
353 }
354 else if (Photonic_JS.slideshow_library === 'fancybox3') {
355 photonicLightbox.initialize(null, $(one_existing).data('fancybox'));
356 }
357 else if (Photonic_JS.slideshow_library === 'photoswipe') {
358 photonicLightbox.initialize();
359 }
360 else if (Photonic_JS.slideshow_library === 'strip') {
361 images.children().attr('data-strip-group', $(one_existing).attr('rel'));
362 }
363
364 images.waitForImages(function() {
365 var new_query = ret.find('.photonic-random-layout,.photonic-standard-layout,.photonic-masonry-layout,.photonic-mosaic-layout,.slideshow-grid-panel').data('photonicStreamQuery');
366 container.data('photonicStreamQuery', new_query);
367
368 // If this is a masonry layout in <= IE9, we need to trigger the Masonry function for appended images
369 if (container.hasClass('photonic-masonry-layout') && Photonic_JS.is_old_IE === "1" && $.isFunction($.fn.masonry)) {
370 container.masonry('appended', images);
371 }
372
373 if (more_button.length === 0) {
374 clicked.fadeOut().remove();
375 }
376
377 if (container.hasClass('photonic-mosaic-layout')) {
378 photonicMosaicLayout(false, '#' + containerId);
379 }
380 else if (container.hasClass('photonic-random-layout')) {
381 photonicJustifiedGridLayout(false, '#' + containerId);
382 }
383 else if (container.hasClass('photonic-masonry-layout')) {
384 images.find('img').fadeIn().css({ "display": "block" });
385 $('.photonic-loading').hide();
386 }
387 else {
388 container.find('.photonic-' + level).css({'display': 'inline-block' });
389 $('.photonic-loading').hide();
390 }
391 if (!$.fn.tooltip) {
392 photonicTooltip('[data-photonic-tooltip]', '.photonic-tooltip-container');
393 }
394 });
395 });
396 });
397
398 /**
399 * Displays all photos in a popup. Invoked when the popup data is being fetched for the first time for display in a popup.
400 * Must be used by all providers for displaying photos in a popup.
401 *
402 * @param data The contents of the popup
403 * @param provider The data provider: flickr | picasa | smug | zenfolio
404 * @param popup The type of popup object: set | gallery | album
405 * @param panelId The trailing section of the thumbnail's id
406 */
407 window.photonicDisplayPopup = function(data, provider, popup, panelId) {
408 var unsafePanelId = panelId, // KEEP THIS FOR AJAX RESPONSE SELECTOR
409 safePanelId = panelId.replace('.', '\\.'); // FOR EXISTING ELEMENTS WHCICH NEED SANITIZED PANELID
410 //panelId = panelId.replace('.', ''); // REMOVE '.' FROM PANELID WHENEVER POSSIBLE
411 var div = $(data);
412 var grid = div.find('.slideshow-grid-panel');
413
414 $(grid).waitForImages(function() {
415 $(div).appendTo($('#photonic-' + provider + '-' + popup + '-' + safePanelId)).show();
416 div.photonicModal({
417 modalTarget: 'photonic-' + provider + '-panel-' + safePanelId,
418 color: '#000',
419 width: Photonic_JS.gallery_panel_width + '%',
420 closeFromRight: ((100 - Photonic_JS.gallery_panel_width) / 2) + '%'
421 });
422 photonicMoveHTML5External();
423 if (photonicLightbox !== undefined && photonicLightbox !== null) {
424 photonicLightbox.initializeForNewContainer('#' + div.attr('id'));
425 }
426
427 if (!$.fn.tooltip) {
428 photonicTooltip('[data-photonic-tooltip]', '.photonic-tooltip-container');
429 }
430 $('.photonic-loading').hide();
431 });
432 };
433
434 window.photonicRedisplayPopupContents = function(provider, panelId, panel, args) {
435 if ('show' === args['popup']) {
436 $('.photonic-loading').hide();
437 $(panel).photonicModal({
438 modalTarget: 'photonic-' + provider + '-panel-' + panelId,
439 color: '#000',
440 width: Photonic_JS.gallery_panel_width + '%',
441 closeFromRight: ((100 - Photonic_JS.gallery_panel_width) / 2) + '%'
442 });
443 }
444 else {
445 photonicBypassPopup($(panel));
446 }
447 };
448
449 window.photonicBypassPopup = function(data) {
450 $('.photonic-loading').hide();
451 var panel = $(data);
452 panel.hide().appendTo($('body'));
453 photonicMoveHTML5External();
454 if (photonicLightbox !== undefined && photonicLightbox !== null) {
455 photonicLightbox.initializeForNewContainer('#' + panel.attr('id'));
456 }
457
458 var thumbs = $(panel).find('.photonic-launch-gallery');
459 if (thumbs.length > 0) {
460 deep = '#' + $(thumbs[0]).data('photonicDeep');
461 $(thumbs[0]).click();
462 }
463 };
464
465 $(document).on('click', 'input[type="button"].photonic-helper-more', function() {
466 photonicShowLoading();
467 var $clicked = $(this);
468 var $table = $clicked.parents('table');
469
470 var nextToken = $clicked.data('photonicToken') === undefined ? '' : '&nextPageToken=' + $clicked.data('photonicToken');
471 var provider = $clicked.data('photonicProvider');
472 if (provider === 'google') {
473 $.post(Photonic_JS.ajaxurl, "action=photonic_helper_shortcode_more&provider=" + provider + nextToken, function(data) {
474 var ret = $('<div></div>').html(data);
475 ret = ret.find('tr');
476 if (ret.length > 0) {
477 ret = ret.slice(1, ret.length);
478 $($table.find('input[type="button"]')[0]).parents('tr').remove();
479 $table.append(ret);
480 }
481 if (!$.fn.tooltip) {
482 photonicTooltip('[data-photonic-tooltip]', '.photonic-tooltip-container');
483 }
484 $('.photonic-loading').hide();
485 });
486 }
487 });
488
489 var photonicLazyButtons = document.documentElement.querySelectorAll('input.photonic-show-gallery-button');
490 Array.prototype.forEach.call(photonicLazyButtons, function(button) {
491 button.addEventListener('click', photonicLazyLoad);
492 });
493
494
495