-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path_index.html
95 lines (92 loc) · 3.52 KB
/
_index.html
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>@silexlabs/grapesjs-notifications</title>
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id='basic-actions' class="panel__basic-actions" style="z-index: 9; left: 120px;"></div>
<div id="test" style="position: fixed; top: 0; right: 0; z-index: 9999; padding: 10px; background: #333; color: white;"></div>
<div id="gjs" style="height:0px; overflow:hidden">
</div>
<script type="text/javascript">
// Wait for the plugin to be injected by the dev server
setTimeout(() => {
window.editor = grapesjs.init({
height: '100%',
container: '#gjs',
showOffsets: true,
fromElement: true,
noticeOnUnload: false,
storageManager: false,
plugins: ['@silexlabs/grapesjs-notifications'],
pluginsOpts: {
'@silexlabs/grapesjs-notifications': {
maxNotifications: 10,
reverse: true,
container: '#test',
}
}
})
editor.on('load', () => {
for (let i = 0; i < 100; i++) {
const color = ['red', 'green', 'blue', 'yellow'][Math.floor(Math.random() * 4)]
const backgroundColor = ['red', 'green', 'blue', 'yellow'][Math.floor(Math.random() * 4)]
editor.addComponents(`<div style="margin:100px; padding:25px; color: ${color}; background: ${backgroundColor};" data-gjs-name="${i}">
Test content ${i}
</div>`)
}
editor.Panels.addPanel({
id: "basic-actions",
el: ".panel__basic-actions",
buttons: [
{
id: "add-notification",
label: "Add Notification",
command(editor) {
const type = ["info", "warning", "error", "success"][Math.floor(Math.random() * 4)]
const group = Math.random() > 0.5 ? ('Group ' + Math.floor(Math.random() * 2)).repeat(Math.floor(Math.random() * 2) + 10) : null
editor.runCommand("notifications:add", {
message: `This is a ${type} notification${group ? `from group ${group}` : ''}! `.repeat(Math.floor(Math.random() * 10) + 1),
group,
type,
componentId: editor.getComponents().at(Math.floor(Math.random() * editor.getComponents().length)).getId(),
timeout: Math.floor(Math.random() * 5000) + 5000,
})
}
},
{
id: "clear-notifications",
label: "Clear Notifications",
command(editor) {
editor.runCommand("notifications:clear")
}
},
]
})
editor.on('notifications:added', notification => {
console.log('Notification added', notification)
})
editor.on('notifications:cleared', () => {
console.log('Notifications cleared')
})
editor.on('notifications:removed', notification => {
console.log('Notification removed', notification)
})
editor.on('notifications:changed', () => {
console.log('Notification changed')
})
})
}, 100)
</script>
</body>
</html>