${this._config.title || \" \"}
`;\r\n\t\t\tlet btn = ``;\r\n\r\n\t\t\tlet header = ``;\r\n\t\t\tlet footer = ``;\r\n\t\t\tlet body = '`\r\n\t\t\t$(this._config.doc.body).append(`
${dialog}
`)\r\n\r\n\t\t\tthis._$modal = $(`#${this._modalId}`, this._config.doc)\r\n\t\t\tthis._$modalDialog = this._$modal.find('.modal-dialog').first()\r\n\t\t\tthis._$modalContent = this._$modal.find('.modal-content').first()\r\n\t\t\tthis._$modalBody = this._$modal.find('.modal-body').first()\r\n\t\t\tthis._$modalHeader = this._$modal.find('.modal-header').first()\r\n\t\t\tthis._$modalFooter = this._$modal.find('.modal-footer').first()\r\n\r\n\t\t\tthis._$lightboxContainer = this._$modalBody.find('.ekko-lightbox-container').first()\r\n\t\t\tthis._$lightboxBodyOne = this._$lightboxContainer.find('> div:first-child').first()\r\n\t\t\tthis._$lightboxBodyTwo = this._$lightboxContainer.find('> div:last-child').first()\r\n\r\n\t\t\tthis._border = this._calculateBorders()\r\n\t\t\tthis._padding = this._calculatePadding()\r\n\r\n\t\t\tthis._galleryName = this._$element.data('gallery')\r\n\t\t\tif (this._galleryName) {\r\n\t\t\t\tthis._$galleryItems = $(document.body).find(`*[data-gallery=\"${this._galleryName}\"]`)\r\n\t\t\t\tthis._galleryIndex = this._$galleryItems.index(this._$element)\r\n\t\t\t\t$(document).on('keydown.ekkoLightbox', this._navigationalBinder.bind(this))\r\n\r\n\t\t\t\t// add the directional arrows to the modal\r\n\t\t\t\tif (this._config.showArrows && this._$galleryItems.length > 1) {\r\n\t\t\t\t\tthis._$lightboxContainer.append(``)\r\n\t\t\t\t\tthis._$modalArrows = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay').first()\r\n\t\t\t\t\tthis._$lightboxContainer.on('click', 'a:first-child', event => {\r\n\t\t\t\t\t\tevent.preventDefault()\r\n\t\t\t\t\t\treturn this.navigateLeft()\r\n\t\t\t\t\t})\r\n\t\t\t\t\tthis._$lightboxContainer.on('click', 'a:last-child', event => {\r\n\t\t\t\t\t\tevent.preventDefault()\r\n\t\t\t\t\t\treturn this.navigateRight()\r\n\t\t\t\t\t})\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tthis._$modal\r\n\t\t\t.on('show.bs.modal', this._config.onShow.bind(this))\r\n\t\t\t.on('shown.bs.modal', () => {\r\n\t\t\t\tthis._toggleLoading(true)\r\n\t\t\t\tthis._handle()\r\n\t\t\t\treturn this._config.onShown.call(this)\r\n\t\t\t})\r\n\t\t\t.on('hide.bs.modal', this._config.onHide.bind(this))\r\n\t\t\t.on('hidden.bs.modal', () => {\r\n\t\t\t\tif (this._galleryName) {\r\n\t\t\t\t\t$(document).off('keydown.ekkoLightbox')\r\n\t\t\t\t\t$(window).off('resize.ekkoLightbox')\r\n\t\t\t\t}\r\n\t\t\t\tthis._$modal.remove()\r\n\t\t\t\treturn this._config.onHidden.call(this)\r\n\t\t\t})\r\n\t\t\t.modal(this._config)\r\n\r\n\t\t\t$(window).on('resize.ekkoLightbox', () => {\r\n\t\t\t\tthis._resize(this._wantedWidth, this._wantedHeight)\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\telement() {\r\n\t\t\treturn this._$element;\r\n\t\t}\r\n\r\n\t\tmodal() {\r\n\t\t\treturn this._$modal;\r\n\t\t}\r\n\r\n\t\tnavigateTo(index) {\r\n\r\n\t\t\tif (index < 0 || index > this._$galleryItems.length-1)\r\n\t\t\t\treturn this\r\n\r\n\t\t\tthis._galleryIndex = index\r\n\r\n\t\t\tthis._$element = $(this._$galleryItems.get(this._galleryIndex))\r\n\t\t\tthis._handle();\r\n\t\t}\r\n\r\n\t\tnavigateLeft() {\r\n\r\n\t\t\tif (this._$galleryItems.length === 1)\r\n\t\t\t\treturn\r\n\r\n\t\t\tif (this._galleryIndex === 0)\r\n\t\t\t\tthis._galleryIndex = this._$galleryItems.length - 1\r\n\t\t\telse //circular\r\n\t\t\t\tthis._galleryIndex--\r\n\r\n\t\t\tthis._config.onNavigate.call(this, 'left', this._galleryIndex)\r\n\t\t\treturn this.navigateTo(this._galleryIndex)\r\n\t\t}\r\n\r\n\t\tnavigateRight() {\r\n\r\n\t\t\tif (this._$galleryItems.length === 1)\r\n\t\t\t\treturn\r\n\r\n\t\t\tif (this._galleryIndex === this._$galleryItems.length - 1)\r\n\t\t\t\tthis._galleryIndex = 0\r\n\t\t\telse //circular\r\n\t\t\t\tthis._galleryIndex++\r\n\r\n\t\t\tthis._config.onNavigate.call(this, 'right', this._galleryIndex)\r\n\t\t\treturn this.navigateTo(this._galleryIndex)\r\n\t\t}\r\n\r\n\t\tclose() {\r\n\t\t\treturn this._$modal.modal('hide');\r\n\t\t}\r\n\r\n\t\t// helper private methods\r\n\t\t_navigationalBinder(event) {\r\n\t\t\tevent = event || window.event;\r\n\t\t\tif (event.keyCode === 39)\r\n\t\t\t\treturn this.navigateRight()\r\n\t\t\tif (event.keyCode === 37)\r\n\t\t\t\treturn this.navigateLeft()\r\n\t\t}\r\n\r\n\t\t// type detection private methods\r\n\t\t_detectRemoteType(src, type) {\r\n\r\n\t\t\ttype = type || false;\r\n\r\n\t\t\tif(!type && this._isImage(src))\r\n\t\t\t\ttype = 'image';\r\n\t\t\tif(!type && this._getYoutubeId(src))\r\n\t\t\t\ttype = 'youtube';\r\n\t\t\tif(!type && this._getVimeoId(src))\r\n\t\t\t\ttype = 'vimeo';\r\n\t\t\tif(!type && this._getInstagramId(src))\r\n\t\t\t\ttype = 'instagram';\r\n\r\n\t\t\tif(!type || ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(type) < 0)\r\n\t\t\t\ttype = 'url';\r\n\r\n\t\t\treturn type;\r\n\t\t}\r\n\r\n\t\t_isImage(string) {\r\n\t\t\treturn string && string.match(/(^data:image\\/.*,)|(\\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\\?|#).*)?$)/i)\r\n\t\t}\r\n\r\n\t\t_containerToUse() {\r\n\t\t\t// if currently showing an image, fade it out and remove\r\n\t\t\tlet $toUse = this._$lightboxBodyTwo\r\n\t\t\tlet $current = this._$lightboxBodyOne\r\n\r\n\t\t\tif(this._$lightboxBodyTwo.hasClass('in')) {\r\n\t\t\t\t$toUse = this._$lightboxBodyOne\r\n\t\t\t\t$current = this._$lightboxBodyTwo\r\n\t\t\t}\r\n\r\n\t\t\t$current.removeClass('in show')\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tif(!this._$lightboxBodyTwo.hasClass('in'))\r\n\t\t\t\t\tthis._$lightboxBodyTwo.empty()\r\n\t\t\t\tif(!this._$lightboxBodyOne.hasClass('in'))\r\n\t\t\t\t\tthis._$lightboxBodyOne.empty()\r\n\t\t\t}, 500)\r\n\r\n\t\t\t$toUse.addClass('in show')\r\n\t\t\treturn $toUse\r\n\t\t}\r\n\r\n\t\t_handle() {\r\n\r\n\t\t\tlet $toUse = this._containerToUse()\r\n\t\t\tthis._updateTitleAndFooter()\r\n\r\n\t\t\tlet currentRemote = this._$element.attr('data-remote') || this._$element.attr('href')\r\n\t\t\tlet currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false)\r\n\r\n\t\t\tif(['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(currentType) < 0)\r\n\t\t\t\treturn this._error(this._config.strings.type)\r\n\r\n\t\t\tswitch(currentType) {\r\n\t\t\t\tcase 'image':\r\n\t\t\t\t\tthis._preloadImage(currentRemote, $toUse)\r\n\t\t\t\t\tthis._preloadImageByIndex(this._galleryIndex, 3)\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase 'youtube':\r\n\t\t\t\t\tthis._showYoutubeVideo(currentRemote, $toUse);\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase 'vimeo':\r\n\t\t\t\t\tthis._showVimeoVideo(this._getVimeoId(currentRemote), $toUse);\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase 'instagram':\r\n\t\t\t\t\tthis._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase 'video':\r\n\t\t\t\t\tthis._showHtml5Video(currentRemote, $toUse);\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tdefault: // url\r\n\t\t\t\t\tthis._loadRemoteContent(currentRemote, $toUse);\r\n\t\t\t\t\tbreak;\r\n\t\t\t}\r\n\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_getYoutubeId(string) {\r\n\t\t\tif(!string)\r\n\t\t\t\treturn false;\r\n\t\t\tlet matches = string.match(/^.*(youtu.be\\/|v\\/|u\\/\\w\\/|embed\\/|watch\\?v=|\\&v=)([^#\\&\\?]*).*/)\r\n\t\t\treturn (matches && matches[2].length === 11) ? matches[2] : false\r\n\t\t}\r\n\r\n\t\t_getVimeoId(string) {\r\n\t\t\treturn string && string.indexOf('vimeo') > 0 ? string : false\r\n\t\t}\r\n\r\n\t\t_getInstagramId(string) {\r\n\t\t\treturn string && string.indexOf('instagram') > 0 ? string : false\r\n\t\t}\r\n\r\n\t\t// layout private methods\r\n\t\t_toggleLoading(show) {\r\n\t\t\tshow = show || false\r\n\t\t\tif(show) {\r\n\t\t\t\tthis._$modalDialog.css('display', 'none')\r\n\t\t\t\tthis._$modal.removeClass('in show')\r\n\t\t\t\t$('.modal-backdrop').append(this._config.loadingMessage)\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis._$modalDialog.css('display', 'block')\r\n\t\t\t\tthis._$modal.addClass('in show')\r\n\t\t\t\t$('.modal-backdrop').find('.ekko-lightbox-loader').remove()\r\n\t\t\t}\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_calculateBorders() {\r\n\t\t\treturn {\r\n\t\t\t\ttop: this._totalCssByAttribute('border-top-width'),\r\n\t\t\t\tright: this._totalCssByAttribute('border-right-width'),\r\n\t\t\t\tbottom: this._totalCssByAttribute('border-bottom-width'),\r\n\t\t\t\tleft: this._totalCssByAttribute('border-left-width'),\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\t_calculatePadding() {\r\n\t\t\treturn {\r\n\t\t\t\ttop: this._totalCssByAttribute('padding-top'),\r\n\t\t\t\tright: this._totalCssByAttribute('padding-right'),\r\n\t\t\t\tbottom: this._totalCssByAttribute('padding-bottom'),\r\n\t\t\t\tleft: this._totalCssByAttribute('padding-left'),\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t_totalCssByAttribute(attribute) {\r\n\t\t\treturn parseInt(this._$modalDialog.css(attribute), 10) +\r\n\t\t\t\tparseInt(this._$modalContent.css(attribute), 10) +\r\n\t\t\t\tparseInt(this._$modalBody.css(attribute), 10)\r\n\t\t}\r\n\r\n\t\t_updateTitleAndFooter() {\r\n\t\t\tlet title = this._$element.data('title') || \"\"\r\n\t\t\tlet caption = this._$element.data('footer') || \"\"\r\n\r\n\t\t\tthis._titleIsShown = false\r\n\t\t\tif (title || this._config.alwaysShowClose) {\r\n\t\t\t\tthis._titleIsShown = true\r\n\t\t\t\tthis._$modalHeader.css('display', '').find('.modal-title').html(title || \" \")\r\n\t\t\t}\r\n\t\t\telse\r\n\t\t\t\tthis._$modalHeader.css('display', 'none')\r\n\r\n\t\t\tthis._footerIsShown = false\r\n\t\t\tif (caption) {\r\n\t\t\t\tthis._footerIsShown = true\r\n\t\t\t\tthis._$modalFooter.css('display', '').html(caption)\r\n\t\t\t}\r\n\t\t\telse\r\n\t\t\t\tthis._$modalFooter.css('display', 'none')\r\n\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_showYoutubeVideo(remote, $containerForElement) {\r\n\t\t\tlet id = this._getYoutubeId(remote)\r\n\t\t\tlet query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : ''\r\n\t\t\tlet width = this._$element.data('width') || 560\r\n\t\t\tlet height = this._$element.data('height') || width / ( 560/315 )\r\n\t\t\treturn this._showVideoIframe(\r\n\t\t\t\t`//www.youtube.com/embed/${id}?badge=0&autoplay=1&html5=1${query}`,\r\n\t\t\t\twidth,\r\n\t\t\t\theight,\r\n\t\t\t\t$containerForElement\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\t_showVimeoVideo(id, $containerForElement) {\r\n\t\t\tlet width = this._$element.data('width') || 500\r\n\t\t\tlet height = this._$element.data('height') || width / ( 560/315 )\r\n\t\t\treturn this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement)\r\n\t\t}\r\n\r\n\t\t_showInstagramVideo(id, $containerForElement) {\r\n\t\t\t// instagram load their content into iframe's so this can be put straight into the element\r\n\t\t\tlet width = this._$element.data('width') || 612\r\n\t\t\tlet height = width + 80;\r\n\t\t\tid = id.substr(-1) !== '/' ? id + '/' : id; // ensure id has trailing slash\r\n\t\t\t$containerForElement.html(``);\r\n\t\t\tthis._resize(width, height);\r\n\t\t\tthis._config.onContentLoaded.call(this);\r\n\t\t\tif (this._$modalArrows) //hide the arrows when showing video\r\n\t\t\t\tthis._$modalArrows.css('display', 'none');\r\n\t\t\tthis._toggleLoading(false);\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_showVideoIframe(url, width, height, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url)\r\n\t\t\theight = height || width; // default to square\r\n\t\t\t$containerForElement.html(``);\r\n\t\t\tthis._resize(width, height);\r\n\t\t\tthis._config.onContentLoaded.call(this);\r\n\t\t\tif (this._$modalArrows)\r\n\t\t\t\tthis._$modalArrows.css('display', 'none'); //hide the arrows when showing video\r\n\t\t\tthis._toggleLoading(false);\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_showHtml5Video(url, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url)\r\n\t\t\tlet width = this._$element.data('width') || 560\r\n\t\t\tlet height = this._$element.data('height') || width / ( 560/315 )\r\n\t\t\t$containerForElement.html(``);\r\n\t\t\tthis._resize(width, height);\r\n\t\t\tthis._config.onContentLoaded.call(this);\r\n\t\t\tif (this._$modalArrows)\r\n\t\t\t\tthis._$modalArrows.css('display', 'none'); //hide the arrows when showing video\r\n\t\t\tthis._toggleLoading(false);\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_loadRemoteContent(url, $containerForElement) {\r\n\t\t\tlet width = this._$element.data('width') || 560;\r\n\t\t\tlet height = this._$element.data('height') || 560;\r\n\r\n\t\t\tlet disableExternalCheck = this._$element.data('disableExternalCheck') || false;\r\n\t\t\tthis._toggleLoading(false);\r\n\r\n\t\t\t// external urls are loading into an iframe\r\n\t\t\t// local ajax can be loaded into the container itself\r\n\t\t\tif (!disableExternalCheck && !this._isExternal(url)) {\r\n\t\t\t\t$containerForElement.load(url, $.proxy(() => {\r\n\t\t\t\t\treturn this._$element.trigger('loaded.bs.modal');l\r\n\t\t\t\t}));\r\n\r\n\t\t\t} else {\r\n\t\t\t\t$containerForElement.html(``);\r\n\t\t\t\tthis._config.onContentLoaded.call(this);\r\n\t\t\t}\r\n\r\n\t\t\tif (this._$modalArrows) //hide the arrows when remote content\r\n\t\t\t\tthis._$modalArrows.css('display', 'none')\r\n\r\n\t\t\tthis._resize(width, height);\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_isExternal(url) {\r\n\t\t\tlet match = url.match(/^([^:\\/?#]+:)?(?:\\/\\/([^\\/?#]*))?([^?#]+)?(\\?[^#]*)?(#.*)?/);\r\n\t\t\tif (typeof match[1] === \"string\" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol)\r\n\t\t\t\treturn true;\r\n\r\n\t\t\tif (typeof match[2] === \"string\" && match[2].length > 0 && match[2].replace(new RegExp(`:(${{\r\n\t\t\t\t\t\"http:\": 80,\r\n\t\t\t\t\t\"https:\": 443\r\n\t\t\t\t}[location.protocol]})?$`), \"\") !== location.host)\r\n\t\t\t\treturn true;\r\n\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\t_error( message ) {\r\n\t\t\tconsole.error(message);\r\n\t\t\tthis._containerToUse().html(message);\r\n\t\t\tthis._resize(300, 300);\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_preloadImageByIndex(startIndex, numberOfTimes) {\r\n\r\n\t\t\tif(!this._$galleryItems)\r\n\t\t\t\treturn;\r\n\r\n\t\t\tlet next = $(this._$galleryItems.get(startIndex), false)\r\n\t\t\tif(typeof next == 'undefined')\r\n\t\t\t\treturn\r\n\r\n\t\t\tlet src = next.attr('data-remote') || next.attr('href')\r\n\t\t\tif (next.attr('data-type') === 'image' || this._isImage(src))\r\n\t\t\t\tthis._preloadImage(src, false)\r\n\r\n\t\t\tif(numberOfTimes > 0)\r\n\t\t\t\treturn this._preloadImageByIndex(startIndex + 1, numberOfTimes-1);\r\n\t\t}\r\n\r\n\t\t_preloadImage( src, $containerForImage) {\r\n\r\n\t\t\t$containerForImage = $containerForImage || false\r\n\r\n\t\t\tlet img = new Image();\r\n\t\t\tif ($containerForImage) {\r\n\r\n\t\t\t\t// if loading takes > 200ms show a loader\r\n\t\t\t\tlet loadingTimeout = setTimeout(() => {\r\n\t\t\t\t\t$containerForImage.append(this._config.loadingMessage)\r\n\t\t\t\t}, 200)\r\n\r\n\t\t\t\timg.onload = () => {\r\n\t\t\t\t\tif(loadingTimeout)\r\n\t\t\t\t\t\tclearTimeout(loadingTimeout)\r\n\t\t\t\t\tloadingTimeout = null;\r\n\t\t\t\t\tlet image = $('