dees-wcctools/ts_web/elements/wcc-dashboard.ts

import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';

import * as plugins from '../wcctools.plugins';

import { WccDefaultElement } from './wcc-defaultelement';

// wcc tools
import './wcc-frame';
import './wcc-sidebar';
import './wcc-properties';
import { TTheme } from './wcc-properties';
import { TElementType } from './wcc-sidebar';
import { TViewport } from '@designestate/dees-domtools/dist_ts/domtools.breakpoints';

@customElement('wcc-dashboard')
export class WccDashboard extends LitElement {
  public domtools: plugins.deesDomtools.DomTools;

  @property()
  public selectedType: TElementType;

  @property()
  public selectedItemName: string;

  @property()
  public selectedItem: (() => TemplateResult) | LitElement;

  @property()
  public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';

  @property()
  public selectedTheme: TTheme = 'dark';

  @property()
  public pages: { [key: string]: () => TemplateResult } = {};

  @property()
  public elements: { [key: string]: LitElement } = {};

  @property()
  public warning: string = null;

  constructor(
    elementsArg?: { [key: string]: LitElement },
    pagesArg?: { [key: string]: () => TemplateResult }
  ) {
    super();
    if (elementsArg) {
      this.elements = elementsArg;
      console.log('got elements:');
      console.log(this.elements);
    }

    if (pagesArg) {
      this.pages = pagesArg;
    }
  }

  public render(): TemplateResult {
    return html`
      <style>
        :host {
          font-family: 'Roboto', sans-serif;
          background: #fcfcfc;
          display: block;
          box-sizing: border-box;
        }
        :host([hidden]) {
          display: none;
        }
      </style>
      <wcc-sidebar
        .dashboardRef=${this}
        .selectedItem=${this.selectedItem}
        @selectedType=${(eventArg) => {
          this.selectedType = eventArg.detail;
        }}
        @selectedItemName=${(eventArg) => {
          this.selectedItemName = eventArg.detail;
        }}
        @selectedItem=${(eventArg) => {
          this.selectedItem = eventArg.detail;
        }}
      ></wcc-sidebar>
      <wcc-properties
        .dashboardRef=${this}
        .warning="${this.warning}"
        .selectedItem=${this.selectedItem}
        .selectedViewport=${this.selectedViewport}
        .selectedTheme=${this.selectedTheme}
        @selectedViewport=${(eventArg) => {
          this.selectedViewport = eventArg.detail;
          this.performUpdate();
        }}
        @selectedTheme=${(eventArg) => {
          this.selectedTheme = eventArg.detail;
        }}
      ></wcc-properties>
      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
        ${(() => {
          if (this.selectedType === 'page' && this.selectedItem) {
            if (typeof this.selectedItem === 'function') {
              return this.selectedItem();
            } else {
              console.error('The selected item looks strange:');
              console.log(this.selectedItem);
            }
          } else if (this.selectedType === 'element' && this.selectedItem) {
            // console.log(this.selectedItem);
            const anonItem: any = this.selectedItem;
            if (!anonItem.demo) {
              this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
              return;
            }
            if (!(typeof anonItem.demo === 'function')) {
              this.setWarning(
                `component ${anonItem.name} has demo property, but it is not of type function`
              );
              return;
            }
            this.setWarning(null);
            return html`${anonItem.demo()}`;
          }
        })()}
      </wcc-frame>
    `;
  }

  public setWarning(warningTextArg: string) {
    if (this.warning !== warningTextArg) {
      console.log(warningTextArg);
      this.warning = warningTextArg;
      setTimeout(() => {
        super.performUpdate();
      }, 0);
    }
  }

  public async firstUpdated() {
    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
    this.domtools.router.on(
      '/wcctools-route/:itemType/:itemName/:viewport/:theme',
      async (routeInfo) => {
        this.selectedType = routeInfo.params.itemType as TElementType;
        this.selectedItemName = routeInfo.params.itemName;
        this.selectedViewport = routeInfo.params.viewport as TViewport;
        this.selectedTheme = routeInfo.params.theme as TTheme;
        if (routeInfo.params.itemType === 'element') {
          this.selectedItem = this.elements[routeInfo.params.itemName];
        } else if (routeInfo.params.itemType === 'page') {
          this.selectedItem = this.pages[routeInfo.params.itemName];
        }
        const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
        domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
        this.selectedTheme === 'bright'
          ? domtoolsInstance.themeManager.goBright()
          : domtoolsInstance.themeManager.goDark();
      }
    );
  }

  private updating = false;
  public async updated() {
    if (this.updating) {
      return;
    }
    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
    await this.domtools.router._handleRouteState();
    this.updating = true;
    const storeElement = this.selectedItem;
    setTimeout(async () => {
      this.selectedItem = null;
      setTimeout(async () => {
        this.selectedItem = storeElement;
        setTimeout(() => {
          this.updating = false;
        }, 0);
      });
    }, 0);
  }

  public buildUrl() {
    this.domtools.router.pushUrl(
      `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`
    );
  }
}