diff options
Diffstat (limited to 'js/components/lightbox.js')
-rwxr-xr-x | js/components/lightbox.js | 591 |
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> </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 | }); | ||