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 / lightboxes / Lightbox.js

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

265 lines 8.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 function Photonic_Lightbox() {
2 this.socialIcons = "<div id='photonic-social'>" +
3 "<a class='photonic-share-fb' href='https://www.facebook.com/sharer/sharer.php?u={photonic_share_link}&amp;title={photonic_share_title}&amp;picture={photonic_share_image}' target='_blank' title='Share on Facebook'><div class='icon-facebook'></div></a>" +
4 "<a class='photonic-share-twitter' href='https://twitter.com/share?url={photonic_share_link}&amp;text={photonic_share_title}' target='_blank' title='Share on Twitter'><div class='icon-twitter'></div></a>" +
5 "<a class='photonic-share-pinterest' data-pin-do='buttonPin' href='https://www.pinterest.com/pin/create/button/?url={photonic_share_link}&media={photonic_share_image}&description={photonic_share_title}' data-pin-custom='true' target='_blank' title='Share on Pinterest'><div class='icon-pinterest'></div></a>" +
6 "</div>";
7 var lastDeep;
8 this.videoIndex = 1;
9 }
10
11 Photonic_Lightbox.prototype.getVideoSize = function(url, baseline){
12 return new Promise(function(resolve){
13 // create the video element
14 var video = document.createElement('video');
15
16 // place a listener on it
17 video.addEventListener( "loadedmetadata", function () {
18 // retrieve dimensions
19 var height = this.videoHeight;
20 var width = this.videoWidth;
21
22 var videoAspectRatio = this.videoWidth / this.videoHeight;
23 var baseAspectRatio = baseline.width / baseline.height;
24
25 var newWidth, newHeight;
26 if (baseAspectRatio > videoAspectRatio) {
27 // Window is wider than it needs to be ... constrain by window height
28 newHeight = baseline.height;
29 newWidth = width * newHeight / height;
30 }
31 else {
32 // Window is narrower than it needs to be ... constrain by window width
33 newWidth = baseline.width;
34 newHeight = height * newWidth / width;
35 }
36
37 // send back result
38 resolve({
39 height : height,
40 width : width,
41 newHeight: newHeight,
42 newWidth: newWidth
43 });
44 }, false );
45
46 // start download meta-datas
47 video.src = url;
48 });
49 };
50
51 Photonic_Lightbox.prototype.getImageSize = function(url, baseline){
52 return new Promise(function(resolve){
53 var image = document.createElement('img');
54
55 // place a listener on it
56 image.addEventListener( "load", function () {
57 // retrieve dimensions
58 var height = this.height;
59 var width = this.width;
60
61 var imageAspectRatio = this.width / this.height;
62 var baseAspectRatio = baseline.width / baseline.height;
63
64 var newWidth, newHeight;
65 if (baseAspectRatio > imageAspectRatio) {
66 // Window is wider than it needs to be ... constrain by window height
67 newHeight = baseline.height;
68 newWidth = width * newHeight / height;
69 }
70 else {
71 // Window is narrower than it needs to be ... constrain by window width
72 newWidth = baseline.width;
73 newHeight = height * newWidth / width;
74 }
75
76 // send back result
77 resolve({
78 height : height,
79 width : width,
80 newHeight: newHeight,
81 newWidth: newWidth
82 });
83 }, false );
84
85 // start download meta-datas
86 image.src = url;
87 });
88 };
89
90 Photonic_Lightbox.prototype.addSocial = function(selector, shareable) {
91 if ((Photonic_JS.social_media === undefined || Photonic_JS.social_media === '') && shareable['buy'] === undefined) {
92 return;
93 }
94 var socialEl = document.getElementById('photonic-social');
95 if (socialEl !== null) {
96 socialEl.parentNode.removeChild(socialEl);
97 }
98
99 if (location.hash !== '') {
100 var social = this.socialIcons.replace(/{photonic_share_link}/g, encodeURIComponent(shareable['url'])).
101 replace(/{photonic_share_title}/g, encodeURIComponent(shareable['title'])).
102 replace(/{photonic_share_image}/g, encodeURIComponent(shareable['image']));
103
104 var selectorEl;
105 if (typeof selector === 'string') {
106 selectorEl = document.documentElement.querySelector(selector);
107 if (selectorEl !== null) {
108 selectorEl.insertAdjacentHTML('beforeend', social);
109 }
110 }
111
112 if (Photonic_JS.social_media === undefined || Photonic_JS.social_media === '') {
113
114 var socialMediaIcons = document.documentElement.querySelectorAll('.photonic-share-fb, .photonic-share-twitter, .photonic-share-pinterest');
115 Array.prototype.forEach.call(socialMediaIcons, function(socialIcon) {
116 socialIcon.parentNode.removeChild(socialIcon);
117 });
118 }
119
120 if (!supportsSVG) {
121 var icon = $('#photonic-social div');
122 var bg = icon.css('background-image');
123 bg = bg.replace( 'svg', 'png' );
124 icon.css({'background-image': bg});
125 }
126 }
127 };
128
129 Photonic_Lightbox.prototype.setHash = function(a) {
130 if (Photonic_JS.deep_linking === undefined || Photonic_JS.deep_linking === 'none') {
131 return;
132 }
133
134 var hash = typeof a === 'string' ? a : $(a).data('photonicDeep');
135 if (hash === undefined) {
136 return;
137 }
138
139 if (typeof(window.history.pushState) === 'function' && Photonic_JS.deep_linking === 'yes-history') {
140 window.history.pushState({}, document.title, '#' + hash);
141 }
142 else if (typeof(window.history.replaceState) === 'function' && Photonic_JS.deep_linking === 'no-history') {
143 window.history.replaceState({}, document.title, '#' + hash);
144 }
145 else {
146 document.location.hash = hash;
147 }
148 };
149
150 Photonic_Lightbox.prototype.unsetHash = function() {
151 lastDeep = (lastDeep === undefined || deep !== '') ? location.hash : lastDeep;
152 if (window.history && 'replaceState' in window.history) {
153 history.replaceState({}, document.title, location.href.substr(0, location.href.length-location.hash.length));
154 }
155 else {
156 window.location.hash = '';
157 }
158 };
159
160 Photonic_Lightbox.prototype.changeHash = function() {
161 var node = deep;
162
163 if (node != null) {
164 if (node.length > 1 && photonicLightbox !== null && photonicLightbox !== undefined) {
165 if (window.location.hash && node.indexOf('#access_token=') !== -1) {
166 photonicLightbox.unsetHash();
167 }
168 else {
169 node = node.substr(1);
170 var allMatches = document.querySelectorAll('[data-photonic-deep="' + node + '"]'); //$('[data-photonic-deep="' + node + '"]');
171 if (allMatches.length > 0) {
172 var thumbToClick = allMatches[0];
173 $(thumbToClick).click();
174 photonicLightbox.setHash(node);
175 }
176 }
177 }
178 }
179 };
180
181 Photonic_Lightbox.prototype.catchYouTubeURL = function(url) {
182 var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
183 var match = url.match(regExp);
184 if (match && match[2].length === 11) {
185 return match[2];
186 }
187 };
188
189 Photonic_Lightbox.prototype.catchVimeoURL = function(url) {
190 var regExp = /(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|album\/(?:\d+)\/video\/|video\/|)(\d+)(?:[a-zA-Z0-9_\-]+)?/;
191 var match = url.match(regExp);
192 if (match) {
193 return match[1];
194 }
195 };
196
197 Photonic_Lightbox.prototype.soloImages = function() {
198 $('a[href]').filter(function() {
199 return /(\.jpg|\.jpeg|\.bmp|\.gif|\.png)/i.test( this.getAttribute('href'));
200 }).addClass("launch-gallery-" + Photonic_JS.slideshow_library).addClass(Photonic_JS.slideshow_library);
201 };
202
203 Photonic_Lightbox.prototype.changeVideoURL = function(element, regular, embed) {
204 // Implemented in individual lightboxes. Empty for unsupported lightboxes
205 };
206
207 Photonic_Lightbox.prototype.hostedVideo = function(a) {
208 // Implemented in individual lightboxes. Empty for unsupported lightboxes
209 };
210
211 Photonic_Lightbox.prototype.soloVideos = function() {
212 var self = this;
213 if (Photonic_JS.lightbox_for_videos) {
214 $('a[href]').each(function() {
215 var regular, embed;
216 var href = this.getAttribute('href');
217 var youTube = self.catchYouTubeURL(href);
218 var vimeo = self.catchVimeoURL(href);
219 if ((youTube) !== undefined) {
220 regular = 'https://youtube.com/watch?v=' + youTube;
221 embed = 'https://youtube.com/embed/' + youTube;
222 }
223 else if (vimeo !== undefined) {
224 regular = 'https://vimeo.com/' + vimeo;
225 embed = 'https://player.vimeo.com/video/' + vimeo;
226 }
227
228 if (regular !== undefined) {
229 $(this).addClass(Photonic_JS.slideshow_library + "-video");
230 self.changeVideoURL(this, regular, embed);
231 }
232 self.hostedVideo(this);
233 });
234 }
235 };
236
237 Photonic_Lightbox.prototype.handleSolos = function() {
238 if (Photonic_JS.lightbox_for_all) {
239 this.soloImages();
240 }
241 this.soloVideos();
242
243 if (Photonic_JS.deep_linking !== undefined && Photonic_JS.deep_linking !== 'none') {
244 $(window).on('load', this.changeHash);
245 $(window).on('hashchange', this.changeHash);
246 }
247 };
248
249 Photonic_Lightbox.prototype.initialize = function() {
250 this.handleSolos();
251 // Implemented by child classes
252 };
253
254 Photonic_Lightbox.prototype.initializeForNewContainer = function(containerId) {
255 // Implemented by individual lightboxes. Empty for cases where not required
256 };
257
258 Photonic_Lightbox.prototype.initializeForExisting = function() {
259 // Implemented by child classes
260 };
261
262 Photonic_Lightbox.prototype.initializeForSlideshow = function(selector, slider) {
263 // Implemented by child classes
264 };
265