1 |
|
2 | export const NotifyConfig = {
|
3 | useAnimation: true,
|
4 | defaultPosition: 'top-right',
|
5 | defaultType: 'success',
|
6 | classSlideRight: 'slide-right',
|
7 | classSlideInLeft: 'slide-in-left',
|
8 | tagName: 'alert',
|
9 | tagNameContainer: 'notifies',
|
10 | attrType: 'brand',
|
11 | attrPosition: 'fixed',
|
12 | classNameCloser: 'close',
|
13 | autoRemoveAfter: 2,
|
14 | };
|
15 |
|
16 | export const Notify = {
|
17 |
|
18 | Config: NotifyConfig,
|
19 |
|
20 | setType(alert, type) {
|
21 | alert.setAttribute(this.Config.attrType, type);
|
22 | },
|
23 |
|
24 | setPosition(alert, position) {
|
25 | alert.setAttribute(this.Config.attrPosition, position);
|
26 | },
|
27 |
|
28 | show(alert) {
|
29 | alert.classList.add(this.Config.classSlideInLeft);
|
30 | },
|
31 |
|
32 | hide(alert) {
|
33 | alert.classList.add(this.Config.classSlideRight);
|
34 | },
|
35 |
|
36 | remove(alert) {
|
37 | alert.parentNode.removeChild(alert);
|
38 | this.fireOnRemove(alert);
|
39 | },
|
40 |
|
41 | hideAndRemove(alert) {
|
42 | this.hide(alert);
|
43 | if (this.Config.useAnimation) {
|
44 | alert.addEventListener('animationend', () => {
|
45 | this.remove(alert);
|
46 | });
|
47 | } else {
|
48 | this.remove(alert);
|
49 | }
|
50 | },
|
51 |
|
52 | create(message, type = this.Config.defaultType, position = this.Config.defaultPosition, insideContainer = false) {
|
53 | const alert = document.createElement(this.Config.tagName);
|
54 | alert.innerHTML = message;
|
55 | this.setType(alert, type);
|
56 | if (insideContainer) {
|
57 | let container = this.getContainer();
|
58 | if (container === false) {
|
59 | container = this.createContainer(position);
|
60 | document.body.appendChild(container);
|
61 | }
|
62 | } else {
|
63 | this.setPosition(alert, position);
|
64 | }
|
65 | return alert;
|
66 | },
|
67 |
|
68 | createCloser() {
|
69 | const btn = document.createElement('button');
|
70 | btn.type = 'button';
|
71 | btn.className = this.Config.classNameCloser;
|
72 | btn.dataset.dismiss = 'alert';
|
73 | btn.setAttribute('aria-label', 'Close');
|
74 | return btn;
|
75 | },
|
76 |
|
77 | createAndInit(message, type = this.Config.defaultType, position = this.Config.defaultPosition, insideContainer = false, autoRemoveAfter = this.Config.autoRemoveAfter) {
|
78 | const alert = this.create(message, type, position, insideContainer);
|
79 | if (insideContainer) {
|
80 | this.getContainer().appendChild(alert);
|
81 | } else {
|
82 | document.body.appendChild(alert);
|
83 | }
|
84 | this.show(alert);
|
85 | this.addEvents(alert, autoRemoveAfter);
|
86 | },
|
87 |
|
88 | createContainer(position = this.Config.defaultPosition) {
|
89 | const el = document.createElement(this.Config.tagNameContainer);
|
90 | this.setPosition(el, position);
|
91 | return el;
|
92 | },
|
93 |
|
94 | hasContainer(alert) {
|
95 | return alert.parentNode.tagName === this.Config.tagNameContainer;
|
96 | },
|
97 |
|
98 | getContainer() {
|
99 | return document.getElementsByTagName(this.Config.tagNameContainer) [0] || false;
|
100 | },
|
101 |
|
102 | getCloser(alert) {
|
103 | return alert.getElementsByClassName(this.Config.classNameCloser)[0] || false;
|
104 | },
|
105 |
|
106 | addEvents(alert, autoRemoveAfter = this.Config.autoRemoveAfter) {
|
107 | alert.addEventListener('click', () => {
|
108 | this.hideAndRemove(alert);
|
109 | });
|
110 | if (autoRemoveAfter > 0) {
|
111 | setTimeout(() => {
|
112 | this.hideAndRemove(alert);
|
113 | }, autoRemoveAfter * 1000);
|
114 | }
|
115 | },
|
116 |
|
117 | onRemove(alert, callback) {
|
118 | if (alert.__notify_cb === undefined) {
|
119 | alert.__notify_cb = [];
|
120 | }
|
121 | alert.__notify_cb.push(callback);
|
122 | },
|
123 |
|
124 | fireOnRemove(alert) {
|
125 | if (alert.__notify_cb !== undefined) {
|
126 | alert.__notify_cb.forEach(cb => {
|
127 | cb();
|
128 | });
|
129 | }
|
130 | },
|
131 |
|
132 | success(message, autoRemoveAfter = this.Config.autoRemoveAfter) {
|
133 | this.createAndInit(message, 'success', this.Config.defaultPosition, true, autoRemoveAfter);
|
134 | },
|
135 |
|
136 | info(message, autoRemoveAfter = this.Config.autoRemoveAfter) {
|
137 | this.createAndInit(message, 'info', this.Config.defaultPosition, true, autoRemoveAfter);
|
138 | },
|
139 |
|
140 | warning(message, autoRemoveAfter = this.Config.autoRemoveAfter) {
|
141 | this.createAndInit(message, 'warning', this.Config.defaultPosition, true, autoRemoveAfter);
|
142 | },
|
143 |
|
144 | danger(message, autoRemoveAfter = this.Config.autoRemoveAfter) {
|
145 | this.createAndInit(message, 'danger', this.Config.defaultPosition, true, autoRemoveAfter);
|
146 | },
|
147 |
|
148 | };
|