bs5-lightbox - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

bs5-lightbox.esm.js

@@ -14,2 +14,4 @@ /**
 
+	#types = ['embed', 'youtube', 'vimeo', 'image', 'instagram']
+
 	#hash = this.#randomHash();
@@ -33,3 +35,3 @@
 				this.type = el.dataset.type || 'image';
-				this.src = el.href || el.dataset.src || 'http://via.placeholder.com/1600x900';
+				this.src = el.href || el.dataset.src || el.dataset.remote || 'http://via.placeholder.com/1600x900';
 				this.src = this.type !== 'image' ? 'embed' + this.src : this.src;
@@ -53,3 +55,3 @@ this.sources = this.#getGalleryItems();
 		}
-		const gallery = galleryTarget ? [...new Set(Array.from(document.querySelectorAll(`[data-gallery="${galleryTarget}"]`), v => `${v.dataset.type ? 'embed' : ''}${v.href || v.dataset.src || 'http://via.placeholder.com/1600x900'}`))] : [this.src];
+		const gallery = galleryTarget ? [...new Set(Array.from(document.querySelectorAll(`[data-gallery="${galleryTarget}"]`), v => `${v.dataset.type ? 'embed' : ''}${v.href || v.dataset.src || v.dataset.remote || 'http://via.placeholder.com/1600x900'}`))] : [this.src];
 		console.log(gallery);
@@ -59,8 +61,35 @@ return gallery;
 
+	#getYoutubeId(string) {
+		if (!string) return false;
+		let matches = string.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
+		return (matches && matches[2].length === 11) ? matches[2] : false;
+	}
+
+	#getInstagramEmbed(src) {
+		if (/instagram/.test(src)) {
+			src += /\/embed$/.test(src) ? '' : '/embed';
+			return `<div class="ratio ratio-1x1" style="max-height: 69vh;"><iframe src="${src}" class="start-50 translate-middle-x" style="max-width: 500px;" frameborder="0" scrolling="no" allowtransparency="true"></iframe></div>`;
+		}
+	}
+
+	#isEmbed(src) {
+		const regex = new RegExp(this.#types.join('|'));
+		return regex.test(src);
+	}
+
 	#createCarousel() {
 		const template = document.createElement('template');
 		const slidesHtml = this.sources.map((src, i) => {
+			src = src.replace(/\/$/, '');
 			let inner = `<img src="${src}" class="d-block w-100" />`;
-			if (/^embed/.test(src)) {
-				inner = `<div class="ratio ratio-16x9"><iframe src="${src.substring(5)}" allowfullscreen></iframe></div>`;
+			let attributes = '';
+			const instagramEmbed = this.#getInstagramEmbed(src);
+			const youtubeId = this.#getYoutubeId(src);
+			if (this.#isEmbed(src)) {
+				if (/^embed/.test(src)) src = src.substring(5);
+				if (youtubeId) {
+					src = `https://www.youtube.com/embed/${youtubeId}`;
+					attributes = 'title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"';
+				}
+				inner = instagramEmbed || `<div class="ratio ratio-16x9"><iframe src="${src}" ${attributes} allowfullscreen></iframe></div>`;
 			}
@@ -70,7 +99,7 @@ return `<div class="carousel-item ${!i ? 'active' : ''}">${inner}</div>`
 		const controlsHtml = this.sources.length < 2 ? '' : `
-			<button class="carousel-control carousel-control-prev" type="button" data-bs-target="#lightboxCarousel-${this.#hash}" data-bs-slide="prev">
+			<button class="carousel-control carousel-control-prev h-75 m-auto" type="button" data-bs-target="#lightboxCarousel-${this.#hash}" data-bs-slide="prev">
 				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
 				<span class="visually-hidden">Previous</span>
 			</button>
-			<button class="carousel-control carousel-control-next" type="button" data-bs-target="#lightboxCarousel-${this.#hash}" data-bs-slide="next">
+			<button class="carousel-control carousel-control-next h-75 m-auto" type="button" data-bs-target="#lightboxCarousel-${this.#hash}" data-bs-slide="next">
 				<span class="carousel-control-next-icon" aria-hidden="true"></span>
@@ -77,0 +106,0 @@ <span class="visually-hidden">Next</span>

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

8375

increased by17.78%

Lines of code

154

increased by19.38%

No dependency changes