avalynx-alert 0.0.5 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -16,8 +16,9 @@ AvalynxAlert is a lightweight, dependency-free alert system designed for web app
16
16
  Here's a simple example of how to use AvalynxAlert in your project:
17
17
 
18
18
  * [Overview](https://avalynx-alert.jbs-newmedia.de/examples/index.html)
19
- * [Random Alerts](https://avalynx-alert.jbs-newmedia.de/examples/random-alerts.html)
19
+ * [Random alerts](https://avalynx-alert.jbs-newmedia.de/examples/random-alerts.html)
20
20
  * [Callback on close](https://avalynx-alert.jbs-newmedia.de/examples/callback-onclose.html)
21
+ * [Random alerts every 3 seconds](https://avalynx-alert.jbs-newmedia.de/examples/random-alerts-every-3s.html)
21
22
 
22
23
  ## Installation
23
24
 
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * A simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
5
5
  *
6
- * @version 0.0.5
6
+ * @version 0.0.6
7
7
  * @license MIT
8
8
  * @author https://github.com/avalynx/avalynx-alert/graphs/contributors
9
9
  * @website https://github.com/avalynx/
@@ -53,4 +53,4 @@
53
53
 
54
54
  .avalynx-alert.alert-dark .alert-timer {
55
55
  background-color: var(--bs-dark-border-subtle);
56
- }
56
+ }
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * A simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
5
5
  *
6
- * @version 0.0.5
6
+ * @version 0.0.6
7
7
  * @license MIT
8
8
  * @author https://github.com/avalynx/avalynx-alert/graphs/contributors
9
9
  * @website https://github.com/avalynx/
@@ -21,117 +21,119 @@
21
21
  */
22
22
 
23
23
  export class AvalynxAlert {
24
- constructor(message, type, options = {}) {
25
- this.message = message;
26
- this.type = type;
27
- this.duration = options.duration || 5000;
28
- this.position = options.position || 'top-center';
29
- this.closeable = options.closeable || true;
30
- this.autoClose = options.autoClose || true;
31
- this.width = options.width || '400px';
32
- this.onClose = options.onClose || null;
24
+ constructor(message, type, options = {}) {
25
+ this.message = message;
26
+ this.type = type;
27
+ this.options = {
28
+ duration: options.duration || 5000,
29
+ position: options.position || 'top-center',
30
+ closeable: options.closeable || true,
31
+ autoClose: options.autoClose || true,
32
+ width: options.width || '400px',
33
+ onClose: options.onClose || null,
34
+ ...options
35
+ };
36
+ if (!['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].includes(this.type)) {
37
+ this.type = 'info';
38
+ }
39
+ if (!['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(this.options.position)) {
40
+ this.options.position = 'top-center';
41
+ }
42
+ if (this.options.autoClose !== false && this.options.autoClose !== true) {
43
+ this.options.autoClose = true;
44
+ }
45
+ if ((this.options.closeable !== false && this.options.closeable !== true) || (this.options.autoClose === true)) {
46
+ this.options.closeable = true;
47
+ }
33
48
 
34
- if (!['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].includes(this.type)) {
35
- this.type = 'info';
36
- }
37
- if (!['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(this.position)) {
38
- this.position = 'top-center';
39
- }
40
- if (this.autoClose !== false && this.autoClose !== true) {
41
- this.autoClose = true;
42
- }
43
- if ((this.closeable !== false && this.closeable !== true) || (this.autoClose === true)) {
44
- this.closeable = true;
45
- }
49
+ this.init();
50
+ }
46
51
 
47
- this.init();
48
- }
52
+ ensureAlertContainer() {
53
+ if (!document.getElementById('avalynx-alert-container-' + this.options.position)) {
54
+ var container = document.createElement('div');
55
+ container.id = 'avalynx-alert-container-' + this.options.position;
56
+ container.style.width = '100%';
57
+ container.style.maxWidth = this.options.width;
58
+ container.style.zIndex = '1000';
59
+ container.classList.add('container-fluid');
49
60
 
50
- ensureAlertContainer() {
51
- if (!document.getElementById('avalynx-alert-container-' + this.position)) {
52
- var container = document.createElement('div');
53
- container.id = 'avalynx-alert-container-' + this.position;
54
- container.style.width = '100%';
55
- container.style.maxWidth = this.width;
56
- container.style.zIndex = '1000';
57
- container.classList.add('container-fluid');
61
+ if (this.options.position === 'top-left') {
62
+ container.style.position = 'fixed';
63
+ container.style.top = '10px';
64
+ container.style.left = '0px';
65
+ } else if (this.options.position === 'top-center') {
66
+ container.style.position = 'fixed';
67
+ container.style.top = '10px';
68
+ container.style.left = '50%';
69
+ container.style.transform = 'translateX(-50%)';
70
+ } else if (this.options.position === 'top-right') {
71
+ container.style.position = 'fixed';
72
+ container.style.top = '10px';
73
+ container.style.right = '0px';
74
+ } else if (this.options.position === 'bottom-left') {
75
+ container.style.position = 'fixed';
76
+ container.style.bottom = '10px';
77
+ container.style.left = '0px';
78
+ } else if (this.options.position === 'bottom-center') {
79
+ container.style.position = 'fixed';
80
+ container.style.bottom = '10px';
81
+ container.style.left = '50%';
82
+ container.style.transform = 'translateX(-50%)';
83
+ } else if (this.options.position === 'bottom-right') {
84
+ container.style.position = 'fixed';
85
+ container.style.bottom = '10px';
86
+ container.style.right = '0px';
87
+ }
58
88
 
59
- if (this.position === 'top-left') {
60
- container.style.position = 'fixed';
61
- container.style.top = '10px';
62
- container.style.left = '0px';
63
- } else if (this.position === 'top-center') {
64
- container.style.position = 'fixed';
65
- container.style.top = '10px';
66
- container.style.left = '50%';
67
- container.style.transform = 'translateX(-50%)';
68
- } else if (this.position === 'top-right') {
69
- container.style.position = 'fixed';
70
- container.style.top = '10px';
71
- container.style.right = '0px';
72
- } else if (this.position === 'bottom-left') {
73
- container.style.position = 'fixed';
74
- container.style.bottom = '10px';
75
- container.style.left = '0px';
76
- } else if (this.position === 'bottom-center') {
77
- container.style.position = 'fixed';
78
- container.style.bottom = '10px';
79
- container.style.left = '50%';
80
- container.style.transform = 'translateX(-50%)';
81
- } else if (this.position === 'bottom-right') {
82
- container.style.position = 'fixed';
83
- container.style.bottom = '10px';
84
- container.style.right = '0px';
85
- }
89
+ document.body.appendChild(container);
90
+ }
91
+ }
86
92
 
87
- document.body.appendChild(container);
88
- }
89
- }
93
+ init() {
94
+ this.ensureAlertContainer();
90
95
 
91
- init() {
92
- this.ensureAlertContainer();
96
+ var alert = document.createElement('div');
97
+ alert.className = `alert alert-${this.type}`;
98
+ if (this.options.closeable) {
99
+ alert.classList.add('alert-dismissible');
100
+ }
101
+ alert.classList.add('fade');
102
+ alert.classList.add('show');
103
+ alert.classList.add('p-0');
104
+ alert.classList.add('overflow-hidden');
105
+ alert.classList.add('avalynx-alert');
106
+ alert.role = 'alert';
107
+ alert.innerHTML = `<div class="alert-content">${this.message}`;
108
+ if (this.options.closeable) {
109
+ alert.innerHTML += `<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
110
+ }
111
+ alert.innerHTML += `</div>`;
112
+ if (this.options.autoClose) {
113
+ alert.innerHTML += `<div class="alert-timer" style="height: 5px; width: 0;"></div>`;
114
+ }
93
115
 
94
- var alert = document.createElement('div');
95
- alert.className = `alert alert-${this.type}`;
96
- if (this.closeable) {
97
- alert.classList.add('alert-dismissible');
98
- }
99
- alert.classList.add('fade');
100
- alert.classList.add('show');
101
- alert.classList.add('p-0');
102
- alert.classList.add('overflow-hidden');
103
- alert.classList.add('avalynx-alert');
104
- alert.role = 'alert';
105
- alert.innerHTML = `<div class="alert-content">${this.message}`;
106
- if (this.closeable) {
107
- alert.innerHTML += `<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
108
- }
109
- alert.innerHTML += `</div>`;
110
- if (this.autoClose) {
111
- alert.innerHTML += `<div class="alert-timer" style="height: 5px; width: 0;"></div>`;
112
- }
116
+ document.getElementById('avalynx-alert-container-' + this.options.position).appendChild(alert);
113
117
 
114
- document.getElementById('avalynx-alert-container-' + this.position).appendChild(alert);
118
+ if (this.options.autoClose) {
119
+ var timerBar = alert.querySelector('.alert-timer');
120
+ timerBar.style.transition = `width ${this.options.duration}ms linear`;
115
121
 
116
- if (this.autoClose) {
117
- var timerBar = alert.querySelector('.alert-timer');
118
- timerBar.style.transition = `width ${this.duration}ms linear`;
122
+ requestAnimationFrame(() => {
123
+ requestAnimationFrame(() => {
124
+ timerBar.style.width = '100%';
125
+ });
126
+ });
119
127
 
120
- requestAnimationFrame(() => {
121
- requestAnimationFrame(() => {
122
- timerBar.style.width = '100%';
123
- });
124
- });
125
-
126
- setTimeout(() => {
127
- alert.classList.remove('show');
128
- setTimeout(() => {
129
- alert.remove();
130
- if (typeof this.onClose === 'function') {
131
- this.onClose();
132
- }
133
- }, 150);
134
- }, this.duration);
135
- }
136
- }
137
- }
128
+ setTimeout(() => {
129
+ alert.classList.remove('show');
130
+ setTimeout(() => {
131
+ alert.remove();
132
+ if (typeof this.options.onClose === 'function') {
133
+ this.options.onClose();
134
+ }
135
+ }, 150);
136
+ }, this.options.duration);
137
+ }
138
+ }
139
+ }
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * A simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
5
5
  *
6
- * @version 0.0.5
6
+ * @version 0.0.6
7
7
  * @license MIT
8
8
  * @author https://github.com/avalynx/avalynx-alert/graphs/contributors
9
9
  * @website https://github.com/avalynx/
@@ -22,117 +22,119 @@
22
22
  */
23
23
 
24
24
  class AvalynxAlert {
25
- constructor(message, type, options = {}) {
26
- this.message = message;
27
- this.type = type;
28
- this.duration = options.duration || 5000;
29
- this.position = options.position || 'top-center';
30
- this.closeable = options.closeable || true;
31
- this.autoClose = options.autoClose || true;
32
- this.width = options.width || '400px';
33
- this.onClose = options.onClose || null;
25
+ constructor(message, type, options = {}) {
26
+ this.message = message;
27
+ this.type = type;
28
+ this.options = {
29
+ duration: options.duration || 5000,
30
+ position: options.position || 'top-center',
31
+ closeable: options.closeable || true,
32
+ autoClose: options.autoClose || true,
33
+ width: options.width || '400px',
34
+ onClose: options.onClose || null,
35
+ ...options
36
+ };
37
+ if (!['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].includes(this.type)) {
38
+ this.type = 'info';
39
+ }
40
+ if (!['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(this.options.position)) {
41
+ this.options.position = 'top-center';
42
+ }
43
+ if (this.options.autoClose !== false && this.options.autoClose !== true) {
44
+ this.options.autoClose = true;
45
+ }
46
+ if ((this.options.closeable !== false && this.options.closeable !== true) || (this.options.autoClose === true)) {
47
+ this.options.closeable = true;
48
+ }
34
49
 
35
- if (!['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].includes(this.type)) {
36
- this.type = 'info';
37
- }
38
- if (!['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(this.position)) {
39
- this.position = 'top-center';
40
- }
41
- if (this.autoClose !== false && this.autoClose !== true) {
42
- this.autoClose = true;
43
- }
44
- if ((this.closeable !== false && this.closeable !== true) || (this.autoClose === true)) {
45
- this.closeable = true;
46
- }
50
+ this.init();
51
+ }
47
52
 
48
- this.init();
49
- }
53
+ ensureAlertContainer() {
54
+ if (!document.getElementById('avalynx-alert-container-' + this.options.position)) {
55
+ var container = document.createElement('div');
56
+ container.id = 'avalynx-alert-container-' + this.options.position;
57
+ container.style.width = '100%';
58
+ container.style.maxWidth = this.options.width;
59
+ container.style.zIndex = '1000';
60
+ container.classList.add('container-fluid');
50
61
 
51
- ensureAlertContainer() {
52
- if (!document.getElementById('avalynx-alert-container-' + this.position)) {
53
- var container = document.createElement('div');
54
- container.id = 'avalynx-alert-container-' + this.position;
55
- container.style.width = '100%';
56
- container.style.maxWidth = this.width;
57
- container.style.zIndex = '1000';
58
- container.classList.add('container-fluid');
62
+ if (this.options.position === 'top-left') {
63
+ container.style.position = 'fixed';
64
+ container.style.top = '10px';
65
+ container.style.left = '0px';
66
+ } else if (this.options.position === 'top-center') {
67
+ container.style.position = 'fixed';
68
+ container.style.top = '10px';
69
+ container.style.left = '50%';
70
+ container.style.transform = 'translateX(-50%)';
71
+ } else if (this.options.position === 'top-right') {
72
+ container.style.position = 'fixed';
73
+ container.style.top = '10px';
74
+ container.style.right = '0px';
75
+ } else if (this.options.position === 'bottom-left') {
76
+ container.style.position = 'fixed';
77
+ container.style.bottom = '10px';
78
+ container.style.left = '0px';
79
+ } else if (this.options.position === 'bottom-center') {
80
+ container.style.position = 'fixed';
81
+ container.style.bottom = '10px';
82
+ container.style.left = '50%';
83
+ container.style.transform = 'translateX(-50%)';
84
+ } else if (this.options.position === 'bottom-right') {
85
+ container.style.position = 'fixed';
86
+ container.style.bottom = '10px';
87
+ container.style.right = '0px';
88
+ }
59
89
 
60
- if (this.position === 'top-left') {
61
- container.style.position = 'fixed';
62
- container.style.top = '10px';
63
- container.style.left = '0px';
64
- } else if (this.position === 'top-center') {
65
- container.style.position = 'fixed';
66
- container.style.top = '10px';
67
- container.style.left = '50%';
68
- container.style.transform = 'translateX(-50%)';
69
- } else if (this.position === 'top-right') {
70
- container.style.position = 'fixed';
71
- container.style.top = '10px';
72
- container.style.right = '0px';
73
- } else if (this.position === 'bottom-left') {
74
- container.style.position = 'fixed';
75
- container.style.bottom = '10px';
76
- container.style.left = '0px';
77
- } else if (this.position === 'bottom-center') {
78
- container.style.position = 'fixed';
79
- container.style.bottom = '10px';
80
- container.style.left = '50%';
81
- container.style.transform = 'translateX(-50%)';
82
- } else if (this.position === 'bottom-right') {
83
- container.style.position = 'fixed';
84
- container.style.bottom = '10px';
85
- container.style.right = '0px';
86
- }
90
+ document.body.appendChild(container);
91
+ }
92
+ }
87
93
 
88
- document.body.appendChild(container);
89
- }
90
- }
94
+ init() {
95
+ this.ensureAlertContainer();
91
96
 
92
- init() {
93
- this.ensureAlertContainer();
97
+ var alert = document.createElement('div');
98
+ alert.className = `alert alert-${this.type}`;
99
+ if (this.options.closeable) {
100
+ alert.classList.add('alert-dismissible');
101
+ }
102
+ alert.classList.add('fade');
103
+ alert.classList.add('show');
104
+ alert.classList.add('p-0');
105
+ alert.classList.add('overflow-hidden');
106
+ alert.classList.add('avalynx-alert');
107
+ alert.role = 'alert';
108
+ alert.innerHTML = `<div class="alert-content">${this.message}`;
109
+ if (this.options.closeable) {
110
+ alert.innerHTML += `<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
111
+ }
112
+ alert.innerHTML += `</div>`;
113
+ if (this.options.autoClose) {
114
+ alert.innerHTML += `<div class="alert-timer" style="height: 5px; width: 0;"></div>`;
115
+ }
94
116
 
95
- var alert = document.createElement('div');
96
- alert.className = `alert alert-${this.type}`;
97
- if (this.closeable) {
98
- alert.classList.add('alert-dismissible');
99
- }
100
- alert.classList.add('fade');
101
- alert.classList.add('show');
102
- alert.classList.add('p-0');
103
- alert.classList.add('overflow-hidden');
104
- alert.classList.add('avalynx-alert');
105
- alert.role = 'alert';
106
- alert.innerHTML = `<div class="alert-content">${this.message}`;
107
- if (this.closeable) {
108
- alert.innerHTML += `<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
109
- }
110
- alert.innerHTML += `</div>`;
111
- if (this.autoClose) {
112
- alert.innerHTML += `<div class="alert-timer" style="height: 5px; width: 0;"></div>`;
113
- }
117
+ document.getElementById('avalynx-alert-container-' + this.options.position).appendChild(alert);
114
118
 
115
- document.getElementById('avalynx-alert-container-' + this.position).appendChild(alert);
119
+ if (this.options.autoClose) {
120
+ var timerBar = alert.querySelector('.alert-timer');
121
+ timerBar.style.transition = `width ${this.options.duration}ms linear`;
116
122
 
117
- if (this.autoClose) {
118
- var timerBar = alert.querySelector('.alert-timer');
119
- timerBar.style.transition = `width ${this.duration}ms linear`;
123
+ requestAnimationFrame(() => {
124
+ requestAnimationFrame(() => {
125
+ timerBar.style.width = '100%';
126
+ });
127
+ });
120
128
 
121
- requestAnimationFrame(() => {
122
- requestAnimationFrame(() => {
123
- timerBar.style.width = '100%';
124
- });
125
- });
126
-
127
- setTimeout(() => {
128
- alert.classList.remove('show');
129
- setTimeout(() => {
130
- alert.remove();
131
- if (typeof this.onClose === 'function') {
132
- this.onClose();
133
- }
134
- }, 150);
135
- }, this.duration);
136
- }
137
- }
138
- }
129
+ setTimeout(() => {
130
+ alert.classList.remove('show');
131
+ setTimeout(() => {
132
+ alert.remove();
133
+ if (typeof this.options.onClose === 'function') {
134
+ this.options.onClose();
135
+ }
136
+ }, 150);
137
+ }, this.options.duration);
138
+ }
139
+ }
140
+ }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "avalynx-alert",
3
3
  "title": "AvalynxAlert",
4
4
  "description": "AvalynxAlert is a simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.",
5
- "version": "0.0.5",
5
+ "version": "0.0.6",
6
6
  "license": "MIT",
7
7
  "main": "dist/js/avalynx-alert.js",
8
8
  "module": "dist/js/avalynx-alert.esm.js",
@@ -13,15 +13,14 @@
13
13
  "dist/js/avalynx-alert.esm.js"
14
14
  ],
15
15
  "keywords": [
16
+ "avalynx",
16
17
  "alert",
17
18
  "bootstrap",
19
+ "bootstrap5",
18
20
  "component",
19
21
  "notification",
20
22
  "popup"
21
23
  ],
22
- "dependencies": {
23
- "bootstrap": ">=5.3"
24
- },
25
24
  "ignore": [
26
25
  "package.json"
27
26
  ],
@@ -36,5 +35,18 @@
36
35
  },
37
36
  "bugs": {
38
37
  "url": "https://github.com/avalynx/avalynx-alert/issues"
38
+ },
39
+ "scripts": {
40
+ "test": "jest"
41
+ },
42
+ "dependencies": {
43
+ "bootstrap": ">=5.3"
44
+ },
45
+ "devDependencies": {
46
+ "@babel/core": "^7",
47
+ "@babel/preset-env": "^7",
48
+ "babel-jest": "^29",
49
+ "jest": "^29",
50
+ "jest-environment-jsdom": "^29"
39
51
  }
40
- }
52
+ }