bs5-lightbox - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

bs5-lightbox.esm.js

@@ -8,3 +8,4 @@ /**
 
-import { Modal, Carousel } from 'bootstrap';
+import * as bootstrap from 'bootstrap';
+
 class Lightbox {
@@ -35,3 +36,3 @@ #settings = {
 				this.type = el.dataset.type || 'image';
-				this.src = el.href || el.dataset.src || el.dataset.remote || 'http://via.placeholder.com/1600x900';
+				this.src = this.#getSrc(el);
 				this.src = this.type !== 'image' ? 'embed' + this.src : this.src;
@@ -45,2 +46,6 @@ this.sources = this.#getGalleryItems();
 
+	#getSrc(el) {
+		return el.dataset.src || el.dataset.remote || el.href || 'http://via.placeholder.com/1600x900';
+	}
+
 	#getGalleryItems() {
@@ -56,4 +61,3 @@ let galleryTarget = '';
 		}
-		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);
+		const gallery = galleryTarget ? [...new Set(Array.from(document.querySelectorAll(`[data-gallery="${galleryTarget}"]`), v => `${v.dataset.type ? 'embed' : ''}${this.#getSrc(v)}`))] : [this.src];
 		return gallery; 
@@ -118,3 +122,3 @@ }
 		this.carouselEl = template.content.firstChild;
-		this.carousel = new Carousel(this.carouselEl, {
+		this.carousel = new bootstrap.Carousel(this.carouselEl, {
 			ride: false,
@@ -131,3 +135,3 @@ interval: false
 				<div class="modal-dialog modal-dialog-centered modal-xl">
-					<div class="modal-content">
+					<div class="modal-content border-0">
 						<div class="modal-body p-0">
@@ -147,3 +151,3 @@ <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>
 
-		this.modal = new Modal(this.modalEl);
+		this.modal = new bootstrap.Modal(this.modalEl);
 		this.modal.show();
@@ -150,0 +154,0 @@ }

package.json

 {
   "name": "bs5-lightbox",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "author": {
@@ -22,2 +22,3 @@ "name": "Travis Aaron Wagner",
   "main": "bs5-lightbox.js",
+  "module": "bs5-lightbox.esm.js",
   "repository": {
@@ -31,4 +32,28 @@ "type": "git",
   },
+  "scripts": {
+    "build": "webpack --mode=production",
+    "dev": "webpack --mode=development",
+    "start": "webpack --mode=development --watch"
+  },
   "bundleDependencies": false,
-  "deprecated": false
+  "deprecated": false,
+  "funding": "https://github.com/sponsors/trvswgnr",
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "babel-loader": "^8.2.2",
+    "webpack": "^5.53.0",
+    "webpack-cli": "^4.8.0"
+  },
+  "browserslist": [
+    ">= 0.5%",
+    "last 2 major versions",
+    "not dead",
+    "Chrome >= 60",
+    "Firefox >= 60",
+    "Firefox ESR",
+    "iOS >= 12",
+    "Safari >= 12",
+    "not Explorer <= 11"
+  ]
 }

README.md

@@ -1,13 +0,39 @@
-Lightbox for Bootstrap 5
-========
+# Lightbox for Bootstrap 5
+A lightbox module written in pure ES6 JavaScript for Bootstrap that supports images, galleries, YouTube, Vimeo, and Instagram—built around Bootstrap's Modal and Carousel plugins.
 
-A lightbox module written in vanilla JavaScript for Bootstrap that supports images, galleries, YouTube, Vimeo, and Instagram—built around Bootstrap's Modal and Carousel plugins.
+Have you been using [Lightbox for Bootstrap (ekko-lightbox)](https://github.com/ashleydw/lightbox) but recently moved to Bootstrap 5? This is your replacement.
 
-Contributing
-----
-Modify the bs5-lightbox.esm.js file instead of the bs5-lightbox.js file.
+## Installation
+##### Install with NPM:
+```shell
+npm i bs5-lightbox
+```
 
-Copyright and license
-----
+Lightbox for Bootstrap 5 will automatically initialize on import:
+```js
+import 'bs5-lightbox'
+```
+By default it will target elements with the `data-toggle-"lightbox"` attribute.
 
-Code released under [the MIT license](https://github.com/trvswgnr/bs5-lightbox/blob/master/LICENSE).
+If you want to target a different element, import the `Lightbox` class and instantiate it:
+```js
+import Lightbox from 'bs5-lightbox'
+
+const lightbox = new Lightbox('.my-lightbox-toggle')
+```
+
+If you only want the `Lightbox` class without automatically initialization, import the module instead:
+```js
+import Lightbox from 'bs5-lightbox.esm'
+
+const lightbox = new Lightbox('.my-lightbox-toggle')
+```
+
+## Contributing
+Modify the bs5-lightbox.esm.js file and create a pull request.
+
+You can help make this project even better and keep it up to date by making a small contribution! [Fund this project](https://github.com/sponsors/trvswgnr).
+
+## Copyright and license
+
+Code released under [the MIT license](https://github.com/trvswgnr/bs5-lightbox/blob/main/LICENSE).

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

16271

increased by92.65%

Number of package files

8

increased by14.29%

Number of lines in readme file

40

increased by185.71%

Worsened metrics

Dev dependency count

5

increased byInfinity%

Lines of code

147

decreased by-4.55%

No dependency changes