‹dia-show› propagates active slide/display to its children (#3)

petitatelier · Mar 5, 2019 · c1a74f1 · c1a74f1
1 parent 53d1f4f
commit c1a74f1
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 26 deletions.
diff --git a/packages/dia-show/dia-po.js b/packages/dia-show/dia-po.js
@@ -9,6 +9,9 @@ export class DiaPo extends LitElement {
   static get properties() {
     return {
       display: { type: String },
+      parentSlide: { type: String, attribute: false },
+      activeSlide: { type: String, attribute: false },
+      activeDisplay: { type: String, attribute: false },
       hidden: { type: Boolean, reflect: true }
     }
   }
@@ -23,10 +26,22 @@ export class DiaPo extends LitElement {
   constructor() {
     super();
     this.display = undefined;
+    this.parentSlide = undefined;
+    this.activeSlide = undefined;
+    this.activeDisplay = undefined;
     this.hidden = false;
   }
 
   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( "hidden")) {
       this.querySelectorAll( "dia-livecode")
         .forEach(( element) => element.hidden = this.hidden);

diff --git a/packages/dia-show/dia-show.js b/packages/dia-show/dia-show.js
@@ -39,37 +39,24 @@ export class DiaShow extends LitElement {
     }
   }
 
-  // If no slide is currently active, display all slides; otherwise,
-  // display only the active slide and hide all other slides
+  // 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() {
-    console.log( `New slide: ${this.slide}`);
     const activeSlideId = this.slide != null ? this.slide : undefined;
+    console.log( `dia-show › Switch to slide: ${activeSlideId}`);
     this.querySelectorAll( "dia-slide")
-      .forEach(( elt) => {
-        const slideId = elt.getAttribute( "id");
-        if( typeof activeSlideId === "undefined" || activeSlideId === slideId) {
-          elt.removeAttribute( "hidden");
-        } else {
-          elt.setAttribute( "hidden", "");
-        };
-      });
+      .forEach(( element) => element.activeSlide = activeSlideId);
   };
 
-  // If no display is currently active, display slides targetting any display;
-  // otherwise, display only diapositives targetting the active display
-  // and hide all other diapositives
+  // 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() {
     const activeDisplayId = this.display != null ? this.display : undefined;
-    console.log( `New display: ${this.display}, ${activeDisplayId}`);
-    this.querySelectorAll( "dia-po")
-      .forEach(( elt) => {
-        const displayId = elt.getAttribute( "display");
-        if( typeof activeDisplayId === "undefined" || activeDisplayId === displayId) {
-          elt.removeAttribute( "hidden");
-        } else {
-          elt.setAttribute( "hidden", "");
-        };
-      });
+    console.log( `dia-show › Switch to display: ${activeDisplayId}`);
+    this.querySelectorAll( "dia-slide")
+      .forEach(( element) => element.activeDisplay = activeDisplayId);
   }
 }
 

diff --git a/packages/dia-show/dia-slide.js b/packages/dia-show/dia-slide.js
@@ -9,6 +9,8 @@ export class DiaSlide extends LitElement {
   static get properties() {
     return {
       id: { type: String },
+      activeSlide: { type: String, attribute: false },
+      activeDisplay: { type: String, attribute: false },
       hidden: { type: Boolean, reflect: true }
     }
   }
@@ -20,10 +22,29 @@ export class DiaSlide extends LitElement {
     `;
   }
 
+  constructor() {
+    super();
+    this.id = undefined;
+    this.activeSlide = undefined;
+    this.activeDisplay = undefined;
+    this.hidden = false;
+  }
+
   updated( changedProperties) {
-    if( changedProperties.has( "hidden")) {
+    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);
+    }
+    if( changedProperties.has( "activeDisplay")) {
+      this.querySelectorAll( "dia-po")
+        .forEach(( element) => element.activeDisplay = this.activeDisplay);
+    }
+    if( changedProperties.has( "id")) {
       this.querySelectorAll( "dia-po")
-        .forEach(( element) => element.hidden = this.hidden);
+        .forEach(( element) => element.parentSlide = this.id);
     }
   }