summaryrefslogtreecommitdiff
path: root/js/components/lightbox.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/lightbox.js')
-rwxr-xr-xjs/components/lightbox.js591
1 files changed, 0 insertions, 591 deletions
diff --git a/js/components/lightbox.js b/js/components/lightbox.js
deleted file mode 100755
index 78fb9fd..0000000
--- a/js/components/lightbox.js
+++ /dev/null
@@ -1,591 +0,0 @@
1/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2(function(addon) {
3
4 var component;
5
6 if (window.UIkit) {
7 component = addon(UIkit);
8 }
9
10 if (typeof define == "function" && define.amd) { // AMD
11 define("uikit-lightbox", ["uikit"], function(){
12 return component || addon(UIkit);
13 });
14 }
15
16})(function(UI){
17
18 "use strict";
19
20 var modal, cache = {};
21
22 UI.component('lightbox', {
23
24 defaults: {
25 "allowfullscreen" : true,
26 "duration" : 400,
27 "group" : false,
28 "keyboard" : true
29 },
30
31 index : 0,
32 items : false,
33
34 boot: function() {
35
36 UI.$html.on('click', '[data-uk-lightbox]', function(e){
37
38 e.preventDefault();
39
40 var link = UI.$(this);
41
42 if (!link.data("lightbox")) {
43
44 UI.lightbox(link, UI.Utils.options(link.attr("data-uk-lightbox")));
45 }
46
47 link.data("lightbox").show(link);
48 });
49
50 // keyboard navigation
51 UI.$doc.on('keyup', function(e) {
52
53 if (modal && modal.is(':visible') && modal.lightbox.options.keyboard) {
54
55 e.preventDefault();
56
57 switch(e.keyCode) {
58 case 37:
59 modal.lightbox.previous();
60 break;
61 case 39:
62 modal.lightbox.next();
63 break;
64 }
65 }
66 });
67 },
68
69 init: function() {
70
71 var siblings = [];
72
73 this.index = 0;
74 this.siblings = [];
75
76 if (this.element && this.element.length) {
77
78 var domSiblings = this.options.group ? UI.$([
79 '[data-uk-lightbox*="'+this.options.group+'"]',
80 "[data-uk-lightbox*='"+this.options.group+"']"
81 ].join(',')) : this.element;
82
83 domSiblings.each(function() {
84
85 var ele = UI.$(this);
86
87 siblings.push({
88 'source': ele.attr('href'),
89 'title' : ele.attr('data-title') || ele.attr('title'),
90 'type' : ele.attr("data-lightbox-type") || 'auto',
91 'link' : ele
92 });
93 });
94
95 this.index = domSiblings.index(this.element);
96 this.siblings = siblings;
97
98 } else if (this.options.group && this.options.group.length) {
99 this.siblings = this.options.group;
100 }
101
102 this.trigger('lightbox-init', [this]);
103 },
104
105 show: function(index) {
106
107 this.modal = getModal(this);
108
109 // stop previous animation
110 this.modal.dialog.stop();
111 this.modal.content.stop();
112
113 var $this = this, promise = UI.$.Deferred(), data, item;
114
115 index = index || 0;
116
117 // index is a jQuery object or DOM element
118 if (typeof(index) == 'object') {
119
120 this.siblings.forEach(function(s, idx){
121
122 if (index[0] === s.link[0]) {
123 index = idx;
124 }
125 });
126 }
127
128 // fix index if needed
129 if ( index < 0 ) {
130 index = this.siblings.length - index;
131 } else if (!this.siblings[index]) {
132 index = 0;
133 }
134
135 item = this.siblings[index];
136
137 data = {
138 "lightbox" : $this,
139 "source" : item.source,
140 "type" : item.type,
141 "index" : index,
142 "promise" : promise,
143 "title" : item.title,
144 "item" : item,
145 "meta" : {
146 "content" : '',
147 "width" : null,
148 "height" : null
149 }
150 };
151
152 this.index = index;
153
154 this.modal.content.empty();
155
156 if (!this.modal.is(':visible')) {
157 this.modal.content.css({width:'', height:''}).empty();
158 this.modal.modal.show();
159 }
160
161 this.modal.loader.removeClass('uk-hidden');
162
163 promise.promise().done(function() {
164
165 $this.data = data;
166 $this.fitSize(data);
167
168 }).fail(function(){
169
170 data.meta.content = '<div class="uk-position-cover uk-flex uk-flex-middle uk-flex-center"><strong>Loading resource failed!</strong></div>';
171 data.meta.width = 400;
172 data.meta.height = 300;
173
174 $this.data = data;
175 $this.fitSize(data);
176 });
177
178 $this.trigger('showitem.uk.lightbox', [data]);
179 },
180
181 fitSize: function() {
182
183 var $this = this,
184 data = this.data,
185 pad = this.modal.dialog.outerWidth() - this.modal.dialog.width(),
186 dpadTop = parseInt(this.modal.dialog.css('margin-top'), 10),
187 dpadBot = parseInt(this.modal.dialog.css('margin-bottom'), 10),
188 dpad = dpadTop + dpadBot,
189 content = data.meta.content,
190 duration = $this.options.duration;
191
192 if (this.siblings.length > 1) {
193
194 content = [
195 content,
196 '<a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous uk-hidden-touch" data-lightbox-previous></a>',
197 '<a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next uk-hidden-touch" data-lightbox-next></a>'
198 ].join('');
199 }
200
201 // calculate width
202 var tmp = UI.$('<div>&nbsp;</div>').css({
203 'opacity' : 0,
204 'position' : 'absolute',
205 'top' : 0,
206 'left' : 0,
207 'width' : '100%',
208 'max-width' : $this.modal.dialog.css('max-width'),
209 'padding' : $this.modal.dialog.css('padding'),
210 'margin' : $this.modal.dialog.css('margin')
211 }), maxwidth, maxheight, w = data.meta.width, h = data.meta.height;
212
213 tmp.appendTo('body').width();
214
215 maxwidth = tmp.width();
216 maxheight = window.innerHeight - dpad;
217
218 tmp.remove();
219
220 this.modal.dialog.find('.uk-modal-caption').remove();
221
222 if (data.title) {
223 this.modal.dialog.append('<div class="uk-modal-caption">'+data.title+'</div>');
224 maxheight -= this.modal.dialog.find('.uk-modal-caption').outerHeight();
225 }
226
227 if (maxwidth < data.meta.width) {
228
229 h = Math.floor( h * (maxwidth / w) );
230 w = maxwidth;
231 }
232
233 if (maxheight < h) {
234
235 h = Math.floor(maxheight);
236 w = Math.ceil(data.meta.width * (maxheight/data.meta.height));
237 }
238
239 this.modal.content.css('opacity', 0).width(w).html(content);
240
241 if (data.type == 'iframe') {
242 this.modal.content.find('iframe:first').height(h);
243 }
244
245 var dh = h + pad,
246 t = Math.floor(window.innerHeight/2 - dh/2) - dpad;
247
248 if (t < 0) { t = 0; }
249
250 this.modal.closer.addClass('uk-hidden');
251
252 if ($this.modal.data('mwidth') == w && $this.modal.data('mheight') == h) {
253 duration = 0;
254 }
255
256 this.modal.dialog.animate({width: w + pad, height: h + pad, top: t }, duration, 'swing', function() {
257 $this.modal.loader.addClass('uk-hidden');
258 $this.modal.content.css({width:''}).animate({'opacity': 1}, function() {
259 $this.modal.closer.removeClass('uk-hidden');
260 });
261
262 $this.modal.data({'mwidth': w, 'mheight': h});
263 });
264 },
265
266 next: function() {
267 this.show(this.siblings[(this.index+1)] ? (this.index+1) : 0);
268 },
269
270 previous: function() {
271 this.show(this.siblings[(this.index-1)] ? (this.index-1) : this.siblings.length-1);
272 }
273 });
274
275
276 // Plugins
277
278 UI.plugin('lightbox', 'image', {
279
280 init: function(lightbox) {
281
282 lightbox.on("showitem.uk.lightbox", function(e, data){
283
284 if (data.type == 'image' || data.source && data.source.match(/\.(jpg|jpeg|png|gif|svg)$/i)) {
285
286 var resolve = function(source, width, height) {
287
288 data.meta = {
289 "content" : '<img class="uk-responsive-width" width="'+width+'" height="'+height+'" src ="'+source+'">',
290 "width" : width,
291 "height" : height
292 };
293
294 data.type = 'image';
295
296 data.promise.resolve();
297 };
298
299 if (!cache[data.source]) {
300
301 var img = new Image();
302
303 img.onerror = function(){
304 data.promise.reject('Loading image failed');
305 };
306
307 img.onload = function(){
308 cache[data.source] = {width: img.width, height: img.height};
309 resolve(data.source, cache[data.source].width, cache[data.source].height);
310 };
311
312 img.src = data.source;
313
314 } else {
315 resolve(data.source, cache[data.source].width, cache[data.source].height);
316 }
317 }
318 });
319 }
320 });
321
322 UI.plugin("lightbox", "youtube", {
323
324 init: function(lightbox) {
325
326 var youtubeRegExp = /(\/\/.*?youtube\.[a-z]+)\/watch\?v=([^&]+)&?(.*)/,
327 youtubeRegExpShort = /youtu\.be\/(.*)/;
328
329
330 lightbox.on("showitem.uk.lightbox", function(e, data){
331
332 var id, matches, resolve = function(id, width, height) {
333
334 data.meta = {
335 'content': '<iframe src="//www.youtube.com/embed/'+id+'" width="'+width+'" height="'+height+'" style="max-width:100%;"'+(modal.lightbox.options.allowfullscreen?' allowfullscreen':'')+'></iframe>',
336 'width': width,
337 'height': height
338 };
339
340 data.type = 'iframe';
341
342 data.promise.resolve();
343 };
344
345 if (matches = data.source.match(youtubeRegExp)) {
346 id = matches[2];
347 }
348
349 if (matches = data.source.match(youtubeRegExpShort)) {
350 id = matches[1];
351 }
352
353 if (id) {
354
355 if(!cache[id]) {
356
357 var img = new Image(), lowres = false;
358
359 img.onerror = function(){
360 cache[id] = {width:640, height:320};
361 resolve(id, cache[id].width, cache[id].height);
362 };
363
364 img.onload = function(){
365 //youtube default 404 thumb, fall back to lowres
366 if (img.width == 120 && img.height == 90) {
367 if (!lowres) {
368 lowres = true;
369 img.src = '//img.youtube.com/vi/' + id + '/0.jpg';
370 } else {
371 cache[id] = {width: 640, height: 320};
372 resolve(id, cache[id].width, cache[id].height);
373 }
374 } else {
375 cache[id] = {width: img.width, height: img.height};
376 resolve(id, img.width, img.height);
377 }
378 };
379
380 img.src = '//img.youtube.com/vi/'+id+'/maxresdefault.jpg';
381
382 } else {
383 resolve(id, cache[id].width, cache[id].height);
384 }
385
386 e.stopImmediatePropagation();
387 }
388 });
389 }
390 });
391
392
393 UI.plugin("lightbox", "vimeo", {
394
395 init: function(lightbox) {
396
397 var regex = /(\/\/.*?)vimeo\.[a-z]+\/([0-9]+).*?/, matches;
398
399
400 lightbox.on("showitem.uk.lightbox", function(e, data){
401
402 var id, resolve = function(id, width, height) {
403
404 data.meta = {
405 'content': '<iframe src="//player.vimeo.com/video/'+id+'" width="'+width+'" height="'+height+'" style="width:100%;box-sizing:border-box;"'+(modal.lightbox.options.allowfullscreen?' allowfullscreen':'')+'></iframe>',
406 'width': width,
407 'height': height
408 };
409
410 data.type = 'iframe';
411
412 data.promise.resolve();
413 };
414
415 if (matches = data.source.match(regex)) {
416
417 id = matches[2];
418
419 if(!cache[id]) {
420
421 UI.$.ajax({
422 type : 'GET',
423 url : 'http://vimeo.com/api/oembed.json?url=' + encodeURI(data.source),
424 jsonp : 'callback',
425 dataType : 'jsonp',
426 success : function(data) {
427 cache[id] = {width:data.width, height:data.height};
428 resolve(id, cache[id].width, cache[id].height);
429 }
430 });
431
432 } else {
433 resolve(id, cache[id].width, cache[id].height);
434 }
435
436 e.stopImmediatePropagation();
437 }
438 });
439 }
440 });
441
442 UI.plugin("lightbox", "video", {
443
444 init: function(lightbox) {
445
446 lightbox.on("showitem.uk.lightbox", function(e, data){
447
448
449 var resolve = function(source, width, height) {
450
451 data.meta = {
452 'content': '<video class="uk-responsive-width" src="'+source+'" width="'+width+'" height="'+height+'" controls></video>',
453 'width': width,
454 'height': height
455 };
456
457 data.type = 'video';
458
459 data.promise.resolve();
460 };
461
462 if (data.type == 'video' || data.source.match(/\.(mp4|webm|ogv)$/i)) {
463
464 if (!cache[data.source]) {
465
466 var vid = UI.$('<video style="position:fixed;visibility:hidden;top:-10000px;"></video>').attr('src', data.source).appendTo('body');
467
468 var idle = setInterval(function() {
469
470 if (vid[0].videoWidth) {
471 clearInterval(idle);
472 cache[data.source] = {width: vid[0].videoWidth, height: vid[0].videoHeight};
473 resolve(data.source, cache[data.source].width, cache[data.source].height);
474 vid.remove();
475 }
476
477 }, 20);
478
479 } else {
480 resolve(data.source, cache[data.source].width, cache[data.source].height);
481 }
482 }
483 });
484 }
485 });
486
487
488 UIkit.plugin("lightbox", "iframe", {
489
490 init: function (lightbox) {
491
492 lightbox.on("showitem.uk.lightbox", function (e, data) {
493
494 var resolve = function (source, width, height) {
495
496 data.meta = {
497 'content': '<iframe class="uk-responsive-width" src="' + source + '" width="' + width + '" height="' + height + '"'+(modal.lightbox.options.allowfullscreen?' allowfullscreen':'')+'></iframe>',
498 'width': width,
499 'height': height
500 };
501
502 data.type = 'iframe';
503
504 data.promise.resolve();
505 };
506
507 if (data.type === 'iframe' || data.source.match(/\.(html|php)$/)) {
508 resolve(data.source, (lightbox.options.width || 800), (lightbox.options.height || 600));
509 }
510 });
511
512 }
513 });
514
515 function getModal(lightbox) {
516
517 if (modal) {
518 modal.lightbox = lightbox;
519 return modal;
520 }
521
522 // init lightbox container
523 modal = UI.$([
524 '<div class="uk-modal">',
525 '<div class="uk-modal-dialog uk-modal-dialog-lightbox uk-slidenav-position" style="margin-left:auto;margin-right:auto;width:200px;height:200px;top:'+Math.abs(window.innerHeight/2 - 200)+'px;">',
526 '<a href="#" class="uk-modal-close uk-close uk-close-alt"></a>',
527 '<div class="uk-lightbox-content"></div>',
528 '<div class="uk-modal-spinner uk-hidden"></div>',
529 '</div>',
530 '</div>'
531 ].join('')).appendTo('body');
532
533 modal.dialog = modal.find('.uk-modal-dialog:first');
534 modal.content = modal.find('.uk-lightbox-content:first');
535 modal.loader = modal.find('.uk-modal-spinner:first');
536 modal.closer = modal.find('.uk-close.uk-close-alt');
537 modal.modal = UI.modal(modal, {modal:false});
538
539 // next / previous
540 modal.on("swipeRight swipeLeft", function(e) {
541 modal.lightbox[e.type=='swipeLeft' ? 'next':'previous']();
542 }).on("click", "[data-lightbox-previous], [data-lightbox-next]", function(e){
543 e.preventDefault();
544 modal.lightbox[UI.$(this).is('[data-lightbox-next]') ? 'next':'previous']();
545 });
546
547 // destroy content on modal hide
548 modal.on("hide.uk.modal", function(e) {
549 modal.content.html('');
550 });
551
552 var resizeCache = {w: window.innerWidth, h:window.innerHeight};
553
554 UI.$win.on('load resize orientationchange', UI.Utils.debounce(function(e){
555
556 if (resizeCache.w !== window.innerWidth && modal.is(':visible') && !UI.Utils.isFullscreen()) {
557 modal.lightbox.fitSize();
558 }
559
560 resizeCache = {w: window.innerWidth, h:window.innerHeight};
561
562 }, 100));
563
564 modal.lightbox = lightbox;
565
566 return modal;
567 }
568
569 UI.lightbox.create = function(items, options) {
570
571 if (!items) return;
572
573 var group = [], o;
574
575 items.forEach(function(item) {
576
577 group.push(UI.$.extend({
578 'source' : '',
579 'title' : '',
580 'type' : 'auto',
581 'link' : false
582 }, (typeof(item) == 'string' ? {'source': item} : item)));
583 });
584
585 o = UI.lightbox(UI.$.extend({}, options, {'group':group}));
586
587 return o;
588 };
589
590 return UI.lightbox;
591});
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-17 08:05:14 +0000