import { getStyles } from './Popup.helpers' ; import { IPopupConfig } from './Popup.types' ; export class Popup { private readonly namespace : string ; private readonly config : IPopupConfig ; private readonly onClickClose : ( ) => void ; private readonly rootElement : HTMLElement ; private readonly wrapperElement : HTMLElement ; private readonly innerElement : HTMLElement ; private readonly bodyElement : HTMLElement ; private readonly closeElement : HTMLElement ; constructor ( namespace , onClickClose , config ? ) { this . namespace = namespace ; this . onClickClose = onClickClose ; this . config = { position : 'center' , ... config } ; const root = this . getRootElement ( ) ; if ( ! root ) { const html = this . createHTML ( ) ; document . body . insertAdjacentHTML ( 'beforeend' , html ) ; this . rootElement = this . getElementWithCheckExist ( 'root' ) ; const styles = getStyles ( this . namespace ) ; document . head . appendChild ( styles ) ; } this . rootElement . classList . add ( `pushwoosh-${ this . namespace }-popup_position_${ this . config . position }` ) ; this . wrapperElement = this . getElementWithCheckExist ( 'wrapper' ) ; this . innerElement = this . getElementWithCheckExist ( 'inner' ) ; this . bodyElement = this . getElementWithCheckExist ( 'body' ) ; this . closeElement = this . getElementWithCheckExist ( 'close' ) ; this . addEventListeners ( ) ; } public updateContent ( html ) { this . bodyElement . innerHTML = html ; } public removeContent ( ) { this . bodyElement . innerHTML = '' ; } public show ( ) { document . body . style . overflow = 'hidden' ; this . rootElement . classList . add ( `pushwoosh-${ this . namespace }-popup_show` ) ; } public hide ( ) { document . body . style . overflow = 'auto' ; this . rootElement . classList . remove ( `pushwoosh-${ this . namespace }-popup_show` ) ; this . onClickClose ( ) ; } private getRootElement ( ) { return document . getElementById ( `pushwoosh-${ this . namespace }-popup-root` ) ; } private createHTML ( ) { return `
      <div
        id="pushwoosh-${ this . namespace }-popup-root"
        class="pushwoosh-${ this . namespace }-popup"
      >
        <div
          id="pushwoosh-${ this . namespace }-popup-wrapper"
          class="pushwoosh-${ this . namespace }-popup__wrapper"
        >
          <div
            id="pushwoosh-${ this . namespace }-popup-inner"
            class="pushwoosh-${ this . namespace }-popup__inner"
          >
            <div
              id="pushwoosh-${ this . namespace }-popup-body"
              class="pushwoosh-${ this . namespace }-popup__body"
            >
            </div>
          </div>
          <button
            id="pushwoosh-${ this . namespace }-popup-close"
            class="pushwoosh-${ this . namespace }-popup__close"
            type="button"
          >
          </button>
        </div>
      </div>
    ` ; } ; private getElementWithCheckExist ( type ) { const element = document . getElementById ( `pushwoosh-${ this . namespace }-popup-${ type }` ) ; if ( ! element ) { throw new Error ( `Can't find element by id "pushwoosh-${ this . namespace }-popup-${ type }"` ) ; } return element ; } private addEventListeners ( ) { this . closeElement . addEventListener ( 'click' , ( ) => { this . hide ( ) ; } ) ; document . addEventListener ( 'click' , ( event ) => { const clickInInner = this . innerElement . contains ( < HTMLElement > event . target ) ; const clickInWrapper = this . wrapperElement . contains ( < HTMLElement > event . target ) ; if ( ! clickInInner && clickInWrapper ) { this . hide ( ) ; } } ) ; } }