1.0.33

package.json

@@ -1,29 +1,32 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.19",
+  "version": "1.0.33",
   "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",
+    "test": "(npm run build)",
-    "build": "tsbuild custom ts_web --web",
+    "build": "(tsbuild custom ts_web --web && tsbundle element)",
     "watch": "tswatch element"
   },
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@gitzone/tsrun": "^1.1.17",
+    "@designestate/dees-domtools": "^1.0.30",
-    "@pushrocks/smartexpress": "^3.0.10",
+    "@gitzone/tsrun": "^1.2.12",
+    "@pushrocks/smartdelay": "^2.0.9",
+    "@pushrocks/smartexpress": "^3.0.73",
     "lit-element": "^2.0.0-rc.5",
     "lit-html": "^1.0.0-rc.2",
-    "typescript": "^3.2.2"
+    "typescript": "^3.9.5"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.8",
+    "@gitzone/tsbuild": "^2.1.24",
-    "@gitzone/tswatch": "^1.0.30",
+    "@gitzone/tsbundle": "^1.0.69",
-    "@pushrocks/projectinfo": "^4.0.2",
+    "@gitzone/tswatch": "^1.0.46",
-    "tslint": "^5.11.0",
+    "@pushrocks/projectinfo": "^4.0.5",
+    "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"
   ]
 }

readme.md

@@ -18,6 +18,10 @@ wcc tools for creating element catalogues
 
 ## Usage
 
+## Contribution
+
+We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
+
 
 ## Contribution
 

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,22 +12,29 @@ 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;
+  public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
 
   @property()
-  public selectedViewport: string = 'desktop';
+  public pages: { [key: string]: TemplateResult } = {};
 
   @property()
-  public pages: TemplateResult[] = [];
+  public elements: { [key: string]: LitElement } = {};
 
   @property()
-  public elements: LitElement[] = [];
+  public warning: string = null;
 
-  constructor() {
+  constructor(elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) {
     super();
+    if (elementsArg) {
+      this.elements = elementsArg;
+    }
+
+    if (pagesArg) {
+      this.pages = pagesArg;
+    }
   }
 
   public render(): TemplateResult {
@@ -45,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) {
@@ -53,28 +62,49 @@ export class WccDashboard extends LitElement {
           } else if (this.selectedItem) {
             console.log(this.selectedItem);
             const anonItem: any = this.selectedItem;
-            if (anonItem.demo) {
+            if (!anonItem.demo) {
-              return html`${anonItem.demo}`;
+              this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
-            } else {
+              return;
-              alert(`component does not expose a demo property.`);
             }
+            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() {
+  private currentlyUpdating: boolean = false;
-    console.log('updateSlot');
+  public async updateSlot() {
-    const oldSelectedItem = this.selectedItem;
+    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);
     }
-
+  }
-
 }

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>`;
+  public static demo = () => html`<wcc-defaultelement></wcc-defaultelement>`;
-
-  @property()
-  public footerText = `Lossless GmbH - 2018`;
 
   constructor() {
     super();

ts_web/elements/wcc-frame.ts

@@ -1,11 +1,6 @@
 import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
 
-const breakpoints = {
+import * as domtools from '@designestate/dees-domtools';
-  desktop: 1240,
-  tablet: 700,
-  phablet: 500,
-  phone: 340,
-};
 
 @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'

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} /
+                      ${key} / ${classProperties.get(key).type.name}
-                      <pre>
-${(() => {
-                          const result = this.selectedInstance
-                            ? JSON.stringify(this.selectedInstance[key], null, 2)
-                            : null;
-                          return result;
-                        })()}</pre
-                      >
                     </div>
                   `
                 );
@@ -167,6 +171,9 @@ ${(() => {
         </div>
         <div class="docs">Docs</div>
       </div>
+      ${this.warning ? html`<div class="warning">
+        ${this.warning}
+      </div>` : null}
     `;
   }
 

ts_web/elements/wcc-sidebar.ts

@@ -2,11 +2,14 @@ import { LitElement, property, html, customElement, TemplateResult } from 'lit-e
 
 @customElement('wcc-sidebar')
 export class WccSidebar extends LitElement {
-  @property()
+  @property({type: Array})
-  public pages: { [key: string]: TemplateResult };
+  public websites: string[] = [];
 
   @property()
-  public elements: { [key: string]: LitElement };
+  public pages: { [key: string]: TemplateResult } = {};
+
+  @property()
+  public elements: { [key: string]: LitElement } = {};
 
   @property({ attribute: false })
   public selectedItem: LitElement | TemplateResult;
@@ -92,9 +95,9 @@ export class WccSidebar extends LitElement {
       </div>
       <div class="menu">
         <h3>Live Websites</h3>
-        <div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">lossless.com</div></div>
+        ${this.websites.map(website => {
-        <div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">central.eu</div></div>
+          return html`<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">${website}</div></div>`;
-        <div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">coffee.link</div></div>
+        })}
         <h3>Pages</h3>
         ${(() => {
           const pages = Object.keys(this.pages);

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

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