ToggleControl

Source

index.js

/* global document */
import style from 'PVWStyle/ComponentNative/ToggleControl.mcss';

const SELECTOR_BUTTON_CLASS = style.jsControlButton;

export default class CompositeControlContainer {
  constructor(mainViewport, controlViewport, width = 350) {
    this.container = null;
    this.controlVisible = false;
    this.mainViewport = mainViewport;
    this.controlViewport = controlViewport;
    this.targetWidth = width;

    this.toggleControl = () => {
      this.controlVisible = !this.controlVisible;
      if (this.container) {
        this.container.querySelector(
          `.${style.jsControlContent}`
        ).style.display = this.controlVisible ? 'flex' : 'none';
        setTimeout(() => this.resize(), 0);
      }
    };
  }

  setContainer(el) {
    if (this.container && this.container !== el) {
      // Remove listener
      const button = this.container.querySelector(`.${SELECTOR_BUTTON_CLASS}`);
      if (button) {
        button.removeEventListener('click', this.toggleControl);
      }

      this.mainViewport.setContainer(null);
      this.controlViewport.setContainer(null);

      // Remove us from previous container
      while (this.container.firstChild) {
        this.container.removeChild(this.container.firstChild);
      }
    }

    this.container = el;
    if (this.container) {
      const mainContainer = document.createElement('div');
      mainContainer.classList.add(style.container);
      this.container.appendChild(mainContainer);
      this.mainViewport.setContainer(mainContainer);

      const controlContainer = document.createElement('div');
      controlContainer.classList.add(style.control);
      controlContainer.innerHTML = `<div><i class="${style.toggleControlButton}"></i></div><div class="${style.controlContent}"></div>`;
      this.container.appendChild(controlContainer);

      this.controlViewport.setContainer(
        controlContainer.querySelector(`.${style.jsControlContent}`)
      );

      // Add button listener
      const button = controlContainer.querySelector(
        `.${SELECTOR_BUTTON_CLASS}`
      );
      if (button) {
        button.addEventListener('click', this.toggleControl);
      }

      this.resize();
    }
  }

  resize() {
    if (!this.container) {
      return;
    }

    const controlDiv = this.container.querySelector(
      `.${style.jsControlContent}`
    );
    const rect = this.container.getClientRects()[0];

    if (rect) {
      const { height, width } = rect;
      const controlWidth =
        width < this.targetWidth + 20 ? width - 20 : this.targetWidth;

      controlDiv.style.width = `${controlWidth}px`;
      controlDiv.style.maxHeight = `${height - 45}px`;
      controlDiv.style.overflowX = 'hidden';
      controlDiv.style.overflowY = 'auto';

      this.mainViewport.resize();
      this.controlViewport.resize();

      this.render();
    }
  }

  render() {
    this.mainViewport.render();
    this.controlViewport.render();
  }

  destroy() {
    this.setContainer(null);
    this.mainViewport.destroy();
    this.controlViewport.destroy();
    this.mainViewport = null;
    this.controlViewport = null;
  }
}