@design.estate/dees-wcctools 1.0.77

package/ts_web/elements/wcc-properties.ts

@@ -0,0 +1,393 @@
+import { DeesElement, property, html, customElement, type TemplateResult, state } from '@design.estate/dees-element';
+import { WccDashboard } from './wcc-dashboard.js';
+
+export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
+
+export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
+export type TTheme = 'bright' | 'dark';
+
+let environment: TEnvironment = 'native';
+
+export const setEnvironment = (envArg) => {
+  environment = envArg;
+};
+
+@customElement('wcc-properties')
+export class WccProperties extends DeesElement {
+  @property({
+    type: WccDashboard
+  })
+  public dashboardRef: WccDashboard;
+
+  @property()
+  public selectedItem: (() => TemplateResult) | DeesElement;
+
+  @property()
+  public selectedViewport: TEnvironment = 'native';
+
+  @property()
+  public selectedTheme: TTheme = 'dark';
+
+  @property()
+  public warning: string = null;
+
+  @state()
+  propertyContent: TemplateResult[] = [];
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          font-family: 'Roboto', sans-serif;
+          box-sizing: border-box;
+          position: absolute;
+          left: 200px;
+          height: 100px;
+          bottom: 0px;
+          right: 0px;
+          overflow: hidden;
+          background: #111;
+          color: #fff;
+        }
+        .grid {
+          display: grid;
+          grid-template-columns: auto 150px 300px 70px;
+        }
+        .properties {
+          border-right: 1px solid #999;
+          height: 100px;
+          overflow-y: auto;
+          display: grid;
+          grid-template-columns: 33% 33% 33%;
+        }
+
+        .material-symbols-outlined {
+          font-family: 'Material Symbols Outlined';
+          font-weight: normal;
+          font-style: normal;
+          font-size: 24px;  /* Preferred icon size */
+          display: inline-block;
+          line-height: 1;
+          text-transform: none;
+          letter-spacing: normal;
+          word-wrap: normal;
+          white-space: nowrap;
+          direction: ltr;
+          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
+        }
+
+        .properties .property {
+          padding: 5px;
+          background: #444;
+          border: 1px solid #000;
+        }
+
+        .properties input,
+        .properties select {
+          display: block;
+          width: 100%;
+          background: #333;
+          border: none;
+          color: #fff;
+        }
+
+        .viewportSelector,
+        .themeSelector {
+          user-select: none;
+          border-right: 1px solid #999;
+        }
+        .selectorButtons2 {
+          display: grid;
+          grid-template-columns: 50% 50%;
+        }
+        .selectorButtons4 {
+          display: grid;
+          grid-template-columns: 25% 25% 25% 25%;
+        }
+        .button {
+          padding: 10px;
+          text-align: center;
+          border: 1px solid #000;
+          transition: all 0.2s;
+        }
+        .button:hover {
+          cursor: pointer;
+          color: #333;
+          background: #fff;
+        }
+
+        .button.selected {
+          background: #455a64;
+        }
+
+        .button.selected:hover {
+          cursor: pointer;
+          color: #ffffff;
+          background: #455a64;
+        }
+
+        .panelheading {
+          padding: 5px;
+          font-weight: bold;
+          background: #444;
+          border: 1px solid #000;
+        }
+        .docs {
+          text-align: center;
+          line-height: 100px;
+          text-transform: uppercase;
+        }
+
+        .docs:hover {
+          cursor: pointer;
+          color: #333;
+          background: #fff;
+        }
+
+        .warning {
+          position: absolute;
+          background: #222;
+          color: #CCC;
+          top: 0px;
+          bottom: 0px;
+          left: 0px;
+          right: 520px;
+          text-align: center;
+          padding: 35px;
+          font-size: 25px;
+        }
+      </style>
+      <div class="grid">
+        <div class="properties">
+          <div class="panelheading">Properties</div>
+          ${this.propertyContent}
+        </div>
+        <div class="themeSelector">
+          <div class="panelheading">Theme</div>
+          <div class="selectorButtons2">
+            <div
+              class="button ${this.selectedTheme === 'dark' ? 'selected' : null}"
+              @click=${() => {
+                this.selectTheme('dark');
+              }}
+            >
+              Dark<br /><i class="material-symbols-outlined">brightness_3</i>
+            </div>
+            <div
+              class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
+              @click=${() => {
+                this.selectTheme('bright');
+              }}
+            >
+              Bright<br /><i class="material-symbols-outlined">flare</i>
+            </div>
+          </div>
+        </div>
+        <div class="viewportSelector">
+          <div class="panelheading">Viewport</div>
+          <div class="selectorButtons4">
+            <div
+              class="button ${this.selectedViewport === 'phone' ? 'selected' : null}"
+              @click=${() => {
+                this.selectViewport('phone');
+              }}
+            >
+              Phone<br /><i class="material-symbols-outlined">smartphone</i>
+            </div>
+            <div
+              class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
+              @click=${() => {
+                this.selectViewport('phablet');
+              }}
+            >
+              Phablet<br /><i class="material-symbols-outlined">smartphone</i>
+            </div>
+            <div
+              class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
+              @click=${() => {
+                this.selectViewport('tablet');
+              }}
+            >
+              Tablet<br /><i class="material-symbols-outlined">tablet</i>
+            </div>
+            <div
+              class="button ${this.selectedViewport === 'desktop' ||
+              this.selectedViewport === 'native'
+                ? 'selected'
+                : null}"
+              @click=${() => {
+                this.selectViewport('native');
+              }}
+            >
+              Desktop<br /><i class="material-symbols-outlined">desktop_windows</i>
+            </div>
+          </div>
+        </div>
+        <div class="docs">Docs</div>
+      </div>
+      ${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
+    `;
+  }
+
+  public async createProperties() {
+    console.log('creating properties for:');
+    console.log(this.selectedItem);
+    const isEnumeration = (propertyArg): boolean => {
+      const keys = Object.keys(propertyArg.type);
+      const values = [];
+      for (const key of keys) {
+        let value = propertyArg.type[key];
+        if (typeof value === 'number') {
+          value = value.toString();
+        }
+        values.push(value);
+      }
+      for (const key of keys) {
+        if (values.indexOf(key) < 0) {
+          return false;
+        }
+      }
+      return true;
+    };
+    const getEnumValues = (propertyArg): any[] => {
+      console.log(JSON.stringify(propertyArg));
+      const enumValues: any[] = [];
+      Object.keys(propertyArg.type).forEach((valueArg: string) => {
+        enumValues.push(valueArg);
+      });
+      return enumValues;
+    };
+    const determinePropertyType = async (propertyArg: any): Promise<TPropertyType> => {
+      const typeName: any | undefined = propertyArg.type.name;
+      if (typeName) {
+        return typeName;
+      } else {
+        return Array.isArray(propertyArg)
+          ? 'Array'
+          : isEnumeration(propertyArg)
+          ? 'Enum'
+          : 'Object';
+      }
+    };
+    if (this.selectedItem && (this.selectedItem as any).demo) {
+      console.log(`Got Dees-Element for property evaluation.`);
+      const anonItem: any = this.selectedItem;
+      if (!anonItem) {
+        this.warning = 'no element selected';
+        return;
+      }
+      console.log(anonItem.elementProperties);
+      const wccFrame = await this.dashboardRef.wccFrame;
+      let firstFoundInstantiatedElement: HTMLElement;
+      for (const element of Array.from((await wccFrame.getViewportElement()).children)) {
+        if (element instanceof (this.selectedItem as any)) {
+          firstFoundInstantiatedElement = element as HTMLElement;
+          break;
+        }
+      }
+      if (!firstFoundInstantiatedElement) {
+        this.warning = `no first instantiated element found for >>${anonItem.name}<<`;
+        return;
+      }
+      const classProperties: Map<string, any> = anonItem.elementProperties;
+      if (!classProperties) {
+        this.warning = `selected element >>${anonItem.name}<< does not expose element properties`;
+        return;
+      }
+      this.warning = null;
+      const propertyArray: TemplateResult[] = [];
+      for (const key of classProperties.keys()) {
+        if (key === 'goBright' || key === 'domtools') {
+          continue;
+        }
+        const property = classProperties.get(key);
+        const propertyTypeString = await determinePropertyType(property);
+        propertyArray.push(
+          html`
+            <div class="property">
+              ${key} / ${propertyTypeString}<br />
+              ${(() => {
+                switch (propertyTypeString) {
+                  case 'Boolean':
+                    return html`<input
+                      type="checkbox"
+                      ?checked=${firstFoundInstantiatedElement[key]}
+                      @input="${(eventArg: any) => {
+                        firstFoundInstantiatedElement[key] = eventArg.target.checked;
+                      }}"
+                    />`;
+                  case 'String':
+                    return html`<input
+                      type="text"
+                      value=${firstFoundInstantiatedElement[key]}
+                      @input="${(eventArg: any) => {
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
+                      }}"
+                    />`;
+                  case 'Number':
+                    return html`<input
+                      type="number"
+                      value=${firstFoundInstantiatedElement[key]}
+                      @input="${(eventArg: any) => {
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
+                      }}"
+                    />`;
+                  case 'Enum':
+                    const enumValues: any[] = getEnumValues(property);
+                    return html`<select
+                      @change="${(eventArg: any) => {
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
+                      }}"
+                    >
+                      ${enumValues.map((valueArg) => {
+                        return html`
+                          <option
+                            ?selected=${valueArg === firstFoundInstantiatedElement[key] ? true : false}
+                            name="${valueArg}"
+                          >
+                            ${valueArg}
+                          </option>
+                        `;
+                      })}
+                    </select>`;
+                }
+              })()}
+            </div>
+          `
+        );
+      }
+      this.propertyContent = propertyArray;
+    } else {
+      console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`);
+      this.warning = `You selected a page.`;
+      return null;
+    }
+  }
+
+  public selectTheme(themeArg: TTheme) {
+    this.selectedTheme = themeArg;
+    this.dispatchEvent(
+      new CustomEvent('selectedTheme', {
+        detail: themeArg,
+      })
+    );
+    console.log(this.dashboardRef.selectedType);
+    this.dashboardRef.buildUrl();
+  }
+
+  public async scheduleUpdate() {
+    await this.createProperties();
+    super.scheduleUpdate();
+  }
+
+  public selectViewport(viewport: TEnvironment) {
+    this.selectedViewport = viewport;
+    setEnvironment(viewport);
+    this.dispatchEvent(
+      new CustomEvent('selectedViewport', {
+        detail: viewport,
+      })
+    );
+    this.dashboardRef.buildUrl();
+  }
+}

