hq-modal/dist/hq-modal.umd.js

A simple component of modal

(function(e,o){typeof exports=="object"&&typeof module<"u"?module.exports=o():typeof define=="function"&&define.amd?define(o):(e=typeof globalThis<"u"?globalThis:e||self,e.HqModal=o())})(this,function(){"use strict";var d=Object.defineProperty;var l=(e,o,t)=>o in e?d(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t;var n=(e,o,t)=>l(e,typeof o!="symbol"?o+"":o,t);class e{constructor(t,i={}){n(this,"dialog");n(this,"dialogContainer");n(this,"buttonClose");n(this,"name");n(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,...i},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 i;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),(i=document.querySelector("body"))==null||i.appendChild(this.dialog)}open(){document.querySelectorAll(`[data-hq-modal-button="${this.name}"]`).forEach(t=>{t.addEventListener("click",()=>{var s;const i=window.innerWidth-document.documentElement.clientWidth;document.body.style.paddingRight=`${i}px`,this.dialog.showModal(),(s=document.querySelector("body"))==null||s.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 i=this.dialog.getBoundingClientRect();(t.clientX<i.left||t.clientX>i.right||t.clientY<i.top||t.clientY>i.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)}}return e});