bs5-lightbox - npm Package Compare versions

Comparing version 1.2.6 to 1.2.7

bs5-lightbox.esm.js

@@ -86,4 +86,5 @@ /**
 			src = src.replace(/\/$/, '');
-			let destroyLoader = /\.png/.test(src) ? `onload="this.add.previousSibling.remove()"` : '';
-			let inner = `<img src="${src}" class="d-block w-100 position-relative" style="z-index: 1;" ${destroyLoader} />`;
+			let onload = 'this.style.opacity = 1;';
+			onload += /\.png/.test(src) ? `this.add.previousSibling.remove();` : '';
+			let inner = `<img src="${src}" class="d-block w-100 position-relative" style="z-index: 1; opacity: 0;" onload="${onload}" />`;
 			let attributes = '';
@@ -101,3 +102,3 @@ const instagramEmbed = this.#getInstagramEmbed(src);
 			const spinner = `<div class="position-absolute top-50 start-50 translate-middle text-white"><div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"></div></div>`;
-			return `<div class="carousel-item ${!i ? 'active' : ''}">${spinner}${inner}</div>`
+			return `<div class="carousel-item ${!i ? 'active' : ''}" style="min-height: 100px;">${spinner}${inner}</div>`
 		}).join('');
@@ -104,0 +105,0 @@ const controlsHtml = this.sources.length < 2 ? '' : `

bs5-lightbox.min.js

 /*!
- * Lightbox for Bootstrap 5 v1.2.6 (https://trvswgnr.github.io/bs5-lightbox/)
+ * Lightbox for Bootstrap 5 v1.2.7 (https://trvswgnr.github.io/bs5-lightbox/)
  * Copyright 2021 Travis Aaron Wagner (https://github.com/trvswgnr/)
  * Licensed under MIT (https://github.com/trvswgnr/bs5-lightbox/blob/main/LICENSE)
- */!function(){"use strict";var t=bootstrap;function e(t,e){s(t,e),e.add(t)}function a(t,e,a){s(t,e),e.set(t,a)}function s(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")}function i(t,e,a){return function(t,e,a){if(e.set)e.set.call(t,a);else{if(!e.writable)throw new TypeError("attempted to set read only private field");e.value=a}}(t,o(t,e,"set"),a),a}function n(t,e){return function(t,e){if(e.get)return e.get.call(t);return e.value}(t,o(t,e,"get"))}function o(t,e,a){if(!e.has(t))throw new TypeError("attempted to "+a+" private field on non-instance");return e.get(t)}function r(t,e,a){if(!e.has(t))throw new TypeError("attempted to get private field on non-instance");return a}var l=new WeakMap,c=new WeakMap,d=new WeakMap,h=new WeakSet,u=new WeakSet,m=new WeakSet,p=new WeakSet,v=new WeakSet,b=new WeakSet,f=new WeakSet,g=new WeakSet;function y(t){return t.dataset.src||t.dataset.remote||t.href||"http://via.placeholder.com/1600x900"}function w(){let t="";if(n(this,l).gallery){if(Array.isArray(n(this,l).gallery))return n(this,l).gallery;t=n(this,l).gallery}else this.el.dataset.gallery&&(t=this.el.dataset.gallery);return t?[...new Set(Array.from(document.querySelectorAll('[data-gallery="'.concat(t,'"]')),(t=>"".concat(t.dataset.type?"embed":"").concat(r(this,h,y).call(this,t)))))]:[this.src]}function x(t){if(!t)return!1;let e=t.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);return!(!e||11!==e[2].length)&&e[2]}function E(t){if(/instagram/.test(t))return t+=/\/embed$/.test(t)?"":"/embed",'<div class="ratio ratio-1x1" style="max-height: 69vh;"><iframe src="'.concat(t,'" class="start-50 translate-middle-x" style="max-width: 500px;" frameborder="0" scrolling="no" allowtransparency="true"></iframe></div>')}function S(t){const e=new RegExp(n(this,c).join("|")).test(t),a=/\.(png|jpe?g|gif|svg|webp)/.test(t);return e||!a}function k(){const e=document.createElement("template"),a=this.sources.map(((t,e)=>{t=t.replace(/\/$/,"");let a=/\.png/.test(t)?'onload="this.add.previousSibling.remove()"':"",s='<img src="'.concat(t,'" class="d-block w-100 position-relative" style="z-index: 1;" ').concat(a," />"),i="";const n=r(this,p,E).call(this,t),o=r(this,m,x).call(this,t);r(this,v,S).call(this,t)&&(/^embed/.test(t)&&(t=t.substring(5)),o&&(t="https://www.youtube.com/embed/".concat(o),i='title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"'),s=n||'<div class="ratio ratio-16x9"><iframe src="'.concat(t,'" ').concat(i," allowfullscreen></iframe></div>"));return'<div class="carousel-item '.concat(e?"":"active",'">').concat('<div class="position-absolute top-50 start-50 translate-middle text-white"><div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"></div></div>').concat(s,"</div>")})).join(""),s=this.sources.length<2?"":'\n\t\t\t<button class="carousel-control carousel-control-prev h-75 m-auto" type="button" data-bs-target="#lightboxCarousel-'.concat(n(this,d),'" data-bs-slide="prev">\n\t\t\t\t<span class="carousel-control-prev-icon" aria-hidden="true"></span>\n\t\t\t\t<span class="visually-hidden">Previous</span>\n\t\t\t</button>\n\t\t\t<button class="carousel-control carousel-control-next h-75 m-auto" type="button" data-bs-target="#lightboxCarousel-').concat(n(this,d),'" data-bs-slide="next">\n\t\t\t\t<span class="carousel-control-next-icon" aria-hidden="true"></span>\n\t\t\t\t<span class="visually-hidden">Next</span>\n\t\t\t</button>'),i='\n\t\t\t<div id="lightboxCarousel-'.concat(n(this,d),'" class="lightbox-carousel carousel" data-interval="false">\n\t\t\t\t<div class="carousel-inner">\n\t\t\t\t\t').concat(a,"\n\t\t\t\t</div>\n\t\t\t\t").concat(s,"\n\t\t\t</div>");e.innerHTML=i.trim(),this.carouselEl=e.content.firstChild,this.carousel=new t.Carousel(this.carouselEl,{ride:!1,interval:!1}),this.carousel.to(this.sources.includes(this.src)?this.sources.indexOf(this.src):0)}function W(){const e=document.createElement("template"),a='\n\t\t\t<div class="modal lightbox fade" id="lightboxModal-'.concat(n(this,d),'" tabindex="-1" aria-hidden="true">\n\t\t\t\t<div class="modal-dialog modal-dialog-centered modal-xl">\n\t\t\t\t\t<div class="modal-content border-0 bg-transparent">\n\t\t\t\t\t\t<div class="modal-body p-0">\n\t\t\t\t\t\t\t<button type="button" class="btn-close position-absolute top-0 end-0 p-3" data-bs-dismiss="modal" aria-label="Close" style="z-index: 2;"></button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>');e.innerHTML=a.trim(),this.modalEl=e.content.firstChild,this.modalEl.querySelector(".modal-body").appendChild(this.carouselEl),this.modalEl.addEventListener("hidden.bs.modal",(t=>this.modalEl.remove())),document.body.appendChild(this.modalEl),this.modal=new t.Modal(this.modalEl),this.modal.show()}function C(t=8){return Array.from({length:t},(()=>Math.floor(36*Math.random()).toString(36))).join("")}var M=class{constructor(t={}){e(this,g),e(this,f),e(this,b),e(this,v),e(this,p),e(this,m),e(this,u),e(this,h),a(this,l,{writable:!0,value:{target:'[data-toggle="lightbox"]'}}),a(this,c,{writable:!0,value:["embed","youtube","vimeo","instagram"]}),a(this,d,{writable:!0,value:r(this,g,C).call(this)}),"string"==typeof t&&(n(this,l).target=t,t=void 0!==arguments[1]?arguments[1]:{}),i(this,l,{...n(this,l),...t}),document.querySelectorAll(n(this,l).target).forEach((t=>{t.addEventListener("click",(e=>{e.preventDefault(),this.el=t,this.type=t.dataset.type||"image",this.src=r(this,h,y).call(this,t),this.src="image"!==this.type?"embed"+this.src:this.src,this.sources=r(this,u,w).call(this),r(this,b,k).call(this),r(this,f,W).call(this)}))}))}};new M}();
+ */!function(){"use strict";var t=bootstrap;function e(t,e){s(t,e),e.add(t)}function a(t,e,a){s(t,e),e.set(t,a)}function s(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")}function i(t,e,a){return function(t,e,a){if(e.set)e.set.call(t,a);else{if(!e.writable)throw new TypeError("attempted to set read only private field");e.value=a}}(t,o(t,e,"set"),a),a}function n(t,e){return function(t,e){if(e.get)return e.get.call(t);return e.value}(t,o(t,e,"get"))}function o(t,e,a){if(!e.has(t))throw new TypeError("attempted to "+a+" private field on non-instance");return e.get(t)}function l(t,e,a){if(!e.has(t))throw new TypeError("attempted to get private field on non-instance");return a}var r=new WeakMap,c=new WeakMap,d=new WeakMap,h=new WeakSet,u=new WeakSet,m=new WeakSet,p=new WeakSet,v=new WeakSet,b=new WeakSet,g=new WeakSet,f=new WeakSet;function y(t){return t.dataset.src||t.dataset.remote||t.href||"http://via.placeholder.com/1600x900"}function w(){let t="";if(n(this,r).gallery){if(Array.isArray(n(this,r).gallery))return n(this,r).gallery;t=n(this,r).gallery}else this.el.dataset.gallery&&(t=this.el.dataset.gallery);return t?[...new Set(Array.from(document.querySelectorAll('[data-gallery="'.concat(t,'"]')),(t=>"".concat(t.dataset.type?"embed":"").concat(l(this,h,y).call(this,t)))))]:[this.src]}function x(t){if(!t)return!1;let e=t.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);return!(!e||11!==e[2].length)&&e[2]}function E(t){if(/instagram/.test(t))return t+=/\/embed$/.test(t)?"":"/embed",'<div class="ratio ratio-1x1" style="max-height: 69vh;"><iframe src="'.concat(t,'" class="start-50 translate-middle-x" style="max-width: 500px;" frameborder="0" scrolling="no" allowtransparency="true"></iframe></div>')}function S(t){const e=new RegExp(n(this,c).join("|")).test(t),a=/\.(png|jpe?g|gif|svg|webp)/.test(t);return e||!a}function k(){const e=document.createElement("template"),a=this.sources.map(((t,e)=>{t=t.replace(/\/$/,"");let a="this.style.opacity = 1;";a+=/\.png/.test(t)?"this.add.previousSibling.remove();":"";let s='<img src="'.concat(t,'" class="d-block w-100 position-relative" style="z-index: 1; opacity: 0;" onload="').concat(a,'" />'),i="";const n=l(this,p,E).call(this,t),o=l(this,m,x).call(this,t);l(this,v,S).call(this,t)&&(/^embed/.test(t)&&(t=t.substring(5)),o&&(t="https://www.youtube.com/embed/".concat(o),i='title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"'),s=n||'<div class="ratio ratio-16x9"><iframe src="'.concat(t,'" ').concat(i," allowfullscreen></iframe></div>"));return'<div class="carousel-item '.concat(e?"":"active",'" style="min-height: 100px;">').concat('<div class="position-absolute top-50 start-50 translate-middle text-white"><div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"></div></div>').concat(s,"</div>")})).join(""),s=this.sources.length<2?"":'\n\t\t\t<button class="carousel-control carousel-control-prev h-75 m-auto" type="button" data-bs-target="#lightboxCarousel-'.concat(n(this,d),'" data-bs-slide="prev">\n\t\t\t\t<span class="carousel-control-prev-icon" aria-hidden="true"></span>\n\t\t\t\t<span class="visually-hidden">Previous</span>\n\t\t\t</button>\n\t\t\t<button class="carousel-control carousel-control-next h-75 m-auto" type="button" data-bs-target="#lightboxCarousel-').concat(n(this,d),'" data-bs-slide="next">\n\t\t\t\t<span class="carousel-control-next-icon" aria-hidden="true"></span>\n\t\t\t\t<span class="visually-hidden">Next</span>\n\t\t\t</button>'),i='\n\t\t\t<div id="lightboxCarousel-'.concat(n(this,d),'" class="lightbox-carousel carousel" data-interval="false">\n\t\t\t\t<div class="carousel-inner">\n\t\t\t\t\t').concat(a,"\n\t\t\t\t</div>\n\t\t\t\t").concat(s,"\n\t\t\t</div>");e.innerHTML=i.trim(),this.carouselEl=e.content.firstChild,this.carousel=new t.Carousel(this.carouselEl,{ride:!1,interval:!1}),this.carousel.to(this.sources.includes(this.src)?this.sources.indexOf(this.src):0)}function W(){const e=document.createElement("template"),a='\n\t\t\t<div class="modal lightbox fade" id="lightboxModal-'.concat(n(this,d),'" tabindex="-1" aria-hidden="true">\n\t\t\t\t<div class="modal-dialog modal-dialog-centered modal-xl">\n\t\t\t\t\t<div class="modal-content border-0 bg-transparent">\n\t\t\t\t\t\t<div class="modal-body p-0">\n\t\t\t\t\t\t\t<button type="button" class="btn-close position-absolute top-0 end-0 p-3" data-bs-dismiss="modal" aria-label="Close" style="z-index: 2;"></button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>');e.innerHTML=a.trim(),this.modalEl=e.content.firstChild,this.modalEl.querySelector(".modal-body").appendChild(this.carouselEl),this.modalEl.addEventListener("hidden.bs.modal",(t=>this.modalEl.remove())),document.body.appendChild(this.modalEl),this.modal=new t.Modal(this.modalEl),this.modal.show()}function C(t=8){return Array.from({length:t},(()=>Math.floor(36*Math.random()).toString(36))).join("")}var M=class{constructor(t={}){e(this,f),e(this,g),e(this,b),e(this,v),e(this,p),e(this,m),e(this,u),e(this,h),a(this,r,{writable:!0,value:{target:'[data-toggle="lightbox"]'}}),a(this,c,{writable:!0,value:["embed","youtube","vimeo","instagram"]}),a(this,d,{writable:!0,value:l(this,f,C).call(this)}),"string"==typeof t&&(n(this,r).target=t,t=void 0!==arguments[1]?arguments[1]:{}),i(this,r,{...n(this,r),...t}),document.querySelectorAll(n(this,r).target).forEach((t=>{t.addEventListener("click",(e=>{e.preventDefault(),this.el=t,this.type=t.dataset.type||"image",this.src=l(this,h,y).call(this,t),this.src="image"!==this.type?"embed"+this.src:this.src,this.sources=l(this,u,w).call(this),l(this,b,k).call(this),l(this,g,W).call(this)}))}))}};new M}();

package.json

 {
   "name": "bs5-lightbox",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "author": {
@@ -5,0 +5,0 @@ "name": "Travis Aaron Wagner",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16152

increased by0.87%

Lines of code

156

increased by0.65%

No dependency changes