aico-image-editor/src/components/containerModal/containerModal.js

Combine multiple image into and create single combined image

//import Alpine from 'alpinejs';
const loadContainerModalHTML = () => import(/* webpackMode: "eager" */'./containerModal.html');



// initialize custom made styles and html loading modules//
// inspired by alpine js component//
import initStyles from '../../initStyles';
import initHTML from '../../initHTML';
initHTML('container-modal', loadContainerModalHTML)



export default () => ({
  init() {
     initStyles(this.$el.shadowRoot);
  },
  containerText: 'this is container text',
  productBlockVisibleMobile: false,
  imageCombinerModal: {
    ['@imagecombinermodal-shown.window'] ($event) {
      if(!window.__canvas) {
        this.$store.canvas.initFabricCanvas(this.$store.elements.canvasEL, this.$watch, this.$store, this.$dispatch);
        
      } else {
        if(this.$store.canvas.isConfiguratorIdChanged) {
          this.$dispatch('canvas-reset');
          if(this.$store.canvas.configuratorId) {
            this.$store.canvas.restoreCanvasData(window.__canvas).then(() => {
                // all data has been loaded so now it's time to add mainPicture above it
                this.$store.canvas.canvasIsReady();
            }).catch((error) => {
                // in case of unsuccessful restoration also, add mainPicture
                this.$store.canvas.canvasIsReady();
            });
          }
        }

        // if no configuratorId at all then also reset everything
        if(!this.$store.canvas.configuratorId) {
          this.$dispatch('canvas-reset');
          this.$store.canvas.resetCanvasData(window.__canvas);
        }
      }
    }
  },
  sameSizeDropdown: null,
  createSameSizeDropdown(el) {
      if(!this.sameSizeDropdown) {
          if(!window.bootstrap) {
              const Dropdown = require('bootstrap/js/dist/dropdown')
              this.sameSizeDropdown = new Dropdown(el, {
                  reference: "parent"
              });
          } else {
              const Dropdown = require('bootstrap/js/dist/dropdown')
              this.sameSizeDropdown = new Dropdown(el, {
                  reference: "parent"
              });
              // this.sameSizeDropdown = new bootstrap.Dropdown(el, {
              //     reference: "parent"
              // })
          }
          
      }
  },
  toggleSameSizeDropdown() {
    this.sameSizeDropdown?.toggle()   
  },
})