/
cart-notification.js
80 lines (65 loc) · 2.21 KB
/
cart-notification.js
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
class CartNotification extends HTMLElement {
constructor() {
super();
this.notification = document.getElementById('cart-notification');
this.header = document.querySelector('sticky-header');
this.onBodyClick = this.handleBodyClick.bind(this);
this.notification.addEventListener('keyup', (evt) => evt.code === 'Escape' && this.close());
this.querySelectorAll('button[type="button"]').forEach((closeButton) =>
closeButton.addEventListener('click', this.close.bind(this))
);
}
open() {
this.notification.classList.add('animate', 'active');
this.notification.addEventListener('transitionend', () => {
this.notification.focus();
trapFocus(this.notification);
}, { once: true });
document.body.addEventListener('click', this.onBodyClick);
}
close() {
this.notification.classList.remove('active');
document.body.removeEventListener('click', this.onBodyClick);
removeTrapFocus(this.activeElement);
}
renderContents(parsedState) {
this.cartItemKey = parsedState.key;
this.getSectionsToRender().forEach((section => {
document.getElementById(section.id).innerHTML =
this.getSectionInnerHTML(parsedState.sections[section.id], section.selector);
}));
if (this.header) this.header.reveal();
this.open();
}
getSectionsToRender() {
return [
{
id: 'cart-notification-product',
selector: `[id="cart-notification-product-${this.cartItemKey}"]`,
},
{
id: 'cart-notification-button'
},
{
id: 'cart-icon-bubble'
}
];
}
getSectionInnerHTML(html, selector = '.shopify-section') {
return new DOMParser()
.parseFromString(html, 'text/html')
.querySelector(selector).innerHTML;
}
handleBodyClick(evt) {
const target = evt.target;
if (target !== this.notification && !target.closest('cart-notification')) {
const disclosure = target.closest('details-disclosure, header-menu');
this.activeElement = disclosure ? disclosure.querySelector('summary') : null;
this.close();
}
}
setActiveElement(element) {
this.activeElement = element;
}
}
customElements.define('cart-notification', CartNotification);