diff --git a/lightbox/lightbox.css b/lightbox/lightbox.css index 54ac2c0..3e2991d 100644 --- a/lightbox/lightbox.css +++ b/lightbox/lightbox.css @@ -1,7 +1,7 @@ /* ======================================================= Lightbox.js -Version: 0.0.5 +Version: 0.0.6 Author: Victor Diego License: MIT ======================================================= @@ -18,6 +18,10 @@ License: MIT ------------------------------------------------------- */ +.remove-scroll { + overflow: hidden; +} + .lightbox-hide { top: -9999px; left: -9999px; @@ -46,6 +50,7 @@ License: MIT } .lightbox-image { + max-height: 100vh; vertical-align: middle; } diff --git a/lightbox/lightbox.js b/lightbox/lightbox.js index ec0464d..d27251d 100644 --- a/lightbox/lightbox.js +++ b/lightbox/lightbox.js @@ -1,16 +1,15 @@ /* ===================================================================== * Lightbox.js - * Version: 0.0.5 + * Version: 0.0.6 * Author: Victor Diego * License: MIT * ================================================================== */ -/*global document, setTimeout*/ (function () { 'use strict'; - var animation, body, btnClose, btnNav, currentItem, container, content, wrapper, trigger; + var animation, body, btnClose, btnNav, currentItem, container, content, wrapper, trigger, currentTrigger; body = document.body; @@ -23,6 +22,10 @@ scaleOut: 'deleteBox .3s' }; + function toggleScroll() { + body.classList.toggle('remove-scroll'); + } + function sortContent(content) { var image, video, href = content.getAttribute('href'); @@ -94,6 +97,7 @@ container = content.cloneNode(false); container.className = 'lightbox-container'; container.style.animation = animation.fadeIn; + container.onclick = function() {}; container.appendChild(wrapper); if (element.getAttribute('data-lightbox') === 'gallery') { @@ -111,7 +115,7 @@ } body.appendChild(container); - body.style.overflow = 'hidden'; + toggleScroll(); } function galleryNavigation(position) { @@ -140,10 +144,10 @@ wrapper.style.animation = [animation.scaleOut, animation.fadeOut]; setTimeout(function () { if (body.contains(container)) { - body.removeAttribute('style'); body.removeChild(container); - currentItem.focus(); + currentTrigger.focus(); currentItem.classList.remove('current-lightbox-item'); + toggleScroll(); } }, 200); } @@ -151,12 +155,13 @@ Array.prototype.forEach.call(trigger, function (element) { element.addEventListener('click', function (event) { event.preventDefault(); - buildLightbox(this); + buildLightbox(element); + currentTrigger = element; }); }); - Array.prototype.forEach.call(['click', 'keyup'], function (event) { - body.addEventListener(event, function (event) { + ['click', 'keyup'].forEach( function (eventType) { + body.addEventListener(eventType, function (event) { if (body.contains(container)) { var target = event.target, key = event.keyCode, diff --git a/lightbox/lightbox.min.css b/lightbox/lightbox.min.css index dc461c7..03ae78c 100644 --- a/lightbox/lightbox.min.css +++ b/lightbox/lightbox.min.css @@ -1 +1 @@ -.lightbox-hide{top:-9999px;left:-9999px;position:absolute;visibility:hidden}.lightbox-container{top:0;left:0;right:0;bottom:0;padding:2em;display:-webkit-flex;display:-ms-flexbox;display:flex;position:fixed;align-items:center;justify-content:center;background-color:#1d1d1d;background-color:rgba(29,29,29,.8)}.lightbox-wrapper{position:relative}.lightbox-image{vertical-align:middle}.lightbox-btn{width:2.2em;height:2.2em;position:absolute;border-radius:50%;transition:all .3s;background-color:#000;background-position:center;background-repeat:no-repeat}.lightbox-btn:disabled{cursor:initial;background-color:#adadad}.lightbox-btn-close{top:-.8em;right:-.8em;background-size:40%;background-image:url(icons/icon-lightbox-close.svg)}.lightbox-btn-next,.lightbox-btn-previous{top:calc(50% - (2.2em / 2));background-size:25% 80%;background-image:url(icons/icon-lightbox-arrow.svg)}.lightbox-btn-previous{left:1.5em;transform:rotate(180deg)}.lightbox-btn-next{right:1.5em}.lightbox-video-wrapper{width:80vw;overflow:hidden;position:relative;padding-bottom:56.25%}.lightbox-video-player{top:0;left:0;width:100%;height:100%;position:absolute}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes createBox{from{transform:scale(0)}to{transform:scale(1)}}@keyframes deleteBox{from{transform:scale(1)}to{transform:scale(0)}} \ No newline at end of file +.remove-scroll{overflow:hidden}.lightbox-hide{top:-9999px;left:-9999px;position:absolute;visibility:hidden}.lightbox-container{top:0;left:0;right:0;bottom:0;padding:2em;display:-webkit-flex;display:-ms-flexbox;display:flex;position:fixed;align-items:center;justify-content:center;background-color:#1d1d1d;background-color:rgba(29,29,29,.8)}.lightbox-wrapper{position:relative}.lightbox-image{max-height:100vh;vertical-align:middle}.lightbox-btn{width:2.2em;height:2.2em;position:absolute;border-radius:50%;transition:all .3s;background-color:#000;background-position:center;background-repeat:no-repeat}.lightbox-btn:disabled{cursor:initial;background-color:#adadad}.lightbox-btn-close{top:-.8em;right:-.8em;background-size:40%;background-image:url(icons/icon-lightbox-close.svg)}.lightbox-btn-next,.lightbox-btn-previous{top:calc(50% - (2.2em / 2));background-size:25% 80%;background-image:url(icons/icon-lightbox-arrow.svg)}.lightbox-btn-previous{left:1.5em;transform:rotate(180deg)}.lightbox-btn-next{right:1.5em}.lightbox-video-wrapper{width:80vw;overflow:hidden;position:relative;padding-bottom:56.25%}.lightbox-video-player{top:0;left:0;width:100%;height:100%;position:absolute}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes createBox{from{transform:scale(0)}to{transform:scale(1)}}@keyframes deleteBox{from{transform:scale(1)}to{transform:scale(0)}} \ No newline at end of file diff --git a/lightbox/lightbox.min.js b/lightbox/lightbox.min.js index 46e13b1..94c4219 100644 --- a/lightbox/lightbox.min.js +++ b/lightbox/lightbox.min.js @@ -1 +1 @@ -!function(){"use strict";function e(e){var t,l,i=e.getAttribute("href");return i.match(/\.(jpeg|jpg|gif|png)/)?(t=document.createElement("img"),t.className="lightbox-image",t.src=i,t.alt=e.getAttribute("data-image-alt"),t):i.match(/(youtube|vimeo)/)?(l=[],i.match("youtube")&&(l.id=i.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0],l.url="www.youtube.com/embed/",l.options="?autoplay=1&rel=0"),i.match("vimeo")&&(l.id=i.split(/video\/|https:\/\/vimeo\.com\//)[1].split(/[?&]/)[0],l.url="player.vimeo.com/video/",l.options="?autoplay=1title=0&byline=0&portrait=0"),l.player=document.createElement("iframe"),l.player.setAttribute("allowfullscreen",""),l.player.className="lightbox-video-player",l.player.src="https://"+l.url+l.id+l.options,l.wrapper=document.createElement("div"),l.wrapper.className="lightbox-video-wrapper",l.wrapper.appendChild(l.player),l.wrapper):o.querySelector(i).children[0].cloneNode(!0)}function t(e){var t,l={next:e.parentElement.nextElementSibling,previous:e.parentElement.previousElementSibling};for(t in l)null!==l[t]&&(l[t]=l[t].querySelector("[data-lightbox]"));return l}function l(l){if(l.blur(),s=l,l.classList.add("current-lightbox-item"),r=document.createElement("button"),r.className="lightbox-btn lightbox-btn-close",u=document.createElement("div"),u.className="lightbox-content",u.appendChild(e(l)),p=u.cloneNode(!1),p.className="lightbox-wrapper",p.style.animation=[n.scaleIn,n.fadeIn],p.appendChild(u),p.appendChild(r),d=u.cloneNode(!1),d.className="lightbox-container",d.style.animation=n.fadeIn,d.appendChild(p),"gallery"===l.getAttribute("data-lightbox")){d.classList.add("lightbox-gallery");var i;c={next:"",previous:""};for(i in c)c.hasOwnProperty(i)&&(c[i]=r.cloneNode(!1),c[i].className="lightbox-btn lightbox-btn-"+i,c[i].disabled=null===t(l)[i],p.appendChild(c[i]))}o.appendChild(d),o.style.overflow="hidden"}function i(l){p.removeAttribute("style");var i,a=t(s)[l];if(null!==a){u.style.animation=n.fadeOut,setTimeout(function(){u.replaceChild(e(a),u.children[0]),u.style.animation=n.fadeIn},200),s.classList.remove("current-lightbox-item"),a.classList.add("current-lightbox-item"),s=a;for(i in c)c.hasOwnProperty(i)&&(c[i].disabled=null===t(a)[i])}}function a(){d.style.animation=n.fadeOut,p.style.animation=[n.scaleOut,n.fadeOut],setTimeout(function(){o.contains(d)&&(o.removeAttribute("style"),o.removeChild(d),s.focus(),s.classList.remove("current-lightbox-item"))},200)}var n,o,r,c,s,d,u,p,m;m=(o=document.body).querySelectorAll("[data-lightbox]"),n={fadeIn:"fadeIn .3s",fadeOut:"fadeOut .3s",scaleIn:"createBox .3s",scaleOut:"deleteBox .3s"},Array.prototype.forEach.call(m,function(e){e.addEventListener("click",function(e){e.preventDefault(),l(this)})}),Array.prototype.forEach.call(["click","keyup"],function(e){o.addEventListener(e,function(e){if(o.contains(d)){var t=e.target,l=e.keyCode,n=e.type;-1===[d,r].indexOf(t)&&27!==l||a(),d.classList.contains("lightbox-gallery")&&((t===c.next&&"click"===n||39===l)&&i("next"),(t===c.previous&&"click"===n||37===l)&&i("previous"))}})})}(); \ No newline at end of file +!function(){"use strict";function e(){r.classList.toggle("remove-scroll")}function t(e){var t,i,l=e.getAttribute("href");return l.match(/\.(jpeg|jpg|gif|png)/)?(t=document.createElement("img"),t.className="lightbox-image",t.src=l,t.alt=e.getAttribute("data-image-alt"),t):l.match(/(youtube|vimeo)/)?(i=[],l.match("youtube")&&(i.id=l.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0],i.url="www.youtube.com/embed/",i.options="?autoplay=1&rel=0"),l.match("vimeo")&&(i.id=l.split(/video\/|https:\/\/vimeo\.com\//)[1].split(/[?&]/)[0],i.url="player.vimeo.com/video/",i.options="?autoplay=1title=0&byline=0&portrait=0"),i.player=document.createElement("iframe"),i.player.setAttribute("allowfullscreen",""),i.player.className="lightbox-video-player",i.player.src="https://"+i.url+i.id+i.options,i.wrapper=document.createElement("div"),i.wrapper.className="lightbox-video-wrapper",i.wrapper.appendChild(i.player),i.wrapper):r.querySelector(l).children[0].cloneNode(!0)}function i(e){var t,i={next:e.parentElement.nextElementSibling,previous:e.parentElement.previousElementSibling};for(t in i)null!==i[t]&&(i[t]=i[t].querySelector("[data-lightbox]"));return i}function l(l){if(l.blur(),u=l,l.classList.add("current-lightbox-item"),c=document.createElement("button"),c.className="lightbox-btn lightbox-btn-close",p=document.createElement("div"),p.className="lightbox-content",p.appendChild(t(l)),m=p.cloneNode(!1),m.className="lightbox-wrapper",m.style.animation=[o.scaleIn,o.fadeIn],m.appendChild(p),m.appendChild(c),d=p.cloneNode(!1),d.className="lightbox-container",d.style.animation=o.fadeIn,d.onclick=function(){},d.appendChild(m),"gallery"===l.getAttribute("data-lightbox")){d.classList.add("lightbox-gallery");var a;s={next:"",previous:""};for(a in s)s.hasOwnProperty(a)&&(s[a]=c.cloneNode(!1),s[a].className="lightbox-btn lightbox-btn-"+a,s[a].disabled=null===i(l)[a],m.appendChild(s[a]))}r.appendChild(d),e()}function a(e){m.removeAttribute("style");var l,a=i(u)[e];if(null!==a){p.style.animation=o.fadeOut,setTimeout(function(){p.replaceChild(t(a),p.children[0]),p.style.animation=o.fadeIn},200),u.classList.remove("current-lightbox-item"),a.classList.add("current-lightbox-item"),u=a;for(l in s)s.hasOwnProperty(l)&&(s[l].disabled=null===i(a)[l])}}function n(){d.style.animation=o.fadeOut,m.style.animation=[o.scaleOut,o.fadeOut],setTimeout(function(){r.contains(d)&&(r.removeChild(d),h.focus(),u.classList.remove("current-lightbox-item"),e())},200)}var o,r,c,s,u,d,p,m,b,h;b=(r=document.body).querySelectorAll("[data-lightbox]"),o={fadeIn:"fadeIn .3s",fadeOut:"fadeOut .3s",scaleIn:"createBox .3s",scaleOut:"deleteBox .3s"},Array.prototype.forEach.call(b,function(e){e.addEventListener("click",function(t){t.preventDefault(),l(e),h=e})}),["click","keyup"].forEach(function(e){r.addEventListener(e,function(e){if(r.contains(d)){var t=e.target,i=e.keyCode,l=e.type;-1===[d,c].indexOf(t)&&27!==i||n(),d.classList.contains("lightbox-gallery")&&((t===s.next&&"click"===l||39===i)&&a("next"),(t===s.previous&&"click"===l||37===i)&&a("previous"))}})})}(); \ No newline at end of file