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

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import {
  applyMixins, SlideComponent, Font, BorderedElement,
} from '../../mixins';
import { FusionBase } from '../../base';
import { FusionApi } from '../../api';
import { FusionStore } from '../../services/fusion-store';

class BottomMenu extends applyMixins(FusionBase, [SlideComponent, Font, BorderedElement]) {
  static get properties() {
    return {
      color: {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 1)',
      },
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(147, 140, 214, 1)',
      },
      'active-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 1)',
      },
      'active-background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(147, 140, 214, 1)',
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '68px',
        min: '30',
      },
      width: {
        type: String,
        fieldType: 'Number',
        value: '1024px',
        min: '300',
      },
      'separator-height': {
        type: String,
        fieldType: 'Number',
        value: '100%',
        min: '0',
      },
      'separator-width': {
        type: String,
        fieldType: 'Number',
        value: '1px',
        min: '0',
      },
      'separator-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 1)',
      },
      'end-separators': {
        type: Boolean,
        fieldType: 'Boolean',
        value: true,
        prop: true,
      },
      'padding-top': {
        type: String,
        fieldType: 'Number',
        value: '0px',
        min: '0',
      },
      'padding-right': {
        type: String,
        fieldType: 'Number',
        value: '0px',
        min: '0',
      },
      'padding-bottom': {
        type: String,
        fieldType: 'Number',
        value: '0px',
        min: '0',
      },
      'padding-left': {
        type: String,
        fieldType: 'Number',
        value: '0px',
        min: '0',
      },
      ...super.properties,
    };
  }

  static get options() {
    return {
      ...super.options,
      componentName: 'fusion-bottom-menu',
      componentCategory: 'interaction',
      componentUIName: 'Bottom Menu',
      componentDescription: 'Bottom menu component for navigation',
      nestedTypes: [],
      nestedComponents: [],
      componentDomain: 'slide',
      isRootNested: true,
      draggable: true,
      resizable: 'all',
      rotatable: false,
      sortable: false,
    };
  }

  constructor() {
    super();
    this.menu = [];
    this.navigation = {};
    this.keyMessageName = '';
    // this.presentationName = '';
    this.environmentSetHandler = this.init.bind(this);
    this.environmentSetEvent = 'EnvironmentDetector:environmentDetected';
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    document.removeEventListener(this.environmentSetEvent, this.environmentSetHandler);
  }

  async firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    if (FusionStore.environment) {
      this.init();
    } else {
      document.addEventListener(this.environmentSetEvent, this.environmentSetHandler);
    }
  }

  static async getActivatorBinderData() {
    return FusionApi.request({
      name: 'actions/setNavigationBinderData',
    });
  }

  // static async getCurrentPresentationName(isVeeva) {
  //   return isVeeva
  //     ? veevaData.getCurrentPresentationName
  //     : BottomMenu.getActivatorBinderData()
  //       .then(({ binder }) => binder.name__v);
  // }

  static async getCurrentKeyMessageName(isVeeva) {
    return isVeeva
      ? FusionStore.keyMessage.name
      : BottomMenu.getActivatorBinderData()
        .then(({ document }) => document.name__v);
  }

  /**
   * @return {Promise<[string, string]>}
   */
  static async fetchSlideInfo() {
    if (!FusionStore.isActivator && !FusionStore.isVeeva) {
      throw new Error('Environment for bottom menu not detected');
    }
    return Promise.all([
      BottomMenu.getCurrentKeyMessageName(FusionStore.isVeeva),
      // BottomMenu.getCurrentPresentationName(FusionStore.isVeeva),
    ]);
  }

  async init() {
    // need to fetch names first
    // this.presentationName isn't needed right now, but maybe for the future
    [
      this.keyMessageName,
      // this.presentationName,
    ] = await BottomMenu.fetchSlideInfo();
    ({ menu: this.menu = [], navigation: this.navigation = { gotoSlideV2: true } } = await FusionApi.getThemeConfig());
    await this.requestUpdate();
  }

  static getStyle() {
    return `
      ${super.getStyle()}
      :host {
        top: var(--top);
        left: var(--left);
        width: 100%;
        height: var(--height);
        border: var(--border-width) var(--border-style) var(--border-color);
        border-radius: var(--border-radius);
      }
      .button-wrapper {
        padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background-color: var(--background-color);
        overflow: hidden;
      }
      fusion-button {
        position: static;
        height: 100%;
        flex-grow: 1;
        text-align: center;
      }
      fusion-button.active {
        color: var(--active-color) !important;
        background-color: var(--active-background-color) !important;
      }
      .separator {
        height: var(--separator-height);
        width: var(--separator-width);
        background-color: var(--separator-color);
      }
    `;
  }

  onBtnClick(menuItem) {
    const {
      binder, binderDocId, slide, possibleDocuments,
    } = menuItem;
    if (this.navigation.gotoSlideV2) {
      const navSlide = possibleDocuments.find(({ properties }) => properties.name__v === slide);
      FusionApi.goTo(navSlide.properties.document_id__v, binderDocId, 'target', true);
    } else {
      FusionApi.goTo(slide, binder);
    }
  }

  isCurrentSlideInPossibleDocuments(menuItem) {
    return menuItem.possibleDocuments
      .find(({ properties }) => properties.name__v === this.keyMessageName);
  }

  isCurrentSlide(menuItem) {
    return menuItem.slide === this.keyMessageName;
  }

  isMonoBinderStructure() {
    return this.menu.every((item, i, arr) => !arr[i - 1] || item.binder === arr[i - 1].binder);
  }

  // @todo: Should always check `this.isCurrentSlideInPossibleDocuments` but for this to work we need to update shared config
  // - `possibleDocuments` should contain actual info about slides from corresponding chapter https://trello.com/c/wLEbRL2j

  isActiveMenuItem(menuItem) {
    return this.isMonoBinderStructure()
      ? this.isCurrentSlide(menuItem)
      : this.isCurrentSlideInPossibleDocuments(menuItem);
  }

  getButtonTemplateResult(item, isLast) {
    return html`
      <fusion-button
        height="${this.height}"
        width="auto"
        color="${this.isActiveMenuItem(item) ? this['active-color'] : this.color}"
        background-color="${this.isActiveMenuItem(item) ? this['active-background-color'] : this['background-color']}"
        @click="${this.onBtnClick.bind(this, item)}"
      >${item.label}</fusion-button>
      ${isLast ? html`` : html`<div class="separator"></div>`}
    `;
  }

  addSideSeparators(menu) {
    if (this['end-separators']) {
      menu.unshift(html`<div class="separator"></div>`);
      menu.push(html`<div class="separator"></div>`);
    }
    return menu;
  }

  generateButtons() {
    const menu = this.menu.map((item, i, arr) => {
      const isLast = i === arr.length - 1;
      return this.getButtonTemplateResult(item, isLast);
    });
    return this.addSideSeparators(menu);
  }

  render() {
    super.render();
    return html`
      <style>
        ${this.constructor.getStyle()}
      </style>
      <div class="button-wrapper">
        ${this.generateButtons()}
      </div>
      ${this.constructor.getSystemSlotTemplate()}
    `;
  }
}

export { BottomMenu };