-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
224 lines (224 loc) · 18.7 KB
/
example.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
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="initial-scale=1" name="viewport">
<meta name="description" content="Notification handler. KISS, light and library free.">
<title>Notification.js 1.1.0 - Demo</title>
<link rel="stylesheet" href="./dist/notification.min.css">
<style type="text/css"> /* Style for the demo only */
a,body,code,div,h1,h3,h4,html,img,label,p,pre,span{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}body{line-height:1}*,:after,:before{box-sizing:border-box}.center,.full-row,.row{margin-left:auto;margin-right:auto;text-align:center;display:flex!important;align-items:center;justify-content:center}html{background-color:#fff;font-family:Helvetica,sans-serif}body{color:#646464;font-size:14px;line-height:19.6px}button,code,h1,h3,h4,input,p,pre,select{margin-bottom:19.6px}h1,h3,h4{color:#141414;font-weight:700}h1{font-size:2em}h3{font-size:1.6em}h4{font-size:1.4em}a{transition:.5s;color:red}a:active,a:focus,a:hover{color:#0f0}code{background-color:#f0f0f0;border:1px solid #e6e6e6;border-radius:2px;display:inline-block;color:#141414;font-family:monospace,sans-serif;padding:0 5px}code.inline{display:initial;margin-bottom:0}pre{background-color:#f0f0f0;border:1px solid #e6e6e6;border-radius:2px;color:#141414;counter-reset:line;display:inline-block;font-family:monospace,sans-serif;padding:10px 20px 10px 5px;text-align:left}pre span::before{border-right:1px solid #a0a0a0;color:#646464;content:counter(line);counter-increment:line;display:inline-block;margin-right:10px;padding:0 20px;text-align:right;width:15px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.bold{font-weight:700}.italic{font-style:italic}.paragraph{text-indent:1.6em;text-align:justify}img.align-left{float:left;margin-right:20px}img.align-right{float:right;margin-left:20px}img.align-center{display:block;margin:0 auto}button{background-color:transparent;border:1px solid #141414;border-radius:2px;cursor:pointer;padding:5px 10px}input[type=text],select,textarea{background-color:transparent;border:1px solid #141414;border-radius:2px;padding:5px 10px;min-width:50px;max-width:200px}select{min-width:100px;max-width:500px;width:auto}textarea{min-width:180px;min-height:70px;width:auto}.full-row,.row{box-sizing:border-box;display:flex;flex-wrap:wrap;height:auto;margin-bottom:40px;max-width:1280px;width:100%}.full-row{max-width:100%}.same-col,[class^=col-]{box-sizing:border-box;display:inline-block;float:left;min-height:1px;padding:0 20px;word-wrap:break-word}.same-col :last-child,[class^=col-] :last-child{margin-bottom:0}.fit-height{height:100%}.col-three{width:30%}.col-six{width:60%}.col-seven{width:70%}.same-col:first-child:nth-last-child(2),.same-col:first-child:nth-last-child(2)~.same-col{width:calc(100% / 2)}.solid{background-color:#fff;border-radius:2px;box-shadow:0 0 20px rgba(0,0,0,.2)}hr{color:#fff;width:75%;margin-bottom:20px;margin-top:0}@media (max-width:800px){.responsive{flex-direction:column;text-align:center}.responsive .col-seven,.responsive .col-six,.responsive .col-three,.responsive .same-col{margin-bottom:25px;text-align:center;width:80%!important}}.playground{height:auto!important}.playground .col-three{margin-bottom:25px}.playground .col-six{height:400px;margin-left:0!important}
</style>
</head>
<body>
<a href="https://github.com/ArthurBeaulieu/Notification.js" target="_blank" rel="noreferrer noopener" style="position: absolute; right: 0; top: 0;"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" alt="Fork me on GitHub"></a>
<div class="row" style="padding: 40px 0;">
<div class="same-col">
<div class="full-row responsive" style="margin-top: 19.6px;">
<div class="col-seven">
<h1>Notification.js – Version 1.1.0</h1>
<p class="paragraph">Made to let you focus on anything else that is not the user feedback. It was designed using the KISS (Keep It Simple Stupid!) spirit to make the less effort implementing it. Don't forget to link the stylesheet and the Javascript class in your project.</p>
<p>If you want to try it out now, and skip the setup parts, please <a href="#playground">click here</a> to be moved to the API sandbox.</p>
</div>
</div>
<hr>
<h3>Basic setup:</h3>
<div class="full-row responsive">
<div class="col-seven">
<p class="paragraph">Once assets are safely linked to your project, you can initialize a Notification object. This object is both the notification handler and the notification itself, which means you won't have several object to create. We recommend that you attach the newly created Notification object to the window DOM object as follow, so you can access it from anywhere.</p>
<code>window.notification = new Notification();</code>
<p>That's it! Now all you have to do is to call for a typed notification when needed:</p>
<code class="inline">notification.success({ message: 'Success notification' });</code><br>
<code class="inline">notification.info({ message: 'Info notification' });</code><br>
<code class="inline">notification.warning({ message: 'Warning notification' });</code><br>
<code>notification.error({ message: 'Error notification' });</code>
<div>
<p>Try it out!</p>
<button id="btn1">Success</button>
<button id="btn2">Info</button>
<button id="btn3">Warning</button>
<button id="btn4">Error</button>
</div>
</div>
</div>
<hr>
<h3>Advanced setup:</h3>
<div class="full-row responsive">
<div class="col-seven">
<p class="paragraph">If you want to customize notifications and their behavior, you can also pass an options object that will contain some useful attributes to tweak. Let's start again, with a new notification handler. The values used here are the default ones.</p>
</div>
</div>
<h4>Notification handler settings</h4>
<div class="full-row responsive">
<div class="same-col align-right">
<h4 class="align-center">Code sample:</h4>
<pre>window.notification = new Notification({
position: 'top-right',
thickBorder: 'top',
duration: 5000,
transition: 200,
maxActive: 10,
imgPath: './img/'
});</pre>
<p>These values are the default ones that will be used if you don't provide any options object to the Notification constructor, like in the basic setup section.</p>
</div>
<div class="same-col align-left">
<p><b>Key:</b> <code class="inline">position</code> - The container position relative to the viewport.<br><b>Value:</b> <code class="inline">top-left</code> <code class="inline">top-right</code> <code class="inline">bottom-left</code> <code class="inline">bottom-right</code></p>
<p><b>Key:</b> <code class="inline">thickBorder</code> - The location of a thicker border in the notification.<br><b>Value:</b> <code class="inline">left</code> <code class="inline">right</code> <code class="inline">top</code> <code class="inline">bottom</code> <code class="inline">none</code></p>
<p><b>Key:</b> <code class="inline">duration</code> - The on-screen time in milliseconds the notification will remain visible.<br><b>Value:</b> <code class="inline">Number > 0</code></p>
<p><b>Key:</b> <code class="inline">transition</code> - The fade in and out timing in milliseconds.<br><b>Value:</b> <code class="inline">Number > 0 && Number < (duration / 2)</code></p>
<p><b>Key:</b> <code class="inline">maxActive</code> - The maximum number of active notifications.<br><b>Value:</b> <code class="inline">Number > 0</code></p>
<p><b>Key:</b> <code class="inline">imgPath</code> - The path to the image folder.<br><b>Value:</b> <code class="inline">String (os path)</code></p>
</div>
</div>
<div class="full-row responsive">
<div class="col-seven">
<p class="paragraph">Once the notification handler is customly setted up, you can also call for custom notifications using the <code class="inline">new()</code> public method that also can take an options object:</p>
</div>
</div>
<h4>Notification settings</h4>
<div class="full-row responsive">
<div class="same-col align-right">
<h4 class="align-center">Code sample:</h4>
<pre>let id = window.notification.new({
type: 'info',
title: '',
message: 'Lorem ipsum dolor sit amet.',
duration: 5000,
iconless: false,
thickBorder: 'top'
closable: true,
sticky: false,
renderTo: document.body,
CBtitle: 'My callback',
callback: function() {
alert('Called from my notification');
}
});</pre>
<p>Please mind to give a <code class="inline">type</code> and a <code class="inline">message</code> otherwise, the notification handler will raise an error. These are not the default values, they are just here to stand as an use case example.</p>
</div>
<div class="same-col align-left">
<p><b>Key:</b> <code class="inline">type</code> - The notification type.<br><b>Value:</b> <code class="inline">success</code> <code class="inline">info</code> <code class="inline">warning</code> <code class="inline">error</code> - <b><i>MANDATORY</i></b></p>
<p><b>Key:</b> <code class="inline">title</code> - The notification title.<br><b>Value:</b> <code class="inline">String</code></p>
<p><b>Key:</b> <code class="inline">message</code> - The notification message.<br><b>Value:</b> <code class="inline">String</code> - <b><i>MANDATORY</i></b></p>
<p><b>Key:</b> <code class="inline">duration</code> - The notification duration.<br><b>Value:</b> <code class="inline">Number > 0</code></p>
<p><b>Key:</b> <code class="inline">iconless</code> - No icon in the notification.<br><b>Value:</b> <code class="inline">Boolean</code></p>
<p><b>Key:</b> <code class="inline">thickBorder</code> - The location of the thicker border in the notification.<br><b>Value:</b> <code class="inline">left</code> <code class="inline">right</code> <code class="inline">top</code> <code class="inline">bottom</code> <code class="inline">none</code></p>
<p><b>Key:</b> <code class="inline">closable</code> - Allow user to close the notification.<br><b>Value:</b> <code class="inline">Boolean</code></p>
<p><b>Key:</b> <code class="inline">sticky</code> - Dismissable notification only on user action.<br><b>Value:</b> <code class="inline">Boolean</code></p>
<p><b>Key:</b> <code class="inline">renderTo</code> - The DOM object to render the notification in.<br><b>Value:</b> <code class="inline">Object</code></p>
<p><b>Key:</b> <code class="inline">CBTitle</code> - The callback label in the notification.<br><b>Value:</b> <code class="inline">String</code></p>
<p><b>Key:</b> <code class="inline">callback</code> - Add a callback button in the notification.<br><b>Value:</b> <code class="inline">Function</code></p>
</div>
</div>
<hr>
<h3 id="playground">Notification playground:</h3>
<div class="full-row responsive playground" style="height: 585px; flex-direction: row;">
<div class="col-three align-right">
<label for="type">Type: </label>
<select id="type" name="type">
<option value="success">Success</option>
<option value="info">Info</option>
<option value="warning">Warning</option>
<option value="error">Error</option>
</select><br>
<label for="type">Title: </label>
<input id="title" type="text" name="title"><br>
<label for="message">Message: </label>
<input id="message" type="text" name="message"><br>
<label for="duration">Duration: </label>
<input id="duration" type="text" name="duration"><br>
<label for="iconless">Iconless: </label>
<select id="iconless" name="iconless">
<option value="false">False</option>
<option value="true">True</option>
</select><br>
<label for="thickBorder">Thick border: </label>
<input id="thickBorder" type="text" name="thickBorder"><br>
<label for="closable">Closable: </label>
<select id="closable" name="closable">
<option value="true">True</option>
<option value="false">False</option>
</select><br>
<label for="sticky">Sticky: </label>
<select id="sticky" name="sticky">
<option value="false">False</option>
<option value="true">True</option>
</select><br>
<label for="renderTo">Render to: </label>
<select id="renderTo" name="renderTo">
<option value="handler">Handler</option>
<option value="elsewhere">Elsewhere</option>
</select><br>
<label for="cbtitle">Callback title: </label>
<input id="cbtitle" type="text" name="cbtitle"><br>
<label for="callback">Alert callback: </label>
<input id="callback" type="checkbox" name="callback"><br>
<button id="btn5" style="margin-bottom: 0;">Generate</button>
<button id="btn6" style="margin-bottom: 0;">Clear all</button><br>
</div>
<div class="col-six solid fit-height" style="margin-left: 20px;">
<br><p>Use <code class="inline">Elsewhere</code> in the 'Render to' select menu tu make a notification appear here.</p>
<div id="renderme"></div>
</div>
</div>
<hr>
<h3>Going further:</h3>
<div class="full-row responsive">
<div class="col-seven">
<p class="paragraph">You're now good to go! If however you need more information, you can read the online <a href="https://arthurbeaulieu.github.io/Notification.js/doc/" target="_blank" rel="noreferrer noopener" alt="documentation">documentation</a>. Now that your are familliar with the Notification system, here are several other customization that you can do :</p>
<p class="paragraph">You can set your own notification special variables in the <code class="inline">notification.scss</code> file to obtain a fully personnalized notification system: margin, padding, icon size, border sizes and width.</p>
<p class="paragraph">If you intend to change the color values in the <code class="inline">notification.scss</code> file, beware to change them accordingly in the <code class="inline">Notification.js</code> constructor, in the <code class="inline">this._default</code> object since they are used on both file for different purpose.</p>
<p class="paragraph">Finally, feel free to contribute to this project by openning an issue or by making a pull request! Check out the <a href="https://github.com/ArthurBeaulieu/Notification.js" target="_blank" rel="noreferrer noopener" alt="repository">GitHub</a> repository.</p>
</div>
</div>
<hr>
<div class="full-row responsive">
<div class="same-col">
<p style="text-align: center;">
<a href="https://github.com/ArthurBeaulieu/Logger.js/releases" title="Releases" target="_blank" rel="noreferrer noopener"><img src="https://badgen.net/badge/version/1.2.0/blue" alt="version-badge"></a>
<a href="https://github.com/ArthurBeaulieu/Logger.js/blob/master/LICENSE" title="License" target="_blank" rel="noreferrer noopener"><img src="https://img.shields.io/github/license/ArthurBeaulieu/Notification.js.svg" alt="license-badge"></a>
<a href="doc/index.html" title="Documentation" target="_blank" rel="noreferrer noopener"><img src="https://badgen.net/badge/documentation/written/green" alt="documentation-badge"></a>
<img src="https://badgen.net/badge/test/passed/green" alt="test-badge" title="Run npm run test">
<img src="https://badgen.net/badge/dependencies/none/green" alt="dependencies-badge" title="Check package.json file">
</p>
<p style="font-size: .9rem; font-style: italic; margin-top: 0; text-align: center;">Arthur Beaulieu – October 2020</p>
</div>
</div>
</div>
</div>
<script type="module">
import Notification from './src/Notification.js';
window.notification = new Notification();
document.getElementById('btn1').onclick = () => { window.notification.success({ message: 'Success notification' }); };
document.getElementById('btn2').onclick = () => { window.notification.info({ message: 'Info notification' }); };
document.getElementById('btn3').onclick = () => { window.notification.warning({ message: 'Warning notification' }); };
document.getElementById('btn4').onclick = () => { window.notification.error({ message: 'Error notification' }); };
document.getElementById('btn5').onclick = () => {
var options = {
type: document.getElementById('type').value,
title: document.getElementById('title').value.length > 0 ? document.getElementById('title').value : undefined,
message: document.getElementById('message').value,
duration: document.getElementById('duration').value.length > 0 ? document.getElementById('duration').value : undefined,
iconless: JSON.parse(document.getElementById('iconless').value),
thickBorder: document.getElementById('thickBorder').value.length > 0 ? document.getElementById('thickBorder').value : undefined,
closable: JSON.parse(document.getElementById('closable').value),
sticky: JSON.parse(document.getElementById('sticky').value),
renderTo: (document.getElementById('renderTo').value === 'elsewhere' ? document.getElementById('renderme') : undefined),
CBtitle: document.getElementById('cbtitle').value.length > 0 ? document.getElementById('cbtitle').value : undefined,
callback: (document.getElementById('callback').checked ? function() {
alert('Called from my notification');
} : undefined)
};
if (options.message.length === 0) {
notification.error({ message: 'You didn\'t gave the to the playground a type and/or a title.', renderTo: document.getElementById('renderme') });
} else {
window.notification.new(options);
}
};
document.getElementById('btn6').onclick = () => { window.notification.dismissAll(); };
</script>
</body>
</html>