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

527 lines 19.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.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', function(e){
268 e.preventDefault();
269 var $clicked = $(this);
270 var container = $clicked.parents().find('.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 = {"panel_id": $clicked.attr('id'), "popup": $clicked.data('photonicPopup'), "photo_count": $clicked.data('photonicPhotoCount'), "photo_more": $clicked.data('photonicPhotoMore'), 'query': query };
276 if (provider === 'google' || provider === 'zenfolio') args.thumb_size = $clicked.data('photonicThumbSize');
277 if (provider === 'flickr' || provider === 'smug' || provider === 'google' || provider === 'zenfolio') {
278 args.overlay_size = $clicked.data('photonicOverlaySize');
279 args.overlay_video_size = $clicked.data('photonicOverlayVideoSize');
280 }
281 if (provider === 'google') { args.overlay_crop = $clicked.data('photonicOverlayCrop'); }
282 photonicDisplayLevel2(provider, singular, args);
283 });
284
285 $(document).on('click', '.photonic-password-submit', function(e) {
286 e.preventDefault();
287 var album_id = $(this).parents('.photonic-password-prompter').attr('id');
288 var components = album_id.split('-');
289 var provider = components[1];
290 var singular_type = components[2];
291 var album_key = components.slice(4).join('-');
292
293 var password = $(this).parent().parent().find('input[name="photonic-' + provider + '-password"]');
294 password = password[0].value;
295
296 var thumb_id = 'photonic-' + provider + '-' + singular_type + '-thumb-' + album_key;
297 var thumb = $('#' + thumb_id);
298
299 var prompter = photonicPrompterList['#photonic-' + provider + '-' + singular_type + '-prompter-' + album_key];
300 if (prompter !== undefined && prompter !== null) {
301 prompter.hide();
302 }
303
304 photonicShowLoading();
305 var args = {'panel_id': thumb_id, "popup": thumb.data('photonicPopup'), "photo_count": thumb.data('photonicPhotoCount'), "photo_more": thumb.data('photonicPhotoMore') };
306 if (provider === 'smug') {
307 args.password = password;
308 args.overlay_size = thumb.data('photonicOverlaySize');
309 }
310 else if (provider === 'zenfolio') {
311 args.password = password;
312 args.realm_id = thumb.data('photonicRealm');
313 args.thumb_size = thumb.data('photonicThumbSize');
314 args.overlay_size = thumb.data('photonicOverlaySize');
315 }
316 photonicProcessRequest(provider, singular_type, album_key, args);
317 });
318
319 $('.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() {
320 if (!($(this).parent().hasClass('photonic-header-title'))) {
321 var title = $(this).attr('title');
322 $(this).attr('title', photonicHtmlDecode(title));
323 }
324 });
325
326 $('a.photonic-level-3-expand').on('click', function(e) {
327 e.preventDefault();
328 var current = $(this);
329 var header = current.parent().parent().parent();
330 if (current.hasClass('photonic-level-3-expand-plus')) {
331 photonicProcessL3Request(current, header, {'view': 'collections', 'node': current.data('photonicLevel-3'), 'layout': current.data('photonicLayout')});
332 }
333 else if (current.hasClass('photonic-level-3-expand-up')) {
334 header.next('.photonic-stream').slideUp();
335 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);
336 }
337 else if (current.hasClass('photonic-level-3-expand-down')) {
338 header.next('.photonic-stream').slideDown();
339 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);
340 }
341 });
342
343 $(document).on('click', 'a.photonic-more-button.photonic-more-dynamic', function(e) {
344 e.preventDefault();
345 var clicked = $(this);
346 var container = clicked.parent().find('.photonic-level-1-container, .photonic-level-2-container');
347 var query = container.data('photonicStreamQuery');
348 var provider = container.data('photonicStreamProvider');
349 var level = container.hasClass('photonic-level-1-container') ? 'level-1' : 'level-2';
350 var containerId = container.attr('id');
351
352 photonicShowLoading();
353 $.post(Photonic_JS.ajaxurl, { 'action': 'photonic_load_more', 'provider': provider, 'query': query }, function(data) {
354 var ret = $(data);
355 var images = ret.find('.photonic-' + level);
356 var more_button = ret.find('.photonic-more-button');
357 var one_existing = container.find('a.photonic-launch-gallery')[0];
358
359 images.children().attr('rel', $(one_existing).attr('rel'));
360 if (Photonic_JS.slideshow_library === 'lightcase') images.children().attr('data-rel', 'lightcase:' + $(one_existing).attr('rel'));
361
362 images.appendTo(container);
363 photonicMoveHTML5External();
364
365 if (images.length === 0) {
366 $('.photonic-loading').hide();
367 clicked.fadeOut().remove();
368 }
369
370 var lightbox;
371 if (Photonic_JS.slideshow_library === 'imagelightbox') {
372 lightbox = photonicLightboxList['a[rel="' + $(one_existing).attr('rel') + '"]'];
373 if (level === 'level-1') {
374 lightbox.addToImageLightbox(images.find('a'));
375 }
376 }
377 else if (Photonic_JS.slideshow_library === 'lightcase') {
378 photonicLightbox.initialize('a[data-rel="' + $(one_existing).attr('data-rel') + '"]');
379 }
380 else if (Photonic_JS.slideshow_library === 'lightgallery') {
381 photonicLightbox.initialize(container);
382 }
383 else if (Photonic_JS.slideshow_library === 'featherlight') {
384 photonicLightbox.initialize(container);
385 }
386 else if (Photonic_JS.slideshow_library === 'fancybox3') {
387 photonicLightbox.initialize(null, $(one_existing).data('fancybox'));
388 }
389 else if (Photonic_JS.slideshow_library === 'photoswipe') {
390 photonicLightbox.initialize();
391 }
392 else if (Photonic_JS.slideshow_library === 'strip') {
393 images.children().attr('data-strip-group', $(one_existing).attr('rel'));
394 }
395
396 images.waitForImages(function() {
397 var new_query = ret.find('.photonic-random-layout,.photonic-standard-layout,.photonic-masonry-layout,.photonic-mosaic-layout,.slideshow-grid-panel').data('photonicStreamQuery');
398 container.data('photonicStreamQuery', new_query);
399
400 // If this is a masonry layout in <= IE9, we need to trigger the Masonry function for appended images
401 if (container.hasClass('photonic-masonry-layout') && Photonic_JS.is_old_IE === "1" && $.isFunction($.fn.masonry)) {
402 container.masonry('appended', images);
403 }
404
405 if (more_button.length === 0) {
406 clicked.fadeOut().remove();
407 }
408
409 if (container.hasClass('photonic-mosaic-layout')) {
410 photonicMosaicLayout(false, '#' + containerId);
411 }
412 else if (container.hasClass('photonic-random-layout')) {
413 photonicJustifiedGridLayout(false, '#' + containerId);
414 }
415 else if (container.hasClass('photonic-masonry-layout')) {
416 images.find('img').fadeIn().css({ "display": "block" });
417 $('.photonic-loading').hide();
418 }
419 else {
420 container.find('.photonic-' + level).css({'display': 'inline-block' });
421 $('.photonic-loading').hide();
422 }
423 if (!$.fn.tooltip) {
424 photonicTooltip('[data-photonic-tooltip]', '.photonic-tooltip-container');
425 }
426 });
427 });
428 });
429
430 /**
431 * Displays all photos in a popup. Invoked when the popup data is being fetched for the first time for display in a popup.
432 * Must be used by all providers for displaying photos in a popup.
433 *
434 * @param data The contents of the popup
435 * @param provider The data provider: flickr | picasa | smug | zenfolio
436 * @param popup The type of popup object: set | gallery | album
437 * @param panelId The trailing section of the thumbnail's id
438 */
439 window.photonicDisplayPopup = function(data, provider, popup, panelId) {
440 var unsafePanelId = panelId, // KEEP THIS FOR AJAX RESPONSE SELECTOR
441 safePanelId = panelId.replace('.', '\\.'); // FOR EXISTING ELEMENTS WHCICH NEED SANITIZED PANELID
442 //panelId = panelId.replace('.', ''); // REMOVE '.' FROM PANELID WHENEVER POSSIBLE
443 var div = $(data);
444 var grid = div.find('.slideshow-grid-panel');
445
446 $(grid).waitForImages(function() {
447 $(div).appendTo($('#photonic-' + provider + '-' + popup + '-' + safePanelId)).show();
448 div.photonicModal({
449 modalTarget: 'photonic-' + provider + '-panel-' + safePanelId,
450 color: '#000',
451 width: Photonic_JS.gallery_panel_width + '%',
452 closeFromRight: ((100 - Photonic_JS.gallery_panel_width) / 2) + '%'
453 });
454 photonicMoveHTML5External();
455 if (photonicLightbox !== undefined && photonicLightbox !== null) {
456 photonicLightbox.initializeForNewContainer('#' + div.attr('id'));
457 }
458
459 if (!$.fn.tooltip) {
460 photonicTooltip('[data-photonic-tooltip]', '.photonic-tooltip-container');
461 }
462 $('.photonic-loading').hide();
463 });
464 };
465
466 window.photonicRedisplayPopupContents = function(provider, panelId, panel, args) {
467 if ('show' === args['popup']) {
468 $('.photonic-loading').hide();
469 $(panel).photonicModal({
470 modalTarget: 'photonic-' + provider + '-panel-' + panelId,
471 color: '#000',
472 width: Photonic_JS.gallery_panel_width + '%',
473 closeFromRight: ((100 - Photonic_JS.gallery_panel_width) / 2) + '%'
474 });
475 }
476 else {
477 photonicBypassPopup($(panel));
478 }
479 };
480
481 window.photonicBypassPopup = function(data) {
482 $('.photonic-loading').hide();
483 var panel = $(data);
484 panel.hide().appendTo($('body'));
485 photonicMoveHTML5External();
486 if (photonicLightbox !== undefined && photonicLightbox !== null) {
487 photonicLightbox.initializeForNewContainer('#' + panel.attr('id'));
488 }
489
490 var thumbs = $(panel).find('.photonic-launch-gallery');
491 if (thumbs.length > 0) {
492 deep = '#' + $(thumbs[0]).data('photonicDeep');
493 $(thumbs[0]).click();
494 }
495 };
496
497 $(document).on('click', 'input[type="button"].photonic-helper-more', function() {
498 photonicShowLoading();
499 var $clicked = $(this);
500 var $table = $clicked.parents('table');
501
502 var nextToken = $clicked.data('photonicToken') === undefined ? '' : '&nextPageToken=' + $clicked.data('photonicToken');
503 var provider = $clicked.data('photonicProvider');
504 if (provider === 'google') {
505 $.post(Photonic_JS.ajaxurl, "action=photonic_helper_shortcode_more&provider=" + provider + nextToken, function(data) {
506 var ret = $('<div></div>').html(data);
507 ret = ret.find('tr');
508 if (ret.length > 0) {
509 ret = ret.slice(1, ret.length);
510 $($table.find('input[type="button"]')[0]).parents('tr').remove();
511 $table.append(ret);
512 }
513 if (!$.fn.tooltip) {
514 photonicTooltip('[data-photonic-tooltip]', '.photonic-tooltip-container');
515 }
516 $('.photonic-loading').hide();
517 });
518 }
519 });
520
521 var photonicLazyButtons = document.documentElement.querySelectorAll('input.photonic-show-gallery-button');
522 Array.prototype.forEach.call(photonicLazyButtons, function(button) {
523 button.addEventListener('click', photonicLazyLoad);
524 });
525
526
527