Created
November 15, 2017 23:38
-
-
Save morenojavier/a8afe17db32135756b760b4f02b64c70 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
+ function(a) { | |
"use strict"; | |
function b(a, b) { | |
if (!(a instanceof b)) throw new TypeError("Cannot call a class as a function") | |
} | |
var c = function() { | |
function a(a, b) { | |
for (var c = 0; c < b.length; c++) { | |
var d = b[c]; | |
d.enumerable = d.enumerable || !1, d.configurable = !0, "value" in d && (d.writable = !0), Object.defineProperty(a, d.key, d) | |
} | |
} | |
return function(b, c, d) { | |
return c && a(b.prototype, c), d && a(b, d), b | |
} | |
}(); | |
(function(a) { | |
var d = "ekkoLightbox", | |
e = a.fn[d], | |
f = { | |
title: "", | |
footer: "", | |
maxWidth: 9999, | |
maxHeight: 9999, | |
showArrows: !0, | |
wrapping: !0, | |
type: null, | |
alwaysShowClose: !1, | |
loadingMessage: '<div class="ekko-lightbox-loader"><div><div></div><div></div></div></div>', | |
leftArrow: "<span>❮</span>", | |
rightArrow: "<span>❯</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() {}, | |
onShown: function() {}, | |
onHide: function() {}, | |
onHidden: function() {}, | |
onNavigate: function() {}, | |
onContentLoaded: function() {} | |
}, | |
g = function() { | |
function d(c, e) { | |
var g = this; | |
b(this, d), this._config = a.extend({}, f, e), this._$modalArrows = null, this._galleryIndex = 0, this._galleryName = null, this._padding = null, this._border = null, this._titleIsShown = !1, this._footerIsShown = !1, this._wantedWidth = 0, this._wantedHeight = 0, this._touchstartX = 0, this._touchendX = 0, this._modalId = "ekkoLightbox-" + Math.floor(1e3 * Math.random() + 1), this._$element = c instanceof jQuery ? c : a(c), this._isBootstrap3 = 3 == a.fn.modal.Constructor.VERSION[0]; | |
var h = '<h4 class="modal-title">' + (this._config.title || " ") + "</h4>", | |
i = '<button type="button" class="close" data-dismiss="modal" aria-label="' + this._config.strings.close + '"><span aria-hidden="true">×</span></button>', | |
j = '<div class="modal-header' + (this._config.title || this._config.alwaysShowClose ? "" : " hide") + '">' + (this._isBootstrap3 ? i + h : h + i) + "</div>", | |
k = '<div class="modal-footer' + (this._config.footer ? "" : " hide") + '">' + (this._config.footer || " ") + "</div>", | |
l = '<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><span id="targetToClone"></span></div></div>', | |
m = '<div class="modal-dialog" role="document"><div class="modal-content">' + j + l + k + "</div></div>"; | |
a(this._config.doc.body).append('<div id="' + this._modalId + '" class="ekko-lightbox modal fade" tabindex="-1" tabindex="-1" role="dialog" aria-hidden="true">' + m + "</div>"), this._$modal = a("#" + 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"), this._galleryName && (this._$galleryItems = a(document.body).find('*[data-gallery="' + this._galleryName + '"]'), this._galleryIndex = this._$galleryItems.index(this._$element), a(document).on("keydown.ekkoLightbox", this._navigationalBinder.bind(this)), 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(a) { | |
return a.preventDefault(), g.navigateLeft() | |
}), this._$lightboxContainer.on("click", "a:last-child", function(a) { | |
return a.preventDefault(), g.navigateRight() | |
}), this.updateNavigation())), this._$modal.on("show.bs.modal", this._config.onShow.bind(this)).on("shown.bs.modal", function() { | |
return g._toggleLoading(!0), g._handle(), g._config.onShown.call(g) | |
}).on("hide.bs.modal", this._config.onHide.bind(this)).on("hidden.bs.modal", function() { | |
return g._galleryName && (a(document).off("keydown.ekkoLightbox"), a(window).off("resize.ekkoLightbox")), g._$modal.remove(), g._config.onHidden.call(g) | |
}).modal(this._config), a(window).on("resize.ekkoLightbox", function() { | |
g._resize(g._wantedWidth, g._wantedHeight) | |
}), this._$lightboxContainer.on("touchstart", function() { | |
g._touchstartX = event.changedTouches[0].screenX | |
}).on("touchend", function() { | |
g._touchendX = event.changedTouches[0].screenX, g._swipeGesure() | |
}) | |
} | |
return c(d, null, [{ | |
key: "Default", | |
get: function() { | |
return f | |
} | |
}]), c(d, [{ | |
key: "element", | |
value: function() { | |
return this._$element | |
} | |
}, { | |
key: "modal", | |
value: function() { | |
return this._$modal | |
} | |
}, { | |
key: "navigateTo", | |
value: function(b) { | |
return b < 0 || b > this._$galleryItems.length - 1 ? this : (this._galleryIndex = b, this.updateNavigation(), this._$element = a(this._$galleryItems.get(this._galleryIndex)), void this._handle()) | |
} | |
}, { | |
key: "navigateLeft", | |
value: function() { | |
if (this._$galleryItems && 1 !== this._$galleryItems.length) { | |
if (0 === this._galleryIndex) { | |
if (!this._config.wrapping) return; | |
this._galleryIndex = this._$galleryItems.length - 1 | |
} else this._galleryIndex--; | |
return this._config.onNavigate.call(this, "left", this._galleryIndex), this.navigateTo(this._galleryIndex) | |
} | |
} | |
}, { | |
key: "navigateRight", | |
value: function() { | |
if (this._$galleryItems && 1 !== this._$galleryItems.length) { | |
if (this._galleryIndex === this._$galleryItems.length - 1) { | |
if (!this._config.wrapping) return; | |
this._galleryIndex = 0 | |
} else this._galleryIndex++; | |
return this._config.onNavigate.call(this, "right", this._galleryIndex), this.navigateTo(this._galleryIndex) | |
} | |
} | |
}, { | |
key: "updateNavigation", | |
value: function() { | |
if (!this._config.wrapping) { | |
var a = this._$lightboxContainer.find("div.ekko-lightbox-nav-overlay"); | |
0 === this._galleryIndex ? a.find("a:first-child").addClass("disabled") : a.find("a:first-child").removeClass("disabled"), this._galleryIndex === this._$galleryItems.length - 1 ? a.find("a:last-child").addClass("disabled") : a.find("a:last-child").removeClass("disabled") | |
} | |
} | |
}, { | |
key: "close", | |
value: function() { | |
return this._$modal.modal("hide") | |
} | |
}, { | |
key: "_navigationalBinder", | |
value: function(a) { | |
return a = a || window.event, 39 === a.keyCode ? this.navigateRight() : 37 === a.keyCode ? this.navigateLeft() : void 0 | |
} | |
}, { | |
key: "_detectRemoteType", | |
value: function(a, b) { | |
return b = b || !1, !b && this._isImage(a) && (b = "image"), !b && this._getYoutubeId(a) && (b = "youtube"), !b && this._getVimeoId(a) && (b = "vimeo"), !b && this._getInstagramId(a) && (b = "instagram"), (!b || ["image", "youtube", "vimeo", "instagram", "video", "url"].indexOf(b) < 0) && (b = "url"), b | |
} | |
}, { | |
key: "_isImage", | |
value: function(a) { | |
return a && a.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i) | |
} | |
}, { | |
key: "_containerToUse", | |
value: function() { | |
var a = this, | |
b = this._$lightboxBodyTwo, | |
c = this._$lightboxBodyOne; | |
return this._$lightboxBodyTwo.hasClass("in") && (b = this._$lightboxBodyOne, c = this._$lightboxBodyTwo), c.removeClass("in show"), setTimeout(function() { | |
a._$lightboxBodyTwo.hasClass("in") || a._$lightboxBodyTwo.empty(), a._$lightboxBodyOne.hasClass("in") || a._$lightboxBodyOne.empty() | |
}, 500), b.addClass("in show"), b | |
} | |
}, { | |
key: "_handle", | |
value: function() { | |
var a = this._containerToUse(); | |
this._updateTitleAndFooter(); | |
var b = this._$element.attr("data-remote") || this._$element.attr("href"), | |
c = this._detectRemoteType(b, this._$element.attr("data-type") || !1); | |
if (["image", "youtube", "vimeo", "instagram", "video", "url"].indexOf(c) < 0) return this._error(this._config.strings.type); | |
switch (c) { | |
case "image": | |
this._preloadImage(b, a), this._preloadImageByIndex(this._galleryIndex, 3); | |
break; | |
case "youtube": | |
this._showYoutubeVideo(b, a); | |
break; | |
case "vimeo": | |
this._showVimeoVideo(this._getVimeoId(b), a); | |
break; | |
case "instagram": | |
this._showInstagramVideo(this._getInstagramId(b), a); | |
break; | |
case "video": | |
this._showHtml5Video(b, a); | |
break; | |
default: | |
this._loadRemoteContent(b, a) | |
} | |
return this | |
} | |
}, { | |
key: "_getYoutubeId", | |
value: function(a) { | |
if (!a) return !1; | |
var b = a.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/); | |
return !(!b || 11 !== b[2].length) && b[2] | |
} | |
}, { | |
key: "_getVimeoId", | |
value: function(a) { | |
return !!(a && a.indexOf("vimeo") > 0) && a | |
} | |
}, { | |
key: "_getInstagramId", | |
value: function(a) { | |
return !!(a && a.indexOf("instagram") > 0) && a | |
} | |
}, { | |
key: "_toggleLoading", | |
value: function(b) { | |
return b = b || !1, b ? (this._$modalDialog.css("display", "none"), this._$modal.removeClass("in show"), a(".modal-backdrop").append(this._config.loadingMessage)) : (this._$modalDialog.css("display", "block"), this._$modal.addClass("in show"), a(".modal-backdrop").find(".ekko-lightbox-loader").remove()), this | |
} | |
}, { | |
key: "_calculateBorders", | |
value: function() { | |
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() { | |
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(a) { | |
return parseInt(this._$modalDialog.css(a), 10) + parseInt(this._$modalContent.css(a), 10) + parseInt(this._$modalBody.css(a), 10) | |
} | |
}, { | |
key: "_updateTitleAndFooter", | |
value: function() { | |
var a = this._$element.data("title") || "", | |
b = this._$element.data("footer") || ""; | |
return this._titleIsShown = !1, a || this._config.alwaysShowClose ? (this._titleIsShown = !0, this._$modalHeader.css("display", "").find(".modal-title").html(a || " ")) : this._$modalHeader.css("display", "none"), this._footerIsShown = !1, b ? (this._footerIsShown = !0, this._$modalFooter.css("display", "").html(b)) : this._$modalFooter.css("display", "none"), this | |
} | |
}, { | |
key: "_showYoutubeVideo", | |
value: function(a, b) { | |
var c = this._getYoutubeId(a), | |
d = a.indexOf("&") > 0 ? a.substr(a.indexOf("&")) : "", | |
e = this._$element.data("width") || 560, | |
f = this._$element.data("height") || e / (560 / 315); | |
return this._showVideoIframe("//www.youtube.com/embed/" + c + "?badge=0&autoplay=1&html5=1" + d, e, f, b) | |
} | |
}, { | |
key: "_showVimeoVideo", | |
value: function(a, b) { | |
var c = this._$element.data("width") || 500, | |
d = this._$element.data("height") || c / (560 / 315); | |
return this._showVideoIframe(a + "?autoplay=1", c, d, b) | |
} | |
}, { | |
key: "_showInstagramVideo", | |
value: function(a, b) { | |
var c = this._$element.data("width") || 612, | |
d = c + 80; | |
return a = "/" !== a.substr(-1) ? a + "/" : a, b.html('<iframe width="' + c + '" height="' + d + '" src="' + a + 'embed/" frameborder="0" allowfullscreen></iframe>'), this._resize(c, d), this._config.onContentLoaded.call(this), this._$modalArrows && this._$modalArrows.css("display", "none"), this._toggleLoading(!1), this | |
} | |
}, { | |
key: "_showVideoIframe", | |
value: function(a, b, c, d) { | |
return c = c || b, d.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="' + b + '" height="' + c + '" src="' + a + '" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>'), this._resize(b, c), this._config.onContentLoaded.call(this), this._$modalArrows && this._$modalArrows.css("display", "none"), this._toggleLoading(!1), this | |
} | |
}, { | |
key: "_showHtml5Video", | |
value: function(a, b) { | |
var c = this._$element.data("width") || 560, | |
d = this._$element.data("height") || c / (560 / 315); | |
return b.html('<div class="embed-responsive embed-responsive-16by9"><video width="' + c + '" height="' + d + '" src="' + a + '" preload="auto" autoplay controls class="embed-responsive-item"></video></div>'), this._resize(c, d), this._config.onContentLoaded.call(this), this._$modalArrows && this._$modalArrows.css("display", "none"), this._toggleLoading(!1), this | |
} | |
}, { | |
key: "_loadRemoteContent", | |
value: function(b, c) { | |
var d = this, | |
e = this._$element.data("width") || 560, | |
f = this._$element.data("height") || 560, | |
g = this._$element.data("disableExternalCheck") || !1; | |
return this._toggleLoading(!1), g || this._isExternal(b) ? (c.html('<iframe src="' + b + '" frameborder="0" allowfullscreen></iframe>'), this._config.onContentLoaded.call(this)) : c.load(b, a.proxy(function() { | |
return d._$element.trigger("loaded.bs.modal") | |
})), this._$modalArrows && this._$modalArrows.css("display", "none"), this._resize(e, f), this | |
} | |
}, { | |
key: "_isExternal", | |
value: function(a) { | |
var b = a.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/); | |
return "string" == typeof b[1] && b[1].length > 0 && b[1].toLowerCase() !== location.protocol || "string" == typeof b[2] && b[2].length > 0 && b[2].replace(new RegExp(":(" + { | |
"http:": 80, | |
"https:": 443 | |
}[location.protocol] + ")?$"), "") !== location.host | |
} | |
}, { | |
key: "_error", | |
value: function(a) { | |
return console.error(a), this._containerToUse().html(a), this._resize(300, 300), this | |
} | |
}, { | |
key: "_preloadImageByIndex", | |
value: function(b, c) { | |
if (this._$galleryItems) { | |
var d = a(this._$galleryItems.get(b), !1); | |
if ("undefined" != typeof d) { | |
var e = d.attr("data-remote") || d.attr("href"); | |
return ("image" === d.attr("data-type") || this._isImage(e)) && this._preloadImage(e, !1), c > 0 ? this._preloadImageByIndex(b + 1, c - 1) : void 0 | |
} | |
} | |
} | |
}, { | |
key: "_preloadImage", | |
value: function(b, c) { | |
var d = this; | |
c = c || !1; | |
var e = new Image; | |
return c && ! function() { | |
var f = setTimeout(function() { | |
c.append(d._config.loadingMessage) | |
}, 200); | |
e.onload = function() { | |
f && clearTimeout(f), f = null; | |
var b = a("<img />"); | |
return b.attr("src", e.src), b.addClass("img-fluid"), b.css("width", "100%"), c.html(b), d._$modalArrows && d._$modalArrows.css("display", ""), d._resize(e.width, e.height), d._toggleLoading(!1), d._config.onContentLoaded.call(d) | |
}, e.onerror = function() { | |
return d._toggleLoading(!1), d._error(d._config.strings.fail + (" " + b)) | |
} | |
}(), e.src = b, e | |
} | |
}, { | |
key: "_swipeGesure", | |
value: function() { | |
return this._touchendX < this._touchstartX ? this.navigateRight() : this._touchendX > this._touchstartX ? this.navigateLeft() : void 0 | |
} | |
}, { | |
key: "_resize", | |
value: function(b, c) { | |
c = c || b, this._wantedWidth = b, this._wantedHeight = c; | |
var d = b / c, | |
e = this._padding.left + this._padding.right + this._border.left + this._border.right, | |
f = this._config.doc.body.clientWidth > 575 ? 20 : 0, | |
g = this._config.doc.body.clientWidth > 575 ? 0 : 20, | |
h = Math.min(b + e, this._config.doc.body.clientWidth - f, this._config.maxWidth); | |
b + e > h ? (c = (h - e - g) / d, b = h) : b += e; | |
var i = 0, | |
j = 0; | |
this._footerIsShown && (j = this._$modalFooter.outerHeight(!0) || 55), this._titleIsShown && (i = this._$modalHeader.outerHeight(!0) || 67); | |
var k = this._padding.top + this._padding.bottom + this._border.bottom + this._border.top, | |
l = parseFloat(this._$modalDialog.css("margin-top")) + parseFloat(this._$modalDialog.css("margin-bottom")), | |
m = Math.min(c, a(window).height() - k - l - i - j, this._config.maxHeight - k - i - j); | |
c > m && (b = Math.ceil(m * d) + e), this._$lightboxContainer.css("height", m), this._$modalDialog.css("flex", 1).css("maxWidth", b); | |
var n = this._$modal.data("bs.modal"); | |
if (n) try { | |
n._handleUpdate() | |
} catch (o) { | |
n.handleUpdate() | |
} | |
return this | |
} | |
}], [{ | |
key: "_jQueryInterface", | |
value: function(b) { | |
var c = this; | |
return b = b || {}, this.each(function() { | |
var e = a(c), | |
f = a.extend({}, d.Default, e.data(), "object" == typeof b && b); | |
new d(c, f) | |
}) | |
} | |
}]), d | |
}(); | |
return a.fn[d] = g._jQueryInterface, a.fn[d].Constructor = g, a.fn[d].noConflict = function() { | |
return a.fn[d] = e, g._jQueryInterface | |
}, g | |
})(jQuery) | |
}(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment