' + (this._config.title || " ") + '
'; var btn = ''; var header = ''; var footer = ''; var 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', 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 //circular
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 //circular
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');
}
// helper private methods
}, {
key: '_navigationalBinder',
value: function _navigationalBinder(event) {
event = event || window.event;
if (event.keyCode === 39) return this.navigateRight();
if (event.keyCode === 37) return this.navigateLeft();
}
// type detection private methods
}, {
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;
// if currently showing an image, fade it out and remove
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:
// url
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;
}
// layout private methods
}, {
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 || " ");
} 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) {
// instagram load their content into iframe's so this can be put straight into the element
var width = this._$element.data('width') || 612;
var 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;
}
}, {
key: '_showVideoIframe',
value: function _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;
}
}, {
key: '_showHtml5Video',
value: function _showHtml5Video(url, $containerForElement) {
// should be used for videos only. for remote content use loadRemoteContent (data-type=url)
var width = this._$element.data('width') || 560;
var 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;
}
}, {
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);
// 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(function () {
return _this3._$element.trigger('loaded.bs.modal');l;
}));
} 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;
}
}, {
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 () {
// if loading takes > 200ms show a loader
var loadingTimeout = setTimeout(function () {
$containerForImage.append(_this4._config.loadingMessage);
}, 200);
img.onload = function () {
if (loadingTimeout) clearTimeout(loadingTimeout);
loadingTimeout = null;
var image = $('