diff --git a/dist/css/app.css b/dist/css/app.css index d0c9691..d9c4c5b 100644 --- a/dist/css/app.css +++ b/dist/css/app.css @@ -1 +1,131 @@ -.meta-lightbox-overlay{position:fixed;top:0;left:0;z-index:99998;width:100%;height:100%;overflow:hidden;visibility:hidden;opacity:0;box-sizing:border-box}.meta-lightbox-overlay.meta-lightbox-open{visibility:visible;opacity:1}.meta-lightbox-wrap{position:absolute;top:10%;bottom:10%;left:10%;right:10%}.meta-lightbox-content,.meta-lightbox-wrap{display:flex;align-items:center;text-align:center;justify-content:center}.meta-lightbox-content{flex-direction:row;color:#fff;width:100%;height:100%}.meta-lightbox-content .meta-lightbox-ajax{color:#212529}.meta-lightbox-content .meta-lightbox-zoom-wrapper{display:block;height:100%;width:100%}.meta-lightbox-content .meta-lightbox-zoom-wrapper:after{color:#fff;font:normal normal normal 14px/1 FontAwesome;content:"\f00e";position:absolute;bottom:1em;right:1em;text-shadow:1px 1px 1px #000}.meta-lightbox-content .meta-lightbox-zoom-wrapper.no-zoom:after{display:none}.meta-lightbox-title-wrap{position:absolute;bottom:0;left:0;width:100%;z-index:99999;text-align:center}.meta-lightbox-nav{display:none}.meta-lightbox-prev{position:absolute;top:50%;left:0}.meta-lightbox-next{position:absolute;top:50%;right:0}.meta-lightbox-close{position:absolute;top:2%;right:2%;line-height:1em}.meta-lightbox-image{text-align:center}.meta-lightbox-image img{max-width:100%;max-height:100%;width:auto;height:auto;vertical-align:middle}.meta-lightbox-content iframe{width:100%;height:100%}.meta-lightbox-ajax,.meta-lightbox-inline{max-height:100%;overflow:auto}.meta-lightbox-error{display:flex;flex-direction:column;justify-content:center;text-align:center;width:100%;height:100%;color:#fff;text-shadow:0 1px 1px #000}.meta-lightbox-error .alert{margin:0;text-shadow:none}.meta-lightbox-error p{display:table-cell;vertical-align:middle}.meta-lightbox-notouch .meta-lightbox-effect-fade,.meta-lightbox-notouch .meta-lightbox-effect-fadeScale,.meta-lightbox-notouch .meta-lightbox-effect-fall,.meta-lightbox-notouch .meta-lightbox-effect-slideDown,.meta-lightbox-notouch .meta-lightbox-effect-slideLeft,.meta-lightbox-notouch .meta-lightbox-effect-slideRight,.meta-lightbox-notouch .meta-lightbox-effect-slideUp{transition:all .2s ease-in-out}.meta-lightbox-effect-fadeScale .meta-lightbox-wrap{transition:all .3s;transform:scale(.7)}.meta-lightbox-effect-fadeScale.meta-lightbox-open .meta-lightbox-wrap{transform:scale(1)}.meta-lightbox-effect-slideDown .meta-lightbox-wrap,.meta-lightbox-effect-slideLeft .meta-lightbox-wrap,.meta-lightbox-effect-slideRight .meta-lightbox-wrap,.meta-lightbox-effect-slideUp .meta-lightbox-wrap{transition:all .3s cubic-bezier(.25,.5,.5,.9)}.meta-lightbox-effect-slideLeft .meta-lightbox-wrap{transform:translateX(-10%)}.meta-lightbox-effect-slideRight .meta-lightbox-wrap{transform:translateX(10%)}.meta-lightbox-effect-slideLeft.meta-lightbox-open .meta-lightbox-wrap,.meta-lightbox-effect-slideRight.meta-lightbox-open .meta-lightbox-wrap{transform:translateX(0)}.meta-lightbox-effect-slideDown .meta-lightbox-wrap{transform:translateY(-10%)}.meta-lightbox-effect-slideUp .meta-lightbox-wrap{transform:translateY(10%)}.meta-lightbox-effect-slideDown.meta-lightbox-open .meta-lightbox-wrap,.meta-lightbox-effect-slideUp.meta-lightbox-open .meta-lightbox-wrap{transform:translateY(0)}.meta-lightbox-body-effect-fall .meta-lightbox-effect-fall{perspective:1000px}.meta-lightbox-effect-fall .meta-lightbox-wrap{transition:all .3s ease-out;transform:translateZ(300px)}.meta-lightbox-effect-fall.meta-lightbox-open .meta-lightbox-wrap{transform:translateZ(0)}.meta-lightbox-theme-default.meta-lightbox-overlay{background:#666;background:rgba(0,0,0,.6)}.meta-lightbox-theme-default .meta-lightbox-nav{top:10%;width:20%;height:80%;background-repeat:no-repeat;background-position:50% 50%;opacity:.5;color:#fff;font-size:3em;text-decoration:none;text-shadow:1px 1px 0 #000}@media (min-width:576px){.meta-lightbox-theme-default .meta-lightbox-nav{width:8%}}.meta-lightbox-theme-default .meta-lightbox-nav .fa{position:absolute;top:50%;left:50%;margin-top:-1em;margin-left:-.2em}.meta-lightbox-theme-default .meta-lightbox-nav:hover{color:#007bff;opacity:1;background-color:rgba(0,0,0,.5)}.meta-lightbox-theme-default .meta-lightbox-close{display:block;opacity:.5;color:#fff;text-decoration:none;font-size:2em;text-shadow:1px 1px 0 #000;text-align:center;width:1.2em;height:1.2em;line-height:1.2em}.meta-lightbox-theme-default .meta-lightbox-close:focus{color:#007bff;opacity:1;background-color:rgba(0,0,0,.5)}.meta-lightbox-theme-default .meta-lightbox-title{background:#000;color:#fff;padding:7px 15px}.meta-lightbox-theme-default .meta-lightbox-ajax,.meta-lightbox-theme-default .meta-lightbox-inline{color:#000;background:#fff;padding:2em;box-shadow:0 1px 1px rgba(0,0,0,.6)}@media (max-width:576px){.meta-lightbox-wrap{top:5px!important;bottom:5px;left:5px;right:5px}.meta-lightbox-theme-default .meta-lightbox-nav{height:100%;opacity:1;font-size:2em}.meta-lightbox-theme-default .meta-lightbox-nav .fa{margin-left:-.4em}.meta-lightbox-theme-default .meta-lightbox-close{opacity:1}} \ No newline at end of file +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } + +.meta-MetaWindow .meta-spinner_embed, +.meta-MetaWindow .meta-spinner, +.meta-MetaWindow .meta-error { + display: none; + align-items: center; + justify-content: center; + z-index: 2; + text-align: center; } + +.meta-MetaWindow .meta-spinner_embed, +.meta-MetaWindow .meta-spinner { + font-size: 2rem; + color: #fff; + font-weight: bold; + text-transform: uppercase; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; } + +.meta-MetaWindow .meta-spinner_embed { + display: flex; } + +.meta-MetaWindow-overlay { + background: rgba(96, 125, 139, 0.8); + display: none; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + align-items: center; + justify-content: center; } + .meta-MetaWindow-overlay__open { + display: flex; } + .meta-MetaWindow-overlay__loading .meta-spinner { + display: flex; } + .meta-MetaWindow-overlay__error .meta-content { + justify-content: center; } + .meta-MetaWindow-overlay__error .meta-error { + display: flex; } + +.meta-MetaWindow .meta-close { + font-size: 1.2rem; + color: #212121; + text-shadow: #fff 0 0 0.25em; + position: absolute; + top: 0; + right: 0; + padding: 0.5em 0.651em; + border: 0; + background: none; + z-index: 2; } + .meta-MetaWindow .meta-close:hover, .meta-MetaWindow .meta-close:focus { + color: #eceff1; + background: #2196f3; + text-shadow: none; } + +.meta-MetaWindow .meta-content { + position: relative; + width: 90%; + height: 90%; + display: flex; + flex-direction: column; } + +.meta-MetaWindow .meta-wrap { + max-height: 100%; + max-width: 100%; + width: 100%; + overflow: auto; } + .meta-MetaWindow .meta-wrap img { + max-width: 100%; + max-height: 100%; } + +.meta-MetaWindow__text .meta-close { + background: #fff; } + +.meta-MetaWindow__text .meta-content { + background: #fff; + color: #000; + padding: 1rem 1rem; + padding-right: 0; } + +.meta-MetaWindow__text .meta-wrap { + padding-right: 1rem; } + +.meta-MetaWindow__image .typography, +.meta-MetaWindow__image .meta-wrap, .meta-MetaWindow__video .typography, +.meta-MetaWindow__video .meta-wrap { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + max-height: 100%; + max-width: 100%; + min-height: 100%; } + +.meta-MetaWindow__video:before, .meta-MetaWindow__embed:before { + content: ""; + display: block; + position: relative; + width: 100%; + padding-top: 56.25%; } + +.meta-MetaWindow__video a[rel='nofollow noreferrer noopener'], .meta-MetaWindow__embed a[rel='nofollow noreferrer noopener'] { + color: #fff; + font-size: 1.2rem; + font-weight: bold; } + .meta-MetaWindow__video a[rel='nofollow noreferrer noopener']:before, .meta-MetaWindow__embed a[rel='nofollow noreferrer noopener']:before { + content: 'Unable to load. Please follow the provided link: '; + display: block; } + +.meta-MetaWindow__video iframe, .meta-MetaWindow__embed iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + diff --git a/dist/index.html b/dist/index.html index 622712f..f1cfad5 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,3 +1,139 @@ -Meta-lightbox Demo

Meta-lightbox Demo

Click me to start

Use data-toggle="lightbox" attribute to attach lightbox action and href to specify URL.

Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows

You can use data-href attribute to specify link and attach lightbox to another element

Note: You can add jquery-zoom plugin and lighbox will zoom photos on hover.

\ No newline at end of file + } + + + +
+

