HM-30. Добавлен класс Компонент, поправлены api, внедрен тестовый ком… (#5)

src/components/component/Component.js

@@ -0,0 +1,118 @@
+/**
+ * @typedef Listener
+ * @type {Object}
+ * @property {Node} element
+ * @property {string} eventName
+ * @property {function} listener
+ */
+
+/**
+ * @function EventListener
+ * @param {unknown[]} args - аргументы функции
+ */
+
+/**
+ * @typedef Events
+ * @type {Object<string, EventListener[]>}
+ */
+
+/**
+ * Класс для создания компонентов приложения. Необходим для нследования.
+ * @class
+ */
+class Component {
+    /**
+     * @private
+     * @type {Listener[]}
+     */
+    _listeners;
+
+    /**
+     * @private
+     * @type {Events}
+     */
+    _events;
+
+    /**
+     * @public
+     * @type {Node} - корневой элемент компонента
+     */
+    mainNode;
+
+    /**
+     * @param {string} mainNodeSelector - селектор, с помощью которого извлекается шаблон компонента
+     * @param {Node} parentNode - родительский Node, в который следует положить созданный элемент
+     */
+    constructor(mainNodeSelector, parentNode) {
+        /**
+         * @type {DocumentFragment}
+         */
+        const content = document.querySelector(mainNodeSelector).content;
+        if (content.children.length > 1) {
+            const message = '<template> должен содержать только один элемент children';
+            alert(message);
+            throw new Error(message);
+        }
+        this.mainNode = content.firstElementChild.cloneNode(true);
+        parentNode.appendChild(this.mainNode);
+        this._listeners = [];
+        this._events = {};
+    }
+
+    /**
+     * Метод добавления обработчиков события на Node'ы компонента
+     * @public
+     * 
+     * @param {Node} element - элемент, на который будет навешен обработчик
+     * @param {string} eventName - событие, на которое будет реагировать обработчик
+     * @param {function} listener - обработчик события
+     */
+    addEventListener = (element, eventName, listener) => {
+        element.addEventListener(eventName, listener);
+        this._listeners.push({element, eventName, listener});
+    }
+
+    /**
+     * Метод подписки на события компонента
+     * @public
+     * 
+     * @param {string} eventName - событие компонента, на которое будет реагировать обработчик
+     * @param {EventListener} listener - обработчик события
+     */
+    subscribe = (eventName, listener) => {
+        const listeners = this._events[eventName] || [];
+        this._events[eventName] = [
+            ...listeners,
+            listener,
+        ];
+    }
+
+    /**
+     * Метод генерирует событие
+     * @public
+     * 
+     * @param {string} eventName - событие, которое необходимо сгенерировать
+     * @param  {unknown[]} args - аругемнты, который необходимо передать обработчикам события
+     */
+    next = (eventName, ...args) => {
+        const listeners = this._events[eventName];
+        listeners.forEach(listener => {
+            listener(...args);
+        });
+    }
+
+    /**
+     * Метод уничтожения компонента. Удаляет элемент из верстки, снимает обработчики и очищает подписки
+     * @public
+     */
+    destroy = () => {
+        this._listeners.forEach(({element, eventName, listener}) => {
+            element.removeEventListener(eventName, listener);
+        });
+        this.mainNode.remove();
+        this._listeners = [];
+        this._events = {};
+    }
+}
+
+export default Component;

src/components/component/index.js

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

src/components/test-button/TestButton.js

@@ -0,0 +1,15 @@
+// ! TODO: Удалить, необходим для примера работы с компонентами
+
+import Component from '../component';
+
+class TestButton extends Component {
+    constructor() {
+        super('#test-button', document.body);
+
+        this.addEventListener(this.mainNode, 'click', (evt) => {
+            this.next('click', evt);
+        });
+    }
+}
+
+export default TestButton;

src/components/test-button/index.js

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

src/components/test-modal/TestModal.css

@@ -0,0 +1,31 @@
+.TestModal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.TestModal_hide {
+    display: none;
+}
+
+.TestModal__shadow {
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.4);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 4;
+}
+
+.TestModal__window {
+    width: 300px;
+    height: 200px;
+    background-color: white;
+    z-index: 5;
+}

src/components/test-modal/TestModal.js

@@ -0,0 +1,38 @@
+// ! TODO: Удалить, необходим для примера работы с компонентами
+import Component from '../component';
+
+import './TestModal.css';
+
+const MAIN = 'TestModal';
+const CN = {
+    SHADOW: `${MAIN}__shadow`,
+    WINDOW: `${MAIN}__window`,
+    HIDE_MODAL: `${MAIN}_hide`,
+};
+
+class TestModal extends Component {
+    constructor() {
+        super('#test-modal', document.body);
+
+        this.shadow = this.mainNode.querySelector(`.${CN.SHADOW}`);
+        this.window = this.mainNode.querySelector(`.${CN.WINDOW}`);
+
+        this.addEventListener(this.shadow, 'click', (evt) => {
+            if (evt.target === this.shadow) {
+                this.hide();
+            }
+        });
+
+        this.hide();
+    }
+
+    show = () => {
+        this.mainNode.classList.remove(CN.HIDE_MODAL);
+    }
+
+    hide = () => {
+        this.mainNode.classList.add(CN.HIDE_MODAL);
+    }
+}
+
+export default TestModal;

src/components/test-modal/index.js

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