1.0.37

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.34",
+  "version": "1.0.37",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.34",
+  "version": "1.0.37",
   "private": false,
   "description": "wcc tools for creating element catalogues",
   "main": "dist_ts_web/index.js",

ts_web/elements/wcc-dashboard.ts

@@ -37,18 +37,6 @@ 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];
-    });
   }
 
   public render(): TemplateResult {
@@ -65,7 +53,7 @@ export class WccDashboard extends LitElement {
           display: none;
         }
       </style>
-      <wcc-sidebar .dashboardRef=${this} @selectedItem=${eventArg => {
+      <wcc-sidebar .dashboardRef=${this} .selectedItem=${this.selectedItem} @selectedItem=${eventArg => {
         this.selectedItem = eventArg.detail;
       }}></wcc-sidebar>
       <wcc-properties .warning="${this.warning}" .selectedItem=${this.selectedItem} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
@@ -121,4 +109,16 @@ export class WccDashboard extends LitElement {
       }, 0);
     }
   }
+
+  public async firstUpdated() {
+    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();
+  }
 }

ts_web/elements/wcc-sidebar.ts

@@ -1,3 +1,4 @@
+import * as plugins from '../wcctools.plugins';
 import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
 import { WccDashboard } from './wcc-dashboard';
 
@@ -104,9 +105,10 @@ export class WccSidebar extends LitElement {
             return html`
               <div
                 class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
-                @click=${() => {
+                @click=${async () => {
+                  const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
                   this.selectItem(item);
-                  this.dashboardRef.domtools.router.pushUrl(`/pages/${pageName}`);
+                  domtools.router.pushUrl(`/pages/${pageName}`);
                 }}
               >
                 <i class="material-icons">insert_drive_file</i>
@@ -123,9 +125,10 @@ export class WccSidebar extends LitElement {
             return html`
               <div
                 class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
-                @click=${() => {
+                @click=${async () => {
+                  const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
                   this.selectItem(item);
-                  this.dashboardRef.domtools.router.pushUrl(`/elements/${elementName}`);
+                  domtools.router.pushUrl(`/elements/${elementName}`);
                 }}
               >
                 <i class="material-icons">featured_video</i>