Composite

Source

index.js

import style from 'PVWStyle/ComponentNative/Composite.mcss';

export default class NativeCompositeComponent {
  constructor(el) {
    this.container = null;
    this.viewports = [];
    this.styles = [];
    this.setContainer(el);
  }

  addViewport(viewport, expand = true) {
    this.viewports.push(viewport);
    const css = expand ? style.viewport : style.fixViewport;
    this.styles.push(css);

    if (this.container) {
      const subElem = document.createElement('div');
      subElem.classList.add(css);
      this.container.appendChild(subElem);
      viewport.setContainer(subElem);
    }
  }

  clearViewports() {
    while (this.viewports.length) {
      this.viewports.pop().setContainer(null);
      this.styles.pop();
    }
  }

  setContainer(el) {
    if (this.container && this.container !== el) {
      // Remove us from previous container
      this.container.classList.remove(style.container);
      this.viewports.forEach((viewport) => viewport.setContainer(null));
      while (this.container.firstChild) {
        this.container.removeChild(this.container.firstChild);
      }
    }

    this.container = el;
    if (this.container) {
      this.container.classList.add(style.container);
      this.viewports.forEach((viewport, idx) => {
        const subElem = document.createElement('div');
        subElem.classList.add(this.styles[idx]);
        this.container.appendChild(subElem);
        viewport.setContainer(subElem);
      });
    }
  }

  resize() {
    this.viewports.forEach((viewport) => viewport.resize());
  }

  render() {
    this.viewports.forEach((viewport) => viewport.render());
  }

  destroy() {
    this.clearViewports();
    this.setContainer(null);
  }
}