activator-oce-exporter/test/activator/shared/src/fusion/slide/infotab/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, intersectMap } from '../../utils';

class FusionInfoTab extends applyMixins(FusionBase, [SlideComponent, Stateful, ModeTrackable]) {
  static get properties() {
    return {
      ...super.properties,
      width: {
        type: String,
        fieldType: 'Number',
        value: '400px',
        min: '400',
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '400px',
        min: '70',
      },
      'tab-width': {
        type: String,
        fieldType: 'Number',
        value: '40px',
        min: '20',
      },
      'tab-height': {
        type: String,
        fieldType: 'Number',
        value: '60px',
        min: '40',
      },
      'tab-placement': {
        type: String,
        fieldType: 'Select',
        value: 'Middle',
        prop: true,
        selectOptions: [
          'Top',
          'Middle',
          'Bottom',
        ],
      },
      'tab-position': {
        type: String,
        fieldType: 'Select',
        value: 'Right',
        prop: true,
        selectOptions: [
          'Left',
          'Right',
        ],
      },
      'transition-duration': {
        type: String,
        fieldType: 'Number',
        value: '800ms',
      },
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(20, 38, 46, 1)',
      },
      'text-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(210, 210, 210, 1)',
      },
    };
  }

  static get options() {
    return {
      componentName: 'fusion-infotab',
      componentUIName: 'Infotab',
      componentScope: 'standard',
      componentType: 'dynamic',
      componentCategory: 'overlay',
      componentDescription: 'Sliding container intended for placement at any edge of the content',
      componentDomain: 'slide',
      isRootNested: true,
      isTextEdit: true,
      nestedTypes: ['*'],
      nestedComponents: ['*'],
      baseLevel: 100,
      defaultTemplate: '',
      resizable: 'all',
      draggable: 'xy',
      rotatable: true,
      sortable: false,
    };
  }

  enter() {
    this.addLevel();
    this.emitCustomEvent('open');
  }

  exit() {
    const transitionDuration = getValueObject(this['transition-duration']).num;
    this.removeLevel(transitionDuration);
    this.emitCustomEvent('close');
  }

  checkSizes(changedProps) {
    const properties = intersectMap(changedProps, this.constructor.sizeTriggers);
    Array.from(properties.keys()).forEach(prop => this.updateSizeProperty(prop));
  }

  updateSizeProperty(property) {
    const minSize = this.constructor.properties[property].min;
    const { num, unit } = getValueObject(this[property]);
    const value = Math.max(num, minSize);
    this.setElementProp(property, `${value}${unit}`);
    this.setAttribute(property, `${value}${unit}`);
  }

  constructor() {
    super();
    this.state = 'InfoTab';
    this.toggleBinded = this.toggle.bind(this);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.setListenerType('removeEventListener');
  }

  toggle() {
    this.active ? this.inactivate() : this.activate();
  }

  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    this.container = this.shadowRoot.querySelector('.info-tab');
    this.content = this.shadowRoot.querySelector('.info-tab-content');
    this.tab = this.shadowRoot.querySelector('[name=\'tab\']');
    this.setListenerType('addEventListener');
  }

  setListenerType(eventType) {
    this.tab[eventType]('click', this.toggleBinded);
  }

  render() {
    super.render();
    const position = this['tab-position'].toLowerCase();
    const reversPosition = position === 'right' ? 'left' : 'right';
    return html`
      <style>
        ${FusionInfoTab.getStyle()}
        :host .info-tab {
          position: absolute;
          width: calc((var(--width) / 2) + (var(--tab-width) / 2));
          height: 100%;
          box-sizing: border-box;
          ${reversPosition}: 0;
          transition: ${reversPosition} var(--transition-duration), transform var(--transition-duration);
        }
        :host(:not(.${ModeTrackable.EditModeClassName})) {
          pointer-events: none;
        }
        :host [name='tab'] {
          position: absolute;
          ${position}: 0;
          width: var(--tab-width);
          height: var(--tab-height);
          color: var(--text-color);
          border: 1px solid transparent;
          border-bottom-${position}-radius: 18px;
          border-top-${position}-radius: 18px;
          background-color: var(--background-color);
          user-select: none;
          cursor: pointer;
          box-sizing: border-box;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          pointer-events: all;
        }
        :host [name='tab']:before,
        :host [name='tab']:after {
          content: '';
          position: absolute;
          width: 3px;
          height: 3px;
          ${reversPosition}: -3px;
          border: 6px solid var(--background-color);
        }
        :host [name='tab']:before {
          top: -4px;
          border-width: 0 2px 2px 0;
          border-bottom-${reversPosition}-radius: 100%;
        }
        :host [name='tab']:after {
          bottom: -4px;
          border-width: 2px 2px 0 0;
          border-top-${reversPosition}-radius: 100%;
        }
        :host [name='tab']:focus {
          outline: 0;
        }
        :host .info-tab-content {
          position: absolute;
          ${reversPosition}: 0;
          width: calc(100% - var(--tab-width));
          height: 100%;
          background-color: var(--background-color);
          color: var(--text-color);
          box-sizing: border-box;
          pointer-events: all;
        }
        :host([active]) .info-tab {
          ${reversPosition}: calc((var(--width) - (var(--tab-width))) / 2);
        }
        :host([tab-placement='Top']) [name='tab'] {
          top: 5px;
        }
        :host([tab-placement='Middle']) [name='tab'] {
          top: 50%;
          transform: translateY(-50%);
        }
        :host([tab-placement='Bottom']) [name='tab'] {
          bottom: 5px;
        }
        :host([tab-position='Right']) [name='tab']:before {
          border-width: 0 0 2px 2px;
        }
        :host([tab-position='Right']) [name='tab']:after {
          border-width: 2px 0 0 2px;
        }
      </style>
      <div class='info-tab'>
        <button name='tab'></button>
        <div class='info-tab-content'>
          <slot></slot>
        </div>
      </div>
      ${FusionInfoTab.getSystemSlotTemplate()}
    `;
  }
}

export { FusionInfoTab };