From d01ee79202b3c52a37395a7d21b80a7643efb79c Mon Sep 17 00:00:00 2001
From: Nikolay <46225163+vigdorov@users.noreply.github.com>
Date: Sat, 18 Jul 2020 14:24:04 +0300
Subject: [PATCH] =?UTF-8?q?HM-50.=20=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BD?=
=?UTF-8?q?=20=D1=83=D0=BD=D0=B8=D0=B2=D0=B5=D1=80=D1=81=D0=B0=D0=BB=D1=8C?=
=?UTF-8?q?=D0=BD=D1=8B=D0=B9=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?=
=?UTF-8?q?=D0=BD=D1=82=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D0=BA=D0=B8=20(#1?=
=?UTF-8?q?9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app.html | 78 +++++++++++++++++++-----------
src/components/modal/Modal.css | 17 +++++++
src/components/modal/Modal.js | 88 ++++++++++++++++++++++++++++++++++
src/components/modal/index.js | 3 ++
src/services/EmitService.js | 2 +-
5 files changed, 158 insertions(+), 30 deletions(-)
create mode 100644 src/components/modal/Modal.css
create mode 100644 src/components/modal/Modal.js
create mode 100644 src/components/modal/index.js
diff --git a/src/app.html b/src/app.html
index 3662119..02eec38 100644
--- a/src/app.html
+++ b/src/app.html
@@ -9,18 +9,12 @@
-
+
+
+
+
+
+
Проверка сборки
-
-
- |
+
+
+ |
-
-
+
+
- |
+ |
-
-
+
+
@@ -100,7 +120,7 @@
diff --git a/src/components/modal/Modal.css b/src/components/modal/Modal.css
new file mode 100644
index 0000000..72c1128
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.js
new file mode 100644
index 0000000..a65f9e1
--- /dev/null
+++ b/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;
diff --git a/src/components/modal/index.js b/src/components/modal/index.js
new file mode 100644
index 0000000..8144af5
--- /dev/null
+++ b/src/components/modal/index.js
@@ -0,0 +1,3 @@
+import Modal from './Modal';
+
+export default Modal;
diff --git a/src/services/EmitService.js b/src/services/EmitService.js
index ecab102..8032bb2 100644
--- a/src/services/EmitService.js
+++ b/src/services/EmitService.js
@@ -40,7 +40,7 @@ class EmitService {
* _.next('click', arg1, arg2, ..., argN);
*/
next = (eventName, ...args) => {
- const listeners = this._events[eventName];
+ const listeners = this._events[eventName] || [];
listeners.forEach((listener) => {
listener(...args);
});