${this._config.title || " "}
`; let btn = ``; let header = ``; let footer = ``; let body = '`
$(this._config.doc.body).append(``)
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))
// add the directional arrows to the modal
if (this._config.showArrows && this._$galleryItems.length > 1) {
this._$lightboxContainer.append(``)
this._$modalArrows = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay').first()
this._$lightboxContainer.on('click', 'a:first-child', event => {
event.preventDefault()
return this.navigateLeft()
})
this._$lightboxContainer.on('click', 'a:last-child', event => {
event.preventDefault()
return this.navigateRight()
})
this.updateNavigation()
}
}
this._$modal
.on('show.bs.modal', this._config.onShow.bind(this))
.on('shown.bs.modal', () => {
this._toggleLoading(true)
this._handle()
return this._config.onShown.call(this)
})
.on('hide.bs.modal', this._config.onHide.bind(this))
.on('hidden.bs.modal', () => {
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', () => {
this._resize(this._wantedWidth, this._wantedHeight)
})
this._$lightboxContainer
.on('touchstart', () => {
this._touchstartX = event.changedTouches[0].screenX;
})
.on('touchend', () => {
this._touchendX = event.changedTouches[0].screenX;
this._swipeGesure();
})
}
element() {
return this._$element;
}
modal() {
return this._$modal;
}
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();
}
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 //circular
this._galleryIndex--
this._config.onNavigate.call(this, 'left', this._galleryIndex)
return this.navigateTo(this._galleryIndex)
}
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 //circular
this._galleryIndex++
this._config.onNavigate.call(this, 'right', this._galleryIndex)
return this.navigateTo(this._galleryIndex)
}
updateNavigation() {
if (!this._config.wrapping) {
let $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')
}
}
close() {
return this._$modal.modal('hide');
}
// helper private methods
_navigationalBinder(event) {
event = event || window.event;
if (event.keyCode === 39)
return this.navigateRight()
if (event.keyCode === 37)
return this.navigateLeft()
}
// type detection private methods
_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 == 'audio' || type == 'video' || (!type && this._isMedia(src)))
type = 'media';
if(!type || ['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(type) < 0)
type = 'url';
return type;
}
_getRemoteContentType(src) {
let response = $.ajax({
type: 'HEAD',
url: src,
async: false
});
let contentType = response.getResponseHeader('Content-Type')
return contentType;
}
_isImage(string) {
return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)
}
_isMedia(string) {
return string && string.match(/(\.(mp3|mp4|ogg|webm|wav)((\?|#).*)?$)/i)
}
_containerToUse() {
// if currently showing an image, fade it out and remove
let $toUse = this._$lightboxBodyTwo
let $current = this._$lightboxBodyOne
if(this._$lightboxBodyTwo.hasClass('in')) {
$toUse = this._$lightboxBodyOne
$current = this._$lightboxBodyTwo
}
$current.removeClass('in show')
setTimeout(() => {
if(!this._$lightboxBodyTwo.hasClass('in'))
this._$lightboxBodyTwo.empty()
if(!this._$lightboxBodyOne.hasClass('in'))
this._$lightboxBodyOne.empty()
}, 500)
$toUse.addClass('in show')
return $toUse
}
_handle() {
let $toUse = this._containerToUse()
this._updateTitleAndFooter()
let currentRemote = this._$element.attr('data-remote') || this._$element.attr('href')
let currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false)
if(['image', 'youtube', 'vimeo', 'instagram', 'media', '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 'media':
this._showHtml5Media(currentRemote, $toUse);
break;
default: // url
this._loadRemoteContent(currentRemote, $toUse);
break;
}
return this;
}
_getYoutubeId(string) {
if(!string)
return false;
let matches = string.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/)
return (matches && matches[2].length === 11) ? matches[2] : false
}
_getVimeoId(string) {
return string && string.indexOf('vimeo') > 0 ? string : false
}
_getInstagramId(string) {
return string && string.indexOf('instagram') > 0 ? string : false
}
// layout private methods
_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;
}
_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'),
}
}
_calculatePadding() {
return {
top: this._totalCssByAttribute('padding-top'),
right: this._totalCssByAttribute('padding-right'),
bottom: this._totalCssByAttribute('padding-bottom'),
left: this._totalCssByAttribute('padding-left'),
}
}
_totalCssByAttribute(attribute) {
return parseInt(this._$modalDialog.css(attribute), 10) +
parseInt(this._$modalContent.css(attribute), 10) +
parseInt(this._$modalBody.css(attribute), 10)
}
_updateTitleAndFooter() {
let title = this._$element.data('title') || ""
let 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 || " ")
}
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;
}
_showYoutubeVideo(remote, $containerForElement) {
let id = this._getYoutubeId(remote)
let query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : ''
let width = this._$element.data('width') || 560
let 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
);
}
_showVimeoVideo(id, $containerForElement) {
let width = this._$element.data('width') || 500
let height = this._$element.data('height') || width / ( 560/315 )
return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement)
}
_showInstagramVideo(id, $containerForElement) {
// instagram load their content into iframe's so this can be put straight into the element
let width = this._$element.data('width') || 612
let height = width + 80;
id = id.substr(-1) !== '/' ? id + '/' : id; // ensure id has trailing slash
$containerForElement.html(``);
this._resize(width, height);
this._config.onContentLoaded.call(this);
if (this._$modalArrows) //hide the arrows when showing video
this._$modalArrows.css('display', 'none');
this._toggleLoading(false);
return this;
}
_showVideoIframe(url, width, height, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url)
height = height || width; // default to square
$containerForElement.html(``);
this._resize(width, height);
this._config.onContentLoaded.call(this);
if (this._$modalArrows)
this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
this._toggleLoading(false);
return this;
}
_showHtml5Media(url, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url)
let contentType = this._getRemoteContentType(url);
if(!contentType){
return this._error(this._config.strings.type)
}
let mediaType = '';
if(contentType.indexOf('audio') > 0){
mediaType = 'audio';
}else{
mediaType = 'video';
}
let width = this._$element.data('width') || 560
let height = this._$element.data('height') || width / ( 560/315 )
$containerForElement.html(``);
this._resize(width, height);
this._config.onContentLoaded.call(this);
if (this._$modalArrows)
this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
this._toggleLoading(false);
return this;
}
_loadRemoteContent(url, $containerForElement) {
let width = this._$element.data('width') || 560;
let height = this._$element.data('height') || 560;
let disableExternalCheck = this._$element.data('disableExternalCheck') || false;
this._toggleLoading(false);
// external urls are loading into an iframe
// local ajax can be loaded into the container itself
if (!disableExternalCheck && !this._isExternal(url)) {
$containerForElement.load(url, $.proxy(() => {
return this._$element.trigger('loaded.bs.modal');
}));
} else {
$containerForElement.html(``);
this._config.onContentLoaded.call(this);
}
if (this._$modalArrows) //hide the arrows when remote content
this._$modalArrows.css('display', 'none')
this._resize(width, height);
return this;
}
_isExternal(url) {
let 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;
}
_error( message ) {
console.error(message);
this._containerToUse().html(message);
this._resize(300, 300);
return this;
}
_preloadImageByIndex(startIndex, numberOfTimes) {
if(!this._$galleryItems)
return;
let next = $(this._$galleryItems.get(startIndex), false)
if(typeof next == 'undefined')
return
let 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);
}
_preloadImage( src, $containerForImage) {
$containerForImage = $containerForImage || false
let img = new Image();
if ($containerForImage) {
// if loading takes > 200ms show a loader
let loadingTimeout = setTimeout(() => {
$containerForImage.append(this._config.loadingMessage)
}, 200)
img.onload = () => {
if(loadingTimeout)
clearTimeout(loadingTimeout)
loadingTimeout = null;
let image = $('