components refactored

src/js/components/cart.component.js

@@ -1,23 +0,0 @@
-import { Component } from "../core/component";
-
-export class CartComponent extends Component {
-    constructor(id) {
-        super(id);
-    }
-
-    init() {
-        const btnOpen = document.querySelector('#cartOpen');
-        const btnClose = this.$el.querySelector('#cartClose');
-
-        btnOpen.addEventListener('click', openHandler.bind(this));
-        btnClose.addEventListener('click', closeHandler.bind(this));
-    }
-}
-
-function openHandler() {
-    this.show();
-}
-
-function closeHandler() {
-    this.hide();
-}

src/js/components/category.component.js

@@ -17,29 +17,26 @@ export class CategoryComponent extends Component {
             if (localStorage.getItem('category')) {
                 localStorage.removeItem('sortByAll', 'true'); // установка значения для компонента Filter
 
-                const category = localStorage.getItem('category'),
+                const category = localStorage.getItem('category');
-                    bounded = breadcrumbActiveLink.bind(this);
+                breadcrumbActiveLink.call(this, category); // окрашиваем категорию по нажатию на breadcrumb
+                showItems.call(this, category); // отображем айтемсы если был нажат breadcrumb
+                localStorage.removeItem('category'); // очищаем ключ category чтобы данные не показывались всегда
+            }
+        }
+    }
+}
 
-                document.querySelector('#loader').classList.add('hide');
+async function showItems(category) {
-                bounded(category); // <- ф-я окраски li по нажатию на breadcrumb
-
-                // отображем айтемсы если был нажат breadcrumb
-                (async function(){
     const fData = await apiService.getItemsOne(category),
         html = renderItemsOne(category, fData);
-                    document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);  
-                }())
 
-                // очищаем ключ category чтобы данные не показывались всегда
+    this.items.onHide(); 
-                localStorage.removeItem('category');
+    this.items.insertItems(html);   
-            }
-        }
-    }
 }
 
 async function buttonHandler(e) {
     e.preventDefault();
-    if (e.target.dataset.category && e.target.dataset.category != 'all') {
+    if (e.target.dataset.category && e.target.dataset.category != 'all') { // Выполняем логику если нажали на кнопки кроме "Все товары"
         localStorage.removeItem('sortByAll'); // установка значения для компонента Filter
 
         this.filter.clearChecked();
@@ -51,8 +48,8 @@ async function buttonHandler(e) {
             html = renderItemsOne(category, fData);
 
         this.items.onHide();
-        document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);
+        this.items.insertItems(html);
-    } else if (e.target.dataset.category === 'all') {
+    } else if (e.target.dataset.category === 'all') { // Выполняем логику если нажали на кнопку "Все товары"
         localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter
 
         this.filter.clearChecked();
@@ -64,7 +61,7 @@ async function buttonHandler(e) {
             html = renderItems(categories, fData);
 
         this.items.onHide();
-        document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);
+        this.items.insertItems(html);
     }
 }
 

src/js/components/filter.component.js

@@ -30,13 +30,12 @@ async function sortByAllHandler(e) {
             const sorting = e.target.id;
             
             this.items.onShow();
-        
             const fData = await apiService.getItems(sorting),
                 categories = Object.keys(fData),
                 html = renderItems(categories, fData);
 
             this.items.onHide();
-            document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);
+            this.items.insertItems(html);
         }
     }
 }
@@ -47,13 +46,12 @@ async function sortByOneHandler(e) {
             const sorting = e.target.id;
 
             this.items.onShow();
-
             const category = localStorage.getItem('currentCategory'),
                 fData = await apiService.getItemsOne(category, sorting),
                 html = renderItemsOne(category, fData);
 
             this.items.onHide();
-            document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);
+            this.items.insertItems(html);
         }
     }
 }

src/js/components/items.component.js

@@ -6,26 +6,23 @@ export class ItemsComponent extends Component {
     constructor(id, {loader}) {
         super(id);
         this.loader = loader;
+        this.$el ? this.roster = this.$el.querySelector('#roster') : false;
     }
 
     async init() {
         if (this.$el) {
             localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter
-            if (!localStorage.getItem('category')) {
+            if (!localStorage.getItem('category')) { // Получаем все товары и выводим их если нету ключа category в ls
-            const roster = this.$el.querySelector('#roster');  // Список с товарами
-            
-            // Получаем все товары и вывоим их если нету ключа category в ls
                const fData = await apiService.getItems(),
                 categories = Object.keys(fData);
             
                 if (categories.length) {
                     const html = renderItems(categories, fData);
-                    roster.insertAdjacentHTML('afterbegin', html);  
+                    this.insertItems(html);
                 } else {
-                    roster.innerHTML = 'Товаров на сайте пока что нету';
+                    this.roster.innerHTML = 'Товаров на сайте пока что нету';
                 }
                 
-                // Убираем крутящийся лоадер
                 this.loader.hide(); 
             } 
         } 
@@ -39,4 +36,8 @@ export class ItemsComponent extends Component {
         this.$el.querySelector('#roster').innerHTML = '';
         this.loader.show();
     }
+
+    insertItems(html) {
+        this.roster.insertAdjacentHTML('afterbegin', html);
+    }
 }

src/js/core/modal.js

@@ -0,0 +1,31 @@
+export class Modal {
+    constructor(id, open, close) {
+        this.$el = document.getElementById(id);
+        this.open = document.getElementById(open);
+        this.close = document.getElementById(close);
+        this.init();
+    }
+
+    init() {
+        this.open.addEventListener('click', openHandler.bind(this));
+        this.close.addEventListener('click', closeHandler.bind(this));
+    }
+
+    show() {
+        this.$el.classList.remove('hide');
+        document.body.style.overflowY = 'hidden';
+    }
+
+    hide() {
+        this.$el.classList.add('hide');
+        document.body.style.overflowY = '';
+    }
+}
+
+function openHandler() {
+    this.show();
+}
+
+function closeHandler() {
+    this.hide();
+}

src/js/index.js

@@ -1,17 +1,17 @@
 import { HeaderComponent } from "./components/header.component.js";
 import { InformationComponent } from "./components/information.component.js";
-import { CartComponent } from "./components/cart.component.js";
 import { LoaderComponent } from "./components/loader.component.js";
 import { ItemsComponent } from "./components/items.component.js";
 import { CategoryComponent } from "./components/category.component.js";
 import { BreadcrumbComponent } from "./components/breadcrumb.component.js";
 import { FilterComponent } from "./components/filter.component.js";
+import { CartModal } from "./modals/cart.modal.js";
 
 const header = new HeaderComponent('header');
 const loader = new LoaderComponent('loader');
 const information = new InformationComponent('information');
-const cart = new CartComponent('cart');
 const items = new ItemsComponent('items', {loader});
 const filter = new FilterComponent('filter', {items});
 const category = new CategoryComponent('category', {items}, {filter});
 const breadcumb = new BreadcrumbComponent('breadcrumb');
+const cart = new CartModal('cart', 'cartOpen', 'cartClose');

src/js/modals/cart.modal.js

@@ -0,0 +1,7 @@
+import { Modal } from "../core/modal";
+
+export class CartModal extends Modal {
+    constructor(id, open, close) {
+        super(id, open, close);
+    }
+}