aico-image-editor/src/initHTML.js

Combine multiple image into and create single combined image

//import Alpine from 'alpinejs';

import initStyles from "./initStyles";




export default function(componentName, loadComponentHTML, observedAttributes) {
  //as we are using our own custom class, extending from x-component is not necessary 
  // so we removed x-component dedepdancy now

  

  class xCustomComponent extends HTMLElement {
  //class xCustomComponent extends customElements.get('x-component') {

    static observedAttributes = observedAttributes || [];

    constructor() {
      super();
      this.dispatchAttributeChanges = this.dispatchAttributeChanges.bind(this)
      this.attributeValuesMap = {};
    }
    connectedCallback() {
      const self = this;
      const shadow = this.getAttribute('shadow') === 'true';

      //const shadow = false;
      

      if(!this.shadowRoot) {
        const shadowRoot = shadow ? this.attachShadow({ mode: 'open' }) : null;
        //console.log(componentHTML);
        loadComponentHTML().then(function(componentHTML) {
            
            const newComponent = new DOMParser().parseFromString(
              componentHTML.default,
              'text/html'
            ).body.firstChild;
  
            // // const template = document.createElement('div');
            // // template.setAttribute('slot',name);
            // // template.appendChild(newComponent);
            // // shadowRoot.appendChild(template);
        
            // // const slot = document.createElement('slot');
            // // slot.setAttribute('name', name)
            
            // // shadowRoot.appendChild(slot)
            
            const alpineInitPointEl = shadow ? shadowRoot : this; 
        
            alpineInitPointEl.appendChild(newComponent);

           

            initStyles(shadowRoot)
            //console.log(componentName + ' is inserted in dom')
            
            if(shadowRoot) {
              // Alpine.initTree(this);
              Alpine.initTree(shadowRoot);
              if(this.constructor.observedAttributes.length) {
                this.dispatchAttributeChanges()
              }
            }
          
        }.bind(this))
      }
    }
      
    attributeChangedCallback(name, oldValue, newValue) {
      if(!!Alpine) {
        this.dispatchAttributeChanges()
      }
    }

    dispatchAttributeChanges() {
      this.constructor.observedAttributes.forEach(attr => {
        const key = this.getAttribute('key')
        const currentValue = this.getAttribute(attr);
        // Attribute value has changed, dispatch event
        const eventName = `${attr}-${key}-changed`;
        window.dispatchEvent(new CustomEvent(eventName, { detail: {eventName: currentValue} }));
        // Update stored value
        this.attributeValuesMap[attr] = currentValue;
      });
    }
      

    
  }   
  
  if (window.customElements.get(componentName)) {
    return
  }
     
  customElements.define(componentName,xCustomComponent);
      
}