activator-oce-exporter/test/activator/shared/src/fusion/slide/custom-popup-overlay/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,
  BorderedElement,
  Font,
  PopupElement,
  SlideComponent,
} from '../../mixins';
import {
  createObjectItem, getValueObject, intersectMap, emitInitEvents,
} from '../../utils';
import { FusionButton } from '../button';

class FusionCloseButton extends FusionButton {
  static get properties() {
    const {
      top, left, width, height, ['background-color']: backgroundColor, ['style-type']: styleType, ...others
    } = super.properties;
    return {
      top: {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      left: {
        type: String,
        fieldType: 'Number',
        value: '770px',
      },
      width: {
        type: String,
        fieldType: 'Number',
        value: '30px',
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '30px',
      },
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 0)',
      },
      'cross-width': {
        type: String,
        fieldType: 'Number',
        value: '2px',
      },
      ...others,
    };
  }

  static get options() {
    return {
      ...super.options,
      componentName: 'fusion-close-button',
      componentUIName: 'Close button',
      componentDescription: 'Close button for popup interactions',
      isTextEdit: false,
      isRootNested: false,
      defaultTemplate: '',
    };
  }


  constructor() {
    super();
    emitInitEvents(this, { name: `${this.constructor.options.componentName}:added`, props: { detail: { isCreated: true } } });
  }

  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('click', this.emitCustomEvent.bind(this, 'button-click'));
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener('click', this.emitCustomEvent.bind(this, 'button-click'));
    this.emitCustomEvent(`${this.constructor.options.componentName}:removed`, { detail: { isCreated: false } });
  }

  getButtonMinPart() {
    return Math.min(this.getValue('height'), this.getValue('width'));
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      :host button {
        padding: 0;
      }
      :host button:before,
      :host button:after {
        content: '';
        position: absolute;
        min-width: 15px;
        height: var(--cross-width);
        min-height: 1px;
        top: 50%;
        left: 50%;
        background-color: var(--color);
      }
      :host button:before {
        transform: translate3d(-50%, -50%, 0) rotate(45deg);
      }
      :host button:after {
        transform: translate3d(-50%, -50%, 0) rotate(-45deg);
      }
    `;
  }

  render() {
    super.render();
    const crossSize = this.getButtonMinPart();
    return html`
      <style>
        ${FusionCloseButton.getStyle()}
        :host button:after {
          width: ${crossSize / 2}px;
        }
      </style>
      <button></button>
      ${FusionCloseButton.getSystemSlotTemplate()}
    `;
  }
}

class FusionCustomPopupOverlay extends applyMixins(FusionBase, [SlideComponent, BorderedElement, PopupElement, Font]) {
  static get properties() {
    const {
      top, left, fontFamily, fontWeight, fontStyle, ...borderedProps
    } = super.properties;
    return {
      top: {
        type: String,
        fieldType: 'Number',
        value: '200px',
      },
      left: {
        type: String,
        fieldType: 'Number',
        value: '110px',
      },
      width: {
        type: String,
        fieldType: 'Number',
        value: '800px',
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '400px',
      },
      'font-family': fontFamily,
      'font-weight': fontWeight,
      'font-style': fontWeight,
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgb(230, 230, 230)',
      },
      ...borderedProps,
    };
  }

  static get options() {
    return {
      componentName: 'fusion-custom-popup-overlay',
      componentUIName: 'Custom Overlay',
      componentScope: 'standard',
      componentType: 'static',
      componentCategory: 'overlay',
      componentDescription: 'Basic overlay module',
      componentDomain: 'slide',
      isRootNested: false,
      isTextEdit: false,
      nestedTypes: [],
      nestedComponents: ['fusion-audio-player', 'fusion-button', 'fusion-chart', 'fusion-close-button', 'fusion-form', 'fusion-group',
        'fusion-image', 'fusion-infotab', 'fusion-list', 'fusion-paint', 'fusion-placeholder', 'fusion-shape', 'fusion-side-menu',
        'fusion-slider', 'fusion-sortable-list', 'fusion-state-container', 'fusion-submit-email', 'fusion-table', 'fusion-text-input',
        'fusion-text', 'fusion-video-player', 'fusion-viewer', 'fusion-popup', 'fusion-arrow-popup', 'fusion-references-popup'],
      defaultTemplate: '',
      resizable: 'all',
      draggable: 'xy',
      rotatable: false,
      sortable: false,
    };
  }

  constructor() {
    super();
    this.button = createObjectItem(FusionCloseButton);
    emitInitEvents(this, { name: `${this.constructor.options.componentName}:added`, props: { detail: { isCreated: true } } });
    this.addEventListener(this.button.events.add, this.updateComponentRelations.bind(this, 'addEventListener'));
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.emitCustomEvent(`${this.constructor.options.componentName}:removed`, { detail: { isCreated: false } });
  }

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

  checkSizes(changedProps) {
    const properties = intersectMap(changedProps, this.constructor.sizeTriggers);
    this.applyProps(properties);
    Array.from(properties.keys())
      .forEach(property => this.updateButtonPosition(property, changedProps));
  }

  updateButtonPosition(property, changedProps) {
    const oldChangedPropertyValue = FusionCustomPopupOverlay.getValue(changedProps.get(property));
    Array.from(this.closeButtons).forEach((element) => {
      const { direction, ...properties } = this.getValuesByProperty(element)[property];
      const elementPosition = FusionCustomPopupOverlay.getButtonPosition(properties, oldChangedPropertyValue);
      element.setAttribute(direction, elementPosition);
    });
  }

  static getButtonPosition(properties, oldValue) {
    const unit = 'px';
    const calculatedPosition = FusionCustomPopupOverlay.calculateButtonPosition(properties, oldValue);
    return `${calculatedPosition}${unit}`;
  }

  static getValue(prop) {
    return getValueObject(prop).num;
  }

  static calculateButtonPosition(properties, oldValue) {
    let result = 0;
    const { child, parent } = properties;
    const distance = oldValue - parent.main;
    if (child.main <= 0) {
      result = child.main;
    } else if (child.main > 0) {
      if (oldValue < parent.main) {
        if (child.secondary > parent.secondary) {
          result = child.main - distance;
        } else {
          result = Math.abs(distance) + child.main;
        }
      } else {
        result = child.main - distance;
      }
    }
    return result;
  }

  getValuesByProperty(element) {
    return {
      height: {
        direction: 'top',
        child: {
          main: FusionCustomPopupOverlay.getValue(element.top),
          secondary: FusionCustomPopupOverlay.getValue(element.left),
        },
        parent: {
          main: FusionCustomPopupOverlay.getValue(this.height),
          secondary: FusionCustomPopupOverlay.getValue(this.width),
        },
      },
      width: {
        direction: 'left',
        child: {
          main: FusionCustomPopupOverlay.getValue(element.left),
          secondary: FusionCustomPopupOverlay.getValue(element.top),
        },
        parent: {
          main: FusionCustomPopupOverlay.getValue(this.width),
          secondary: FusionCustomPopupOverlay.getValue(this.height),
        },
      },
    };
  }

  async firstUpdated(changedProperties) {
    this.closeButtons = this.getElementsByTagName(this.button.name);
    super.firstUpdated(changedProperties);
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      :host {
        background-color: var(--background-color);
        border: var(--border-width) var(--border-style) var(--border-color);
        border-radius: var(--border-radius);
        box-sizing: border-box;
        font-family: var(--font-family);
      }`;
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionCustomPopupOverlay.getStyle()}
      </style>
      <slot></slot>
      ${FusionCustomPopupOverlay.getSystemSlotTemplate()}
    `;
  }
}

export { FusionCloseButton, FusionCustomPopupOverlay };