-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.js
151 lines (130 loc) · 7.34 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
// var sound = new Audio('https://cdn.jsdelivr.net/gh/Shlok-Jain/Notification-library@latest/notification.mp3')
class NotificationJS {
constructor(json) {
if (!document.getElementsByClassName('Notification-library-myid')[0]) {
const Notification_library_myid = document.createElement("div")
Notification_library_myid.classList.add("Notification-library-myid")
document.body.appendChild(Notification_library_myid)
}
var notification_container = document.createElement("div")
var my_div = document.createElement("div");
var my_loader = document.createElement("div")
var content = document.createElement("div")
var icon = document.createElement("div")
var message = document.createElement("div")
var close_btn = document.createElement("div")
this.loader = my_loader
this.notification_container = notification_container
this.div = my_div
this.json = json
this.close_btn = close_btn
switch (this.json.theme) {
case 'light':
my_div.classList.add("Notification-library-notification-light")
break
case 'dark':
my_div.classList.add("Notification-library-notification-dark")
break
}
switch (this.json.type) {
case 'success':
icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="#1bff00" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg> `
my_loader.classList.add("Notification-library-loader-success")
break
case 'alert':
icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="yellow" class="bi bi-exclamation-octagon-fill" viewBox="0 0 16 16">
<path d="M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353L11.46.146zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>`
my_loader.classList.add("Notification-library-loader-alert")
break
case 'error':
icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="red" class="bi bi-exclamation-octagon-fill" viewBox="0 0 16 16">
<path d="M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353L11.46.146zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>`
my_loader.classList.add("Notification-library-loader-error")
break
case 'normal':
icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="orange" class="bi bi-bell" viewBox="0 0 16 16">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
</svg>`
my_loader.classList.add("Notification-library-loader-normal")
break
}
content.classList.add("Notification-library-content")
icon.classList.add("Notification-library-icon")
message.classList.add("Notification-library-message")
close_btn.classList.add("Notification-library-close")
notification_container.classList.add('Notification-library-notification-container')
var text = document.createTextNode(this.json.message)
message.appendChild(text)
content.appendChild(icon)
content.appendChild(message)
content.appendChild(close_btn)
my_div.appendChild(content)
my_div.appendChild(my_loader)
notification_container.appendChild(my_div)
document.getElementsByClassName("Notification-library-myid")[0].prepend(notification_container)
if(this.json.disable_timer == true){
this.loader.remove()
}
close_btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" stroke="grey" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/></svg>'
}
show() {
if(this.json.sound){
var sound = new Audio('https://cdn.jsdelivr.net/gh/Shlok-Jain/Notification-library@latest/notification.mp3')
sound.play();
}
this.div.style.animation = `showNotification-library forwards 325ms`
this.loader.style.animation = `loaderNotification-library linear forwards ${this.json.duration}ms`
window.addEventListener("focus", ()=> {
this.loader.style.animationPlayState = 'running'
}, false);
window.addEventListener("blur", ()=> {
this.loader.style.animationPlayState = 'paused'
}, false);
//swipe
var ini_x
var fin_x
var delta
this.div.addEventListener('touchstart', (e) => {
this.loader.style.animationPlayState = 'paused'
ini_x = e.touches[0].clientX;
})
this.div.addEventListener('touchmove', (e) => {
fin_x = e.touches[0].clientX;
delta = fin_x - ini_x;
this.notification_container.style.transform = `translateX(${delta}px)`
})
this.div.addEventListener('touchend', () => {
var ratio = delta / window.innerWidth;
if (Math.abs(ratio) > 0.4) {
this.hide()
}
else {
this.notification_container.style.transform = `translateX(0px)`
}
this.loader.style.animationPlayState = 'running'
})
this.div.addEventListener('mouseenter', () => {
this.loader.style.animationPlayState = 'paused'
})
this.div.addEventListener('mouseleave', () => {
this.loader.style.animationPlayState = 'running'
})
this.close_btn.addEventListener('click',()=>{
this.hide()
})
this.loader.addEventListener('animationend', () => {
this.hide()
})
}
hide() {
this.div.style.animation = "hideNotification-library 325ms forwards"
setTimeout(() => {
this.loader.style.animation = ""
this.notification_container.remove()
}, 325)
}
}