-
Notifications
You must be signed in to change notification settings - Fork 2
/
site.ts
79 lines (77 loc) · 2.8 KB
/
site.ts
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
export function inject({ config }) {
if (config.domains) {
const domains = config.domains.split(',').map((domain) => domain.trim())
if (domains.length > 0 && domains.indexOf(window.location.hostname) === -1) {
return
}
}
const localStorageKey = `notification-${config.notification}`
if (config.rememberClose === 'yes' && localStorage.getItem(localStorageKey)) {
return
}
const style = `
.notification-bar-container {
min-height: 56px;
}
.notification-bar {
width: 100%;
min-height: 56px;
line-height: 36px;
font-size: 24px;
color: ${config.textColor || 'default'};
background: ${config.backgroundColor || 'default'};
font-weight: normal;
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
text-align: center;
position: ${config.position === 'sticky' ? 'fixed' : 'absolute'};
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999999;
}
.notification-bar a {
color: ${config.linkColor || config.textColor || 'default'};
}
.notification-bar p {
margin: 0;
}
${config.cssOverride || ''}
`
const paragraph = Object.assign(document.createElement('p'), {
innerHTML: config.notification,
})
const notificationElementContainer = Object.assign(document.createElement('div'), {
className: 'notification-bar-container',
})
const notificationElement = Object.assign(document.createElement('div'), {
className: 'notification-bar',
onclick: (e) => {
if (!e.target.matches('a,button')) {
notificationElement.style.display = 'none'
notificationElementContainer.style.display = 'none'
window.localStorage.setItem(localStorageKey, 'true')
}
},
title: config.buttonTitle || '',
})
notificationElement.append(paragraph)
const shadow = createShadowRoot(style)
notificationElementContainer.appendChild(notificationElement)
shadow.appendChild(notificationElementContainer)
document.body.prepend(shadow)
}
function createShadowRoot(style) {
const div = document.createElement('div')
const shadow = div.attachShadow({ mode: 'open' })
if (style) {
const styleElement = Object.assign(document.createElement('style'), {
innerText: style,
})
shadow.appendChild(styleElement)
}
document.body.prepend(div)
return shadow
}