1.0.31

fix(core): update
1.0.30
2020-06-01 15:56:33 +00:00 · 2020-06-01 15:56:32 +00:00 · 2020-06-01 15:07:13 +00:00 · 2020-06-01 15:07:13 +00:00 · 2020-06-01 13:22:55 +00:00 · 2020-06-01 13:22:54 +00:00
9 changed files with 858 additions and 135 deletions
--- a/html/index.html
+++ b/html/index.html
@ -21,6 +21,6 @@
    <script src="../ts_web/index.ts"></script>
  </head>
  <body>
-    <></>
+    <wcc-dashboard></wcc-dashboard>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,29 +1,32 @@
 {
  "name": "@designestate/dees-wcctools",
-  "version": "1.0.21",
+  "version": "1.0.31",
  "private": false,
  "description": "wcc tools for creating element catalogues",
  "main": "dist_ts_web/index.js",
  "typings": "dist_ts_web/index.d.ts",
  "scripts": {
-    "test": "npm run build",
-    "build": "tsbuild custom ts_web --web",
+    "test": "(npm run build)",
+    "build": "(tsbuild custom ts_web --web && tsbundle element)",
    "watch": "tswatch element"
  },
  "author": "Lossless GmbH",
  "license": "UNLICENSED",
  "dependencies": {
+    "@designestate/dees-domtools": "^1.0.26",
    "@gitzone/tsrun": "^1.1.17",
+    "@pushrocks/smartdelay": "^2.0.9",
    "@pushrocks/smartexpress": "^3.0.10",
    "lit-element": "^2.0.0-rc.5",
    "lit-html": "^1.0.0-rc.2",
-    "typescript": "^3.2.2"
+    "typescript": "^3.9.3"
  },
  "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.8",
-    "@gitzone/tswatch": "^1.0.30",
+    "@gitzone/tsbuild": "^2.1.24",
+    "@gitzone/tsbundle": "^1.0.69",
+    "@gitzone/tswatch": "^1.0.46",
    "@pushrocks/projectinfo": "^4.0.2",
-    "tslint": "^5.11.0",
+    "tslint": "^6.1.2",
    "tslint-config-prettier": "^1.17.0"
  },
  "files": [
@ -37,5 +40,8 @@
    "cli.js",
    "npmextra.json",
    "readme.md"
+  ],
+  "browserslist": [
+    "last 2 Chrome versions"
  ]
 }
--- a/ts_web/elements/wcc-dashboard.ts
+++ b/ts_web/elements/wcc-dashboard.ts
@ -1,5 +1,7 @@
 import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';

+import * as plugins from '../wcctools.plugins';
+
 import { WccDefaultElement } from './wcc-defaultelement';

 // wcc tools
