bs5-lightbox - npm Package Compare versions

Comparing version 1.0.8 to 1.1.0

bs5-lightbox.esm.js

@@ -8,4 +8,3 @@ /**
 
-import { Modal } from 'bootstrap';
-
+import { Modal, Carousel } from 'bootstrap';
 class Lightbox {
@@ -21,3 +20,3 @@ #settings = {
 			this.#settings.target = options;
-			options = {};
+			options = typeof arguments[1] !== 'undefined' ? arguments[1] : {};
 		}
@@ -33,4 +32,7 @@
 				e.preventDefault();
-				this.src = el.href || el.dataset.remote || 'http://via.placeholder.com/1600x900';
-				this.sources = el.dataset.gallery ? [...new Set(Array.from(document.querySelectorAll(`[data-gallery="${el.dataset.gallery}"]`), v => v.href || v.dataset.remote || 'http://via.placeholder.com/1600x900'))] : [this.src];
+				this.el = el;
+				this.type = el.dataset.type || 'image';
+				this.src = el.href || el.dataset.src || 'http://via.placeholder.com/1600x900';
+				this.src = this.type !== 'image' ? 'embed' + this.src : this.src;
+				this.sources = this.#getGalleryItems();
 				this.#createCarousel();
@@ -42,6 +44,27 @@ this.#createModal();
 
+	#getGalleryItems() {
+		let galleryTarget = '';
+		if (this.#settings.gallery) {
+			if (Array.isArray(this.#settings.gallery)) {
+				return this.#settings.gallery;
+			}
+			galleryTarget = this.#settings.gallery;
+		} else if (this.el.dataset.gallery) {
+			galleryTarget = this.el.dataset.gallery;
+		}
+		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];
+		console.log(gallery);
+		return gallery; 
+	}
+
 	#createCarousel() {
 		const template = document.createElement('template');
-		const slidesHtml = this.sources.map((src, i) => `<div class="carousel-item ${i === this.sources.indexOf(this.src) ? 'active' : ''}"><img src="${src}" class="d-block w-100"></div>`).join('');
-		const controlsHtml = this.sources.length < 1 ? '' : `
+		const slidesHtml = this.sources.map((src, i) => {
+			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>`;
+			}
+			return `<div class="carousel-item ${!i ? 'active' : ''}">${inner}</div>`
+		}).join('');
+		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">
@@ -57,3 +80,3 @@ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 		const html = `
-			<div id="lightboxCarousel-${this.#hash}" class="lightbox-carousel carousel" data-ride="carousel" data-interval="false">
+			<div id="lightboxCarousel-${this.#hash}" class="lightbox-carousel carousel" data-interval="false">
 				<div class="carousel-inner">
@@ -67,2 +90,7 @@ ${slidesHtml}
 		this.carouselEl = template.content.firstChild;
+		this.carousel = new Carousel(this.carouselEl, {
+			ride: false,
+			interval: false
+		});
+		this.carousel.to(this.sources.includes(this.src) ? this.sources.indexOf(this.src) : 0);
 	}
@@ -69,0 +97,0 @@

package.json

 {
   "name": "bs5-lightbox",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "author": {
@@ -21,4 +21,3 @@ "name": "Travis Aaron Wagner",
   "license": "MIT",
-  "main": "bs5-lightbox",
-  "typings": "bs5-lightbox",
+  "main": "bs5-lightbox.js",
   "repository": {
@@ -25,0 +24,0 @@ "type": "git",

README.md

 Lightbox for Bootstrap 5
 ========
 
-A lightbox module written in vanilla JavaScript for Bootstrap that supports images, YouTube videos, and galleries - built around Bootstrap's Modal and Carousel plugins.
+A lightbox module written in vanilla JavaScript for Bootstrap that supports images and galleries—built around Bootstrap's Modal and Carousel plugins.
 
-See the github page for docs: http://trvswgnr.github.io/bs5-lightbox
-
 Contributing
@@ -9,0 +7,0 @@ ----

No alert changes

Improved metrics

Total package byte prevSize

7111

increased by7.96%

Lines of code

129

increased by40.22%

Worsened metrics

Number of lines in readme file

14

decreased by-12.5%

No dependency changes