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

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import { FusionBase } from '../../base.js';
import { store } from '../../../store.js';
import { pushState } from '../../_actions/app.js';
import { registerSlides } from '../../_actions/slides.js';
import { applyMixins, SlideComponent } from '../../mixins';
import { FusionStore } from '../../services/fusion-store';
import { FusionSlide } from '../slide';


const orientationEffects = {
  static: 'fade-in',
  vertical: 'slide-bottom',
  horizontal: 'slide-right',
};

class FusionPresentation extends applyMixins(FusionBase, [SlideComponent]) {
  static get options() {
    return {
      componentName: 'fusion-presentation',
      componentType: 'close',
      componentUIName: 'Presentation',
      componentScope: 'standard',
      componentCategory: 'UI',
      componentDescription: 'Present slides sequentially',
      componentDomain: 'slide',
      isTextEdit: false,
      isRootNested: true,
      nestedTypes: [],
      nestedComponents: ['fusion-slide'],
      defaultTemplate: '',
      resizable: 'all',
      draggable: 'xy',
      rotatable: false,
      sortable: false,
    };
  }

  static get properties() {
    return {
      top: {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      left: {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      width: {
        type: String,
        fieldType: 'Number',
        value: '1024px',
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '768px',
      },
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 1)',
      },
      orientation: {
        type: String,
        fieldType: 'Select',
        value: 'horizontal',
        selectOptions: [
          'horizontal',
          'vertical',
          'static',
        ],
        prop: true,
      },
    };
  }

  static getSlideIndex() {
    const { app } = store.getState();
    return app.registeredSlides.indexOf(app.currentSlide);
  }

  applyGoToSlide(isNextSlide) {
    const { app } = store.getState();
    const currentIndex = this.constructor.getSlideIndex();
    const destSlideIndex = isNextSlide ? currentIndex + 1 : currentIndex - 1;
    const destSlide = app.registeredSlides[destSlideIndex];
    if (destSlide) {
      store.dispatch(pushState(destSlide));
    }
  }

  next() {
    this.applyGoToSlide(true);
  }

  prev() {
    this.applyGoToSlide();
  }

  static goTo(slide) {
    store.dispatch(pushState(slide));
  }

  constructor() {
    super();
    this.slideOptions = FusionSlide.options;
  }

  connectedCallback() {
    super.connectedCallback();
    this.slideAddEventFunc = this.slideAddHandler.bind(this);
    this.slideRemoveEventFunc = this.slideRemoveHandler.bind(this);
    this.addEventListener(this.slideOptions.events.add, this.slideAddEventFunc);
    this.addSlidesEventListeners();
  }

  slideRemoveHandler() {
    this.registerFusionSlides();
  }

  slideAddHandler() {
    this.registerFusionSlides();
    this.addEventListener(this.slideOptions.events.remove, this.slideRemoveHandler);
  }

  addSlidesEventListeners() {
    this.getExistSlides().forEach((slide) => {
      slide.addEventListener(this.slideOptions.events.remove, this.slideRemoveEventFunc);
    });
  }

  registerFusionSlides() {
    const slides = this.getExistSlides();
    const slideEffect = orientationEffects[this.orientation];
    const slideStates = [];
    slides.forEach((slide, index) => {
      slide.setAttribute('index', index);
      slide.setAttribute('effect', slideEffect);
      slideStates.push(`Slide-${slide.id}`);
    });
    return store.dispatch(registerSlides(slideStates));
  }

  applySlideEffects() {
    const effect = orientationEffects[this.orientation];
    this.getExistSlides().forEach((slide) => {
      slide.setAttribute('effect', effect);
    });
  }

  static isSlideEffectProp(changedProps) {
    return changedProps.get('orientation');
  }

  update(changedProps) {
    super.update(changedProps);
    const slideEffect = this.constructor.isSlideEffectProp(changedProps);
    if (slideEffect) {
      this.applySlideEffects();
    }
  }

  getExistSlides() {
    return Array.from(this.getElementsByTagName(this.slideOptions.componentName));
  }

  addKeysListener() {
    document.addEventListener('keydown', this.handleKeyPress.bind(this));
  }

  handleKeyPress(event) {
    switch (event.keyCode) {
      case 32: this.next(); break;
      case 37: this.prev(); break;
      case 39: this.next(); break;
      case 38: this.prev(); break;
      case 40: this.next(); break;
      default: break;
    }
  }

  static getSlideByState(slides, stateSlide) {
    const stateSlideId = stateSlide.replace('Slide-', '');
    return slides.find(slide => slide.id === stateSlideId);
  }

  static getSlideMirrorEffect(slide) {
    return slide.constructor.getMirrorEffect(slide.effect);
  }

  static getNextSlides(slides, curSlide) {
    slides
      .filter(slide => slide.index > curSlide.index)
      .forEach(slide => slide.setMovementClass());
  }

  static getPrevSlides(slides, curSlide, effect) {
    slides
      .filter(slide => slide.index < curSlide.index)
      .forEach(slide => slide.setMovementClass(effect));
  }

  slideChangeHandler(state) {
    const { previousSlide, currentSlide } = state.app;
    if (previousSlide && currentSlide) {
      const slides = this.getExistSlides();
      const curtSlideElem = this.constructor.getSlideByState(slides, currentSlide);
      const prevSlideElem = this.constructor.getSlideByState(slides, previousSlide);
      const mirrorEffect = this.constructor.getSlideMirrorEffect(curtSlideElem);
      this.constructor.getNextSlides(slides, curtSlideElem);
      this.constructor.getPrevSlides(slides, curtSlideElem, mirrorEffect);
      if (curtSlideElem.index > prevSlideElem.index) {
        curtSlideElem.setMovementClass();
      } else {
        curtSlideElem.setMovementClass(mirrorEffect);
      }
    }
  }

  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    this.registerFusionSlides();
    this.addKeysListener();
    this.unsubscribe = FusionStore.subscribe('app.currentSlide', (state) => {
      this.slideChangeHandler(state);
    });
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.unsubscribe();
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      :host {
        --padding-top: 20px;
        --padding-left: 40px;
        --text-color: rgba(0, 0, 0, 1);
        min-height: calc(var(--padding-top) * 2);
        min-width: calc(var(--padding-left) * 2);
        background-color: var(--background-color);
        display: block;
        margin: auto;
      }`;
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionPresentation.getStyle()}
      </style>
      <div part="presentation-wrapper">
        <div part="slides">
          <slot></slot>
        </div>
      </div>
      ${FusionPresentation.getSystemSlotTemplate()}
    `;
  }
}

export { FusionPresentation };