Advertisement
Rusfatal

Untitled

Aug 7th, 2022
1,163
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import createElement from '../../assets/lib/create-element.js';
  2.  
  3. export default class ProductCard {
  4.   #card;
  5.   product;
  6.  
  7.   // В качестве аргумента в конструктор класса передаётся объект, описывающий товар
  8.   constructor(product) {
  9.   this.product = product; // в это свойство передан объект описывающий товар
  10.   this.#create_card();  // метод для создания карточки товара
  11.   this.#eventListen();  // слушает клики мышки и создает пользовательское событие
  12.   }
  13.  
  14.  
  15.   // описываем метод для создания карточки товара
  16.   #create_card() {
  17.     this.#card = createElement(
  18.       `   <div class="card">
  19.       <div class="card__top">
  20.         <img src="/assets/images/products/${this.product.image}" class="card__image" alt="product">
  21.           <span class="card__price">€${this.product.price.toFixed(2)}</span>
  22.       </div>
  23.       <div class="card__body">
  24.         <div class="card__title">${this.product.name}</div>
  25.         <button type="button" class="card__button">
  26. <!--          <img src="/assets/images/icons/plus-icon.svg" alt="icon" class="card__img__del">-->
  27.           <img src="/assets/images/icons/plus-icon.svg" alt="icon">
  28.         </button>
  29.       </div>
  30.     </div>`
  31.     );
  32.   }
  33.  
  34.   // возвращаем приватное свойство #card через ProductCard.elem в коде html-файла
  35.   get elem(){return this.#card}
  36.  
  37.   // добавляем приватный # обработчик события на клик на элемент
  38.   #eventListen() {
  39.     // в переменную handlerClick пишем стрелочную функцию с аргументом event
  40.     const handlerClick = (event)=>{
  41.       // if(event.target.className==='card__img__del' || event.target.className==='card__button')
  42.       if(event.target.closest(".card__button"))  // если event пришелся на ближайшем теге с классмом card__button
  43.       {
  44.         // то создаем объект пользовательского события new CustomEvent("product-add"...) и помещаем в переменную custEvent, чтобы потом запустить его на элементе
  45.         // https://learn.javascript.ru/dispatch-events
  46.         let custEvent = new CustomEvent("product-add", { // имя события должно быть именно "product-add"
  47.           detail: this.product.id, // Уникальный идентификатора товара из объекта товара
  48.           bubbles: true // это событие всплывает - это понадобится в дальнейшем
  49.         });
  50.         //передаем объект события в приватный элемент #card
  51.         this.#card.dispatchEvent(custEvent);
  52.         console.log(event);
  53.       }
  54.     }
  55.     // добавляем слушатель кликов мышью на ближайшем теге с классмом card__button
  56.    this.#card.addEventListener('click', handlerClick);
  57.   }
  58. }
  59.  
  60.  
  61.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement