1.0.35

package.json

@@ -1,28 +1,31 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.23",
+  "version": "1.0.35",
   "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.38",
-    "@pushrocks/smartexpress": "^3.0.10",
+    "@gitzone/tsrun": "^1.2.12",
+    "@pushrocks/smartdelay": "^2.0.10",
+    "@pushrocks/smartexpress": "^3.0.73",
     "lit-element": "^2.0.0-rc.5",
     "lit-html": "^1.0.0-rc.2",
-    "typescript": "^3.9.3"
+    "typescript": "^3.9.6"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.24",
-    "@gitzone/tswatch": "^1.0.46",
+    "@gitzone/tsbundle": "^1.0.72",
-    "@pushrocks/projectinfo": "^4.0.2",
+    "@gitzone/tswatch": "^1.0.50",
+    "@pushrocks/projectinfo": "^4.0.5",
     "tslint": "^6.1.2",
     "tslint-config-prettier": "^1.17.0"
   },
@@ -39,6 +42,6 @@
     "readme.md"
   ],
   "browserslist": [
-    "last 2 Chrome versions"
+    "last 1 Chrome versions"
   ]
 }

readme.md

@@ -8,13 +8,20 @@ wcc tools for creating element catalogues
 * [docs (typedoc)](https://designestate.gitlab.io/dees-wcctools/)
 
 ## Status for master
-[![pipeline status](https://gitlab.com/designestate/dees-wcctools/badges/master/pipeline.svg)](https://gitlab.com/designestate/dees-wcctools/commits/master)
+
-[![coverage report](https://gitlab.com/designestate/dees-wcctools/badges/master/coverage.svg)](https://gitlab.com/designestate/dees-wcctools/commits/master)
+Status Category | Status Badge
-[![npm downloads per month](https://img.shields.io/npm/dm/@designestate/dees-wcctools.svg)](https://www.npmjs.com/package/@designestate/dees-wcctools)
+-- | --
-[![Known Vulnerabilities](https://snyk.io/test/npm/@designestate/dees-wcctools/badge.svg)](https://snyk.io/test/npm/@designestate/dees-wcctools)
+GitLab Pipelines | [![pipeline status](https://gitlab.com/designestate/dees-wcctools/badges/master/pipeline.svg)](https://lossless.cloud)
-[![TypeScript](https://img.shields.io/badge/TypeScript->=%203.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
+GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/designestate/dees-wcctools/badges/master/coverage.svg)](https://lossless.cloud)
-[![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
+npm | [![npm downloads per month](https://badgen.net/npm/dy/@designestate/dees-wcctools)](https://lossless.cloud)
-[![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-ff69b4.svg)](https://prettier.io/)
+Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/designestate/dees-wcctools)](https://lossless.cloud)
+TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
+node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
+Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
+PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/dees-wcctools)](https://lossless.cloud)
+PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-wcctools)](https://lossless.cloud)
+BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-wcctools)](https://lossless.cloud)
+Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)
 
 ## Usage
 
@@ -22,7 +29,6 @@ wcc tools for creating element catalogues
 
 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
 
 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). :)

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
@@ -9,14 +11,13 @@ import './wcc-properties';
 
 @customElement('wcc-dashboard')
 export class WccDashboard extends LitElement {
-  @property()
+  public domtools: plugins.deesDomtools.DomTools;
-  public selectedItem: TemplateResult | LitElement = WccDefaultElement as any;
 
   @property()
-  public selectedInstance;
+  public selectedItem: TemplateResult | LitElement;
 
   @property()
-  public selectedViewport: string = 'desktop';
+  public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
 
   @property()
   public pages: { [key: string]: TemplateResult } = {};
@@ -36,6 +37,19 @@ export class WccDashboard extends LitElement {
     if (pagesArg) {
       this.pages = pagesArg;
     }
+    this.init();
+  }
+
+  public async init() {
+    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
+    this.domtools.router.on('/elements/:elementName', async routeInfo => {
+      this.selectedItem = this.elements[routeInfo.params.elementName];
+    });
+
+    this.domtools.router.on('/pages/:pageName', async routeInfo => {
+      this.selectedItem = this.pages[routeInfo.params.pageName];
+    });
+    this.domtools.router._handleRouteState();
   }
 
   public render(): TemplateResult {
@@ -52,10 +66,10 @@ export class WccDashboard extends LitElement {
           display: none;
         }
       </style>
-      <wcc-sidebar .pages=${this.pages} .elements=${this.elements} @selectedItem=${eventArg => {
+      <wcc-sidebar .dashboardRef=${this} @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-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) {
@@ -74,21 +88,29 @@ export class WccDashboard extends LitElement {
             this.setWarning(null);
             return html`${anonItem.demo()}`;
           } else {
-            this.selectedItem = WccDefaultElement as any;
+            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;
-    setTimeout(() => {
+    console.log('updateSlot');
-      this.selectedItem = oldSelectedItem;
+    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-    }, 0);
+    this.domtools.setVirtualViewport(this.selectedViewport);
+    // await super.performUpdate();
+    this.selectedItem = localSelectedItem;
+    await super.performUpdate();
+    this.currentlyUpdating = false;
   }
 
   public setWarning(warningTextArg: string) {

ts_web/elements/wcc-defaultelement.ts

@@ -5,9 +5,6 @@ import { TemplateResult } from 'lit-html';
 export class WccDefaultElement extends LitElement {
   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

@@ -13,9 +13,6 @@ export class WccProperties extends LitElement {
   @property()
   public selectedItem: TemplateResult | LitElement;
 
-  @property()
-  public selectedInstance;
-
   @property()
   public selectedViewport = 'native';
 
@@ -126,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>
                   `
                 );

ts_web/elements/wcc-sidebar.ts

@@ -1,19 +1,17 @@
 import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import { WccDashboard } from './wcc-dashboard';
 
 @customElement('wcc-sidebar')
 export class WccSidebar extends LitElement {
   @property({type: Array})
   public websites: string[] = [];
 
-  @property()
-  public pages: { [key: string]: TemplateResult } = {};
-
-  @property()
-  public elements: { [key: string]: LitElement } = {};
-
   @property({ attribute: false })
   public selectedItem: LitElement | TemplateResult;
 
+  @property()
+  public dashboardRef: WccDashboard;
+
   public render(): TemplateResult {
     return html`
       <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
@@ -100,14 +98,15 @@ export class WccSidebar extends LitElement {
         })}
         <h3>Pages</h3>
         ${(() => {
-          const pages = Object.keys(this.pages);
+          const pages = Object.keys(this.dashboardRef.pages);
           return pages.map(pageName => {
-            const item = this.pages[pageName];
+            const item = this.dashboardRef.pages[pageName];
             return html`
               <div
                 class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
                 @click=${() => {
                   this.selectItem(item);
+                  this.dashboardRef.domtools.router.pushUrl(`/pages/${pageName}`);
                 }}
               >
                 <i class="material-icons">insert_drive_file</i>
@@ -118,14 +117,15 @@ export class WccSidebar extends LitElement {
         })()}
         <h3>Elements</h3>
         ${(() => {
-          const elements = Object.keys(this.elements);
+          const elements = Object.keys(this.dashboardRef.elements);
           return elements.map(elementName => {
-            const item = this.elements[elementName];
+            const item = this.dashboardRef.elements[elementName];
             return html`
               <div
                 class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
                 @click=${() => {
                   this.selectItem(item);
+                  this.dashboardRef.domtools.router.pushUrl(`/elements/${elementName}`);
                 }}
               >
                 <i class="material-icons">featured_video</i>

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