Skip to content

Commit 7c6be82

Browse files
codewithkylecodewithkyle
committed
Prepared for v3.1.0 release
1 parent ca409db commit 7c6be82

File tree

7 files changed

+76
-128
lines changed

7 files changed

+76
-128
lines changed

‎CHANGELOG.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
## [3.1.0] - 2021-03-26
11+
12+
### Fixed
13+
14+
- improved snackbar rendering performance
15+
- improved toast rendering performance
16+
- reduced package size
17+
1018
## [3.0.0] - 2021-03-25
1119

1220
### Added
@@ -149,7 +157,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
149157

150158
- Entire existing codebase due to rewrite
151159

152-
[unreleased]: https://github.com/codewithkyle/notifyjs/compare/v3.0.0...HEAD
160+
[unreleased]: https://github.com/codewithkyle/notifyjs/compare/v3.1.0...HEAD
161+
[3.1.0]: https://github.com/codewithkyle/notifyjs/compare/v3.0.0...v3.2.0
153162
[3.0.0]: https://github.com/codewithkyle/notifyjs/compare/v2.1.0...v3.0.0
154163
[2.1.0]: https://github.com/codewithkyle/notifyjs/compare/v2.0.3...v2.1.0
155164
[2.0.3]: https://github.com/codewithkyle/notifyjs/compare/v2.0.1...v2.0.3

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Notify.js
22

