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

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import { unsafeHTML } from 'lit-html/directives/unsafe-html';
import { FusionBase } from '../../base';
import {
  applyMixins, LazyComponent, ModeTrackable, SlideComponent,
} from '../../mixins';
import { hasInactiveStatefulParent, httpRequest } from '../../utils';
import { FusionLogger } from '../../services/fusion-logger';

const FRAGMENTS_ROOT = '../shared/fragments/';
const DEFAULT_NAME = 'Fragment name';
/** class for instantiating <fusion-slide-fragment>, a component, that will fetch a HTML template stored separately. This will enable  */
class SlideFragment extends applyMixins(FusionBase, [SlideComponent, ModeTrackable, LazyComponent]) {
  static get options() {
    return {
      componentName: 'fusion-slide-fragment',
      componentType: 'static',
      componentCategory: 'UI',
      componentUIName: 'Slide Fragment',
      componentScope: 'standard',
      componentDescription: 'Component for inserting fragments',
      componentDomain: 'slide',
      isTextEdit: false,
      isRootNested: true,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate: '',
      resizable: false,
      draggable: true,
      rotatable: false,
      sortable: false,
    };
  }

  static get properties() {
    return {
      'fragment-name': {
        type: String,
        fieldType: 'Modal',
        assetType: 'Fragment',
        value: '',
        prop: true,
      },
      ...super.properties,
    };
  }

  constructor() {
    super();
    this.fragment = {
      name: '',
      template: '',
    };
  }

  get fragmentTemplateResult() {
    return unsafeHTML(this.fragment.template);
  }

  static async getFragment(fragmentName) {
    const path = `${FRAGMENTS_ROOT}${fragmentName}/index.html`;
    let template = '';
    try {
      template = await httpRequest(path, { responseType: 'text' });
    } catch (e) {
      FusionLogger.log(`Could not fetch template from "${path}"`, 'SlideFragment');
      template = '';
    }
    return template;
  }

  shouldFetchFragment() {
    return this.fragment.name !== this['fragment-name'];
  }

  async fetchFragment() {
    let fetched = false;
    // prevent multiple fetches of the same doc
    if (this.shouldFetchFragment()) {
      this.fragment.name = this['fragment-name'];
      this.fragment.template = await SlideFragment.getFragment(this['fragment-name']);
      fetched = true;
    }
    return fetched;
  }

  async parentStateChanged(parentState) {
    super.parentStateChanged(parentState);
    if (parentState.active) {
      await this.fetchFragment();
      this.requestUpdate();
    }
  }

  shouldHandleNameChange(changedProps) {
    return changedProps.has('fragment-name') && this['fragment-name'];
  }

  async handleFragmentNameChange(changedProps) {
    if (this.shouldHandleNameChange(changedProps)) {
      await this.fetchFragment();
      if (!hasInactiveStatefulParent(this)) {
        this.requestUpdate();
      }
    }
  }


  update(changedProps) {
    super.update(changedProps);
    this.handleFragmentNameChange(changedProps);
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      :host,
      :host .fragment-placeholder {
        width: 200px;
        height: 25px;
      }
      :host .slide-fragment {
        position: relative;
      }
      :host .fragment-placeholder {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--theme-color-placeholder);
        font-family: sans-serif;
      }
      :host(.edit-mode) .fragment-placeholder {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    `;
  }

  render() {
    super.render();
    return html`
    <link rel="stylesheet" href="../shared/src/styles/reset.css">
    <style>
      ${SlideFragment.getStyle()}
    </style>
    <div class="slide-fragment">
      <div class="fragment-placeholder">
        <p>${this['fragment-name'] || DEFAULT_NAME}</p>
      </div>
      <div class="fragment-wrapper">
        ${this.fragmentTemplateResult}
      </div>
    </div>`;
  }
}

export { SlideFragment };