Compat export.

Author: yusuke-omae

.eslintrc.json

@@ -4,7 +4,7 @@
   "parserOptions": { "sourceType": "module", "ecmaVersion": 2022 },
   "overrides": [
     {
-      "files": ["src/js/*.js"],
+      "files": ["src/js/*.mjs"],
       "extends": ["eslint:recommended", "prettier"],
       "parserOptions": {
         "project": ["./tsconfig.json"]

dist/js/lightbox.cjs

@@ -20,8 +20,16 @@
   },
   "exports": {
     ".": {
-      "import": "./dist/js/lightbox.mjs",
-      "require": "./dist/js/lightbox.cjs",
+      "node": {
+        "import": "./dist/js/lightbox.mjs",
+        "require": "./dist/js/lightbox.cjs",
+        "default": "./dist/js/lightbox.js"
+      },
+      "browser": {
+        "import": "./dist/js/lightbox.mjs",
+        "require": "./dist/js/lightbox.cjs",
+        "default": "./dist/js/lightbox.js"
+      },
       "default": "./dist/js/lightbox.js"
     },
     "./css": "./dist/css/*.css",
@@ -56,7 +64,7 @@
     "format:js": "prettier --write src/ts",
     "lint": "run-p lint:*",
     "lint:css": "stylelint src/css/lightbox.css",
-    "lint:js": "eslint src/js/*.js",
+    "lint:js": "eslint src/js/*.mjs",
     "prebuild:js": "npm run clean:js",
     "watch": "run-p watch:*",
     "watch:css": "npm run build:css -- -w",

dist/js/lightbox.js

@@ -21,7 +21,6 @@ const errors = [];
 for (const result of results) {
   if (result.status === 'rejected') {
     errors.push(result.reason);
-    continue;
   } else if (result.value.errors.length > 0) {
     errors.push(...result.value.errors);
   }

dist/js/lightbox.mjs

@@ -10,9 +10,8 @@ const browserslistPlugin = esbuildPluginBrowserslist(browserslist(), {
 
 /** @type {BuildOptions} */
 export const commonConfig = {
-  entryPoints: ['src/js/lightbox.js'],
   outbase: 'src/js',
-  bundle: false,
+  bundle: true,
   banner: {
     js: `/*!
   * Lightbox v2.11.2
@@ -32,13 +31,15 @@ export const commonConfig = {
 
 /** @type {BuildOptions} */
 export const esmConfig = {
+  entryPoints: ['src/js/lightbox.mjs'],
   format: 'esm',
   outfile: 'dist/js/lightbox.mjs',
   plugins: [browserslistPlugin]
 };
 
 /** @type {BuildOptions} */
 export const cjsConfig = {
+  entryPoints: ['src/js/lightbox.cjs'],
   format: 'cjs',
   platform: 'node',
   outfile: 'dist/js/lightbox.cjs',
@@ -47,9 +48,9 @@ export const cjsConfig = {
 
 /** @type {BuildOptions} */
 export const browserConfig = {
+  entryPoints: ['src/js/browser.mjs'],
   format: 'iife',
   platform: 'browser',
-  globalName: 'lightbox',
   outfile: 'dist/js/lightbox.js',
   plugins: [browserslistPlugin]
 };

package.json

@@ -0,0 +1,2 @@
+import lightbox from './lightbox.mjs';
+window.lightbox = lightbox;

scripts/build.mjs

@@ -0,0 +1,2 @@
+const { lightbox } = require('./lightbox.mjs');
+module.exports = lightbox;

scripts/config.mjs

@@ -15,7 +15,7 @@ const domReady = (callback) => {
 class Lightbox {
   album = [];
   currentImageIndex = 0;
-  options;
+  options = Object.assign(Object.create(null), Lightbox.defaults);
   /** @type {HTMLElement} */
   lightbox;
   /** @type {HTMLElement} */
@@ -52,9 +52,6 @@ class Lightbox {
 
   constructor(options) {
     this.init();
-
-    // options
-    this.options = Object.assign({}, Lightbox.defaults);
     this.option(options);
   }
 
@@ -253,7 +250,7 @@ class Lightbox {
      *  events as usual.
      */
     this.nav.addEventListener('mousedown', (event) => {
-      if (event.which === 3) {
+      if (event.button === 2) {
         this.nav.style.pointerEvents = 'none';
 
         this.lightbox.addEventListener(
@@ -308,21 +305,19 @@ class Lightbox {
           imageNumber = i;
         }
       }
+    } else if (link.rel === 'lightbox') {
+      // If image is not part of a set
+      addToAlbum(link);
     } else {
-      if (link.rel === 'lightbox') {
-        // If image is not part of a set
-        addToAlbum(link);
-      } else {
-        // If image is part of a set
-        /** @type {NodeListOf<HTMLAnchorElement|HTMLAreaElement>} */
-        const links = document.querySelectorAll(
-          `${link.tagName}[rel="${link.rel}"]`
-        );
-        for (let j = 0; j < links.length; j = ++j) {
-          addToAlbum(links[j]);
-          if (links[j] === link) {
-            imageNumber = j;
-          }
+      // If image is part of a set
+      /** @type {NodeListOf<HTMLAnchorElement|HTMLAreaElement>} */
+      const links = document.querySelectorAll(
+        `${link.tagName}[rel="${link.rel}"]`
+      );
+      for (let j = 0; j < links.length; j = ++j) {
+        addToAlbum(links[j]);
+        if (links[j] === link) {
+          imageNumber = j;
         }
       }
     }
@@ -334,7 +329,10 @@ class Lightbox {
     lightbox.style.top = `${top}px`;
     lightbox.style.left = `${left}px`;
     lightbox.style.display = 'block';
-    lightbox.animate({ opacity: 1 }, { duration: this.options.fadeDuration });
+    lightbox.animate(
+      { opacity: [0, 1] },
+      { duration: this.options.fadeDuration }
+    );
 
     // Disable scrolling of the page while open
     if (this.options.disableScrolling) {
@@ -348,21 +346,21 @@ class Lightbox {
   changeImage(imageNumber) {
     const filename = this.album[imageNumber].link;
     const filetype = filename.split('.').slice(-1)[0];
-    const { image } = this;
+    const { image, overlay, loader } = this;
 
     // Disable keyboard nav during transitions
     this.disableKeyboardNav();
 
     // Show loading state
-    this.overlay.style.display = 'block';
-    this.overlay.animate(
+    overlay.style.display = 'block';
+    overlay.animate(
       { opacity: [0, 0.8] },
       {
         duration: this.options.fadeDuration
       }
     );
-    this.loader.style.display = 'block';
-    this.loader.animate({ opacity: [0, 1] }, { duration: 600 });
+    loader.style.display = 'block';
+    loader.animate({ opacity: [0, 1] }, { duration: 600 });
     for (const element of [
       image,
       this.nav,
@@ -381,8 +379,7 @@ class Lightbox {
       image.alt = this.album[imageNumber].alt;
       image.src = filename;
 
-      let width = preloader.width;
-      let height = preloader.height;
+      let { width, height } = preloader;
 
       // Calculate the max image dimensions for the current viewport.
       // Take into account the border around the image and an additional 10px gutter on each side.
@@ -701,4 +698,5 @@ class Lightbox {
   }
 }
 
-export default new Lightbox();
+export const lightbox = new Lightbox();
+export { lightbox as default };