many optimizations in the project

Author: jschwind

README.md

@@ -18,25 +18,33 @@ Here's a simple example of how to use AvalynxLoader in your project:
 
 ## Installation
 
-To use AvalynxLoader in your project, you can directly include it in your HTML file.
+To use AvalynxLoader 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 AvalynxLoader to work correctly.
 
-Include AvalynxLoader:
+First, include Bootstrap:
+
+```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>
+```
+
+Then, include AvalynxLoader:
 
 ```html
 <script src="path/to/avalynx-loader.js"></script>
 ```
 
 Replace `path/to/avalynx-loader.js` with the actual path to the file in your project.
 
-## Installation via jsDelivr
+## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-loader/))
 
 AvalynxLoader 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-loader/dist/avalynx-loader.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/avalynx-loader@0.0.1/dist/js/avalynx-loader.min.js"></script>
 ```
 
-## Installation via NPM
+## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-loader))
 
 AvalynxLoader is also available as a npm package. You can add it to your project with the following command:
 
@@ -62,6 +70,24 @@ After installing, you can import AvalynxLoader into your JavaScript file like th
 import { AvalynxLoader } from 'avalynx-loader';
 ```
 
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLoader displays correctly.
+
+## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-loader))
+
+AvalynxLoader is also available as a Composer package. You can add it to your project with the following command:
+
+```bash
+composer require avalynx/avalynx-loader
+```
+
+After installing, you can import AvalynxLoader into your HTML file like this:
+
+```html
+<script src="vendor/avalynx/avalynx-loader/dist/js/avalynx-loader.js"></script>
+``` 
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLoader displays correctly.
+
 ## Usage
 
 To use AvalynxLoader in your project, include the AvalynxLoader JavaScript file in your project and initialize the class with the appropriate selector.
@@ -77,11 +103,11 @@ myLoader.load=false;
 
 AvalynxLoader allows the following options for customization:
 
-- `selector`: A custom selector for targeting tables within the DOM (default: `.avalynx-loader`).
+- `selector`: A custom selector for targeting tables within the DOM (default: `'.avalynx-loader'`).
 - `options`: An object containing the following keys:
-    - `className`: (string) A custom class name for the loader element (default: `spinner-border text-primary`).
+    - `className`: (string) A custom class name for the loader element (default: `'spinner-border text-primary'`).
 - `language` An object containing the following keys:
-    - `loaderText`: (string) A custom text for the loader element (default: `Loading...`). If set to empty string, no text will be displayed.
+    - `loaderText`: (string) A custom text for the loader element. If set to empty string, no text will be displayed. (default: `'Loading...'`).
 
 ## Contributing
 

composer.json

@@ -0,0 +1,30 @@
+{
+    "name": "avalynx/avalynx-loader",
+    "description": "AvalynxLoader is a lightweight JavaScript library designed to provide a loading overlay for DOM elements. Based on Bootstrap >=5.3 without any framework dependencies.",
+    "keywords": [
+        "avalynx",
+        "loader",
+        "bootstrap",
+        "bootstrap5",
+        "component",
+        "ajax",
+        "spinner"
+    ],
+    "homepage": "https://github.com/avalynx/avalynx-loader",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Juergen Schwind an the AvalynxLoader authors",
+            "homepage": "https://github.com/avalynx/avalynx-loader/graphs/contributors"
+        }
+    ],
+    "require": {
+        "twbs/bootstrap": "^5.3"
+    },
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://github.com/avalynx/avalynx-loader.git"
+        }
+    ]
+}

dist/js/avalynx-loader.esm.js

@@ -10,11 +10,11 @@
  * @repository https://github.com/avalynx/avalynx-loader.git
  * @bugs https://github.com/avalynx/avalynx-loader/issues
  *
- * @param {string} selector - The selector for the element(s) to update.
- * @param {object} options - Options for the loader.
- * @param {string} options.className - The class name for the loader spinner.
- * @param {object} language - Language settings for the loader.
- * @param {string} language.loaderText - The text to display with the loader spinner.
+ * @param {string} selector - A custom selector for targeting tables within the DOM (default: '.avalynx-loader').
+ * @param {object} options - An object containing the following keys:
+ * @param {string} options.className - A custom class name for the loader element (default: 'spinner-border text-primary').
+ * @param {object} language - An object containing the following keys:
+ * @param {string} language.loaderText - A custom text for the loader element. If set to empty string, no text will be displayed. (default: 'Loading...').
  *
  */
 

dist/js/avalynx-loader.js

@@ -10,11 +10,11 @@
  * @repository https://github.com/avalynx/avalynx-loader.git
  * @bugs https://github.com/avalynx/avalynx-loader/issues
  *
