-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
325 lines (302 loc) · 18 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
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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css"
integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css"
integrity="sha512-Oy+sz5W86PK0ZIkawrG0iv7XwWhYecM3exvUtMKNJMekGFJtVAhibhRPTpmyTj8+lJCkmWfnpxKgT2OopquBHA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/bootstrap-toaster.css" />
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/site.webmanifest">
<title>Bootstrap Toaster</title>
<link rel="stylesheet" type="text/css" href="docs/css/index.min.css" />
</head>
<body>
<div id="hero" class="p-5">
<div class="container text-light text-center">
<h1 class="display-4"><strong>Bootstrap Toaster</strong></h1>
<p class="lead">Robust, plug & play generator for Bootstrap toasts.</p>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<h2 class="text-center">Getting Started</h2>
<div class="col-md-6">
<!-- First code snippet -->
<pre><code class="hljs" style="background:#030303;border-radius:8px">myButton.<span class="hljs-attribute">onclick</span> = () => {
<span class="hljs-keyword">let</span> toast = {
title: <span class="hljs-string">"Voila!"</span>,
message: <span class="hljs-string">"How easy was that?"</span>,
status: <span class="hljs-type">TOAST_STATUS</span>.<span class="hljs-attribute">SUCCESS</span>,
timeout: <span class="hljs-number">5000</span>
}
<span class="hljs-type">Toast</span>.<span class="hljs-attribute">create</span>(toast);
}</code></pre>
<!-- Second code snippet -->
<pre><code class="hljs" style="background:#030303;border-radius:8px">$.<span class="hljs-attribute">ajax</span>({
type: <span class="hljs-string">"POST"</span>,
url: <span class="hljs-string">"https://some-web-api/endpoint"</span>,
data: {
.<span class="hljs-literal"></span>.<span class="hljs-attribute"></span>.<span class="hljs-attribute"></span>
},
success: function (response) {
<span class="hljs-keyword">let</span> toast = {
title: <span class="hljs-string">"Success"</span>,
message: response,
status: <span class="hljs-type">TOAST_STATUS</span>.<span class="hljs-attribute">SUCCESS</span>,
timeout: <span class="hljs-number">10000</span>
}
<span class="hljs-type">Toast</span>.<span class="hljs-attribute">create</span>(toast);
},
error: function (response) {
console.<span class="hljs-attribute">error</span>(response);
<span class="hljs-keyword">let</span> toast = {
title: <span class="hljs-string">"Error"</span>,
message: response,
status: <span class="hljs-type">TOAST_STATUS</span>.<span class="hljs-attribute">DANGER</span>
}
<span class="hljs-type">Toast</span>.<span class="hljs-attribute">create</span>(toast);
}
});</code></pre>
</div>
<div class="col-md-6 d-flex flex-column align-items-center">
<p>Creating a toast is simple. All you need is a call to <span
class="badge bg-dark">Toast.create()</span> to get started. Simply pass an object with the
following properties
</p>
<ol>
<li>title: The text of the toast's header.</li>
<li>message: The text of the toast's body. Supports plain text and HTML!</li>
<li>status: The status/urgency of the toast. Affects status icon and ARIA accessibility features.
Optional, and defaults to 0, which renders no icon and has the same ARIA attributes as success
and info toasts
</li>
<li>timeout: Time in ms until toast disappears automatically. Optional, and defaults to 0, in which
case the toast
must be manually dismissed.</li>
</ol>
<p>There are 4 built-in options for toast status, named after Bootstrap's
color convention. They are as follows:</p>
<div id="startGrid">
<button id="successBtn" class="grid-left grid-top btn btn-success">
Success
</button>
<button id="dangerBtn" class="grid-center grid-top btn btn-danger">
Danger
</button>
<button id="warningBtn" class="grid-left grid-bottom-2 btn btn-warning">
Warning
</button>
<button id="infoBtn" class="grid-center grid-bottom-2 btn btn-info">
Info
</button>
<div id="timeoutRow" class="form-floating">
<input id="timeoutInput" class="form-control" type="number" placeholder="5" />
<label for="timeoutInput">Set Timeout (sec)</label>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-3">
<div class="col-md-6 d-flex flex-column align-items-center">
<h2 class="text-center">Placement</h2>
<div class="mw-100">
<pre><code class="hljs" style="background:#030303;border-radius:8px"><span class="hljs-type">Toast</span>.<span class="hljs-attribute">setPlacement</span>(<span class="hljs-type">TOAST_PLACEMENT</span>.<span class="hljs-attribute">MIDDLE_CENTER</span>);</code></pre>
</div>
<p>By default, the toast container will be fixed to the top right corner of the screen on larger screen
sizes, and top center on mobile. The <span class="badge bg-primary">Toast.setPlacement()</span>
function allows that positioning to be
customized. Modifying placement is unique in that it will affect toasts that have already been
rendered, because it moves the entire toast container. Top right and top center are most commonly
used for notifications, but each of the
following placements is supported:</p>
<div id="placementGrid">
<button data-placement="1" class="grid-top grid-left placement-grid-btn btn btn-secondary">
Top Left
</button>
<button data-placement="2" class="grid-top grid-center placement-grid-btn btn btn-primary">
Top Center
</button>
<button data-placement="3" class="grid-top grid-right placement-grid-btn btn btn-primary">
Top Right
</button>
<button data-placement="4" class="grid-middle grid-left placement-grid-btn btn btn-secondary">
Middle Left
</button>
<button data-placement="5" class="grid-middle grid-center placement-grid-btn btn btn-secondary">
Middle Center
</button>
<button data-placement="6" class="grid-middle grid-right placement-grid-btn btn btn-secondary">
Middle Right</button>
<button data-placement="7" class="grid-bottom grid-left placement-grid-btn btn btn-secondary">
Bottom Left
</button>
<button data-placement="8" class="grid-bottom grid-center placement-grid-btn btn btn-secondary">
Bottom Center
</button>
<button data-placement="9" class="grid-bottom grid-right placement-grid-btn btn btn-secondary">
Bottom Right
</button>
</div>
<p>Click each button to move the toast container!</p>
</div>
<div class="col-md-6 d-flex flex-column align-items-center">
<h2 class="text-center">Theming</h2>
<pre><code class="hljs" style="background:#030303;border-radius:8px"><span class="hljs-type">Toast</span>.<span class="hljs-attribute">setTheme</span>(<span class="hljs-type">TOAST_THEME</span>.<span class="hljs-attribute">LIGHT</span>);</code></pre>
<p>In supported browsers and operating systems, toasts will automatically choose a theme based on the
user's OS settings. However, there may be times where you want to force one theme or the other. In
that case, the <span class="badge bg-primary">Toast.setTheme()</span> function is for you! Each
toast created <em>after</em> the function is called will have the new theme, but previously rendered
toasts will not change themes. Try it out below:</p>
<div class="alert alert-primary">
<div class="d-flex justify-content-center">
<button data-theme="1" class="me-3 theme-btn btn btn-light">
Light
</button>
<button data-theme="2" class="theme-btn btn btn-dark">
Dark
</button>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-3">
<div class="col-md-6">
<h2 class="text-center">Maximum Toast Count</h2>
<div class="d-flex flex-column align-items-center">
<pre><code class="hljs" style="background:#030303;border-radius:8px"><span class="hljs-type">Toast</span>.<span class="hljs-attribute">setMaxCount</span>(<span class="hljs-number">6</span>);
<span class="hljs-type">Toast</span>.<span class="hljs-attribute">enableQueue</span>(<span class="hljs-literal">true</span>);</code></pre>
<p>
To avoid becoming a nuisance to users, especially if the creation of toasts is automated, a
limit
is in place to prevent too many toasts from being visible at once. By default, this limit is 4
toasts, but this can also be changed.
The tool of choice is the
<span class="badge bg-primary">Toast.setMaxCount()</span> function. Below is an example of
raising toast limit to 6 toasts.
</p>
<p>
Additionally, toasts can enter a queue when the limit is reached to be rendered as existing
toasts disappear.
This queue is enabled by default, and can be changed with <span
class="badge bg-primary">Toast.enableQueue()</span>
</p>
<div class="d-flex justify-content-center">
<div class="form-floating me-3">
<input id="maxCountInput" class="form-control" type="number" placeholder="6" />
<label for="maxCountInput">Set Max Count</label>
</div>
<div class="d-flex align-items-center">
<button data-queue="1" class="me-3 queue-btn btn btn-success">
Enable Queue
</button>
<button data-queue="0" class="queue-btn btn btn-danger">
Disable Queue
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h2 class="text-center">Toast Timers</h2>
<div class="d-flex flex-column align-items-center">
<div class="mw-100">
<pre><code class="hljs" style="background:#030303;border-radius:8px"><span class="hljs-type">Toast</span>.<span class="hljs-attribute">enableTimers</span>(<span class="hljs-type">TOAST_TIMERS</span>.<span class="hljs-attribute">ELAPSED</span>);
<span class="hljs-type">Toast</span>.<span class="hljs-attribute">enableTimers</span>(<span class="hljs-type">TOAST_TIMERS</span>.<span class="hljs-attribute">COUNTDOWN</span>);
<span class="hljs-type">Toast</span>.<span class="hljs-attribute">enableTimers</span>(<span class="hljs-type">TOAST_TIMERS</span>.<span class="hljs-attribute">DISABLED</span>);</code></pre>
</div>
<p>
Toasts can display timers as well! By default, a toast will display the elapsed time since
it was rendered,
but a countdown timer is also available to show when the toast will disappear. Introducing <span
class="badge bg-primary">Toast.enableTimers()</span>:
</p>
<div class="d-flex justify-content-center">
<button data-timer="1" class="me-3 timer-btn btn btn-primary">
Elapsed
</button>
<button data-timer="2" class="me-3 timer-btn btn btn-secondary">
Countdown
</button>
<button data-timer="0" class="timer-btn btn btn-danger">
Disabled
</button>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-3">
<div class="col-md-6">
<h2 class="text-center">Choosing the Right Version</h2>
<p>Bootstrap Toaster offers versions for both Bootstrap 4 and Bootstrap 5! For Bootstrap 4
compatibility, use version 4.x, and for Bootstrap 5, use version 5.x. They are functionally
identical and both fully supported!</p>
</div>
<div class="col-md-6">
<h2 class="text-center">Accessibility</h2>
<p>The toast container is setup as an aria-live region, so changes to its descendant elements will
alert
screen readers. <span class="badge bg-success">Success</span> and
<span class="badge bg-info">Info</span> toasts will read out when the user is not busy, leaving
their flow uninterrupted, while <span class="badge bg-danger">Error</span> and
<span class="badge bg-warning">Warning</span> toasts will read out immediately. In addition, all
toast status icons and elapsed timers are hidden to screen readers, as they are purely visual
indicators. Provided you properly use the
statuses, all the accessibility work is done for you!
</p>
</div>
</div>
</div>
<footer class="mt-3">
<div class="container">
<div class="row justify-content-around">
<div class="d-none d-md-block col-md-2">
<a href="https://peytongasink.dev" target="_blank" rel="noopener">
<img class="circle-image" src="docs/images/peyton.png" alt="" />
<span class="visually-hidden">Peyton Gasink's Portfolio</span>
</a>
</div>
<div class="col-sm-6 col-md-4">
<h4 class="text-center">Free Forever</h4>
<hr />
<p class="text-center">
Bootstrap Toaster is and always will be free to use however you like. To get started setting it
up, take a look at the documentation on the <a
href="https://github.com/PeytonRG/BootstrapToaster" target="_blank" rel="noopener">GitHub
repo</a>!
</p>
</div>
<div class="col-sm-6 col-md-4">
<h4 class="text-center">Let's Connect</h4>
<hr />
<div class="row justify-content-around text-center">
<a class="col-6 col-md-4" href="https://www.linkedin.com/in/peytongasink/" target="_blank"
rel="noopener">
<img class="connect-image" src="docs/images/footer-linkedin.png" alt="" />
<p>LinkedIn</p>
</a>
<a class="col-6 col-md-4" href="https://github.com/PeytonRG" target="_blank" rel="noopener">
<img class="connect-image" src="docs/images/footer-github.png" alt="" />
<p>GitHub</p>
</a>
</div>
</div>
</div>
</div>
</footer>
</body>
<!-- JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"
integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/bootstrap-toaster.js"></script>
<script src="docs/js/index.js"></script>
</html>