package/ts_web/elements/wcc-sidebar.ts

@@ -0,0 +1,192 @@
+import * as plugins from '../wcctools.plugins.js';
+import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
+import { WccDashboard } from './wcc-dashboard.js';
+
+export type TElementType = 'element' | 'page';
+
+@customElement('wcc-sidebar')
+export class WccSidebar extends DeesElement {
+  @property({type: Array})
+  public websites: string[] = [];
+
+  @property({ attribute: false })
+  public selectedItem: DeesElement | (() => TemplateResult);
+
+  @property({ attribute: false })
+  public selectedType: TElementType;
+
+  @property()
+  public dashboardRef: WccDashboard;
+
+  public render(): TemplateResult {
+    return html`
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+      <style>
+        :host {
+          display: block;
+          border-right: 1px solid #999;
+          font-family: 'Roboto', sans-serif;
+          box-sizing: border-box;
+          position: absolute;
+          left: 0px;
+          width: 200px;
+          top: 0px;
+          bottom: 0px;
+          overflow-y: scroll;
+          overflow-x: hidden;
+          background: #222;
+          color: #fff;
+          padding: 5px;
+        }
+
+        .material-symbols-outlined {
+          font-family: 'Material Symbols Outlined';
+          font-weight: normal;
+          font-style: normal;
+          font-size: 24px;  /* Preferred icon size */
+          display: inline-block;
+          line-height: 1;
+          text-transform: none;
+          letter-spacing: normal;
+          word-wrap: normal;
+          white-space: nowrap;
+          direction: ltr;
+          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
+        }
+
+        .heading {
+          font-size: 24px;
+          text-align: center;        
+          margin: 20px 5px 5px 5px;
+        }
+
+        .heading a {
+          text-decoration: none;
+          color: #fff;
+        }
+
+        .subheading {
+          text-align: center;
+        }
+        .selectOption {
+          position: relative;
+          line-height: 24px;
+          padding: 5px;
+          transition: all 0.2s;
+          display: grid;
+          grid-template-columns: 28px auto;
+        }
+        .selectOption:hover {
+          cursor: pointer;
+          padding: 5px;
+          color: #333;
+          background: #fff;
+        }
+
+        .selectOption.selected {
+          background: #455A64;;
+        }
+
+        .selectOption.selected:hover {
+          cursor: pointer;
+          color: #ffffff;
+          background: #455A64;
+        }
+
+        .selectOption .material-symbols-outlined {
+          color: #666;
+          display: block;
+          transition: all 0.2s;
+        }
+
+        .selectOption.selected .material-symbols-outlined {
+          color: #000;
+        }
+
+        .selectOption .text {
+          display: block;
+          word-wrap: break-word;
+          word-break: break-all;
+          max-width: 100%;
+        }
+
+        
+      </style>
+      <div class="heading">
+        <a href="https://gitlab.com/designestate/dees-wcctools" target="_blank">wcctools</a>
+      </div>
+      <div class="subheading">
+        by Lossless GmbH
+      </div>
+      <div class="menu">
+        <h3>Live Websites</h3>
+        ${this.websites.map(website => {
+          return html`<div class="selectOption"><i class="material-symbols-outlined">ondemand_video</i><div class="text">${website}</div></div>`;
+        })}
+        <h3>Pages</h3>
+        ${(() => {
+          const pages = Object.keys(this.dashboardRef.pages);
+          return pages.map(pageName => {
+            const item = this.dashboardRef.pages[pageName];
+            return html`
+              <div
+                class="selectOption ${this.selectedItem === item ? 'selected' : null}"
+                @click=${async () => {
+                  const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
+                  this.selectItem('page', pageName, item);
+                }}
+              >
+                <i class="material-symbols-outlined">insert_drive_file</i>
+                <div class="text">${pageName}</div>
+              </div>
+            `;
+          });
+        })()}
+        <h3>Elements</h3>
+        ${(() => {
+          const elements = Object.keys(this.dashboardRef.elements);
+          return elements.map(elementName => {
+            const item = this.dashboardRef.elements[elementName];
+            return html`
+              <div
+                class="selectOption ${this.selectedItem === item ? 'selected' : null}"
+                @click=${async () => {
+                  const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
+                  this.selectItem('element', elementName, item);
+                }}
+              >
+                <i class="material-symbols-outlined">featured_video</i>
+                <div class="text">${elementName}</div>
+              </div>
+            `;
+          });
+        })()}
+      </menu>
+    `;
+  }
+
+  public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | DeesElement) {
+    console.log('selected item');
+    console.log(itemNameArg);
+    console.log(itemArg);
+    this.selectedItem = itemArg;
+    this.selectedType = typeArg;
+    this.dispatchEvent(
+      new CustomEvent('selectedType', {
+        detail: typeArg
+      })
+    );
+    this.dispatchEvent(
+      new CustomEvent('selectedItemName', {
+        detail: itemNameArg
+      })
+    );
+    this.dispatchEvent(
+      new CustomEvent('selectedItem', {
+        detail: itemArg
+      })
+    );
+    
+    this.dashboardRef.buildUrl();
+  }
+}

package/ts_web/index.ts

@@ -0,0 +1,19 @@
+import { WccDashboard } from './elements/wcc-dashboard.js';
+import { LitElement, type TemplateResult } from 'lit';
+
+const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: () => TemplateResult }) => {
+  let hasRun = false;
+  const runWccToolsSetup = async () => {
+    if (document.readyState === 'complete' && !hasRun) {
+      hasRun = true;
+      const wccTools = new WccDashboard(elementsArg as any, pagesArg);
+      document.querySelector('body').append(wccTools);
+    }
+  };
+  document.addEventListener('readystatechange', runWccToolsSetup);
+  runWccToolsSetup();
+};
+
+export {
+  setupWccTools
+};

package/ts_web/wcctools.plugins.ts

@@ -0,0 +1,11 @@
+import * as smartdelay from '@push.rocks/smartdelay';
+
+export {
+  smartdelay
+};
+
+import * as deesDomtools from '@design.estate/dees-domtools';
+
+export {
+  deesDomtools
+};