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

class FusionImage extends applyMixins(FusionBase, [SlideComponent, AspectRatioSwitcher, BorderedElement]) {
  static get options() {
    return {
      ...super.options,
      componentName: 'fusion-image',
      componentType: 'static',
      componentCategory: 'media',
      componentUIName: 'Image',
      componentScope: 'standard',
      componentDescription: 'Component for showing images',
      componentDomain: 'slide',
      isTextEdit: false,
      isRootNested: true,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate: '',
      resizable: 'all',
      draggable: 'xy',
      rotatable: true,
      sortable: false,
    };
  }

  static get properties() {
    const {
      top, left, ...otherProps
    } = super.properties;
    return {
      src: {
        type: String,
        fieldType: 'Modal',
        value: '../shared/assets/images/image-placeholder.jpg',
        prop: true,
        assetType: 'Image',
      },
      top,
      left,
      width: {
        type: String,
        fieldType: 'Number',
        value: '150px',
        min: 0,
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '100px',
        min: 0,
      },
      alt: {
        type: String,
        fieldType: 'String',
        value: 'Image',
      },
      ...otherProps,
    };
  }

  constructor() {
    super();
    this.prevSrc = '';
  }

  checkSrc(changedProps) {
    const oldSrc = changedProps.get('src');
    if (oldSrc) {
      this.prevSrc = oldSrc;
    }
  }

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

  triggerUpdateSrc() {
    if (this.prevSrc) {
      this.requestUpdate('src', this.prevSrc);
      this.prevSrc = '';
    }
  }

  imageLoaded(e) {
    const image = e.currentTarget;
    const ratio = image.naturalWidth / image.naturalHeight;
    this.setAttribute('ratio', ratio);
    this.triggerUpdateSrc();
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      :host {
        display: block;
      }
      :host .image-container {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: var(--border-width) var(--border-style) var(--border-color);
        border-radius: var(--border-radius);
        overflow: hidden;
      }
      :host .image-container img{
        width: 100%;
        height: 100%;
      }`;
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionImage.getStyle()}
      </style>
       <div class="image-container">
         <img src=${this.src} alt=${this.alt} @load=${e => this.imageLoaded(e)}>
      </div>
      ${FusionImage.getSystemSlotTemplate()}
    `;
  }
}

export { FusionImage };