HM-50. Сделан универсальный компонент модалки (#19)

src/components/modal/Modal.css

@@ -0,0 +1,17 @@
+.Modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.Modal__window {
+    display: block; 
+}
+
+.Modal_show {
+    display: block;
+}

src/components/modal/Modal.js

@@ -0,0 +1,88 @@
+import Component from '../component/index';
+
+import './Modal.css';
+
+const EVENTS = {
+    TOGGLE: 'toggle',
+    CLICK: 'mousedown'
+};
+
+const TEMPLATE = '#universal-modal';
+const MODAL = '.modal';
+const MODAL_SHOW = 'Modal_show';
+const CLOSE_BUTTON = '.close';
+const MODAL_HEADER = '.modal-title';
+const MODAL_CONTENT = '.modal-body';
+const MODAL_FOOTER = '.modal-footer';
+
+/**
+ * @function ModalListener
+ * @param {boolean} isOpen - принимает первым параметром новое состояние модалки
+ */
+
+/**
+ * Класс для создания модальных окон
+ * @param {Node} parentNode - родительский Node, в который следует положить модалку
+ * @param {{headerNode: Node; contentNode: Node; footerNode: Node}} options - Опции для размещения компонентов внутри модалки
+ */
+class Modal extends Component {
+    constructor (parentNode, {
+        headerNode,
+        contentNode,
+        footerNode,
+    } = {}) {
+        super(TEMPLATE, parentNode);
+
+        this.modal = this.mainNode.querySelector(MODAL);
+        this.closeButton = this.mainNode.querySelector(CLOSE_BUTTON);
+        this.header = this.mainNode.querySelector(MODAL_HEADER);
+        this.content = this.mainNode.querySelector(MODAL_CONTENT);
+        this.footer = this.mainNode.querySelector(MODAL_FOOTER);
+
+        if (headerNode) {
+            this.header.appendChild(headerNode);
+        }
+
+        if (contentNode) {
+            this.content.appendChild(contentNode);
+        }
+
+        if (footerNode) {
+            this.footer.appendChild(footerNode);
+        }
+
+        this.addEventListener(this.modal, EVENTS.CLICK, (event) => {
+            if (event.target === this.modal) {
+                this.hide();
+            }
+        });
+        this.addEventListener(this.closeButton, EVENTS.CLICK, this.hide);
+    }
+
+    /**
+     * Показывает модальное окно
+     */
+    show = () => {
+        this.mainNode.classList.add(MODAL_SHOW);
+        this.next(EVENTS.TOGGLE, true);
+    }
+
+    /**
+     * Прячет модальное окно
+     */
+    hide = () => {
+        this.mainNode.classList.remove(MODAL_SHOW);
+        this.next(EVENTS.TOGGLE, false);
+    }
+
+    /**
+     * Метод для подписки на изменение состояний модалки
+     * @param {ModalListener} listener - коллбек
+     */
+    onChangeShow = (listener) => {
+        this.subscribe(EVENTS.TOGGLE, listener);
+    }
+
+}
+
+export default Modal;

src/components/modal/index.js

@@ -0,0 +1,3 @@
+import Modal from './Modal';
+
+export default Modal;