- * @param {string} selector - The selector for the element(s) to update.
- * @param {object} options - Options for the loader.
- * @param {string} options.className - The class name for the loader spinner.
- * @param {object} language - Language settings for the loader.
- * @param {string} language.loaderText - The text to display with the loader spinner.
+ * @param {string} selector - A custom selector for targeting tables within the DOM (default: '.avalynx-loader').
+ * @param {object} options - An object containing the following keys:
+ * @param {string} options.className - A custom class name for the loader element (default: 'spinner-border text-primary').
+ * @param {object} language - An object containing the following keys:
+ * @param {string} language.loaderText - A custom text for the loader element. If set to empty string, no text will be displayed. (default: 'Loading...').
  *
  */
 

docker-compose.yml

@@ -1,4 +1,3 @@
-version: "3.9"
 services:
   web:
     build: ./docker/web
@@ -18,4 +17,4 @@ services:
       - PHP_MEMORY_LIMIT=512M
       - PHP_MAX_EXECUTION_TIME=300
       - PHP_POST_MAX_SIZE=100M
-      - PHP_UPLOAD_MAX_FILESIZE=100M
+      - PHP_UPLOAD_MAX_FILESIZE=100M

examples/loader-for-2-elements.html

@@ -17,7 +17,7 @@
 	<script>hljs.highlightAll();</script>
 
 	<!-- AvalynxLoader 0.0.1 -->
-	<script src="../dist/js/avalynx-loader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/avalynx-loader@0.0.1/dist/js/avalynx-loader.min.js"></script>
 
 	<!-- Example helper -->
 	<link href="./css/helper.css" rel="stylesheet">

examples/loader-for-3-elements-with-load-button.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>
 
-	<!-- AvalynxLoader 0.0.1 -->
-	<script src="../dist/js/avalynx-loader.js"></script>
+    <!-- AvalynxLoader 0.0.1 -->
+    <script src="https://cdn.jsdelivr.net/npm/avalynx-loader@0.0.1/dist/js/avalynx-loader.min.js"></script>
 
 	<!-- Example helper -->
 	<link href="./css/helper.css" rel="stylesheet">

package.json

@@ -12,15 +12,18 @@
   ],
   "keywords": [
     "avalynx",
-    "ref",
-    "vue",
-    "react"
+    "loader",
+    "bootstrap",
+    "bootstrap5",
+    "component",
+    "ajax",
+    "spinner"
   ],
   "ignore": [
     "package.json"
   ],
   "author": {
-    "name": "Juergen Schwind an the avalynx-loader Authors",
+    "name": "Juergen Schwind an the AvalynxLoader Authors",
     "url": "https://github.com/avalynx/avalynx-loader/graphs/contributors"
   },
   "homepage": "https://github.com/avalynx/",

src/js/avalynx-loader.esm.js

@@ -10,11 +10,11 @@
  * @repository https://github.com/avalynx/avalynx-loader.git
  * @bugs https://github.com/avalynx/avalynx-loader/issues
  *
- * @param {string} selector - The selector for the element(s) to update.
- * @param {object} options - Options for the loader.
- * @param {string} options.className - The class name for the loader spinner.
- * @param {object} language - Language settings for the loader.
- * @param {string} language.loaderText - The text to display with the loader spinner.
+ * @param {string} selector - A custom selector for targeting tables within the DOM (default: '.avalynx-loader').
+ * @param {object} options - An object containing the following keys:
+ * @param {string} options.className - A custom class name for the loader element (default: 'spinner-border text-primary').
+ * @param {object} language - An object containing the following keys:
+ * @param {string} language.loaderText - A custom text for the loader element. If set to empty string, no text will be displayed. (default: 'Loading...').
  *
  */
 

src/js/avalynx-loader.js

@@ -10,11 +10,11 @@
  * @repository https://github.com/avalynx/avalynx-loader.git
  * @bugs https://github.com/avalynx/avalynx-loader/issues
  *
- * @param {string} selector - The selector for the element(s) to update.
- * @param {object} options - Options for the loader.
- * @param {string} options.className - The class name for the loader spinner.
- * @param {object} language - Language settings for the loader.
- * @param {string} language.loaderText - The text to display with the loader spinner.
+ * @param {string} selector - A custom selector for targeting tables within the DOM (default: '.avalynx-loader').
+ * @param {object} options - An object containing the following keys:
+ * @param {string} options.className - A custom class name for the loader element (default: 'spinner-border text-primary').
+ * @param {object} language - An object containing the following keys:
+ * @param {string} language.loaderText - A custom text for the loader element. If set to empty string, no text will be displayed. (default: 'Loading...').
  *
  */