activator-oce-exporter/test/activator/shared/src/fusion/slide/viewer/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, SlideComponent } from '../../mixins';

class FusionViewer extends applyMixins(FusionBase, [ModeTrackable, SlideComponent]) {
  static get properties() {
    return {
      width: {
        type: String,
        fieldType: 'Number',
        value: '600px',
        min: '50',
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '400px',
        min: '50',
      },
      link: {
        type: String,
        fieldType: 'String',
        value: '',
        prop: true,
      },
    };
  }

  static get options() {
    return {
      componentName: 'fusion-viewer',
      componentUIName: 'IFrame Viewer',
      componentScope: 'standard',
      componentType: 'static',
      componentCategory: 'media',
      componentDescription: 'Component for showing documents and external URLs',
      componentDomain: 'slide',
      isTextEdit: false,
      isRootNested: true,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate: '',
      resizable: 'all',
      draggable: 'xy',
      rotatable: true,
      sortable: false,
    };
  }

  isLinkUpdated(oldLink) {
    return this.link !== oldLink;
  }

  shouldLoad(oldLink) {
    return this.frame && this.isLinkUpdated(oldLink);
  }

  update(changedProps) {
    super.update(changedProps);
    if (this.shouldLoad(changedProps.get('link'))) {
      this.loadData();
    }
  }

  loadData() {
    this.frame.src = this.link;
  }

  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    this.frame = this.shadowRoot.querySelector('.inner-frame');
    this.lastLink = '';
  }

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

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
        :host iframe{
          width: 100%;
          height: 100%;
          border: none;
          background: rgb(230, 230, 230);
        }
        :host(.${ModeTrackable.EditModeClassName}) .inner-frame {
          pointer-events: none;
        }
      `;
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionViewer.getStyle()}
      </style>
      <iframe class='inner-frame' src="${this.link}"></iframe>
      ${FusionViewer.getSystemSlotTemplate()}
    `;
  }
}

export { FusionViewer };