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

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import mockData from './mockData.json';
import { FusionApi } from '../../api';
import { FusionCustomPopupOverlay } from '../custom-popup-overlay';
import { FusionList, FusionListItem } from '../list';
import { createObjectItem } from '../../utils';

class FusionReferenceItem extends FusionListItem {
  static get options() {
    return {
      ...super.options,
      componentName: 'fusion-reference-item',
      componentUIName: 'Reference Item',
      componentDescription: 'Component for showing reference item',
      defaultTemplate: '<div slot="icon"></div><div slot="indicator"></div><p slot="content">Text</p>',
    };
  }

  static getTemplate() {
    return html`
      <div class='content'>
        <slot name='icon'></slot>
        <slot name='indicator'></slot>
        <slot name='content'></slot>
      </div>
    `;
  }

  static alignConfig(prop) {
    const align = {
      top: {
        top: '0%',
        transform: 'translateY(-0%)',
      },
      middle: {
        top: '50%',
        transform: 'translateY(-50%)',
      },
      bottom: {
        top: '100%',
        transform: 'translateY(-100%)',
      },
    };
    return align[prop];
  }

  getIconAlign() {
    const verticalAlign = FusionReferenceItem.alignConfig(this['indication-vertical-align']);
    return `
    :host ::slotted([slot="icon"]) {
      ${FusionReferenceItem.getPositions(verticalAlign)};
      }`;
  }

  static getPositions(verticalAlign) {
    return Object.keys(verticalAlign).reduce((style, key) => {
      let requiredStyle = style;
      requiredStyle = `${requiredStyle}${key}: ${verticalAlign[key]};`;
      return requiredStyle;
    }, '');
  }

  getIconStyle() {
    return `
     ${this.getIconAlign()}
     :host ::slotted([slot="icon"]) {
        position: absolute;
        margin-right: 5px;
        right: 100%;
        height: 23px;
        min-width: 19px;
        background: url(../shared/assets/images/icon.png) center center /80% no-repeat;
      }
      :host ::slotted([slot="icon"].hidden){
         display: none;
      }`;
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionListItem.getStyle()}
        ${FusionListItem.getIndicationAlign.call(this)}
        ${this.getIconStyle()}
      </style>
      ${FusionReferenceItem.getTemplate()}
      ${FusionReferenceItem.getSystemSlotTemplate()}
    `;
  }
}

class FusionReferencesList extends FusionList {
  static get properties() {
    const { left, ...otherProps } = super.properties;
    return {
      left: {
        type: String,
        fieldType: 'Number',
        value: '40px',
      },
      ...otherProps,
    };
  }

  static get options() {
    return {
      ...super.options,
      componentName: 'fusion-references-list',
      componentUIName: 'Reference List',
      componentCategory: 'media',
      componentDescription: 'Component for showing references',
      nestedComponents: [],
      isRootNested: false,
    };
  }

  constructor() {
    super();
    this.item = createObjectItem(FusionReferenceItem);
  }
}

class FusionReferencesPopupOverlay extends FusionCustomPopupOverlay {
  static get options() {
    return {
      ...super.options,
      componentName: 'fusion-references-popup-overlay',
      componentUIName: 'References Overlay',
      componentDescription: 'Component for showing references',
    };
  }

  constructor() {
    super();
    this.referenceList = createObjectItem(FusionReferencesList);
  }

  async initNewList(references) {
    const list = await this.generateList(references);
    const listItems = list.querySelectorAll(list.item.name);
    this.constructor.setReferences(listItems, references);
  }

  static getRefText(item) {
    return item.querySelector('[slot="content"]');
  }

  static checkLinkIcon(item, { link }) {
    const icon = item.querySelector('[slot="icon"]');
    icon.classList[link ? 'remove' : 'add']('hidden');
  }

  static setReferences(listItems, references) {
    listItems.forEach((item, index) => {
      const textItem = this.getRefText(item);
      textItem.innerHTML = references[index].title;
      item.setAttribute('refKey', references[index].referenceId);
      item.setAttribute('link', references[index].link);
      this.checkLinkIcon(item, references[index]);
    });
  }

  updateExistList(references) {
    const list = this.querySelector(this.referenceList.name);
    const listItems = list.querySelectorAll(this.refList.item.name);
    listItems.forEach((item) => {
      const refItem = references.find((ref => ref.referenceId === item.getAttribute('refKey')));
      if (refItem) {
        const textItem = this.constructor.getRefText(item);
        textItem.innerHTML = refItem.title;
        this.constructor.checkLinkIcon(item, refItem);
      }
    });
  }

  async generateList(references) {
    const items = { value: references.length };
    return FusionApi.createElement(
      this.referenceList.name,
      {
        width: {
          value: '680px',
        },
        items,
        'text-padding-left': {
          value: '10px',
        },
        slot: {
          value: 'references',
        },
        indication: {
          value: 'arabic-numerals',
        },
      },
      '',
      this,
      `#${this.id}`,
      {},
    );
  }

  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    const references = Object.values(mockData);
    this.refList = this.querySelector(this.referenceList.name);
    this.refList ? this.updateExistList(references) : this.initNewList(references);
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionReferencesPopupOverlay.getStyle()}
       :host {
         min-width: 400px;
         min-height: 300px;
       }
       .references {
         position: relative;
         overflow: auto;
         height: 90%;
       }
      </style>
      <slot></slot>
      <div class="references"><slot name="references"></slot></div>
      ${FusionReferencesPopupOverlay.getSystemSlotTemplate()}
    `;
  }
}

export { FusionReferenceItem, FusionReferencesList, FusionReferencesPopupOverlay };