Subversion Repositories oidplus

Rev

View as "text/javascript" | Blame | Last modification | View Log | RSS feed

  1. import Bs5Utils from "../Bs5Utils";
  2.  
  3. export default class Modal {
  4.     /**
  5.      * A counter for the Modals
  6.      * @type {number}
  7.      */
  8.     #count = 0;
  9.  
  10.     /**
  11.      * Display a modal
  12.      * @param type - the theme of the snack
  13.      * @param title - the title of the modal, if omitted, the modal-header element is removed
  14.      * @param content - the content of the modal, if omitted, the modal-body element is removed
  15.      * @param buttons - any action buttons, if omitted, the the modal-footer element  is removed
  16.      * @param centered - set whether the modal is centered
  17.      * @param dismissible - set whether the dismiss button should show
  18.      * @param backdrop - set the type of backdrop: true, false, static
  19.      * @param keyboard - set whether the escape key closes the modal
  20.      * @param focus - set whether the modal is autofocussed when initialized
  21.      * @param fullscreen - set whether the modal is fullscreen
  22.      * @param modalSize - set the size of the modal: sm, lg, xl by default, it's an empty string
  23.      */
  24.     show({
  25.              type,
  26.              title = '',
  27.              content = '',
  28.              buttons = [],
  29.              centered = false,
  30.              dismissible = true,
  31.              backdrop = dismissible ? true : 'static',
  32.              keyboard = dismissible,
  33.              focus = true,
  34.              fullscreen = false,
  35.              size = ''
  36.          }) {
  37.         this.#count++;
  38.  
  39.         size = ['sm', 'lg', 'xl'].includes(size) ? `modal-${size}` : '';
  40.         fullscreen = fullscreen ? 'modal-fullscreen' : '';
  41.         centered = centered ? 'modal-dialog-centered modal-dialog-scrollable' : '';
  42.  
  43.         const style = Bs5Utils.defaults.styles[type],
  44.             btnCloseStyles = style.btnClose.join(' '),
  45.             borderStyles = style.border,
  46.             modal = document.createElement('div');
  47.  
  48.         modal.setAttribute('id', `modal-${this.#count}`)
  49.         modal.setAttribute('tabindex', '-1');
  50.         modal.classList.add('modal');
  51.  
  52.         let footerHtml = '',
  53.             buttonIds = [];
  54.  
  55.         if (Array.isArray(buttons) && buttons.length) {
  56.             footerHtml += `<div class="modal-footer ${borderStyles.join(' ')}">`;
  57.  
  58.             buttons.forEach((button, key) => {
  59.                 const type = button.type || 'button';
  60.  
  61.                 switch (type) {
  62.                     case 'dismiss':
  63.                         footerHtml += `<button type="button" class="${button.class}" data-bs-dismiss="modal">${button.text}</button>`;
  64.                         break;
  65.  
  66.                     default:
  67.                         let id = `modal-${this.#count}-button-${key}`;
  68.  
  69.                         footerHtml += `<button type="button" id="${id}" class="${button.class}">${button.text}</button>`;
  70.  
  71.                         if (button.hasOwnProperty('handler') && typeof button.handler === 'function') {
  72.                             buttonIds.push({
  73.                                 id,
  74.                                 handler: button.handler
  75.                             });
  76.                         }
  77.                 }
  78.             });
  79.  
  80.             footerHtml += `</div>`;
  81.         }
  82.  
  83.         modal.innerHTML = ` <div class="modal-dialog ${centered} ${fullscreen} ${size}">
  84.                                 <div class="modal-content border-0">
  85.                                   ${title.length ? `<div class="modal-header border-0 ${style.main.join(' ')}">
  86.                                     <h5 class="modal-title">${title}</h5>
  87.                                     ${dismissible ? `<button type="button" class="btn-close ${btnCloseStyles}" data-bs-dismiss="modal" aria-label="Close"></button>` : ``}
  88.                                   </div>` : ``}
  89.                                   ${content.length ? `<div class="modal-body">${content}</div>` : ``}
  90.                                   ${footerHtml}
  91.                                 </div>
  92.                               </div>`;
  93.  
  94.         document.body.appendChild(modal);
  95.  
  96.         modal.addEventListener('hidden.bs.modal', function (e) {
  97.             e.target.remove();
  98.         });
  99.  
  100.         buttonIds.forEach(value => {
  101.             document.getElementById(value.id).addEventListener('click', value.handler)
  102.         });
  103.  
  104.         const opts = {
  105.             backdrop,
  106.             keyboard,
  107.             focus
  108.         };
  109.  
  110.         const bsModal = new bootstrap.Modal(modal, opts);
  111.  
  112.         bsModal.show();
  113.  
  114.         return bsModal;
  115.     }
  116. }