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

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