UNPKG

4.08 kBJavaScriptView Raw
1
2export 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, //seconds; 0 - do not remove automatically
14};
15
16export 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};