activator-oce-exporter/test/activator/shared/src/fusion/slide/popup/index.js

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import { FusionBase } from '../../base';
import {
  applyMixins, ModeTrackable, PopupElement, SlideComponent, Stateful,
} from '../../mixins';
import { FusionCustomPopupOverlay } from '../custom-popup-overlay';
import { FusionBackdrop } from '../backdrop';
import { createObjectItem } from '../../utils';
import { monitoring } from '../../monitoring';
import { FusionStore } from '../../services/fusion-store';

class FusionPopup extends applyMixins(FusionBase, [SlideComponent, Stateful, PopupElement, ModeTrackable]) {
  static get properties() {
    const { top, left, ...otherProps } = super.properties;
    return {
      ...otherProps,
    };
  }

  static get options() {
    return {
      componentName: 'fusion-popup',
      componentUIName: 'Popup',
      componentScope: 'standard',
      componentType: 'dynamic',
      componentCategory: 'overlay',
      componentDescription: 'Basic popup module with option backdrop',
      componentDomain: 'slide',
      isRootNested: true,
      isTextEdit: true,
      nestedTypes: [],
      nestedComponents: ['fusion-backdrop', 'fusion-custom-popup-overlay'],
      baseLevel: 100,
      defaultTemplate: '',
      resizable: false,
      draggable: false,
      rotatable: false,
      sortable: false,
    };
  }

  constructor() {
    super();
    this.state = 'Popup';
    this.backdrop = createObjectItem(FusionBackdrop);
    this.overlay = createObjectItem(FusionCustomPopupOverlay);
    this.closePopupHandlerBound = this.closePopupHandler.bind(this);
    this.addEventListener(this.backdrop.events.add, this.updateComponentRelations.bind(this, 'addEventListener'));
    this.addEventListener(this.overlay.events.add, this.updateComponentRelations.bind(this, 'addEventListener'));
  }

  enter() {
    monitoring.trackSlideEnter({ id: this.id });
    this.addLevel();
  }

  exit() {
    monitoring.trackSlideExit({ id: this.id });
    this.removeLevel();
  }

  getChildrenComponentsData() {
    return {
      [this.overlay.name]: {
        attribute: `${this.overlay.name}-removed`,
        component: this.overlay,
      },
      [this.backdrop.name]: {
        attribute: `${this.backdrop.name}-removed`,
        component: this.backdrop,
      },
    };
  }

  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
  }

  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('button-click', this.closePopupHandlerBound);
    this.addEventListener('backdrop-click', this.closePopupHandlerBound);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener('button-click', this.closePopupHandlerBound);
    this.removeEventListener('backdrop-click', this.closePopupHandlerBound);
  }

  closePopupHandler(e) {
    const stateName = this.getStateName();
    this.removeState(stateName, '', false);
    e.stopPropagation();
  }

  parentStateChanged(parentState) {
    super.parentStateChanged(parentState);
    const registeredState = FusionStore.store.getState().app.currentState;
    registeredState.forEach((stateName) => {
      if (stateName !== parentState.name) {
        this.removeState(stateName, '', false);
      }
    });
  }

  static getStyle() {
    const styleRoot = super.getStyle(0, 0);
    return `
      ${styleRoot}
      :host {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
      .popup-content-wrapper {
        width: 100%;
        height: 100%;
      }
      :host(:not([active])) {
        display: none;
      }
      :host(.${ModeTrackable.EditModeClassName}) .popup-content-wrapper {
        background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 15px, rgba(0, 0, 0, 0.3) 5px, rgba(0, 0, 0, 0.3) 20px);
      }`;
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionPopup.getStyle()}
      </style>
      <div class='popup-content-wrapper'><slot></slot></div>
      ${FusionPopup.getSystemSlotTemplate()}
    `;
  }
}

export { FusionPopup };