PluginProbe
Photonic Gallery & Lightbox for Flickr, SmugMug & Others / 2.43
Photonic Gallery & Lightbox for Flickr, SmugMug & Others v2.43
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.43, at include/scripts/front-end/src/core/core.js

541 lines 20.1 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.photonicAdjustSlideHeight = function(el) {
180 var maxHeight = 0,
181 maxAspect = 0,
182 container = $(el),
183 containerWidth = container.parent().width(),
184 children = container.children();
185
186 children.each(function () {
187 var img = $(this).find('img')[0];
188 var childHeight = $(this).height();
189 var childWidth = $(this).width();
190
191 if (img.naturalHeight !== 0) {
192 var childAspect = img.naturalWidth / img.naturalHeight;
193 if (childAspect >= maxAspect) {
194 maxAspect = childAspect;
195 var heightFactor = img.naturalWidth > containerWidth ? (containerWidth/img.naturalWidth) : 1;
196 maxHeight = img.naturalHeight * heightFactor;
197 }
198 }
199
200 $(this).height(maxHeight);
201 });
202 container.height(maxHeight);
203 };
204
205 window.photonicSetupSlider = function(index, value) {
206 var $slideshow = $(value);
207 var slideAdjustment = Photonic_JS.slide_adjustment === undefined ? 'adapt-height-width' : Photonic_JS.slide_adjustment;
208 var fadeMode = $slideshow.data('photonicFx') === 'fade' && ($slideshow.data('photonicLayout') === 'strip-below') &&
209 ($slideshow.data('photonicColumns') === 'auto' || $slideshow.data('photonicColumns') === '');
210
211 var itemCount = ($slideshow.data('photonicColumns') === 'auto' || $slideshow.data('photonicColumns') === '' || isNaN(parseInt($slideshow.data('photonicColumns')))) ? 1 : parseInt($slideshow.data('photonicColumns'));
212 $slideshow.waitForImages(function() {
213 $slideshow.lightSlider({
214 gallery: $slideshow.data('photonicLayout') !== 'no-strip' && $slideshow.data('photonicStripStyle') === 'thumbs',
215 pager: $slideshow.data('photonicLayout') !== 'no-strip',
216 vertical: $slideshow.data('photonicLayout') === 'strip-right' || $slideshow.data('photonicLayout') === 'strip-left',
217 item: itemCount,
218 auto: Photonic_JS.slideshow_autostart,
219 loop: true,
220 currentPagerPosition: 'middle',
221 mode: fadeMode ? 'fade' : 'slide',
222 speed: $slideshow.data('photonicSpeed'),
223 pauseOnHover: $slideshow.data('photonicPause'),
224 pause: $slideshow.data('photonicTimeout'),
225 adaptiveHeight: slideAdjustment === 'adapt-height' || slideAdjustment === 'adapt-height-width',
226 autoWidth: slideAdjustment === 'start-next',
227 controls: $slideshow.data('photonicControls') === 'show',
228 responsive : [
229 {
230 breakpoint:800,
231 settings: {
232 item: itemCount !== 1 ? 2 : 1,
233 slideMove: 1
234 }
235 },
236 {
237 breakpoint:480,
238 settings: {
239 item: 1,
240 slideMove: 1
241 }
242 }
243 ],
244 onSliderLoad: function(el) {
245 // photonicLightbox.initializeForSlideshow('#' + $slideshow.attr('id'), el);
246 if (slideAdjustment === 'side-white') {
247 photonicAdjustSlideHeight(el);
248 }
249 }
250 });
251
252 var layout = $slideshow.attr('data-photonic-layout');
253 if (layout === 'strip-above') {
254 var gallery = $slideshow.parents('.lSSlideOuter');
255 gallery.find('.lSGallery').insertBefore(gallery.find('.lSSlideWrapper'));
256 }
257 });
258 };
259
260 if ($.fn.lightSlider !== undefined) {
261 $('ul.photonic-slideshow-content').each(photonicSetupSlider);
262 }
263 else if (console !== undefined && $('ul.photonic-slideshow-content').length > 0) {
264 console.error('LightSlider not found! Please ensure that the LightSlider script is available and loaded before Photonic.');
265 }
266
267 $(document).on('click', '.photonic-level-2-thumb:not(".gallery-page")', function(e){
268 e.preventDefault();
269 var $clicked = $(this);
270 var container = $clicked.closest('.photonic-level-2-container');
271 var query = container.data('photonicStreamQuery');
272
273 var provider = $clicked.data('photonicProvider');
274 var singular = $clicked.data('photonicSingular');
275 var args = {
276 "panel_id": $clicked.attr('id'),
277 "popup": $clicked.data('photonicPopup'),
278 "photo_count": $clicked.data('photonicPhotoCount'),
279 "photo_more": $clicked.data('photonicPhotoMore'),
280 'query': query
281 };
282 if (provider === 'google' || provider === 'zenfolio') args.thumb_size = $clicked.data('photonicThumbSize');
283 if (provider === 'flickr' || provider === 'smug' || provider === 'google' || provider === 'zenfolio') {
284 args.overlay_size = $clicked.data('photonicOverlaySize');
285 args.overlay_video_size = $clicked.data('photonicOverlayVideoSize');
286 }
287 if (provider === 'google') { args.overlay_crop = $clicked.data('photonicOverlayCrop'); }
288 photonicDisplayLevel2(provider, singular, args);
289 });
290
291 $(document).on('click', '.photonic-password-submit', function(e) {
292 e.preventDefault();
293 var album_id = $(this).parents('.photonic-password-prompter').attr('id');
294 var components = album_id.split('-');
295 var provider = components[1];
296 var singular_type = components[2];
297 var album_key = components.slice(4).join('-');
298
299 var password = $(this).parent().parent().find('input[name="photonic-' + provider + '-password"]');
300 password = password[0].value;
301
302 var thumb_id = 'photonic-' + provider + '-' + singular_type + '-thumb-' + album_key;
303 var thumb = $('#' + thumb_id);
304 var container = thumb.closest('.photonic-level-2-container');
305 var query = container.data('photonicStreamQuery');
306
307 var prompter = photonicPrompterList['#photonic-' + provider + '-' + singular_type + '-prompter-' + album_key];
308 if (prompter !== undefined && prompter !== null) {
309 prompter.hide();
310 }
311
312 photonicShowLoading();
313 var args = {
314 'panel_id': thumb_id,
315 "popup": thumb.data('photonicPopup'),
316 "photo_count": thumb.data('photonicPhotoCount'),
317 "photo_more": thumb.data('photonicPhotoMore'),
318 'query': query
319 };
320 if (provider === 'smug' || provider === 'zenfolio') {
321 args.password = password;
322 args.overlay_size = thumb.data('photonicOverlaySize');
323 args.overlay_video_size = thumb.data('photonicOverlayVideoSize');
324 if (provider === 'zenfolio') {
325 args.realm_id = thumb.data('photonicRealm');
326 args.thumb_size = thumb.data('photonicThumbSize');
327 }
328 }
329
330 photonicProcessRequest(provider, singular_type, album_key, args);
331 });
332
333 $('.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() {
334 if (!($(this).parent().hasClass('photonic-header-title'))) {
335 var title = $(this).attr('title');
336 $(this).attr('title', photonicHtmlDecode(title));
337 }
338 });
339
340 $('a.photonic-level-3-expand').on('click', function(e) {
341 e.preventDefault();
342 var current = $(this);
343 var header = current.parent().parent().parent();
344 if (current.hasClass('photonic-level-3-expand-plus')) {
345 photonicProcessL3Request(current, header, {'view': 'collections', 'node': current.data('photonicLevel-3'), 'layout': current.data('photonicLayout')});
346 }
347 else if (current.hasClass('photonic-level-3-expand-up')) {
348 header.next('.photonic-stream').slideUp();
349 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);
350 }
351 else if (current.hasClass('photonic-level-3-expand-down')) {
352 header.next('.photonic-stream').slideDown();
353 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);
354 }
355 });
356
357 $(document).on('click', 'a.photonic-more-button.photonic-more-dynamic', function(e) {
358 e.preventDefault();
359 var clicked = $(this);
360 var container = clicked.parent().find('.photonic-level-1-container, .photonic-level-2-container');
361 var query = container.data('photonicStreamQuery');
362 var provider = container.data('photonicStreamProvider');
363 var level = container.hasClass('photonic-level-1-container') ? 'level-1' : 'level-2';
364 var containerId = container.attr('id');
365
366 photonicShowLoading();
367 $.post(Photonic_JS.ajaxurl, { 'action': 'photonic_load_more', 'provider': provider, 'query': query }, function(data) {
368 var ret = $(data);
369 var images = ret.find('.photonic-' + level);
370 var more_button = ret.find('.photonic-more-button');
371 var one_existing = container.find('a.photonic-launch-gallery')[0];
372
373 images.children().attr('rel', $(one_existing).attr('rel'));
374 if (Photonic_JS.slideshow_library === 'lightcase') images.children().attr('data-rel', 'lightcase:' + $(one_existing).attr('rel'));
375
376 images.appendTo(container);
377 photonicMoveHTML5External();
378
379 if (images.length === 0) {
380 $('.photonic-loading').hide();
381 clicked.fadeOut().remove();
382 }
383
384 var lightbox;
385 if (Photonic_JS.slideshow_library === 'imagelightbox') {
386 lightbox = photonicLightboxList['a[rel="' + $(one_existing).attr('rel') + '"]'];
387 if (level === 'level-1') {
388 lightbox.addToImageLightbox(images.find('a'));
389 }
390 }
391 else if (Photonic_JS.slideshow_library === 'lightcase') {
392 photonicLightbox.initialize('a[data-rel="' + $(one_existing).attr('data-rel') + '"]');
393 }
394 else if (Photonic_JS.slideshow_library === 'lightgallery') {
395 photonicLightbox.initialize(container);
396 }
397 else if (Photonic_JS.slideshow_library === 'featherlight') {
398 photonicLightbox.initialize(container);
399 }
400 else if (Photonic_JS.slideshow_library === 'fancybox3') {
401 photonicLightbox.initialize(null, $(one_existing).data('fancybox'));
402 }
403 else if (Photonic_JS.slideshow_library === 'photoswipe') {
404 photonicLightbox.initialize();
405 }
406 else if (Photonic_JS.slideshow_library === 'strip') {
407 images.children().attr('data-strip-group', $(one_existing).attr('rel'));
408 }
409
410 images.waitForImages(function() {
411 var new_query = ret.find('.photonic-random-layout,.photonic-standard-layout,.photonic-masonry-layout,.photonic-mosaic-layout,.slideshow-grid-panel').data('photonicStreamQuery');
412 container.data('photonicStreamQuery', new_query);
413
414 // If this is a masonry layout in <= IE9, we need to trigger the Masonry function for appended images
415 if (container.hasClass('photonic-masonry-layout') && Photonic_JS.is_old_IE === "1" && $.isFunction($.fn.masonry)) {
416 container.masonry('appended', images);
417 }
418
419 if (more_button.length === 0) {
420 clicked.fadeOut().remove();
421 }
422
423 if (container.hasClass('photonic-mosaic-layout')) {
424 photonicMosaicLayout(false, '#' + containerId);
425 }
426 else if (container.hasClass('photonic-random-layout')) {
427 photonicJustifiedGridLayout(false, '#' + containerId);
428 }
429 else if (container.hasClass('photonic-masonry-layout')) {
430 images.find('img').fadeIn().css({ "display": "block" });
431 $('.photonic-loading').hide();
432 }
433 else {
434 container.find('.photonic-' + level).css({'display': 'inline-block' });
435 $('.photonic-loading').hide();
436 }
437 if (!$.fn.tooltip) {
438 photonicTooltip('[data-photonic-tooltip]', '.photonic-tooltip-container');
439 }
440 });
441 });
442 });
443
444 /**
445 * Displays all photos in a popup. Invoked when the popup data is being fetched for the first time for display in a popup.
446 * Must be used by all providers for displaying photos in a popup.
447 *
448 * @param data The contents of the popup
449 * @param provider The data provider: flickr | picasa | smug | zenfolio
450 * @param popup The type of popup object: set | gallery | album
451 * @param panelId The trailing section of the thumbnail's id
452 */
453 window.photonicDisplayPopup = function(data, provider, popup, panelId) {
454 var unsafePanelId = panelId, // KEEP THIS FOR AJAX RESPONSE SELECTOR
455 safePanelId = panelId.replace('.', '\\.'); // FOR EXISTING ELEMENTS WHCICH NEED SANITIZED PANELID
456 //panelId = panelId.replace('.', ''); // REMOVE '.' FROM PANELID WHENEVER POSSIBLE
457 var div = $(data);
458 var grid = div.find('.slideshow-grid-panel');
459
460 $(grid).waitForImages(function() {
461 $(div).appendTo($('#photonic-' + provider + '-' + popup + '-' + safePanelId)).show();
462 div.photonicModal({
463 modalTarget: 'photonic-' + provider + '-panel-' + safePanelId,
464 color: '#000',
465 width: Photonic_JS.gallery_panel_width + '%',
466 closeFromRight: ((100 - Photonic_JS.gallery_panel_width) / 2) + '%'
467 });
468 photonicMoveHTML5External();
469 if (photonicLightbox !== undefined && photonicLightbox !== null) {
470 photonicLightbox.initializeForNewContainer('#' + div.attr('id'));
471 }
472
473 if (!$.fn.tooltip) {
474 photonicTooltip('[data-photonic-tooltip]', '.photonic-tooltip-container');
475 }
476 $('.photonic-loading').hide();
477 });
478 };
479
480 window.photonicRedisplayPopupContents = function(provider, panelId, panel, args) {
481 if ('show' === args['popup']) {
482 $('.photonic-loading').hide();
483 $(panel).photonicModal({
484 modalTarget: 'photonic-' + provider + '-panel-' + panelId,
485 color: '#000',
486 width: Photonic_JS.gallery_panel_width + '%',
487 closeFromRight: ((100 - Photonic_JS.gallery_panel_width) / 2) + '%'
488 });
489 }
490 else {
491 photonicBypassPopup($(panel));
492 }
493 };
494
495 window.photonicBypassPopup = function(data) {
496 $('.photonic-loading').hide();
497 var panel = $(data);
498 panel.hide().appendTo($('body'));
499 photonicMoveHTML5External();
500 if (photonicLightbox !== undefined && photonicLightbox !== null) {
501 photonicLightbox.initializeForNewContainer('#' + panel.attr('id'));
502 }
503
504 var thumbs = $(panel).find('.photonic-launch-gallery');
505 if (thumbs.length > 0) {
506 deep = '#' + $(thumbs[0]).data('photonicDeep');
507 $(thumbs[0]).click();
508 }
509 };
510
511 $(document).on('click', 'input[type="button"].photonic-helper-more', function() {
512 photonicShowLoading();
513 var $clicked = $(this);
514 var $table = $clicked.parents('table');
515
516 var nextToken = $clicked.data('photonicToken') === undefined ? '' : '&nextPageToken=' + $clicked.data('photonicToken');
517 var provider = $clicked.data('photonicProvider');
518 if (provider === 'google') {
519 $.post(Photonic_JS.ajaxurl, "action=photonic_helper_shortcode_more&provider=" + provider + nextToken, function(data) {
520 var ret = $('<div></div>').html(data);
521 ret = ret.find('tr');
522 if (ret.length > 0) {
523 ret = ret.slice(1, ret.length);
524 $($table.find('input[type="button"]')[0]).parents('tr').remove();
525 $table.append(ret);
526 }
527 if (!$.fn.tooltip) {
528 photonicTooltip('[data-photonic-tooltip]', '.photonic-tooltip-container');
529 }
530 $('.photonic-loading').hide();
531 });
532 }
533 });
534
535 var photonicLazyButtons = document.documentElement.querySelectorAll('input.photonic-show-gallery-button');
536 Array.prototype.forEach.call(photonicLazyButtons, function(button) {
537 button.addEventListener('click', photonicLazyLoad);
538 });
539
540
541