72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
import Component from '../component';
|
|
import './ModalSidebar.css';
|
|
|
|
const SHOW_WINDOW_CLASS = 'ModalSidebar__window_show';
|
|
const HIDE_WINDOW_CLASS = 'ModalSidebar__window_hide';
|
|
const SHOW_SHADOW_CLASS = 'ModalSidebar__shadow_show';
|
|
const HIDE_SHADOW_CLASS = 'ModalSidebar__shadow_hide';
|
|
|
|
class ModalSidebar extends Component {
|
|
constructor ({
|
|
content,
|
|
disabledShadowClose,
|
|
} = {}) {
|
|
const parentNode = document.body;
|
|
super('#modal-sidebar', parentNode);
|
|
|
|
this.shadow = this.createElement({
|
|
tagName: 'div',
|
|
parentNode,
|
|
options: {
|
|
className: 'ModalSidebar__shadow',
|
|
},
|
|
});
|
|
|
|
this.crossButton = this.mainNode.querySelector('.ModalSidebar__close');
|
|
|
|
this.window = this.mainNode.querySelector('.ModalSidebar__window');
|
|
|
|
this.window.appendChild(content);
|
|
|
|
if (!disabledShadowClose) {
|
|
this.addEventListener(this.mainNode, 'click', (event) => {
|
|
if (event.target === this.mainNode) {
|
|
this.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.addEventListener(this.crossButton, 'click', this.hide);
|
|
}
|
|
|
|
isOpen = () => {
|
|
return this.mainNode.classList.contains(SHOW_WINDOW_CLASS);
|
|
}
|
|
|
|
toggle = () => {
|
|
if (this.isOpen()) {
|
|
this.hide();
|
|
} else {
|
|
this.show();
|
|
}
|
|
}
|
|
|
|
show = () => {
|
|
this.mainNode.classList.add(SHOW_WINDOW_CLASS);
|
|
this.shadow.classList.add(SHOW_SHADOW_CLASS);
|
|
|
|
this.mainNode.classList.remove(HIDE_WINDOW_CLASS);
|
|
this.shadow.classList.remove(HIDE_SHADOW_CLASS);
|
|
}
|
|
|
|
hide = () => {
|
|
this.mainNode.classList.remove(SHOW_WINDOW_CLASS);
|
|
this.shadow.classList.remove(SHOW_SHADOW_CLASS);
|
|
|
|
this.mainNode.classList.add(HIDE_WINDOW_CLASS);
|
|
this.shadow.classList.add(HIDE_SHADOW_CLASS);
|
|
}
|
|
}
|
|
|
|
export default ModalSidebar;
|