3-
Notify.js is a lightweight (2.4kb) utility library for managing simple [snackbar](https://material.io/develop/web/components/snackbars/) and [toaster](https://www.carbondesignsystem.com/components/notification/code/) notifications.
3+
Notify.js is a lightweight (2.2kb) utility library for creating [snackbar](https://material.io/develop/web/components/snackbars/) and [toaster](https://www.carbondesignsystem.com/components/notification/code/) notifications.
44

55
## Installation
66

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@codewithkyle/notifyjs",
3-
"version": "3.0.0",
4-
"description": "A simple JavaScript library for creating and managing toaster & snackbar notifications",
3+
"version": "3.1.0",
4+
"description": "A simple JavaScript library for creating toaster & snackbar notifications",
55
"main": "notify.js",
66
"files": [
77
"notify.js",

‎src/snackbar-component.ts

Lines changed: 23 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { SnackbarNotification } from "./types";
1+
import { SnackbarNotification, NotificationButton } from "./types";
22

33
export class SnackbarComponent extends HTMLElement {
44
private settings: SnackbarNotification;
55
constructor(snackbar: SnackbarNotification) {
66
super();
7-
console.log(snackbar);
87
this.settings = snackbar;
98
this.render();
109
}
@@ -22,54 +21,30 @@ export class SnackbarComponent extends HTMLElement {
2221

2322
private render() {
2423
this.dataset.uid = this.settings.uid;
25-
2624
for (let i = 0; i < this.settings.classes.length; i++) {
2725
this.classList.add(this.settings.classes[i]);
2826
}
29-
30-
const message = document.createElement("p");
31-
message.innerText = this.settings.message;
32-
if (this.settings.closeable || this.settings.buttons.length){
33-
message.setAttribute("role", "alertdialog");
34-
}else{
35-
message.setAttribute("role", "alert");
36-
}
37-
this.appendChild(message);
38-
39-
if (this.settings.closeable || this.settings.buttons.length) {
40-
const actionsWrapper = document.createElement("snackbar-actions");
41-
42-
if (this.settings.buttons.length) {
43-
for (let i = 0; i < this.settings.buttons.length; i++) {
44-
const button = document.createElement("button");
45-
button.innerText = this.settings.buttons[i].label;
46-
button.dataset.index = `${i}`;
47-
48-
for (let k = 0; k < this.settings.buttons[i]?.classes?.length; k++) {
49-
button.classList.add(this.settings.buttons[i].classes[k]);
50-
}
51-
52-
if (this.settings.buttons[i]?.ariaLabel) {
53-
button.setAttribute("aria-label", this.settings.buttons[i].ariaLabel);
54-
}
55-
56-
button.addEventListener("click", this.handleActionButtonClick);
57-
58-
actionsWrapper.appendChild(button);
59-
}
60-
}
61-
62-
if (this.settings.closeable) {
63-
const closeButton = document.createElement("button");
64-
closeButton.setAttribute("aria-label", "close notification");
65-
closeButton.className = "close js-snackbar-close";
66-
closeButton.innerHTML =
67-
'<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>';
68-
closeButton.addEventListener("click", this.handleCloseClickEvent);
69-
actionsWrapper.appendChild(closeButton);
70-
}
71-
72-
this.appendChild(actionsWrapper);
27+
this.innerHTML = `
28+
<p role="${this.settings.closeable || this.settings.buttons.length ? "alertdialog" : "alert"}">${this.settings.message}</p>
29+
${this.settings.closeable || this.settings.buttons.length ? `
30+
<snackbar-actions>
31+
${this.settings.buttons.map((button:NotificationButton, index:number) => {
32+
return `<button ${button?.ariaLabel ? `aria-label="${button.ariaLabel}"` : ""} data-index="${index}" class="${button.classes?.join(" ")}">${button.label}</button>`;
33+
})}
34+
${this.settings.closeable ? `
35+
<button aria-label="close notification" class="close js-snackbar-close">
36+
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>
37+
</button>
38+
` : ""}
39+
</snackbar-actions>
40+
` : ""}
41+
`;
42+
this.querySelectorAll("button[data-index]").forEach(button => {
43+
button.addEventListener("click", this.handleActionButtonClick);
44+
});
45+
const closeBttn = this.querySelector(".close");
46+
if (closeBttn){
47+
closeBttn.addEventListener("click", this.handleCloseClickEvent);
7348
}
7449
}
7550

@@ -84,7 +59,7 @@ export class SnackbarComponent extends HTMLElement {
8459
}
8560
if (this.settings.buttons.length) {
8661
for (let i = 0; i < this.settings.buttons.length; i++) {
87-
if (this.settings.buttons[i].autofocus){
62+
if (this.settings.buttons[i]?.autofocus){
8863
const button:HTMLButtonElement = this.querySelector(`button[data-index="${i}"]`);
8964
if (button){
9065
// @ts-ignore

‎src/toast-component.ts

Lines changed: 32 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ToasterNotification } from "./types";
1+
import { NotificationButton, ToasterNotification } from "./types";
22

33
export class ToastComponent extends HTMLElement {
44
private settings: ToasterNotification;
@@ -21,76 +21,39 @@ export class ToastComponent extends HTMLElement {
2121

2222
private render() {
2323
this.dataset.uid = this.settings.uid;
24-
2524
for (let i = 0; i < this.settings.classes.length; i++) {
2625
this.classList.add(this.settings.classes[i]);
2726
}
28-
29-
if (this.settings.icon) {
30-
const icon = document.createElement("i");
31-
icon.innerHTML = this.settings.icon;
32-
this.appendChild(icon);
33-
}
34-
35-
const copyWrapper = document.createElement("copy-wrapper");
36-
37-
const title = document.createElement("h3");
38-
title.innerText = this.settings.title;
39-
if (this.settings.closeable){
40-
title.setAttribute("role", "alertdialog");
41-
}else{
42-
title.setAttribute("role", "alert");
43-
}
44-
copyWrapper.appendChild(title);
45-
46-
const message = document.createElement("p");
47-
message.innerText = this.settings.message;
48-
copyWrapper.appendChild(message);
49-
this.appendChild(copyWrapper);
50-
51-
if (this.settings.buttons.length) {
52-
const actionsWrapper = document.createElement("toast-actions");
53-
54-
for (let i = 0; i < this.settings.buttons.length; i++) {
55-
const button = document.createElement("button");
56-
button.innerText = this.settings.buttons[i].label;
57-
button.dataset.index = `${i}`;
58-
59-
for (let k = 0; k < this.settings.buttons[i]?.classes?.length; k++) {
60-
button.classList.add(this.settings.buttons[i].classes[k]);
61-
}
62-
63-
if (this.settings.buttons[i]?.ariaLabel) {
64-
button.setAttribute("aria-label", this.settings.buttons[i].ariaLabel);
65-
}
66-
67-
button.addEventListener("click", this.handleActionButtonClick);
68-
69-
actionsWrapper.appendChild(button);
70-
}
71-
72-
copyWrapper.appendChild(actionsWrapper);
73-
}
74-
75-
if (this.settings.closeable) {
76-
const closeButton = document.createElement("button");
77-
closeButton.setAttribute("aria-label", "close notification");
78-
closeButton.className = "close js-toast-close";
79-
closeButton.innerHTML =
80-
'<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>';
81-
closeButton.addEventListener("click", this.handleCloseClickEvent);
82-
this.appendChild(closeButton);
83-
}
84-
85-
if (this.settings.timer){
86-
const timer = document.createElement("toast-timer");
87-
timer.className = this.settings.timer;
88-
if (this.settings.timer === "horizontal"){
89-
timer.style.transform = "scaleX(1)";
90-
}else{
91-
timer.style.transform = "scaleY(1)";
92-
}
93-
this.append(timer);
27+
this.innerHTML = `
28+
${this.settings.icon ? `
29+
<i>${this.settings.icon}</i>
30+
` : ""}
31+
<copy-wrapper>
32+
<h3 role="${this.settings.closeable ? "alertdialog" : "alert"}">${this.settings.title}</h3>
33+
<p>${this.settings.message}</p>
34+
${this.settings.buttons.length ? `
35+
<toast-actions>
36+
${this.settings.buttons.map((button:NotificationButton, index:number) => {
37+
return `<button class="${button.classes?.join(" ")}" data-index="${index}" ${button?.ariaLabel ? `aria-label="${button.ariaLabel}"` : ""}>${button.label}</button>`;
38+
})}
39+
</toast-actions>
40+
` : ""}
41+
</copy-wrapper>
42+
${this.settings.closeable ? `
43+
<button aria-label="close notification" class="close js-toast-close">
44+
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>
45+
</button>
46+
` : ""}
47+
${this.settings.timer ? `
48+
<toast-timer class="${this.settings.timer}" style="transform: ${this.settings.timer === "horizontal" ? "scaleX(1)" : "scaleY(1)"};"></toast-timer>
49+
` : ""}
50+
`;
51+
this.querySelectorAll("button[data-index]").forEach(button => {
52+
button.addEventListener("click", this.handleActionButtonClick);
53+
});
54+
const closeBttn = this.querySelector(".js-toast-close");
55+
if (closeBttn){
56+
closeBttn.addEventListener("click", this.handleCloseClickEvent);
9457
}
9558
}
9659

@@ -105,7 +68,7 @@ export class ToastComponent extends HTMLElement {
10568
}
10669
if (this.settings.buttons.length) {
10770
for (let i = 0; i < this.settings.buttons.length; i++) {
108-
if (this.settings.buttons[i].autofocus){
71+
if (this.settings.buttons[i]?.autofocus){
10972
const button:HTMLButtonElement = this.querySelector(`button[data-index="${i}"]`);
11073
if (button){
11174
button.focus();

‎test/index.html

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@
164164
toaster-component toast-component.-green{border-color:#48bb78}
165165
toaster-component toast-component.-green i{color:#48bb78}
166166
toaster-component toast-component i{width:24px;height:24px;position:relative;display:inline-flex;justify-content:center;align-items:center;margin-right:1rem;color:#4299e1}
167-
toaster-component toast-component i svg{width:18px;height:18px}
167+
toaster-component toast-component i svg{width:24px;height:24px}
168168
toaster-component toast-component copy-wrapper{display:block;flex:1;z-index: 2;}
169169
toaster-component toast-component copy-wrapper h3{display:block;color:var(--white);font-weight:var(--font-bold);margin-bottom:.25rem}
170170
toaster-component toast-component copy-wrapper p{display:block;color:var(--neutral-300);font-size:var(--font-sm);line-height:1.618}
@@ -291,6 +291,12 @@
291291
timer: "horizontal",
292292
duration: 10,
293293
});
294+
toast({
295+
icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>`,
296+
title: "Example Toast Message",
297+
message: "This is what a toaster message might look like. Click the button to stack notifications.",
298+
class: "success"
299+
});
294300
});
295301

296302
class CustomToasterElement extends HTMLElement {
@@ -309,10 +315,5 @@
309315
append(new CustomToasterElement("Custom toaster notification example."));
310316
});
311317
</script>
312-
313-
<script src="/notify.min.js"></script>
314-
<script>
315-
Notifier.snackbar({ message: "Test" });
316-
</script>
317318
</body>
318319
</html>

‎tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"target": "ES2020",
1010
"module": "ESNext",
1111
"moduleResolution": "node",
12-
"lib": ["DOM", "ES2019"],
12+
"lib": ["DOM", "ES2020"],
1313
"declaration": true,
1414
},
1515
"exclude": ["./node_modules"],

0 commit comments

Comments
 (0)