Upgrade AvalynxLightbox to version 1.0.2

Bumped version references to 1.0.2. Added german README (README.de.md), improved code coverage with Istanbul, introduced GitHub Actions for tests, and updated Jest configuration. Enhanced `.gitignore` and refined lightbox packaging for better usability.

Author: jschwind

.github/workflows/tests.yml

@@ -0,0 +1,36 @@
+name: Tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests with coverage
+        run: npm test -- --coverage
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          files: ./coverage/lcov.info
+          flags: unittests
+          fail_ci_if_error: true
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -1,4 +1,4 @@
 /.idea/
-/node_modules/
 /ai.txt
-/package-lock.json
+/coverage/
+/node_modules/

README.de.md

@@ -0,0 +1,164 @@
+# AvalynxLightbox
+
+[![npm version](https://img.shields.io/npm/v/avalynx-lightbox)](https://www.npmjs.com/package/avalynx-lightbox)
+[![npm downloads](https://img.shields.io/npm/dt/avalynx-lightbox)](https://www.npmjs.com/package/avalynx-lightbox)
+[![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/avalynx-lightbox)](https://www.jsdelivr.com/package/npm/avalynx-lightbox)
+[![License](https://img.shields.io/npm/l/avalynx-lightbox)](LICENSE)
+[![Tests](https://github.com/avalynx/avalynx-lightbox/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-lightbox/actions/workflows/tests.yml)
+[![codecov](https://codecov.io/gh/avalynx/avalynx-lightbox/branch/main/graph/badge.svg)](https://codecov.io/gh/avalynx/avalynx-lightbox)
+[![GitHub stars](https://img.shields.io/github/stars/avalynx/avalynx-lightbox?style=flat&logo=github)](https://github.com/avalynx/avalynx-lightbox)
+
+AvalynxLightbox ist eine einfache, leichtgewichtige und benutzerfreundliche Lightbox-Bibliothek, die auf Bootstrap 5.3+ basiert und keine weiteren Framework-Abhängigkeiten benötigt. Sie ermöglicht die Anzeige von Bildern in einem Lightbox-Format mit anpassbaren Optionen, ideal für die Integration in moderne Webanwendungen.
+
+## Funktionen
+
+- **Bootstrap-Integration**: Entwickelt für die nahtlose Integration mit Bootstrap >= 5.3.
+- **Anpassbare Optionen**: Konfiguriere das Verhalten der Lightbox, einschließlich Schließfunktion, Deckkraft, Z-Index und mehr.
+- **Schließbare Lightbox**: Ermöglicht es Benutzern optional, die Lightbox über eine Schaltfläche oder durch Klicken außerhalb des Bildes zu schließen.
+- **Callback-Unterstützung**: Lege benutzerdefinierte Aktionen fest, wenn die Lightbox geschlossen wird.
+- **Leichtgewichtig**: Keine zusätzlichen Abhängigkeiten außer Bootstrap 5.3+.
+
+## Beispiel
+
+Hier ist ein einfaches Beispiel für die Verwendung von AvalynxLightbox in deinem Projekt:
+
+* [Übersicht](https://avalynx-lightbox.jbs-newmedia.de/examples/index.html)
+* [Lightbox anzeigen](https://avalynx-lightbox.jbs-newmedia.de/examples/show-lightbox.html)
+
+## Installation
+
+Um AvalynxLightbox in deinem Projekt zu verwenden, kannst du es direkt in deine HTML-Datei einbinden. Stelle sicher, dass Bootstrap 5.3 oder höher in deinem Projekt enthalten ist, damit AvalynxLightbox korrekt funktioniert.
+
+Zuerst Bootstrap einbinden:
+
+```html
+<!-- Bootstrap -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>
+```
+
+Dann AvalynxLightbox einbinden:
+
+```html
+<script src="pfad/zu/avalynx-lightbox.js"></script>
+```
+
+Ersetze `pfad/zu/avalynx-lightbox.js` durch den tatsächlichen Pfad zu den Dateien in deinem Projekt.
+
+## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-lightbox/))
+
+AvalynxLightbox ist auch über [jsDelivr](https://www.jsdelivr.com/) verfügbar. Du kannst es wie folgt in dein Projekt einbinden:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/avalynx-lightbox@1.0.2/dist/js/avalynx-lightbox.js"></script>
+```
+
+Stelle sicher, dass du auch Bootstrap JS/CSS in dein Projekt einbindest, um eine korrekte Anzeige von AvalynxLightbox zu gewährleisten.
+
+
+## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-lightbox))
+
+AvalynxLightbox ist auch als NPM-Paket verfügbar. Du kannst es mit dem folgenden Befehl zu deinem Projekt hinzufügen:
+
+```bash
+npm install avalynx-lightbox
+```
+
+Nach der Installation kannst du AvalynxLightbox wie folgt in deine JavaScript-Datei importieren:
+
+```javascript
+import { AvalynxLightbox } from 'avalynx-lightbox';
+```
+
+Stelle sicher, dass du auch Bootstrap JS/CSS in dein Projekt einbindest, um eine korrekte Anzeige von AvalynxLightbox zu gewährleisten.
+
+## Installation via Symfony AssetMapper
+
+```bash
+php bin/console importmap:require avalynx-lightbox
+```
+
+Nach der Installation kannst du AvalynxLightbox wie folgt in deine JavaScript-Datei importieren:
+
+```javascript
+import { AvalynxLightbox } from 'avalynx-lightbox';
+```
+
+Stelle sicher, dass du auch Bootstrap JS/CSS in dein Projekt einbindest, um eine korrekte Anzeige von AvalynxLightbox zu gewährleisten.
+
+## Installation via Symfony AssetComposer
+
+Weitere Informationen zum Symfony AssetComposer Bundle findest du [hier](https://github.com/jbsnewmedia/asset-composer-bundle).
+
+```twig
+{% do addAssetComposer('avalynx/avalynx-lightbox/dist/js/avalynx-lightbox.js') %}
+```
+
+Stelle sicher, dass du auch Bootstrap JS/CSS in dein Projekt einbindest, um eine korrekte Anzeige von AvalynxLightbox zu gewährleisten.
+
+## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-lightbox))
+
+AvalynxLightbox ist auch als Composer-Paket verfügbar. Du kannst es mit dem folgenden Befehl zu deinem Projekt hinzufügen:
+
+```bash
+composer require avalynx/avalynx-lightbox
+```
+
+Nach der Installation kannst du AvalynxLightbox wie folgt in deine HTML-Datei einbinden:
+
+```html
+<script src="vendor/avalynx/avalynx-lightbox/dist/js/avalynx-lightbox.js"></script>
+``` 
+
+Stelle sicher, dass du auch Bootstrap JS/CSS in dein Projekt einbindest, um eine korrekte Anzeige von AvalynxLightbox zu gewährleisten.
+
+## Verwendung
+
+Um eine Lightbox zu erstellen, instanziiere einfach ein neues `AvalynxLightbox`-Objekt mit den gewünschten Optionen:
+
+```javascript
+new AvalynxLightbox('.avalynx-lightbox', {
+    closeable: true,
+    closeOnClickOutside: true,
+    opacity: 80,
+    zIndex: 1500,
+    onClose: () => console.log('Lightbox geschlossen')
+}, {
+    closeButtonLabel: 'Schließen'
+});
+
+```
+
+## Optionen
+
+AvalynxLightbox unterstützt die folgenden Optionen zur Anpassung:
+
+- `selector`: (string) CSS-Selektor für die Bilder, die in der Lightbox angezeigt werden sollen (Standard: `'.avalynx-lightbox'`).
+- `options`:
+    - `closeable`: (boolean) Erlaubt Benutzern das Schließen der Lightbox (Standard: `true`).
+    - `closeOnClickOutside`: (boolean) Schließt die Lightbox, wenn der Benutzer außerhalb des Bildes klickt (Standard: `true`).
+    - `onClose`: (function) Eine Callback-Funktion, die ausgeführt wird, wenn die Lightbox geschlossen wird (Standard: `null`).
+    - `opacity`: (number) Hintergrund-Deckkraft (0-100) (Standard: `80`).
+    - `zIndex`: (number) Der Z-Index für die Lightbox (Standard: `1500`).
+- `language`:
+    - `closeButtonLabel`: (string) Das aria-label für die Schließen-Schaltfläche (Standard: `'Schließen'`).
+
+## Mitwirken
+
+Beiträge sind willkommen! Wenn du etwas beitragen möchtest, fork bitte das Repository und sende einen Pull Request mit deinen Änderungen oder Verbesserungen. Wir suchen Beiträge in den folgenden Bereichen:
+
+- Fehlerbehebungen (Bug fixes)
+- Funktionserweiterungen
+- Dokumentationsverbesserungen
+
+Bevor du deinen Pull Request einreichst, stelle bitte sicher, dass deine Änderungen gut dokumentiert sind und dem bestehenden Codestil des Projekts entsprechen.
+
+## Lizenz
+
+AvalynxLightbox ist quelloffene Software, die unter der [MIT-Lizenz](LICENSE) lizenziert ist.
+
+## Kontakt
+
+Wenn du Fragen, Funktionswünsche oder Probleme hast, öffne bitte ein Issue in unserem [GitHub-Repository](https://github.com/avalynx/avalynx-lightbox/issues) oder sende einen Pull Request.
+
+Vielen Dank, dass du AvalynxLightbox für dein Projekt in Betracht ziehst!

README.md

@@ -1,10 +1,18 @@
 # AvalynxLightbox
 
+[![npm version](https://img.shields.io/npm/v/avalynx-lightbox)](https://www.npmjs.com/package/avalynx-lightbox)
+[![npm downloads](https://img.shields.io/npm/dt/avalynx-lightbox)](https://www.npmjs.com/package/avalynx-lightbox)
+[![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/avalynx-lightbox)](https://www.jsdelivr.com/package/npm/avalynx-lightbox)
+[![License](https://img.shields.io/npm/l/avalynx-lightbox)](LICENSE)
+[![Tests](https://github.com/avalynx/avalynx-lightbox/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-lightbox/actions/workflows/tests.yml)
+[![codecov](https://codecov.io/gh/avalynx/avalynx-lightbox/branch/main/graph/badge.svg)](https://codecov.io/gh/avalynx/avalynx-lightbox)
+[![GitHub stars](https://img.shields.io/github/stars/avalynx/avalynx-lightbox?style=flat&logo=github)](https://github.com/avalynx/avalynx-lightbox)
+
 AvalynxLightbox is a simple, lightweight, and easy-to-use lightbox library, built on Bootstrap 5.3+ without any framework dependencies. It allows you to display images in a lightbox format with customizable options, perfect for integrating into modern web applications.
 
 ## Features
 
-- **Bootstrap-Based**: Integrates seamlessly with Bootstrap (version 5.3 or higher).
+- **Bootstrap Integration**: Designed for seamless integration with Bootstrap >= 5.3.
 - **Customizable Options**: Configure lightbox behavior, including close functionality, opacity, z-index, and more.
 - **Closeable Lightbox**: Optionally allow users to close the lightbox with a button or by clicking outside the image.
 - **Callback Support**: Set custom actions when the lightbox is closed.
@@ -42,7 +50,7 @@ Replace `path/to/avalynx-lightbox.js` with the actual path to the files in your
 AvalynxLightbox is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/avalynx-lightbox@1.0.1/dist/js/avalynx-lightbox.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/avalynx-lightbox@1.0.2/dist/js/avalynx-lightbox.js"></script>
 ```
 
 Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly.

dist/js/avalynx-lightbox.esm.js

@@ -3,7 +3,7 @@
  *
  * AvalynxLightbox is a simple, lightweight, and easy-to-use lightbox library. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.1
+ * @version 1.0.2
  * @license MIT
  * @author https://github.com/avalynx/avalynx-lightbox/graphs/contributors
  * @website https://github.com/avalynx/
@@ -32,13 +32,10 @@ export class AvalynxLightbox {
         if (!selector.startsWith('.') && !selector.startsWith('#')) {
             selector = '.' + selector;
         }
-
         this.selector = selector;
-
         if (options === null || typeof options !== 'object') {
             options = {};
         }
-
         this.options = {
             closeable: options.closeable !== undefined ? options.closeable : true,
             closeOnClickOutside: options.closeOnClickOutside !== undefined ? options.closeOnClickOutside : true,
@@ -47,16 +44,13 @@ export class AvalynxLightbox {
             zIndex: options.zIndex || 1500,
             ...options
         };
-
         if (language === null || typeof language !== 'object') {
             language = {};
         }
-
         this.language = {
             closeButtonLabel: language.closeButtonLabel || 'Close',
             ...language
         };
-
         this.setupClickListener();
     }
 
@@ -139,4 +133,9 @@ export class AvalynxLightbox {
             this.options.onClose();
         }
     }
-}
+}
+
+/* istanbul ignore next */
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = AvalynxLightbox;
+}

dist/js/avalynx-lightbox.js

@@ -3,7 +3,7 @@
  *
  * AvalynxLightbox is a simple, lightweight, and easy-to-use lightbox library. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.1
+ * @version 1.0.2
  * @license MIT
  * @author https://github.com/avalynx/avalynx-lightbox/graphs/contributors
  * @website https://github.com/avalynx/
@@ -30,13 +30,10 @@ class AvalynxLightbox {
         if (!selector.startsWith('.') && !selector.startsWith('#')) {
             selector = '.' + selector;
         }
-
         this.selector = selector;
-
         if (options === null || typeof options !== 'object') {
             options = {};
         }
-
         this.options = {
             closeable: options.closeable !== undefined ? options.closeable : true,
             closeOnClickOutside: options.closeOnClickOutside !== undefined ? options.closeOnClickOutside : true,
@@ -45,16 +42,13 @@ class AvalynxLightbox {
             zIndex: options.zIndex || 1500,
             ...options
         };
-
         if (language === null || typeof language !== 'object') {
             language = {};
         }
-
         this.language = {
             closeButtonLabel: language.closeButtonLabel || 'Close',
             ...language
         };
-
         this.setupClickListener();
     }
 
@@ -139,6 +133,7 @@ class AvalynxLightbox {
     }
 }
 
+/* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
     module.exports = AvalynxLightbox;
 }

examples/show-lightbox.html

@@ -16,8 +16,8 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/stackoverflow-light.min.css" id="hljsTheme">
 	<script>hljs.highlightAll();</script>
 
-	<!-- AvalynxLightbox 1.0.1 -->
-    <script src="https://cdn.jsdelivr.net/npm/avalynx-lightbox@1.0.1/dist/js/avalynx-lightbox.min.js"></script>
+	<!-- AvalynxLightbox -->
+    <script src="../src/js/avalynx-lightbox.js"></script>
 
 	<!-- Example helper -->
 	<link href="./css/helper.css" rel="stylesheet">

jest.config.js

@@ -8,4 +8,15 @@ module.exports = {
     transform: {
         "^.+\\.js$": "babel-jest"
     },
+    collectCoverage: true,
+    collectCoverageFrom: ["src/**/*.js"],
+    coverageReporters: ["text", "lcov", "html"],
+    coverageThreshold: {
+        global: {
+            branches: 100,
+            functions: 100,
+            lines: 100,
+            statements: 100
+        }
+    }
 };

package.json

@@ -2,7 +2,7 @@
   "name": "avalynx-lightbox",
   "title": "AvalynxLightbox",
   "description": "AvalynxLightbox is a simple, lightweight, and easy-to-use lightbox library. Based on Bootstrap >=5.3 without any framework dependencies.",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
   "main": "dist/js/avalynx-lightbox.js",
   "module": "dist/js/avalynx-lightbox.esm.js",
@@ -40,12 +40,12 @@
     "bootstrap": ">=5.3"
   },
   "devDependencies": {
-    "@babel/core": "^7",
-    "@babel/preset-env": "^7",
-    "babel-jest": "^29",
-    "jest": "^29",
-    "jest-environment-jsdom": "^29",
-    "shelljs": "^0",
-    "shx": "^0"
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "babel-jest": "^30.2.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "shelljs": "^0.10.0",
+    "shx": "^0.4.0"
   }
 }