activator-oce-exporter/test/activator/shared/src/fusion/slide/state-container/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, Stateful,
} from '../../mixins';
import { getValueObject } from '../../utils';
import { EnvironmentDetector } from '../../services/environment-detector';

class FusionStateContainer extends applyMixins(FusionBase, [SlideComponent, Stateful, ModeTrackable]) {
  static get options() {
    return {
      componentName: 'fusion-state-container',
      componentUIName: 'State Container',
      componentScope: 'standard',
      componentType: 'dynamic',
      componentCategory: 'interaction',
      componentDescription: 'Basic container for adding custom UI state (active/inactive)',
      componentDomain: 'slide',
      isRootNested: true,
      isTextEdit: false,
      nestedTypes: ['*'],
      nestedComponents: ['*'],
      defaultTemplate: '',
      baseLevel: 100,
      resizable: 'all',
      draggable: 'xy',
      rotatable: true,
      sortable: false,
    };
  }

  static get properties() {
    return {
      ...super.properties,
      width: {
        type: String,
        fieldType: 'Number',
        value: '600px',
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '400px',
      },
      duration: {
        type: String,
        fieldType: 'Number',
        value: '500ms',
        step: 50,
        prop: true,
      },
      delay: {
        type: String,
        fieldType: 'Number',
        value: '0ms',
        step: 50,
        prop: true,
      },
      effect: {
        type: String,
        fieldType: 'Select',
        value: 'fade-in',
        prop: true,
        selectOptions: [
          'fade-in',
          'slide-left',
          'slide-right',
          'slide-bottom',
          'slide-top',
        ],
      },
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(225, 225, 225, 1)',
      },
      initialState: {
        type: String,
        fieldType: 'Select',
        value: 'inactive',
        prop: true,
        selectOptions: [
          'active',
          'inactive',
        ],
      },
    };
  }

  constructor() {
    super();
    this.state = 'StateContainer';
  }

  enter() {
    this.addLevel();
  }

  exit() {
    const transitionDuration = getValueObject(this.duration).num;
    this.removeLevel(transitionDuration);
  }

  isActiveState() {
    return this.initialState === 'active';
  }

  setActiveState() {
    if (this.isActiveState()) {
      setTimeout(() => this.activate(), 0);
    }
  }

  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    this.environmentSetHandler = this.setActiveState.bind(this);
    EnvironmentDetector.setupEnvironmentListener(this.environmentSetHandler);
  }

  render() {
    super.render();
    const styleRoot = FusionStateContainer.getStyle();
    return html`
      <style>
        ${styleRoot}
        [part="animated-wrapper"],
        [part="overlay"] {
          position: relative;
          width: 100%;
          height: 100%;
        }
        [part="animated-wrapper"] {
          transition: all ${this.duration} ease-in-out;
          transition-delay: ${this.delay};
          transform: translate3d(0, 0, 0);
        }
        :host(:not([active])) .slide-left {
          transform: translate3d(-100%, 0, 0);
        }
        :host(:not([active])) .slide-right {
          transform: translate3d(100%, 0, 0);
        }
        :host(:not([active])) .slide-bottom {
          transform: translate3d(0, 100%, 0);
        }
        :host(:not([active])) .slide-top {
          transform: translate3d(0, -100%, 0);
        }
        :host(:not([active])) .fade-in {
          opacity: 0;
        }
        :host([active]) [part="overlay"]  {
          opacity: 1;
        }
        [part="overlay"] {
          background-color: var(--background-color);
          box-sizing: border-box;
          transition: opacity ${this.duration} ease-in-out;
          transition-delay: ${this.delay};
          opacity: 0;
        }
        :host(.${ModeTrackable.EditModeClassName}:not([active])) {
          visibility: hidden;
        }
      </style>
      <div part="animated-wrapper" class="${this.effect}">
        <div part="overlay"><slot></slot></div>
      </div>
      ${FusionStateContainer.getSystemSlotTemplate()}
    `;
  }
}

export { FusionStateContainer };