class BrandOptionsBottomSheet extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
- Clone
- Doctor
- Offboard
- Terminal aliases
- Settings
`;
this.bottomSheet = this.shadowRoot.getElementById('bottomSheet');
this.overlay = this.shadowRoot.querySelector('.overlay');
this.shadowRoot.getElementById('cloneOption').onclick = this.handleCloneOption.bind(this);
this.shadowRoot.getElementById('offboardOption').onclick = this.handleOffboardOption.bind(this);
this.shadowRoot.getElementById('doctorOption').onclick = this.handleDoctorOption.bind(this);
this.shadowRoot.getElementById('aliasesOption').onclick = this.handleAliasesOption.bind(this);
this.shadowRoot.getElementById('settingsOption').onclick = this.handleSettingsOption.bind(this);
this.overlay.onclick = this.hideBrandOptionsBottomSheet.bind(this);
}
show() {
this.bottomSheet.style.display = 'block';
this.overlay.style.display = 'block';
setTimeout(() => this.bottomSheet.classList.add('show'), 10);
}
hideBrandOptionsBottomSheet() {
this.bottomSheet.classList.remove('show');
this.overlay.style.display = 'none';
}
handleCloneOption(event) {
event.stopPropagation();
this.hideBrandOptionsBottomSheet();
this.dispatchEvent(new CustomEvent('clone', {detail: this.bottomSheet.dataset}));
}
handleOffboardOption(event) {
event.stopPropagation();
this.hideBrandOptionsBottomSheet();
this.dispatchEvent(new CustomEvent('offboard', {detail: this.bottomSheet.dataset}));
}
handleDoctorOption(event) {
event.stopPropagation();
this.hideBrandOptionsBottomSheet();
this.dispatchEvent(new CustomEvent('doctor', {detail: this.bottomSheet.dataset}));
}
handleAliasesOption(event) {
event.stopPropagation();
this.hideBrandOptionsBottomSheet();
this.dispatchEvent(new CustomEvent('aliases', {detail: this.bottomSheet.dataset}));
}
handleSettingsOption(event) {
event.stopPropagation();
this.hideBrandOptionsBottomSheet();
this.dispatchEvent(new CustomEvent('settings', {detail: this.bottomSheet.dataset}));
}
}
customElements.define('brand-options-bottom-sheet', BrandOptionsBottomSheet);