Factors out updated handlers to functions and normalizes names of eve…

…nt handlers (#3)
petitatelier · Mar 6, 2019 · 645755f · 645755f
1 parent 9df630e
commit 645755f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 23 deletions.
diff --git a/packages/dia-show/dia-display-selector.js b/packages/dia-show/dia-display-selector.js
@@ -32,7 +32,7 @@ export class DiaDisplaySelector extends LitElement {
         Array.from( this.displayList.values())
           .map(( display) =>
             html`<span id="${display}" class="item"
-                       @click=${this.selected}>${display}</span>`)
+                       @click=${this._onSelected}>${display}</span>`)
       }</div>`;
   }
 
@@ -41,7 +41,7 @@ export class DiaDisplaySelector extends LitElement {
     this.displayList = new Set();
   }
 
-  selected( e) {
+  _onSelected( e) {
     const selectedDisplay = e.target.id;
     this.dispatchEvent(
       new CustomEvent( "display-selected", {

diff --git a/packages/dia-show/dia-po.js b/packages/dia-show/dia-po.js
@@ -56,20 +56,29 @@ export class DiaPo extends LitElement {
 
   updated( changedProperties) {
     console.log( `dia-po[${this.parentSlide}:${this.display}] › updated()`, changedProperties);
-    if( changedProperties.has( "activeSlide") || changedProperties.has( "activeDisplay")) {
-      this.hidden = ( typeof this.activeDisplay !== "undefined"
-                      && typeof this.display !== "undefined"
-                      && this.activeDisplay !== this.display)
-                  ||( typeof this.activeSlide !== "undefined"
-                      && typeof this.parentSlide !== "undefined"
-                      && this.activeSlide !== this.parentSlide);
+    if( changedProperties.has( "activeSlide")
+        || changedProperties.has( "activeDisplay")) {
+      this._updatedActiveSlideOrDisplay();
     }
     if( changedProperties.has( "hidden")) {
-      this.querySelectorAll( "dia-livecode")
-        .forEach(( element) => element.hidden = this.hidden);
+      this._updatedHidden();
     }
   }
 
+  _updatedActiveSlideOrDisplay() {
+    this.hidden = (typeof this.activeDisplay !== "undefined"
+      && typeof this.display !== "undefined"
+      && this.activeDisplay !== this.display)
+      || (typeof this.activeSlide !== "undefined"
+        && typeof this.parentSlide !== "undefined"
+        && this.activeSlide !== this.parentSlide);
+  }
+
+  _updatedHidden() {
+    this.querySelectorAll( "dia-livecode")
+      .forEach(( element) => element.hidden = this.hidden);
+  }
+
 }
 
 // Register the element with the browser

diff --git a/packages/dia-show/dia-show.js b/packages/dia-show/dia-show.js
@@ -42,17 +42,17 @@ export class DiaShow extends LitElement {
 
   updated( changedProperties) {
     if( changedProperties.has( "slide")) {
-      this._switchActiveSlide();
+      this._updatedActiveSlide();
     }
     if( changedProperties.has( "display")) {
-      this._switchActiveDisplay();
+      this._updatedActiveDisplay();
     }
   }
 
   // Propagate the active slide id to the ‹dia-slide› child elements,
   // which will in turn hide/reveal themselves, and propagate the id
   // to their child ‹dia-po› elements
-  _switchActiveSlide() {
+  _updatedActiveSlide() {
     const activeSlideId = this.slide != null ? this.slide : undefined;
     console.log( `dia-show › Switch to slide: ${activeSlideId}`);
     this.querySelectorAll( "dia-slide")
@@ -62,7 +62,7 @@ export class DiaShow extends LitElement {
   // Propagate the active display id to the ‹dia-slide› child elements,
   // which will in turn propagate the id to their child ‹dia-po› elements,
   // and the later will hide/reveal themselves
-  _switchActiveDisplay() {
+  _updatedActiveDisplay() {
     const activeDisplayId = this.display != null ? this.display : undefined;
     console.log( `dia-show › Switch to display: ${activeDisplayId}`);
     this.querySelectorAll( "dia-slide")

diff --git a/packages/dia-show/dia-slide.js b/packages/dia-show/dia-slide.js
@@ -50,21 +50,34 @@ export class DiaSlide extends LitElement {
   updated( changedProperties) {
     console.log( `dia-slide[${this.id}] › updated()`, changedProperties);
     if( changedProperties.has( "activeSlide")) {
-      this.querySelectorAll( "dia-po")
-        .forEach(( element) => element.activeSlide = this.activeSlide);
-      this.hidden = (typeof this.activeSlide !== "undefined"
-                    && this.activeSlide !== this.id);
+      this._updatedActiveSlide();
     }
     if( changedProperties.has( "activeDisplay")) {
-      this.querySelectorAll( "dia-po")
-        .forEach(( element) => element.activeDisplay = this.activeDisplay);
+      this._updatedActiveDisplay();
     }
     if( changedProperties.has( "id")) {
-      this.querySelectorAll( "dia-po")
-        .forEach(( element) => element.parentSlide = this.id);
+      this._updatedId();
     }
   }
 
+  _updatedActiveSlide() {
+    this.querySelectorAll( "dia-po")
+      .forEach(( element) => element.activeSlide = this.activeSlide);
+
+    this.hidden = (typeof this.activeSlide !== "undefined"
+                  && this.activeSlide !== this.id);
+  }
+
+  _updatedActiveDisplay() {
+    this.querySelectorAll( "dia-po")
+      .forEach(( element) => element.activeDisplay = this.activeDisplay);
+  }
+
+  _updatedId() {
+    this.querySelectorAll( "dia-po")
+      .forEach(( element) => element.parentSlide = this.id);
+  }
+
 }
 
 // Register the element with the browser