release

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env"]
+}

.editorconfig

@@ -0,0 +1,23 @@
+# This is the top-most .editorconfig file; do not search in parent directories.
+root = true
+
+# All files.
+[*]
+end_of_line = lf
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[composer.json]
+indent_size = 4
+
+[config-schema.json]
+indent_size = 4

.env

@@ -0,0 +1 @@
+COMPOSE_PROJECT_NAME=avalynx-lightbox

.gitignore

@@ -0,0 +1,2 @@
+/.idea/
+/node_modules/

CHANGELOG.md

@@ -0,0 +1,7 @@
+# AvalynxLightbox Changelog
+
+## 0.0.2
+- [x] dist added
+
+## 0.0.1
+- [x] Initial release

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Avalynx
+Copyright (c) 2024 Juergen Schwind an the Avalynx-Lightbox Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -0,0 +1,146 @@
+# AvalynxLightbox
+
+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).
+- **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.
+- **Lightweight**: No additional dependencies besides Bootstrap 5.3+.
+
+## Example
+
+Here's a simple example of how to use AvalynxLightbox in your project:
+
+* [Overview](https://avalynx-lightbox.jbs-newmedia.de/examples/index.html)
+* [Show lightbox](https://avalynx-lightbox.jbs-newmedia.de/examples/show-lightbox.html)
+
+## Installation
+
+To use AvalynxLightbox in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxLightbox to work correctly.
+
+First, include Bootstrap:
+
+```html
+<!-- Bootstrap -->
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+```
+
+Then, include AvalynxLightbox:
+
+```html
+<script src="path/to/avalynx-lightbox.js"></script>
+```
+
+Replace `path/to/avalynx-lightbox.js` with the actual path to the files in your project.
+
+## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-lightbox/))
+
+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/[email protected]/dist/js/avalynx-lightbox.js"></script>
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly.
+
+
+## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-lightbox))
+
+AvalynxLightbox is also available as a npm package. You can add it to your project with the following command:
+
+```bash
+npm install avalynx-lightbox
+```
+
+After installing, you can import AvalynxLightbox into your JavaScript file like this:
+
+```javascript
+import { AvalynxLightbox } from 'avalynx-lightbox';
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly.
+
+## Installation via Symfony AssetMapper
+
+```bash
+php bin/console importmap:require avalynx-lightbox
+```
+
+After installing, you can import AvalynxLightbox into your JavaScript file like this:
+
+```javascript
+import { AvalynxLightbox } from 'avalynx-lightbox';
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly.
+
+## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-lightbox))
+
+AvalynxLightbox is also available as a Composer package. You can add it to your project with the following command:
+
+```bash
+composer require avalynx/avalynx-lightbox
+```
+
+After installing, you can import AvalynxLightbox into your HTML file like this:
+
+```html
+<script src="vendor/avalynx/avalynx-lightbox/dist/js/avalynx-lightbox.js"></script>
+``` 
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLightbox displays correctly.
+
+## Usage
+
+To create an alert, simply instantiate a new `AvalynxLightbox` object with the desired options:
+
+```javascript
+new AvalynxLightbox('.avalynx-lightbox', {
+    closeable: true,
+    closeOnClickOutside: true,
+    opacity: 80,
+    zIndex: 1500,
+    onClose: () => console.log('Lightbox closed')
+}, {
+    closeButtonLabel: 'Close'
+});
+
+```
+
+## Options
+
+AvalynxLightbox supports the following options for customization:
+
+- `selector`: (string) CSS selector for the images to display in the lightbox (default: `'.avalynx-lightbox'`).
+- `options`:
+    - `closeable`: (boolean) Allow users to close the lightbox (default: `true`).
+    - `closeOnClickOutside`: (boolean) Close the lightbox when the user clicks outside the image (default: `true`).
+    - `onClose`: (function) A callback function to execute when the lightbox is closed (default: `null`).
+    - `opacity`: (number) Background opacity (0-100) (default: `80`).
+    - `zIndex`: (number) The z-index for the lightbox (default: `1500`).
+- `language`:
+    - `closeButtonLabel`: (string) The aria-label for the close button (default: `'Close'`).
+
+## Contributing
+
+Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas:
+
+- Bug fixes
+- Feature enhancements
+- Documentation improvements
+
+Before submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.
+
+## License
+
+AvalynxLightbox is open-sourced software licensed under the [MIT license](LICENSE).
+
+## Contact
+
+If you have any questions, feature requests, or issues, please open an issue on our [GitHub repository](https://github.com/avalynx/avalynx-lightbox/issues) or submit a pull request.
+
+Thank you for considering AvalynxLightbox for your project!

build.js

@@ -0,0 +1,28 @@
+const fs = require('fs');
+
+if (process.argv.length < 3) {
+    console.error('Please provide the file path as an argument.');
+    process.exit(1);
+}
+
+const filePath = process.argv[2];
+
+if (!fs.existsSync(filePath)) {
+    console.error(`The file ${filePath} does not exist.`);
+    process.exit(1);
+}
+
+fs.readFile(filePath, 'utf8', (err, data) => {
+    if (err) {
+        console.error(`Error reading file ${filePath}: ${err}`);
+        return;
+    }
+
+    const result = data.replace(/class /g, 'export class ');
+
+    fs.writeFile(filePath, result, 'utf8', err => {
+        if (err) {
+            console.error(`Error writing file ${filePath}: ${err}`);
+        }
+    });
+});

composer.json

@@ -0,0 +1,28 @@
+{
+    "name": "avalynx/avalynx-lightbox",
+    "description": "AvalynxLightbox is a simple, lightweight, and easy-to-use lightbox library. Based on Bootstrap >=5.3 without any framework dependencies.",
+    "keywords": [
+        "avalynx",
+        "lightbox",
+        "bootstrap",
+        "bootstrap5",
+        "component"
+    ],
+    "homepage": "https://github.com/avalynx/avalynx-lightbox",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Juergen Schwind and the Avalynx-Lightbox authors",
+            "homepage": "https://github.com/avalynx/avalynx-lightbox/graphs/contributors"
+        }
+    ],
+    "require": {
+        "twbs/bootstrap": "^5.3"
+    },
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://github.com/avalynx/avalynx-lightbox.git"
+        }
+    ]
+}

