Advertisement
Clamator

Untitled

May 30th, 2023
396
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const popup = function Popup(el, triggerButton) {
  2.     this.el = el;
  3.     this.triggerButton = triggerButton;
  4.     this.open = false;
  5.  
  6.     this.closeButton = this.el.querySelector(".ui-popup-close-button");
  7.  
  8.     this.toggleActiveClass = () => {
  9.      this.el.classList.toggle("--active");
  10.     };
  11.  
  12.     this.clickOutside = (e) => {
  13.      if (!this.checkElemContains(e.target)) {
  14.         this.open = false;
  15.         this.toggleActiveClass();
  16.         document.removeEventListener("click", this.clickOutside);
  17.      }
  18.     };
  19.  
  20.     this.checkElemContains = (target) => {
  21.      return this.el.contains(target);
  22.     };
  23.  
  24.     this.triggerButton.addEventListener("click", () => {
  25.      this.open = true;
  26.      this.el.classList.add("--active");
  27.     });
  28.  
  29.     this.closeButton.addEventListener("click", () => {
  30.      this.open = false;
  31.      this.el.classList.remove("--active");
  32.     });
  33. };
  34.  
  35. const jsLkPopup = document.querySelector(".js-lk-popup");
  36. const jsLkPopupTrigger = document.querySelector(".js-lk-popup-trigger");
  37. const jsGetProdcutPricePopup = document.querySelector(
  38.     ".js-get-product-price-popup"
  39. );
  40. const jsGetProdcutPriceTrigger = document.querySelector(
  41.     ".js-get-product-price-trigger"
  42. );
  43.  
  44. const popups = [
  45.     [jsLkPopup, jsLkPopupTrigger],
  46.     [jsGetProdcutPricePopup, jsGetProdcutPriceTrigger],
  47. ];
  48.  
  49. for (let i = 0; i < popups.length; i++) {
  50.     if (popups[i][0] && popups[i][1]) {
  51.      new popup(popups[i][0], popups[i][1]);
  52.      console.log(new popup(popups[i][0], popups[i][1]));
  53.     }
  54. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement