HM-74. Добавлена модалка-сайдбар. Реализована модалка для просмотра логов. (#32)

src/components/modal-sidebar/ModalSibebar.js

@@ -0,0 +1,72 @@
+import Component from '../component';
+import './ModalSidebar.css';
+import {createElement} from '../../utils/elementUtils';
+
+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 = 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;