Meta-lightbox Demo

+ NODE_ENV: development + +

Loading data

+ +

+ Load an Image + +
+ + + Load JSON + + +
+ + Load Partial AJAX HTML
+ + Not Found test +

+ +

Embeds

+

+ Embed Youtube link +
+ Embed Vimeo link +
+ + Embed SoundCloud link
+ Embed Instagram +

+ +

Other

+

+ + Use [data-toggle="lightbox"] attribute to attach lightbox action and + [href] to specify URL. + +

+

+ + Use [data-lightbox-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with + next/prev arrows + +

+

+ Use [data-toggle="lightbox"] + [data-href] attribute to toggle lightbox on + regular elements. + Click me! +

+ +

+ Note: You can add jquery-zoom plugin and lighbox will + zoom photos on hover. +

+
+
+ + + + + + + + + + + diff --git a/dist/js/app.js b/dist/js/app.js index 6b8b7ee..d64fa44 100644 --- a/dist/js/app.js +++ b/dist/js/app.js @@ -1,2 +1,443 @@ -/*! For license information please see app.js.LICENSE.txt */ -!function(){"use strict";var t={n:function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(o,{a:o}),o},d:function(e,o){for(var a in o)t.o(o,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:o[a]})},o:function(t,e){return Object.prototype.hasOwnProperty.call(t,e)}},e=jQuery,o="ajax-load",a="back-online",n="load";function _typeof(t){return(_typeof="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function _typeof(t){return typeof t}:function _typeof(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _defineProperties(t,e){for(var o=0;o
Connection failure.
',s=function(){function MetaLightboxUI(){!function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,MetaLightboxUI)}return function _createClass(t,e,o){return e&&_defineProperties(t.prototype,e),o&&_defineProperties(t,o),t}(MetaLightboxUI,null,[{key:"init",value:function init(){console.log("".concat(l,": init ..."));var t=this;t.isMSIE=0;try{t.isHidpi=t.is_hdpi()}catch(e){console.log("".concat(l,": catch"))}$(".js".concat(l,',[data-toggle="lightbox"],[data-lightbox-gallery]')).on("click",(function(e){e.preventDefault(),e.stopPropagation();var o=$(e.currentTarget);t.show(o)})),$(".js".concat(l,"-close-inline")).on("click",(function(t){$(t.currentTarget).parents(".meta-lightbox-overlay").removeClass("meta-lightbox-open")}))}},{key:"is_hdpi",value:function is_hdpi(){console.log("".concat(l,": isHidpi"));return t.devicePixelRatio>1||t.matchMedia&&t.matchMedia("(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)").matches}},{key:"show",value:function show(t){console.log("".concat(l,": show"));var e=this;if(e.constructLightbox()){var o=e.$content;if(o){if(c.addClass("meta-lightbox-body-effect-fade"),e.process(o,t),t.data("lightbox-gallery")){var a=$('[data-lightbox-gallery="'.concat(t.data("lightbox-gallery"),'"]'));1===a.length?$(".meta-lightbox-nav").hide():$(".meta-lightbox-nav").show(),$(".meta-lightbox-prev").off("click").on("click",(function(o){o.preventDefault();var n=a.index(t),i=a.eq(n-1);i.length||(i=a.last()),setTimeout((function(){e.show(i)}),10)})),$(".meta-lightbox-next").off("click").on("click",(function(o){o.preventDefault();var n=a.index(t),i=a.eq(n+1);i.length||(i=a.first()),setTimeout((function(){e.show(i)}),10)}))}setTimeout((function(){e.$overlay.addClass("meta-lightbox-open")}),1)}}}},{key:"constructLightbox",value:function constructLightbox(){console.log("".concat(l,": constructLightbox"));var t=this,e=$("
",{class:"meta-lightbox-overlay meta-lightbox-theme-default meta-lightbox-effect-fade"}),o=$("
",{class:"meta-lightbox-wrap"}),a=$("
",{class:"meta-lightbox-content"}),n=$(' Previous Next'),i=$('Close'),r=$("
",{class:"meta-lightbox-title-wrap"});return t.$overlay||(t.isMSIE&&e.addClass("meta-lightbox-ie"),o.append(a),o.append(r),e.append(o),e.append(n),e.append(i),c.append(e),e.on("click",(function(e){e.preventDefault(),t.hide()})),i.on("click",(function(e){e.preventDefault(),t.hide()})),t.$overlay=e,t.$content=a,t.$title=r),t.$overlay}},{key:"setTitle",value:function setTitle(t){this.$title.html(t)}},{key:"process",value:function process(o,a){console.log("".concat(l,": process"));var n=this,c=a.attr("href")&&a.attr("href").length?a.attr("href"):a.data("href");n.$content.attr("class","meta-lightbox-content"),n.$content.addClass(a.data("lightbox-class")),c.length||(console.log(a),console.error("".concat(l,": href(attr/data) is missing")));var s=$("#PageLoading .loading-spinner"),f=s.length?s.clone():"";if(n.$content.append(f).addClass("meta-lightbox-loading"),c.match(/\.(jpeg|jpg|gif|png|svg)$/i)||"image"===a.data("force")){$.ajax({url:c,success:function success(){var t=$("",{src:c}),a=$('
'),i=$('');i.append(t),a.append(i),a.css({"line-height":"".concat(o.height(),"px"),height:"".concat(o.height(),"px")}),e.resize((function(){a.css({"line-height":"".concat(o.height(),"px"),height:"".concat(o.height(),"px")})})),"undefined"!==typeof i.zoom?i.zoom():i.addClass("no-zoom"),n.$content.html(a),n.contentLoaded()},error:function error(t,e){var o=$(r);n.$content.html(o),n.contentLoaded()}});var d=a.data("title")?a.data("title"):a.attr("title");n.setTitle(d),"function"===typeof ga&&ga("send","event","meta","Image Click",c)}else if(c.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)||"youtube"===a.data("force")||"vimeo"===a.data("force")){var h,g=c.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/),u="meta-lightbox-video";if("youtube"==g[1]&&(h="https://www.youtube.com/embed/".concat(g[4]),u="".concat(u," meta-lightbox-youtube")),"youtu"==g[1]&&(h="https://www.youtube.com/embed/".concat(g[3]),u="".concat(u," meta-lightbox-youtube")),"youtube-nocookie"==g[1]&&(h="https://www.youtube-nocookie.com/embed/".concat(g[4]),u="".concat(u," meta-lightbox-youtube")),"vimeo"==g[1]&&(h="https://player.vimeo.com/video/".concat(g[3]),u="".concat(u," meta-lightbox-vimeo")),!h)return console.warn("".concat(l,": Video loading bad URL")),!1;if(!n.loadIframe(h,u))return a.addClass("meta-offline"),!1;a.removeClass("meta-offline");var m=a.data("title")?a.data("title"):a.attr("title");n.setTitle(m),"function"===typeof ga&&ga("send","event","meta","Video Click",g)}else if("#"==c.substring(0,1)||"inline"===a.data("force"))$(c).length?(wrap=$('
'),wrap.append($(c).clone().show()),wrap.outerHeight()');r.html(c.regions.LayoutAjax),n.$content.html(r),n.contentLoaded()}var s=a.getResponseHeader("X-Title"),f=a.getResponseHeader("X-Link");s&&s.length&&f&&f.length&&f!==t.location.href&&f.substring(0,f.indexOf("#"))!==t.location.href.replace($("base").attr("href"),"/")&&($(".meta-lightbox-ajax").data("curr-title",i.title),$(".meta-lightbox-ajax").data("curr-link",t.location.href),"undefined"!==typeof t.localStorage&&"/"!==f&&t.localStorage.setItem("current-page",f),i.URL!==f&&i.URL!==$("base").attr("href")+f&&i.URL!=="".concat($("base").attr("href"),"/").concat(f)&&t.history.pushState({title:s,page:f,ajax:"true"},s,f),$(".meta-lightbox-title-wrap").html(""),"function"===typeof ga&&(ga("set",{page:f.replace($("base").attr("href"),""),title:s}),ga("send","pageview")))}}catch(h){console.log("".concat(l,": AJAX HTML"));var d=$('
');d.append(e),n.$content.html(d),n.contentLoaded()}n.contentLoaded()}})}}},{key:"loadIframe",value:function loadIframe(t,e){var o=this,a=$("