activator-oce-exporter/test/activator/shared/src/fusion/mixins/popup-element.js

Extract Activator binder and convert it to valid OCE mono pacakge

import { FusionApi } from '../api';

/**
 *
 * @description Set of methods for works with popup elements (backdrop, overlay, close button)
 */

export function PopupElement(superClass) {
  return class extends superClass {
    /**
     * @description Check if an attribute should be updated
     * @param {string } name - name of child
     * @param {string} attribute - attribute for saving
     * @param {boolean} isElementCreated - is child was created
     */
    shouldChildUpdateAttr(name, attribute, isElementCreated) {
      return this.isElementRemoved(name, attribute, isElementCreated) || this.isElementAdded(attribute, isElementCreated);
    }

    isElementRemoved(name, attribute, isElementCreated) {
      return !this.getChildQuantity(name) && !this.isElementAdded(attribute, isElementCreated);
    }

    isElementAdded(attribute, isElementCreated) {
      return this.hasAttribute(attribute) && isElementCreated;
    }

    /**
     * @description Check if an element should be created
     * @param {string} name - the name of the child  which should be created
     * @param {string} attribute
     * @return {boolean}
     */
    shouldChildBeCreated(name, attribute) {
      return !this.getChildQuantity(name) && !this.hasAttribute(attribute);
    }

    getChildQuantity(name) {
      return this.getElementsByTagName(name).length;
    }

    async generateChildElement(element) {
      const childComponent = element.component;
      const { componentName, defaultTemplate } = childComponent.options;
      const { properties } = childComponent;
      return FusionApi.createElement(
        componentName,
        properties,
        defaultTemplate,
        this,
        `#${this.id}`,
        {},
      );
    }

    generateChildren() {
      const children = this.getChildrenComponentsData();
      Object.values(children).forEach(async ({ attribute, component }) => {
        if (this.shouldChildBeCreated(component.name, attribute)) {
          await this.generateChildElement(component);
        }
      });
    }

    /**
     * @description Update the necessary attribute when the child has been updated
     * @param {string} name -  name of the child
     * @param {string} attribute - attribute for saving
     * @param {boolean} isElementCreated - is child was created
     */
    updateAttributes(name, attribute, isElementCreated) {
      if (this.shouldChildUpdateAttr(name, attribute, isElementCreated)) {
        FusionApi.saveAttributes(`#${this.id}`, { [attribute]: !isElementCreated });
        isElementCreated ? this.removeAttribute(attribute) : this.setAttribute(attribute, !isElementCreated);
      }
    }

    updateComponentRelations(eventListener, e) {
      const name = e.target.localName;
      const isElementCreated = e.detail.isCreated;
      const { attribute, component } = this.getChildrenComponentsData()[name];
      this.updateAttributes(name, attribute, isElementCreated);
      this.updateEventHandler(e.target, eventListener, component.events.remove);
    }

    updateEventHandler(element, eventListener, eventType) {
      element[eventListener](eventType, this.updateComponentRelations.bind(this, 'removeEventListener'));
    }

    async firstUpdated(changedProperties) {
      super.firstUpdated(changedProperties);
      this.generateChildren();
    }
  };
}