src/client/modal.ts

   1 import { v4 as uuid } from 'uuid';
   2 import $ from 'jquery';
   3 import { CustomEventManager } from './events';
   4
   5 export class Modal extends CustomEventManager {
   6   id: string;
   7   constructor() {
   8     super();
   9     this.id = `id-${uuid()}`;
  10   }
  11
  12   setBody(text: string) {
  13     this.$el().find('.modal-body').html(text);
  14   }
  15
  16   render(visible: boolean = false) {
  17     let html = `
  18     <dialog id="${this.id}">
  19       <div class="modal-header"><span class="close-modal">x</span></div>
  20       <div class="modal-body">Modal Body!</div>
  21     </dialog>
  22     `;
  23
  24     if(this.$el().length) {
  25       this.showModal();
  26     }
  27     else {
  28       $('body').append(html);
  29       this.emit('ready', [this]);
  30     }
  31   }
  32
  33   $el() {
  34     return $(`#${this.id}`);
  35   }
  36
  37   showModal() {
  38     // @ts-ignore
  39     this.$el().get(0)?.showModal();
  40   }
  41 }