avalynx-alert 0.0.5 → 0.0.7
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 +10 -9
- package/dist/css/avalynx-alert.css +2 -2
- package/dist/js/avalynx-alert.esm.js +117 -113
- package/dist/js/avalynx-alert.js +117 -114
- package/package.json +17 -5
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
|
|
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
|
|
|
@@ -101,15 +102,15 @@ new AvalynxAlert('Your message here', 'success', {
|
|
|
101
102
|
|
|
102
103
|
AvalynxAlert allows the following options for customization:
|
|
103
104
|
|
|
104
|
-
- `message`: The message to display in the alert.
|
|
105
|
-
- `type`: The type of alert (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`).
|
|
105
|
+
- `message`: (string) The message to display in the alert (default: `''`).
|
|
106
|
+
- `type`: (string) The type of alert. One of (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`) (default: `'info'`).
|
|
106
107
|
- `options`: An object containing the following keys:
|
|
107
|
-
- `duration`: Duration in milliseconds for the alert to be displayed (default: 5000).
|
|
108
|
-
- `position`: Position of the alert on the screen (default: `top-
|
|
109
|
-
- `closeable`: Whether the alert can be closed by the user (default: true).
|
|
110
|
-
- `autoClose`: Whether the alert will close automatically after the duration (default: true).
|
|
111
|
-
- `width`: The width of the alert (default: `400px`).
|
|
112
|
-
- `onClose`: A callback function to
|
|
108
|
+
- `duration`: (number) Duration in milliseconds for the alert to be displayed (default: `5000`).
|
|
109
|
+
- `position`: (string) Position of the alert on the screen. One of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right` (default: `'top-right'`).
|
|
110
|
+
- `closeable`: (boolean) Whether the alert can be closed by the user (default: `true`).
|
|
111
|
+
- `autoClose`: (boolean) Whether the alert will close automatically after the duration (default: `true`).
|
|
112
|
+
- `width`: (string) The width of the alert (default: `400px`).
|
|
113
|
+
- `onClose`: (function) A callback function to execute when the alert is closed (default: `null`).
|
|
113
114
|
|
|
114
115
|
## Contributing
|
|
115
116
|
|
|
@@ -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.
|
|
6
|
+
* @version 0.0.7
|
|
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,135 +3,139 @@
|
|
|
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.
|
|
6
|
+
* @version 0.0.7
|
|
7
7
|
* @license MIT
|
|
8
8
|
* @author https://github.com/avalynx/avalynx-alert/graphs/contributors
|
|
9
9
|
* @website https://github.com/avalynx/
|
|
10
10
|
* @repository https://github.com/avalynx/avalynx-alert.git
|
|
11
11
|
* @bugs https://github.com/avalynx/avalynx-alert/issues
|
|
12
12
|
*
|
|
13
|
-
* @param {string} message - The message to display in the alert.
|
|
14
|
-
* @param {string} type - The type of alert. One of 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'.
|
|
15
|
-
* @param {object} options -
|
|
16
|
-
* @param {number} options.duration -
|
|
17
|
-
* @param {string} options.position -
|
|
18
|
-
* @param {boolean} options.closeable - Whether the alert can be closed by the user
|
|
19
|
-
* @param {boolean} options.autoClose - Whether the alert will close automatically after the duration
|
|
20
|
-
* @param {string} options.width - The width of the alert
|
|
13
|
+
* @param {string} message - The message to display in the alert (default: '').
|
|
14
|
+
* @param {string} type - The type of alert. One of 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark' (default: 'info').
|
|
15
|
+
* @param {object} options - An object containing the following keys:
|
|
16
|
+
* @param {number} options.duration - Duration in milliseconds for the alert to be displayed (default: 5000).
|
|
17
|
+
* @param {string} options.position - Position of the alert on the screen. One of 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right' (default: 'top-center').
|
|
18
|
+
* @param {boolean} options.closeable - Whether the alert can be closed by the user (default: true).
|
|
19
|
+
* @param {boolean} options.autoClose - Whether the alert will close automatically after the duration (default: true).
|
|
20
|
+
* @param {string} options.width - The width of the alert (default: '400px').
|
|
21
|
+
* @param {function} options.onClose - A callback function to execute when the alert is closed (default: null).
|
|
22
|
+
*
|
|
21
23
|
*/
|
|
22
24
|
|
|
23
25
|
export class AvalynxAlert {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
26
|
+
constructor(message, type, options = {}) {
|
|
27
|
+
this.message = message;
|
|
28
|
+
this.type = type;
|
|
29
|
+
this.options = {
|
|
30
|
+
duration: options.duration || 5000,
|
|
31
|
+
position: options.position || 'top-center',
|
|
32
|
+
closeable: options.closeable || true,
|
|
33
|
+
autoClose: options.autoClose || true,
|
|
34
|
+
width: options.width || '400px',
|
|
35
|
+
onClose: options.onClose || null,
|
|
36
|
+
...options
|
|
37
|
+
};
|
|
38
|
+
if (!['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].includes(this.type)) {
|
|
39
|
+
this.type = 'info';
|
|
40
|
+
}
|
|
41
|
+
if (!['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(this.options.position)) {
|
|
42
|
+
this.options.position = 'top-center';
|
|
43
|
+
}
|
|
44
|
+
if (this.options.autoClose !== false && this.options.autoClose !== true) {
|
|
45
|
+
this.options.autoClose = true;
|
|
46
|
+
}
|
|
47
|
+
if ((this.options.closeable !== false && this.options.closeable !== true) || (this.options.autoClose === true)) {
|
|
48
|
+
this.options.closeable = true;
|
|
49
|
+
}
|
|
46
50
|
|
|
47
|
-
|
|
48
|
-
|
|
51
|
+
this.init();
|
|
52
|
+
}
|
|
49
53
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
ensureAlertContainer() {
|
|
55
|
+
if (!document.getElementById('avalynx-alert-container-' + this.options.position)) {
|
|
56
|
+
var container = document.createElement('div');
|
|
57
|
+
container.id = 'avalynx-alert-container-' + this.options.position;
|
|
58
|
+
container.style.width = '100%';
|
|
59
|
+
container.style.maxWidth = this.options.width;
|
|
60
|
+
container.style.zIndex = '1000';
|
|
61
|
+
container.classList.add('container-fluid');
|
|
58
62
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
63
|
+
if (this.options.position === 'top-left') {
|
|
64
|
+
container.style.position = 'fixed';
|
|
65
|
+
container.style.top = '10px';
|
|
66
|
+
container.style.left = '0px';
|
|
67
|
+
} else if (this.options.position === 'top-center') {
|
|
68
|
+
container.style.position = 'fixed';
|
|
69
|
+
container.style.top = '10px';
|
|
70
|
+
container.style.left = '50%';
|
|
71
|
+
container.style.transform = 'translateX(-50%)';
|
|
72
|
+
} else if (this.options.position === 'top-right') {
|
|
73
|
+
container.style.position = 'fixed';
|
|
74
|
+
container.style.top = '10px';
|
|
75
|
+
container.style.right = '0px';
|
|
76
|
+
} else if (this.options.position === 'bottom-left') {
|
|
77
|
+
container.style.position = 'fixed';
|
|
78
|
+
container.style.bottom = '10px';
|
|
79
|
+
container.style.left = '0px';
|
|
80
|
+
} else if (this.options.position === 'bottom-center') {
|
|
81
|
+
container.style.position = 'fixed';
|
|
82
|
+
container.style.bottom = '10px';
|
|
83
|
+
container.style.left = '50%';
|
|
84
|
+
container.style.transform = 'translateX(-50%)';
|
|
85
|
+
} else if (this.options.position === 'bottom-right') {
|
|
86
|
+
container.style.position = 'fixed';
|
|
87
|
+
container.style.bottom = '10px';
|
|
88
|
+
container.style.right = '0px';
|
|
89
|
+
}
|
|
86
90
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
91
|
+
document.body.appendChild(container);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
90
94
|
|
|
91
|
-
|
|
92
|
-
|
|
95
|
+
init() {
|
|
96
|
+
this.ensureAlertContainer();
|
|
93
97
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
98
|
+
var alert = document.createElement('div');
|
|
99
|
+
alert.className = `alert alert-${this.type}`;
|
|
100
|
+
if (this.options.closeable) {
|
|
101
|
+
alert.classList.add('alert-dismissible');
|
|
102
|
+
}
|
|
103
|
+
alert.classList.add('fade');
|
|
104
|
+
alert.classList.add('show');
|
|
105
|
+
alert.classList.add('p-0');
|
|
106
|
+
alert.classList.add('overflow-hidden');
|
|
107
|
+
alert.classList.add('avalynx-alert');
|
|
108
|
+
alert.role = 'alert';
|
|
109
|
+
alert.innerHTML = `<div class="alert-content">${this.message}`;
|
|
110
|
+
if (this.options.closeable) {
|
|
111
|
+
alert.innerHTML += `<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
|
|
112
|
+
}
|
|
113
|
+
alert.innerHTML += `</div>`;
|
|
114
|
+
if (this.options.autoClose) {
|
|
115
|
+
alert.innerHTML += `<div class="alert-timer" style="height: 5px; width: 0;"></div>`;
|
|
116
|
+
}
|
|
113
117
|
|
|
114
|
-
|
|
118
|
+
document.getElementById('avalynx-alert-container-' + this.options.position).appendChild(alert);
|
|
115
119
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
120
|
+
if (this.options.autoClose) {
|
|
121
|
+
var timerBar = alert.querySelector('.alert-timer');
|
|
122
|
+
timerBar.style.transition = `width ${this.options.duration}ms linear`;
|
|
119
123
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
124
|
+
requestAnimationFrame(() => {
|
|
125
|
+
requestAnimationFrame(() => {
|
|
126
|
+
timerBar.style.width = '100%';
|
|
127
|
+
});
|
|
128
|
+
});
|
|
125
129
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
}
|
|
130
|
+
setTimeout(() => {
|
|
131
|
+
alert.classList.remove('show');
|
|
132
|
+
setTimeout(() => {
|
|
133
|
+
alert.remove();
|
|
134
|
+
if (typeof this.options.onClose === 'function') {
|
|
135
|
+
this.options.onClose();
|
|
136
|
+
}
|
|
137
|
+
}, 150);
|
|
138
|
+
}, this.options.duration);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
package/dist/js/avalynx-alert.js
CHANGED
|
@@ -3,136 +3,139 @@
|
|
|
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.
|
|
6
|
+
* @version 0.0.7
|
|
7
7
|
* @license MIT
|
|
8
8
|
* @author https://github.com/avalynx/avalynx-alert/graphs/contributors
|
|
9
9
|
* @website https://github.com/avalynx/
|
|
10
10
|
* @repository https://github.com/avalynx/avalynx-alert.git
|
|
11
11
|
* @bugs https://github.com/avalynx/avalynx-alert/issues
|
|
12
12
|
*
|
|
13
|
-
* @param {string} message - The message to display in the alert.
|
|
14
|
-
* @param {string} type - The type of alert. One of 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'.
|
|
15
|
-
* @param {object} options -
|
|
16
|
-
* @param {number} options.duration -
|
|
17
|
-
* @param {string} options.position -
|
|
18
|
-
* @param {boolean} options.closeable - Whether the alert can be closed by the user
|
|
19
|
-
* @param {boolean} options.autoClose - Whether the alert will close automatically after the duration
|
|
20
|
-
* @param {string} options.width - The width of the alert
|
|
21
|
-
* @param {function} options.onClose - A callback function to
|
|
13
|
+
* @param {string} message - The message to display in the alert (default: '').
|
|
14
|
+
* @param {string} type - The type of alert. One of 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark' (default: 'info').
|
|
15
|
+
* @param {object} options - An object containing the following keys:
|
|
16
|
+
* @param {number} options.duration - Duration in milliseconds for the alert to be displayed (default: 5000).
|
|
17
|
+
* @param {string} options.position - Position of the alert on the screen. One of 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right' (default: 'top-center').
|
|
18
|
+
* @param {boolean} options.closeable - Whether the alert can be closed by the user (default: true).
|
|
19
|
+
* @param {boolean} options.autoClose - Whether the alert will close automatically after the duration (default: true).
|
|
20
|
+
* @param {string} options.width - The width of the alert (default: '400px').
|
|
21
|
+
* @param {function} options.onClose - A callback function to execute when the alert is closed (default: null).
|
|
22
|
+
*
|
|
22
23
|
*/
|
|
23
24
|
|
|
24
25
|
class AvalynxAlert {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
26
|
+
constructor(message, type, options = {}) {
|
|
27
|
+
this.message = message;
|
|
28
|
+
this.type = type;
|
|
29
|
+
this.options = {
|
|
30
|
+
duration: options.duration || 5000,
|
|
31
|
+
position: options.position || 'top-center',
|
|
32
|
+
closeable: options.closeable || true,
|
|
33
|
+
autoClose: options.autoClose || true,
|
|
34
|
+
width: options.width || '400px',
|
|
35
|
+
onClose: options.onClose || null,
|
|
36
|
+
...options
|
|
37
|
+
};
|
|
38
|
+
if (!['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].includes(this.type)) {
|
|
39
|
+
this.type = 'info';
|
|
40
|
+
}
|
|
41
|
+
if (!['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(this.options.position)) {
|
|
42
|
+
this.options.position = 'top-center';
|
|
43
|
+
}
|
|
44
|
+
if (this.options.autoClose !== false && this.options.autoClose !== true) {
|
|
45
|
+
this.options.autoClose = true;
|
|
46
|
+
}
|
|
47
|
+
if ((this.options.closeable !== false && this.options.closeable !== true) || (this.options.autoClose === true)) {
|
|
48
|
+
this.options.closeable = true;
|
|
49
|
+
}
|
|
47
50
|
|
|
48
|
-
|
|
49
|
-
|
|
51
|
+
this.init();
|
|
52
|
+
}
|
|
50
53
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
ensureAlertContainer() {
|
|
55
|
+
if (!document.getElementById('avalynx-alert-container-' + this.options.position)) {
|
|
56
|
+
var container = document.createElement('div');
|
|
57
|
+
container.id = 'avalynx-alert-container-' + this.options.position;
|
|
58
|
+
container.style.width = '100%';
|
|
59
|
+
container.style.maxWidth = this.options.width;
|
|
60
|
+
container.style.zIndex = '1000';
|
|
61
|
+
container.classList.add('container-fluid');
|
|
59
62
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
63
|
+
if (this.options.position === 'top-left') {
|
|
64
|
+
container.style.position = 'fixed';
|
|
65
|
+
container.style.top = '10px';
|
|
66
|
+
container.style.left = '0px';
|
|
67
|
+
} else if (this.options.position === 'top-center') {
|
|
68
|
+
container.style.position = 'fixed';
|
|
69
|
+
container.style.top = '10px';
|
|
70
|
+
container.style.left = '50%';
|
|
71
|
+
container.style.transform = 'translateX(-50%)';
|
|
72
|
+
} else if (this.options.position === 'top-right') {
|
|
73
|
+
container.style.position = 'fixed';
|
|
74
|
+
container.style.top = '10px';
|
|
75
|
+
container.style.right = '0px';
|
|
76
|
+
} else if (this.options.position === 'bottom-left') {
|
|
77
|
+
container.style.position = 'fixed';
|
|
78
|
+
container.style.bottom = '10px';
|
|
79
|
+
container.style.left = '0px';
|
|
80
|
+
} else if (this.options.position === 'bottom-center') {
|
|
81
|
+
container.style.position = 'fixed';
|
|
82
|
+
container.style.bottom = '10px';
|
|
83
|
+
container.style.left = '50%';
|
|
84
|
+
container.style.transform = 'translateX(-50%)';
|
|
85
|
+
} else if (this.options.position === 'bottom-right') {
|
|
86
|
+
container.style.position = 'fixed';
|
|
87
|
+
container.style.bottom = '10px';
|
|
88
|
+
container.style.right = '0px';
|
|
89
|
+
}
|
|
87
90
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
+
document.body.appendChild(container);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
91
94
|
|
|
92
|
-
|
|
93
|
-
|
|
95
|
+
init() {
|
|
96
|
+
this.ensureAlertContainer();
|
|
94
97
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
98
|
+
var alert = document.createElement('div');
|
|
99
|
+
alert.className = `alert alert-${this.type}`;
|
|
100
|
+
if (this.options.closeable) {
|
|
101
|
+
alert.classList.add('alert-dismissible');
|
|
102
|
+
}
|
|
103
|
+
alert.classList.add('fade');
|
|
104
|
+
alert.classList.add('show');
|
|
105
|
+
alert.classList.add('p-0');
|
|
106
|
+
alert.classList.add('overflow-hidden');
|
|
107
|
+
alert.classList.add('avalynx-alert');
|
|
108
|
+
alert.role = 'alert';
|
|
109
|
+
alert.innerHTML = `<div class="alert-content">${this.message}`;
|
|
110
|
+
if (this.options.closeable) {
|
|
111
|
+
alert.innerHTML += `<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
|
|
112
|
+
}
|
|
113
|
+
alert.innerHTML += `</div>`;
|
|
114
|
+
if (this.options.autoClose) {
|
|
115
|
+
alert.innerHTML += `<div class="alert-timer" style="height: 5px; width: 0;"></div>`;
|
|
116
|
+
}
|
|
114
117
|
|
|
115
|
-
|
|
118
|
+
document.getElementById('avalynx-alert-container-' + this.options.position).appendChild(alert);
|
|
116
119
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
+
if (this.options.autoClose) {
|
|
121
|
+
var timerBar = alert.querySelector('.alert-timer');
|
|
122
|
+
timerBar.style.transition = `width ${this.options.duration}ms linear`;
|
|
120
123
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
124
|
+
requestAnimationFrame(() => {
|
|
125
|
+
requestAnimationFrame(() => {
|
|
126
|
+
timerBar.style.width = '100%';
|
|
127
|
+
});
|
|
128
|
+
});
|
|
126
129
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
}
|
|
130
|
+
setTimeout(() => {
|
|
131
|
+
alert.classList.remove('show');
|
|
132
|
+
setTimeout(() => {
|
|
133
|
+
alert.remove();
|
|
134
|
+
if (typeof this.options.onClose === 'function') {
|
|
135
|
+
this.options.onClose();
|
|
136
|
+
}
|
|
137
|
+
}, 150);
|
|
138
|
+
}, this.options.duration);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
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
|
+
"version": "0.0.7",
|
|
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
|
+
}
|