hq-modal/dist/hq-modal.cjs.js

A simple component of modal

"use strict";var s=Object.defineProperty;var l=(i,t,o)=>t in i?s(i,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[t]=o;var e=(i,t,o)=>l(i,typeof t!="symbol"?t+"":t,o);class a{constructor(t,o={}){e(this,"dialog");e(this,"dialogContainer");e(this,"buttonClose");e(this,"name");e(this,"options");this.name=t,this.options={maxWidth:"500px",background:"rgba(0, 0, 0, 0.4)",top:"0",bottom:"0",left:"0",right:"0",showButtonClose:!1,...o},this.dialog=this.createDialog(),this.dialogContainer=this.createContainer(),this.buttonClose=this.createButtonClose(),this.transferContent(),this.open(),this.closeOverlayClick(),this.btnClose(),this.inlineCss(),this.onClose()}createDialog(){const t=document.createElement("dialog");return t.classList.add("hq-modal"),t.classList.add(`hq-modal--${this.name}`),t.setAttribute("data-hq-modal-block",this.name),t}createContainer(){const t=document.createElement("div");return t.classList.add("hq-modal__container"),t.classList.add(`hq-modal__container--${this.name}`),t}createButtonClose(){const t=document.createElement("div");return t.classList.add("hq-modal__btn-close"),t.classList.add(`hq-modal__btn-close--${this.name}`),t.addEventListener("click",()=>this.dialog.close()),t}transferContent(){var o;const t=document.querySelector(`[data-hq-modal-block="${this.name}"]`);if(t)for(;t.firstChild;)this.dialogContainer.appendChild(t.firstChild);t==null||t.remove(),this.dialog.appendChild(this.dialogContainer),this.options.showButtonClose&&this.dialog.appendChild(this.buttonClose),(o=document.querySelector("body"))==null||o.appendChild(this.dialog)}open(){document.querySelectorAll(`[data-hq-modal-button="${this.name}"]`).forEach(t=>{t.addEventListener("click",()=>{var n;const o=window.innerWidth-document.documentElement.clientWidth;document.body.style.paddingRight=`${o}px`,this.dialog.showModal(),(n=document.querySelector("body"))==null||n.classList.add("hq-modal-lock")})})}onClose(){this.dialog.addEventListener("close",()=>{document.body.classList.remove("hq-modal-lock"),document.body.style.paddingRight=""})}closeOverlayClick(){this.dialog.addEventListener("click",t=>{const o=this.dialog.getBoundingClientRect();(t.clientX<o.left||t.clientX>o.right||t.clientY<o.top||t.clientY>o.bottom)&&this.dialog.close()})}btnClose(){this.dialog.querySelectorAll("[data-hq-modal-close]").forEach(t=>{t.addEventListener("click",()=>{this.dialog.close()})})}inlineCss(){const t=document.createElement("style");t.innerHTML=`
    .hq-modal {
      overflow: visible;
    }

    .hq-modal__container {
      overflow: auto;
      max-height: 80vh;
    }

    .hq-modal--${this.name} {
      box-sizing: border-box;
      inset: unset;
      top: ${this.options.bottom==="0"?this.options.top:"initial"};
      bottom: ${this.options.top==="0"?this.options.bottom:"initial"};
      right: ${this.options.left==="0"?this.options.right:"initial"};
      left: ${this.options.right==="0"?this.options.left:"initial"};
      border: none;
      max-width: ${this.options.maxWidth};
      width: 90%;
      padding: initial;
    }

    .hq-modal--${this.name}::backdrop {
      background: ${this.options.background};
    }

    .hq-modal__btn-close {
      position: absolute;
      top: -40px;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      cursor: pointer;
    }

    .hq-modal__btn-close::before {
      content: '';
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'><path d='M2 2l12 12M14 2L2 14' stroke='%23333' stroke-width='2' stroke-linecap='round'/></svg>");
      background-repeat: no-repeat;
    }

    .hq-modal-lock {
      overflow: hidden;
    }
  `,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{this.dialog.appendChild(t)}):this.dialog.appendChild(t)}}module.exports=a;