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

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

import * as deesDomtools from '@designestate/dees-domtools';

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

// wcc tools
import './wcc-frame';
import './wcc-sidebar';
import './wcc-properties';

@customElement('wcc-dashboard')
export class WccDashboard extends LitElement {
  @property()
  public selectedItem: TemplateResult | LitElement = WccDefaultElement as any;

  @property()
  public selectedInstance;

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

  @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;
    }

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

  public render(): TemplateResult {
    return html`
      <style>
        @import url('https://fonts.googleapis.com/css?family=Roboto');
        :host {
          font-family: 'Roboto', sans-serif;
          background: #fcfcfc;
          display: block;
          box-sizing: border-box;
        }
        :host([hidden]) {
          display: none;
        }
      </style>
      <wcc-sidebar .pages=${this.pages} .elements=${this.elements} @selectedItem=${eventArg => {
        this.selectedItem = eventArg.detail;
      }}></wcc-sidebar>
      <wcc-properties .warning="${this.warning}" .selectedItem=${this.selectedItem} .selectedInstance=${this.selectedInstance} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
        ${(() => {
          if (this.selectedItem instanceof TemplateResult) {
            return this.selectedItem;
          } else if (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()}`;
          } else {
            this.selectedItem = WccDefaultElement as any;
          }
        })()}
      </wcc-frame>
      ${this.selectedViewport}
    `;
  }

  public async updateSlot() {
    console.log('updateSlot');
    const oldSelectedItem = this.selectedItem;
    this.selectedItem = null;
    const domtools = await deesDomtools.DomTools.setupDomTools();
    domtools.setVirtualViewport(this.selectedViewport);
    this.selectedItem = oldSelectedItem;
  }

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