aico-image-editor/src/modalstore.js

Combine multiple image into and create single combined image

// import Alpine from 'alpinejs';

let Modal;

if (!window.bootstrap) {
  Modal = require('bootstrap/js/dist/modal');
} else {
  Modal = window.bootstrap.Modal;
}

// import { Modal } from 'bootstrap';

// required impports for bootstrap modal's override
import EventHandler from 'bootstrap/js/src/dom/event-handler.js';
import SelectorEngine from 'bootstrap/js/src/dom/selector-engine.js';
import {reflow} from 'bootstrap/js/src/util/index'

const DATA_KEY = 'bs.modal'
const EVENT_KEY = `.${DATA_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const SELECTOR_MODAL_BODY = '.modal-body';
const CLASS_NAME_SHOW = 'show'


class CustomModal extends Modal {
  constructor(element, config) {
    super(element, config)
  }
  _showElement(relatedTarget) {
    // try to append dynamic modal
    if (!document.body.contains(this._element)) {
      //document.body.append(this._element)
    }

    this._element.style.display = 'block'
    this._element.removeAttribute('aria-hidden')
    this._element.setAttribute('aria-modal', true)
    this._element.setAttribute('role', 'dialog')
    this._element.scrollTop = 0

    const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog)
    if (modalBody) {
      modalBody.scrollTop = 0
    }

    reflow(this._element)

    this._element.classList.add(CLASS_NAME_SHOW)

    const transitionComplete = () => {
      if (this._config.focus) {
        //this._focustrap.activate()
      }

      this._isTransitioning = false
      EventHandler.trigger(this._element, EVENT_SHOWN, {
        relatedTarget
      })
    }

    this._queueCallback(transitionComplete, this._dialog, this._isAnimated())
  }
 
}


Alpine.store('modal', {
  
  modalsCount: 0,
  createModal(el,  $dispatch, options = {}) {
    
    new CustomModal(el,{
      backdrop: false,
      focus: false
    });
    el.addEventListener('shown.bs.modal', function(event) {
      event.stopPropagation()
      $dispatch(el.id.toLowerCase() + '-shown', { message: 'Hello World!' })
    
      
      // this.modalsCount++;
      // const zIndex = 1055 + 10 * this.modalsCount;
      // el.style.zIndex = zIndex;
      // this.getInstance(el)._backdrop._element.style.zIndex = zIndex - 5;

    }.bind(this))
    
    
    el.addEventListener('hidden.bs.modal', function(event) {
      event.stopPropagation()
      $dispatch(el.id.toLowerCase() + '-hidden', { message: 'Hello World!' })
      //this.modalsCount--;
    }.bind(this))
      
     
  },
  openModal(el) {
    
    const modalInstance = CustomModal.getOrCreateInstance(el);
    modalInstance?.show();

  },
  closeModal(el) {
    
    const modalInstance = CustomModal.getOrCreateInstance(el);
    modalInstance?.hide();
  },
  getInstance(el) {
    return CustomModal.getOrCreateInstance(el);
  },
  isModalVisible(el) {
    el.isVisible = !el.isVisible;
    return el.isVisible;
  },
})