+function ($){
'use strict';
var _createClass=(function (){ function defineProperties(target, props){ for (var i=0; i < props.length; i++){ var descriptor=props[i]; descriptor.enumerable=descriptor.enumerable||false; descriptor.configurable=true; if('value' in descriptor) descriptor.writable=true; Object.defineProperty(target, descriptor.key, descriptor); }} return function (Constructor, protoProps, staticProps){ if(protoProps) defineProperties(Constructor.prototype, protoProps); if(staticProps) defineProperties(Constructor, staticProps); return Constructor; };})();
function _classCallCheck(instance, Constructor){ if(!(instance instanceof Constructor)){ throw new TypeError('Cannot call a class as a function'); }}
var Lightbox=(function ($){
var NAME='ekkoLightbox';
var JQUERY_NO_CONFLICT=$.fn[NAME];
var Default={
title: '',
footer: '',
maxWidth: 9999,
maxHeight: 9999,
showArrows: true,
wrapping: true,
type: null,
alwaysShowClose: false,
loadingMessage: '<div class="ekko-lightbox-loader"><div><div></div><div></div></div></div>', // http://tobiasahlin.com/spinkit/
leftArrow: '<span>&#10094;</span>',
rightArrow: '<span>&#10095;</span>',
strings: {
close: 'Close',
fail: 'Failed to load image:',
type: 'Could not detect remote target type. Force the type using data-type'
},
doc: document,
onShow: function onShow(){},
onShown: function onShown(){},
onHide: function onHide(){},
onHidden: function onHidden(){},
onNavigate: function onNavigate(){},
onContentLoaded: function onContentLoaded(){}};
var Lightbox=(function (){
_createClass(Lightbox, null, [{
key: 'Default',
get: function get(){
return Default;
}}]);
function Lightbox($element, config){
var _this=this;
_classCallCheck(this, Lightbox);
this._config=$.extend({}, Default, config);
this._$modalArrows=null;
this._galleryIndex=0;
this._galleryName=null;
this._padding=null;
this._border=null;
this._titleIsShown=false;
this._footerIsShown=false;
this._wantedWidth=0;
this._wantedHeight=0;
this._touchstartX=0;
this._touchendX=0;
this._modalId='ekkoLightbox-' + Math.floor(Math.random() * 1000 + 1);
this._$element=$element instanceof jQuery ? $element:$($element);
this._isBootstrap3=$.fn.modal.Constructor.VERSION[0]==3;
var h4='<h4 class="modal-title">' + (this._config.title||"&nbsp;") + '</h4>';
var btn='<button type="button" class="close" data-dismiss="modal" aria-label="' + this._config.strings.close + '"><span aria-hidden="true">&times;</span></button>';
var header='<div class="modal-header' + (this._config.title||this._config.alwaysShowClose ? '':' hide') + '">' + (this._isBootstrap3 ? btn + h4:h4 + btn) + '</div>';
var footer='<div class="modal-footer' + (this._config.footer ? '':' hide') + '">' + (this._config.footer||"&nbsp;") + '</div>';
var body='<div class="modal-body"><div class="ekko-lightbox-container"><div class="ekko-lightbox-item fade in show"></div><div class="ekko-lightbox-item fade"></div></div></div>';
var dialog='<div class="modal-dialog" role="document"><div class="modal-content">' + header + body + footer + '</div></div>';
$(this._config.doc.body).append('<div id="' + this._modalId + '" class="ekko-lightbox modal fade" tabindex="-1" tabindex="-1" role="dialog" aria-hidden="true">' + dialog + '</div>');
this._$modal=$('#' + this._modalId, this._config.doc);
this._$modalDialog=this._$modal.find('.modal-dialog').first();
this._$modalContent=this._$modal.find('.modal-content').first();
this._$modalBody=this._$modal.find('.modal-body').first();
this._$modalHeader=this._$modal.find('.modal-header').first();
this._$modalFooter=this._$modal.find('.modal-footer').first();
this._$lightboxContainer=this._$modalBody.find('.ekko-lightbox-container').first();
this._$lightboxBodyOne=this._$lightboxContainer.find('> div:first-child').first();
this._$lightboxBodyTwo=this._$lightboxContainer.find('> div:last-child').first();
this._border=this._calculateBorders();
this._padding=this._calculatePadding();
this._galleryName=this._$element.data('gallery');
if(this._galleryName){
this._$galleryItems=$(document.body).find('*[data-gallery="' + this._galleryName + '"]');
this._galleryIndex=this._$galleryItems.index(this._$element);
$(document).on('keydown.ekkoLightbox', this._navigationalBinder.bind(this));
if(this._config.showArrows&&this._$galleryItems.length > 1){
this._$lightboxContainer.append('<div class="ekko-lightbox-nav-overlay"><a href="#">' + this._config.leftArrow + '</a><a href="#">' + this._config.rightArrow + '</a></div>');
this._$modalArrows=this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay').first();
this._$lightboxContainer.on('click', 'a:first-child', function (event){
event.preventDefault();
return _this.navigateLeft();
});
this._$lightboxContainer.on('click', 'a:last-child', function (event){
event.preventDefault();
return _this.navigateRight();
});
this.updateNavigation();
}}
this._$modal.on('show.bs.modal', this._config.onShow.bind(this)).on('shown.bs.modal', function (){
_this._toggleLoading(true);
_this._handle();
return _this._config.onShown.call(_this);
}).on('hide.bs.modal', this._config.onHide.bind(this)).on('hidden.bs.modal', function (){
if(_this._galleryName){
$(document).off('keydown.ekkoLightbox');
$(window).off('resize.ekkoLightbox');
}
_this._$modal.remove();
return _this._config.onHidden.call(_this);
}).modal(this._config);
$(window).on('resize.ekkoLightbox', function (){
_this._resize(_this._wantedWidth, _this._wantedHeight);
});
this._$lightboxContainer.on('touchstart', function (){
_this._touchstartX=event.changedTouches[0].screenX;
}).on('touchend', function (){
_this._touchendX=event.changedTouches[0].screenX;
_this._swipeGesure();
});
}
_createClass(Lightbox, [{
key: 'element',
value: function element(){
return this._$element;
}}, {
key: 'modal',
value: function modal(){
return this._$modal;
}}, {
key: 'navigateTo',
value: function navigateTo(index){
if(index < 0||index > this._$galleryItems.length - 1) return this;
this._galleryIndex=index;
this.updateNavigation();
this._$element=$(this._$galleryItems.get(this._galleryIndex));
this._handle();
}}, {
key: 'navigateLeft',
value: function navigateLeft(){
if(!this._$galleryItems) return;
if(this._$galleryItems.length===1) return;
if(this._galleryIndex===0){
if(this._config.wrapping) this._galleryIndex=this._$galleryItems.length - 1;else return;
} else
this._galleryIndex--;
this._config.onNavigate.call(this, 'left', this._galleryIndex);
return this.navigateTo(this._galleryIndex);
}}, {
key: 'navigateRight',
value: function navigateRight(){
if(!this._$galleryItems) return;
if(this._$galleryItems.length===1) return;
if(this._galleryIndex===this._$galleryItems.length - 1){
if(this._config.wrapping) this._galleryIndex=0;else return;
} else
this._galleryIndex++;
this._config.onNavigate.call(this, 'right', this._galleryIndex);
return this.navigateTo(this._galleryIndex);
}}, {
key: 'updateNavigation',
value: function updateNavigation(){
if(!this._config.wrapping){
var $nav=this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay');
if(this._galleryIndex===0) $nav.find('a:first-child').addClass('disabled');else $nav.find('a:first-child').removeClass('disabled');
if(this._galleryIndex===this._$galleryItems.length - 1) $nav.find('a:last-child').addClass('disabled');else $nav.find('a:last-child').removeClass('disabled');
}}
}, {
key: 'close',
value: function close(){
return this._$modal.modal('hide');
}}, {
key: '_navigationalBinder',
value: function _navigationalBinder(event){
event=event||window.event;
if(event.keyCode===39) return this.navigateRight();
if(event.keyCode===37) return this.navigateLeft();
}}, {
key: '_detectRemoteType',
value: function _detectRemoteType(src, type){
type=type||false;
if(!type&&this._isImage(src)) type='image';
if(!type&&this._getYoutubeId(src)) type='youtube';
if(!type&&this._getVimeoId(src)) type='vimeo';
if(!type&&this._getInstagramId(src)) type='instagram';
if(!type||['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(type) < 0) type='url';
return type;
}}, {
key: '_isImage',
value: function _isImage(string){
return string&&string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
}}, {
key: '_containerToUse',
value: function _containerToUse(){
var _this2=this;
var $toUse=this._$lightboxBodyTwo;
var $current=this._$lightboxBodyOne;
if(this._$lightboxBodyTwo.hasClass('in')){
$toUse=this._$lightboxBodyOne;
$current=this._$lightboxBodyTwo;
}
$current.removeClass('in show');
setTimeout(function (){
if(!_this2._$lightboxBodyTwo.hasClass('in')) _this2._$lightboxBodyTwo.empty();
if(!_this2._$lightboxBodyOne.hasClass('in')) _this2._$lightboxBodyOne.empty();
}, 500);
$toUse.addClass('in show');
return $toUse;
}}, {
key: '_handle',
value: function _handle(){
var $toUse=this._containerToUse();
this._updateTitleAndFooter();
var currentRemote=this._$element.attr('data-remote')||this._$element.attr('href');
var currentType=this._detectRemoteType(currentRemote, this._$element.attr('data-type')||false);
if(['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(currentType) < 0) return this._error(this._config.strings.type);
switch (currentType){
case 'image':
this._preloadImage(currentRemote, $toUse);
this._preloadImageByIndex(this._galleryIndex, 3);
break;
case 'youtube':
this._showYoutubeVideo(currentRemote, $toUse);
break;
case 'vimeo':
this._showVimeoVideo(this._getVimeoId(currentRemote), $toUse);
break;
case 'instagram':
this._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);
break;
case 'video':
this._showHtml5Video(currentRemote, $toUse);
break;
default:
this._loadRemoteContent(currentRemote, $toUse);
break;
}
return this;
}}, {
key: '_getYoutubeId',
value: function _getYoutubeId(string){
if(!string) return false;
var matches=string.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
return matches&&matches[2].length===11 ? matches[2]:false;
}}, {
key: '_getVimeoId',
value: function _getVimeoId(string){
return string&&string.indexOf('vimeo') > 0 ? string:false;
}}, {
key: '_getInstagramId',
value: function _getInstagramId(string){
return string&&string.indexOf('instagram') > 0 ? string:false;
}}, {
key: '_toggleLoading',
value: function _toggleLoading(show){
show=show||false;
if(show){
this._$modalDialog.css('display', 'none');
this._$modal.removeClass('in show');
$('.modal-backdrop').append(this._config.loadingMessage);
}else{
this._$modalDialog.css('display', 'block');
this._$modal.addClass('in show');
$('.modal-backdrop').find('.ekko-lightbox-loader').remove();
}
return this;
}}, {
key: '_calculateBorders',
value: function _calculateBorders(){
return {
top: this._totalCssByAttribute('border-top-width'),
right: this._totalCssByAttribute('border-right-width'),
bottom: this._totalCssByAttribute('border-bottom-width'),
left: this._totalCssByAttribute('border-left-width')
};}}, {
key: '_calculatePadding',
value: function _calculatePadding(){
return {
top: this._totalCssByAttribute('padding-top'),
right: this._totalCssByAttribute('padding-right'),
bottom: this._totalCssByAttribute('padding-bottom'),
left: this._totalCssByAttribute('padding-left')
};}}, {
key: '_totalCssByAttribute',
value: function _totalCssByAttribute(attribute){
return parseInt(this._$modalDialog.css(attribute), 10) + parseInt(this._$modalContent.css(attribute), 10) + parseInt(this._$modalBody.css(attribute), 10);
}}, {
key: '_updateTitleAndFooter',
value: function _updateTitleAndFooter(){
var title=this._$element.data('title')||"";
var caption=this._$element.data('footer')||"";
this._titleIsShown=false;
if(title||this._config.alwaysShowClose){
this._titleIsShown=true;
this._$modalHeader.css('display', '').find('.modal-title').html(title||"&nbsp;");
} else this._$modalHeader.css('display', 'none');
this._footerIsShown=false;
if(caption){
this._footerIsShown=true;
this._$modalFooter.css('display', '').html(caption);
} else this._$modalFooter.css('display', 'none');
return this;
}}, {
key: '_showYoutubeVideo',
value: function _showYoutubeVideo(remote, $containerForElement){
var id=this._getYoutubeId(remote);
var query=remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')):'';
var width=this._$element.data('width')||560;
var height=this._$element.data('height')||width / (560 / 315);
return this._showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + query, width, height, $containerForElement);
}}, {
key: '_showVimeoVideo',
value: function _showVimeoVideo(id, $containerForElement){
var width=this._$element.data('width')||500;
var height=this._$element.data('height')||width / (560 / 315);
return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement);
}}, {
key: '_showInstagramVideo',
value: function _showInstagramVideo(id, $containerForElement){
var width=this._$element.data('width')||612;
var height=width + 80;
id=id.substr(-1)!=='/' ? id + '/':id;
$containerForElement.html('<iframe width="' + width + '" height="' + height + '" src="' + id + 'embed/" frameborder="0" allowfullscreen></iframe>');
this._resize(width, height);
this._config.onContentLoaded.call(this);
if(this._$modalArrows)
this._$modalArrows.css('display', 'none');
this._toggleLoading(false);
return this;
}}, {
key: '_showVideoIframe',
value: function _showVideoIframe(url, width, height, $containerForElement){
height=height||width;
$containerForElement.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="' + width + '" height="' + height + '" src="' + url + '" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>');
this._resize(width, height);
this._config.onContentLoaded.call(this);
if(this._$modalArrows) this._$modalArrows.css('display', 'none');
this._toggleLoading(false);
return this;
}}, {
key: '_showHtml5Video',
value: function _showHtml5Video(url, $containerForElement){
var width=this._$element.data('width')||560;
var height=this._$element.data('height')||width / (560 / 315);
$containerForElement.html('<div class="embed-responsive embed-responsive-16by9"><video width="' + width + '" height="' + height + '" src="' + url + '" preload="auto" autoplay controls class="embed-responsive-item"></video></div>');
this._resize(width, height);
this._config.onContentLoaded.call(this);
if(this._$modalArrows) this._$modalArrows.css('display', 'none');
this._toggleLoading(false);
return this;
}}, {
key: '_loadRemoteContent',
value: function _loadRemoteContent(url, $containerForElement){
var _this3=this;
var width=this._$element.data('width')||560;
var height=this._$element.data('height')||560;
var disableExternalCheck=this._$element.data('disableExternalCheck')||false;
this._toggleLoading(false);
if(!disableExternalCheck&&!this._isExternal(url)){
$containerForElement.load(url, $.proxy(function (){
return _this3._$element.trigger('loaded.bs.modal');l;
}));
}else{
$containerForElement.html('<iframe src="' + url + '" frameborder="0" allowfullscreen></iframe>');
this._config.onContentLoaded.call(this);
}
if(this._$modalArrows)
this._$modalArrows.css('display', 'none');
this._resize(width, height);
return this;
}}, {
key: '_isExternal',
value: function _isExternal(url){
var match=url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
if(typeof match[1]==="string"&&match[1].length > 0&&match[1].toLowerCase()!==location.protocol) return true;
if(typeof match[2]==="string"&&match[2].length > 0&&match[2].replace(new RegExp(':(' + ({
"http:": 80,
"https:": 443
})[location.protocol] + ')?$'), "")!==location.host) return true;
return false;
}}, {
key: '_error',
value: function _error(message){
console.error(message);
this._containerToUse().html(message);
this._resize(300, 300);
return this;
}}, {
key: '_preloadImageByIndex',
value: function _preloadImageByIndex(startIndex, numberOfTimes){
if(!this._$galleryItems) return;
var next=$(this._$galleryItems.get(startIndex), false);
if(typeof next=='undefined') return;
var src=next.attr('data-remote')||next.attr('href');
if(next.attr('data-type')==='image'||this._isImage(src)) this._preloadImage(src, false);
if(numberOfTimes > 0) return this._preloadImageByIndex(startIndex + 1, numberOfTimes - 1);
}}, {
key: '_preloadImage',
value: function _preloadImage(src, $containerForImage){
var _this4=this;
$containerForImage=$containerForImage||false;
var img=new Image();
if($containerForImage){
(function (){
var loadingTimeout=setTimeout(function (){
$containerForImage.append(_this4._config.loadingMessage);
}, 200);
img.onload=function (){
if(loadingTimeout) clearTimeout(loadingTimeout);
loadingTimeout=null;
var image=$('<img />');
image.attr('src', img.src);
image.addClass('img-fluid');
image.css('width', '100%');
$containerForImage.html(image);
if(_this4._$modalArrows) _this4._$modalArrows.css('display', '');
_this4._resize(img.width, img.height);
_this4._toggleLoading(false);
return _this4._config.onContentLoaded.call(_this4);
};
img.onerror=function (){
_this4._toggleLoading(false);
return _this4._error(_this4._config.strings.fail + ('  ' + src));
};})();
}
img.src=src;
return img;
}}, {
key: '_swipeGesure',
value: function _swipeGesure(){
if(this._touchendX < this._touchstartX){
return this.navigateRight();
}
if(this._touchendX > this._touchstartX){
return this.navigateLeft();
}}
}, {
key: '_resize',
value: function _resize(width, height){
height=height||width;
this._wantedWidth=width;
this._wantedHeight=height;
var imageAspecRatio=width / height;
var widthBorderAndPadding=this._padding.left + this._padding.right + this._border.left + this._border.right;
var addMargin=this._config.doc.body.clientWidth > 575 ? 20:0;
var discountMargin=this._config.doc.body.clientWidth > 575 ? 0:20;
var maxWidth=Math.min(width + widthBorderAndPadding, this._config.doc.body.clientWidth - addMargin, this._config.maxWidth);
if(width + widthBorderAndPadding > maxWidth){
height=(maxWidth - widthBorderAndPadding - discountMargin) / imageAspecRatio;
width=maxWidth;
} else width=width + widthBorderAndPadding;
var headerHeight=0,
footerHeight=0;
if(this._footerIsShown) footerHeight=this._$modalFooter.outerHeight(true)||55;
if(this._titleIsShown) headerHeight=this._$modalHeader.outerHeight(true)||67;
var borderPadding=this._padding.top + this._padding.bottom + this._border.bottom + this._border.top;
var margins=parseFloat(this._$modalDialog.css('margin-top')) + parseFloat(this._$modalDialog.css('margin-bottom'));
var maxHeight=Math.min(height, $(window).height() - borderPadding - margins - headerHeight - footerHeight, this._config.maxHeight - borderPadding - headerHeight - footerHeight);
if(height > maxHeight){
width=Math.ceil(maxHeight * imageAspecRatio) + widthBorderAndPadding;
}
this._$lightboxContainer.css('height', maxHeight);
this._$modalDialog.css('flex', 1).css('maxWidth', width);
var modal=this._$modal.data('bs.modal');
if(modal){
try {
modal._handleUpdate();
} catch (Exception){
modal.handleUpdate();
}}
return this;
}}], [{
key: '_jQueryInterface',
value: function _jQueryInterface(config){
var _this5=this;
config=config||{};
return this.each(function (){
var $this=$(_this5);
var _config=$.extend({}, Lightbox.Default, $this.data(), typeof config==='object'&&config);
new Lightbox(_this5, _config);
});
}}]);
return Lightbox;
})();
$.fn[NAME]=Lightbox._jQueryInterface;
$.fn[NAME].Constructor=Lightbox;
$.fn[NAME].noConflict=function (){
$.fn[NAME]=JQUERY_NO_CONFLICT;
return Lightbox._jQueryInterface;
};
return Lightbox;
})(jQuery);
}(jQuery);