@ -10,13 +12,10 @@ import './wcc-properties';
@customElement('wcc-dashboard')
 export class WccDashboard extends LitElement {
  @property()
-  public selectedItem: TemplateResult | LitElement = WccDefaultElement as any;
+  public selectedItem: TemplateResult | LitElement;

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

  @property()
  public pages: { [key: string]: TemplateResult } = {};
@ -24,6 +23,9 @@ export class WccDashboard extends LitElement {
  @property()
  public elements: { [key: string]: LitElement } = {};

+  @property()
+  public warning: string = null;
+
  constructor(elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) {
    super();
    if (elementsArg) {
@ -52,7 +54,7 @@ export class WccDashboard extends LitElement {
      <wcc-sidebar .pages=${this.pages} .elements=${this.elements} @selectedItem=${eventArg => {
        this.selectedItem = eventArg.detail;
      }}></wcc-sidebar>
-      <wcc-properties .selectedItem=${this.selectedItem} .selectedInstance=${this.selectedInstance} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
+      <wcc-properties .warning="${this.warning}" .selectedItem=${this.selectedItem} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
        ${(() => {
          if (this.selectedItem instanceof TemplateResult) {
@ -60,28 +62,49 @@ export class WccDashboard extends LitElement {
          } else if (this.selectedItem) {
            console.log(this.selectedItem);
            const anonItem: any = this.selectedItem;
-            if (anonItem.demo) {
-              return html`${anonItem.demo}`;
-            } else {
-              alert(`component does not expose a demo property.`);
+            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.updateSlot();
          }
        })()}
      </wcc-frame>
-      ${this.selectedViewport}
    `;
  }

-  public updateSlot() {
-    console.log('updateSlot');
-    const oldSelectedItem = this.selectedItem;
+  private currentlyUpdating: boolean = false;
+  public async updateSlot() {
+    if (this.currentlyUpdating) {
+      return;
+    }
+    this.currentlyUpdating = true;
+    !this.selectedItem ? this.selectedItem = WccDefaultElement as any : null;
+    const localSelectedItem = this.selectedItem;
    this.selectedItem = null;
+    console.log('updateSlot');
+    const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
+    domtools.setVirtualViewport(this.selectedViewport);
+    await super.performUpdate();
+    this.selectedItem = localSelectedItem;
+    await super.performUpdate();
+    this.currentlyUpdating = false;
+  }
+
+  public setWarning(warningTextArg: string) {
+    if (this.warning !== warningTextArg) {
+      console.log(warningTextArg);
+      this.warning = warningTextArg;
      setTimeout(() => {
-      this.selectedItem = oldSelectedItem;
+        super.performUpdate();
      }, 0);
    }
-
-
+  }
 }
--- a/ts_web/elements/wcc-defaultelement.ts
+++ b/ts_web/elements/wcc-defaultelement.ts
@ -3,10 +3,7 @@ import { TemplateResult } from 'lit-html';

@customElement('wcc-defaultelement')
 export class WccDefaultElement extends LitElement {
-  public static demo = html`<wcc-defaultelement></wcc-defaultelement>`;
-
-  @property()
-  public footerText = `Lossless GmbH - 2018`;
+  public static demo = () => html`<wcc-defaultelement></wcc-defaultelement>`;

  constructor() {
    super();
--- a/ts_web/elements/wcc-frame.ts
+++ b/ts_web/elements/wcc-frame.ts
@ -1,11 +1,6 @@
 import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';

-const breakpoints = {
-  desktop: 1240,
-  tablet: 700,
-  phablet: 500,
-  phone: 340,
-};
+import * as domtools from '@designestate/dees-domtools';

@customElement('wcc-frame')
 export class WccFrame extends LitElement {
@ -33,19 +28,26 @@ export class WccFrame extends LitElement {
                `;
            case 'tablet':
              return `
-                  padding: 0px ${(document.body.clientWidth - 200 - breakpoints.tablet) / 2}px;
+                  padding: 0px ${
+                    (document.body.clientWidth - 200 - domtools.breakpoints.tablet) / 2
+                  }px;
                `;
            case 'phablet':
              return `
-                  padding: 0px ${(document.body.clientWidth - 200 - breakpoints.phablet) / 2}px;
+                  padding: 0px ${
+                    (document.body.clientWidth - 200 - domtools.breakpoints.phablet) / 2
+                  }px;
                `;
            case 'phone':
              return `
-                  padding: 0px ${(document.body.clientWidth - 200 - breakpoints.phone) / 2}px;
+                  padding: 0px ${
+                    (document.body.clientWidth - 200 - domtools.breakpoints.phone) / 2
+                  }px;
                `;
          }
        })()}
        }
+        
        .viewport {
          position: relative;
          ${this.viewport !== 'desktop'
--- a/ts_web/elements/wcc-properties.ts
+++ b/ts_web/elements/wcc-properties.ts
@ -14,10 +14,10 @@ export class WccProperties extends LitElement {
  public selectedItem: TemplateResult | LitElement;

  @property()
-  public selectedInstance;
+  public selectedViewport = 'native';

  @property()
-  public selectedViewport = 'native';
+  public warning: string = null;

  public render(): TemplateResult {
    return html`
@ -98,6 +98,18 @@ export class WccProperties extends LitElement {
          color: #333;
          background: #fff;
        }
+
+        .warning {
+          position: absolute;
+          background: #800000;
+          top: 0px;
+          bottom: 0px;
+          left: 0px;
+          right: 0px;
+          text-align: center;
+          padding: 20px;
+          font-size: 25px;
+        }
      </style>
      <div class="grid">
        <div class="properties">
@ -111,15 +123,7 @@ export class WccProperties extends LitElement {
                returnArray.push(
                  html`
                    <div class="property">
-                      ${key} / ${classProperties.get(key).type.name} /
-                      <pre>
-${(() => {
-                          const result = this.selectedInstance
-                            ? JSON.stringify(this.selectedInstance[key], null, 2)
-                            : null;
-                          return result;
-                        })()}</pre
-                      >
+                      ${key} / ${classProperties.get(key).type.name}
                    </div>
                  `
                );
@ -167,6 +171,9 @@ ${(() => {
        </div>
        <div class="docs">Docs</div>
      </div>
+      ${this.warning ? html`<div class="warning">
+        ${this.warning}
+      </div>` : null}
    `;
  }

--- a/ts_web/index.ts
+++ b/ts_web/index.ts
@ -1,5 +1,19 @@
 import { WccDashboard } from './elements/wcc-dashboard';
+import { LitElement, TemplateResult } from 'lit-element';
+
+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 {
-  WccDashboard
+  setupWccTools
 };
--- a/ts_web/wcctools.plugins.ts
+++ b/ts_web/wcctools.plugins.ts
@ -0,0 +1,11 @@
+import * as smartdelay from '@pushrocks/smartdelay';
+
+export {
+  smartdelay
+};
+
+import * as deesDomtools from '@designestate/dees-domtools';
+
+export {
+  deesDomtools
+};
Author	SHA1	Message	Date
Phil Kunz	0665f85d49	1.0.31	2020-06-01 15:56:33 +00:00
Phil Kunz	c222a66ead	fix(core): update	2020-06-01 15:56:32 +00:00
Phil Kunz	8d628d3285	1.0.30	2020-06-01 15:07:13 +00:00
Phil Kunz	681de01143	fix(core): update	2020-06-01 15:07:13 +00:00
Phil Kunz	070d894ea6	1.0.29	2020-06-01 13:22:55 +00:00
Phil Kunz	6a6d782288	fix(core): update	2020-06-01 13:22:54 +00:00
Phil Kunz	ec1660cab5	1.0.28	2020-06-01 13:18:52 +00:00
Phil Kunz	5f182ba435	fix(core): update	2020-06-01 13:18:51 +00:00
Phil Kunz	f73df83768	1.0.27	2020-05-28 00:06:26 +00:00
Phil Kunz	0b09f3f61c	fix(core): update	2020-05-28 00:06:25 +00:00
Phil Kunz	d2e0a55a13	1.0.26	2020-05-27 22:49:51 +00:00
Phil Kunz	fb1fc7fa6b	fix(core): update	2020-05-27 22:49:50 +00:00
Phil Kunz	374a3c58c4	1.0.25	2020-05-27 22:34:06 +00:00
Phil Kunz	b36846737b	fix(core): update	2020-05-27 22:34:06 +00:00
Phil Kunz	b16c6948b2	1.0.24	2020-05-27 22:13:50 +00:00
Phil Kunz	2a51d7a7cd	fix(core): update	2020-05-27 22:13:50 +00:00
Phil Kunz	b12f35484d	1.0.23	2020-05-24 20:09:38 +00:00
Phil Kunz	7fe861f577	fix(core): update	2020-05-24 20:09:37 +00:00
Phil Kunz	ac999adfcb	1.0.22	2020-05-24 19:37:43 +00:00
Phil Kunz	fdd6e38e0c	fix(core): update	2020-05-24 19:37:43 +00:00