dist/js/avalynx-lightbox.esm.js

@@ -0,0 +1,130 @@
+/**
+ * AvalynxLightbox
+ *
+ * AvalynxLightbox is a simple, lightweight, and easy-to-use lightbox library. Based on Bootstrap >=5.3 without any framework dependencies.
+ *
+ * @version 0.0.2
+ * @license MIT
+ * @author https://github.com/avalynx/avalynx-lightbox/graphs/contributors
+ * @website https://github.com/avalynx/
+ * @repository https://github.com/avalynx/avalynx-lightbox.git
+ * @bugs https://github.com/avalynx/avalynx-lightbox/issues
+ *
+ * @param {string} selector - The CSS selector for the image to display in the lightbox (default: '.avalynx-select').
+ * @param {object} options - An object containing the following keys:
+ * @param {boolean} options.closeable - Whether the lightbox can be closed by the user (default: true).
+ * @param {boolean} options.closeOnClickOutside - Whether the lightbox will close when the user clicks outside the image (default: true).
+ * @param {function} options.onClose - A callback function to execute when the lightbox is closed (default: null).
+ * @param {number} options.opacity - The background opacity as an integer between 0 and 100 (default: 80).
+ * @param {number} options.zIndex - The z-index of the lightbox (default: 1500).
+ *
+ * @param {object} language - An object containing the following keys:
+ * @param {string} language.closeButtonLabel - The aria-label for the close button (default: 'Close').
+ */
+
+export class AvalynxLightbox {
+	constructor(selector, options = {}, language = {}) {
+		if (!selector) {
+			selector = '.avalynx-lightbox';
+		}
+		if (!selector.startsWith('.') && !selector.startsWith('#')) {
+			selector = '.' + selector;
+		}
+
+		this.selector = selector;
+		this.options = {
+			closeable: options.closeable !== undefined ? options.closeable : true,
+			closeOnClickOutside: options.closeOnClickOutside !== undefined ? options.closeOnClickOutside : true,
+			onClose: options.onClose || null,
+			opacity: options.opacity || 80,
+			zIndex: options.zIndex || 1500,
+			...options
+		};
+
+		this.language = {
+			closeButtonLabel: language.closeButtonLabel || 'Close',
+			...language
+		};
+
+		this.setupClickListener();
+	}
+
+	setupClickListener() {
+		const imgElements = document.querySelectorAll(this.selector);
+		if (!imgElements.length) {
+			console.error(`Elements with selector ${this.selector} not found.`);
+			return;
+		}
+
+		imgElements.forEach(imgElement => {
+			imgElement.addEventListener('click', () => {
+				this.openLightbox(imgElement);
+			});
+		});
+	}
+
+	openLightbox(imgElement) {
+		const src = imgElement.src;
+		if (!src) {
+			console.error('No source found for the selected element.');
+			return;
+		}
+
+		this.modal = document.createElement('div');
+		this.modal.style.position = 'fixed';
+		this.modal.style.top = '0';
+		this.modal.style.left = '0';
+		this.modal.style.width = '100vw';
+		this.modal.style.height = '100vh';
+		this.modal.style.backgroundColor = `rgba(0, 0, 0, ${this.options.opacity / 100})`;
+		this.modal.style.display = 'flex';
+		this.modal.style.justifyContent = 'center';
+		this.modal.style.alignItems = 'center';
+		this.modal.style.zIndex = this.options.zIndex;
+		this.modal.classList.add('avalynx-lightbox-modal');
+
+		this.img = document.createElement('img');
+		this.img.src = src;
+		this.img.style.maxWidth = '90%';
+		this.img.style.maxHeight = '90%';
+		this.img.style.position = 'relative';
+
+		this.modal.appendChild(this.img);
+
+		if (this.options.closeable) {
+			this.addCloseButton();
+		}
+
+		if (this.options.closeOnClickOutside) {
+			this.modal.addEventListener('click', (e) => {
+				if (e.target === this.modal) {
+					this.closeLightbox();
+				}
+			});
+		}
+
+		document.body.appendChild(this.modal);
+	}
+
+	addCloseButton() {
+		this.closeButton = document.createElement('button');
+		this.closeButton.classList.add('btn-close', 'btn-close-white');
+		this.closeButton.setAttribute('aria-label', this.language.closeButtonLabel);
+		this.closeButton.style.position = 'fixed';
+		this.closeButton.style.top = '10px';
+		this.closeButton.style.right = 'calc(10px + var(--bs-gutter-x, 0px))';
+
+		this.closeButton.addEventListener('click', () => {
+			this.closeLightbox();
+		});
+
+		this.modal.appendChild(this.closeButton);
+	}
+
+	closeLightbox() {
+		this.modal.remove();
+		if (typeof this.options.onClose === 'function') {
+			this.options.onClose();
+		}
+	}
+}