Sets active slide and display (#3)

petitatelier · Mar 5, 2019 · fa62159 · fa62159
1 parent 33ba3f2
commit fa62159
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 17 deletions.
diff --git a/demos/slideshow.html b/demos/slideshow.html
@@ -16,24 +16,27 @@
   </header>
 
   <main>
-    <dia-show>
-      <dia-slide>
-        <dia-po></dia-po>
-        <dia-po></dia-po>
-        <dia-po></dia-po>
-        <dia-po></dia-po>
+    <dia-show slide="s01" display="proj01">
+      <dia-slide id="s01">
+        <dia-po display="proj01"></dia-po>
+        <dia-po display="tv01"></dia-po>
+        <dia-po display="tv02"></dia-po>
+        <dia-po display="pres01"></dia-po>
+        <dia-po display="pres02"></dia-po>
       </dia-slide>
-      <dia-slide>
-        <dia-po></dia-po>
-        <dia-po></dia-po>
-        <dia-po></dia-po>
-        <dia-po></dia-po>
+      <dia-slide id="s02">
+        <dia-po display="proj01"></dia-po>
+        <dia-po display="tv01"></dia-po>
+        <dia-po display="tv02"></dia-po>
+        <dia-po display="pres01"></dia-po>
+        <dia-po display="pres02"></dia-po>
       </dia-slide>
-      <dia-slide>
-        <dia-po></dia-po>
-        <dia-po></dia-po>
-        <dia-po></dia-po>
-        <dia-po></dia-po>
+      <dia-slide id="s03">
+        <dia-po display="proj01"></dia-po>
+        <dia-po display="tv01"></dia-po>
+        <dia-po display="tv02"></dia-po>
+        <dia-po display="pres01"></dia-po>
+        <dia-po display="pres02"></dia-po>
       </dia-slide>
     </dia-show>
   </main>

diff --git a/packages/slideshow/dia-show.js b/packages/slideshow/dia-show.js
@@ -6,13 +6,66 @@ export class DiaShow extends LitElement {
     return [ CommonStyles, DiaShowStyles ];
   };
 
+  static get properties() {
+    return {
+      // Active slide (varies when speaker asks next/previous slide);
+      // filters out other slides
+      slide: { type: String, reflect: true },
+      // Active display (remains fixed, once set); filters out
+      // all diapositives that are bound to other displays
+      display: { type: String, reflect: true }
+    }
+  }
+
   render() {
     return html`
       <div>‹dia-show›</div>
       <slot></slot>
     `;
   }
 
+  constructor() {
+    super();
+    this.slide = undefined;
+    this.display = undefined;
+  }
+
+  updated( changedProperties) {
+    if( changedProperties.has( "slide")) {
+      this._switchActiveSlide();
+    }
+    if( changedProperties.has( "display")) {
+      this._switchActiveDisplay();
+    }
+  }
+
+  _switchActiveSlide() {
+    console.log( `New slide: ${this.slide}`);
+    const activeSlideId = this.slide;
+    this.querySelectorAll( "dia-slide")
+      .forEach(( elt) => {
+        const slideId = elt.getAttribute( "id");
+        if( activeSlideId === slideId) {
+          elt.removeAttribute( "hidden");
+        } else {
+          elt.setAttribute( "hidden", "");
+        };
+      });
+  };
+
+  _switchActiveDisplay() {
+    console.log( `New display: ${this.display}`);
+    const activeDisplayId = this.display;
+    this.querySelectorAll( "dia-po")
+      .forEach(( elt) => {
+        const displayId = elt.getAttribute( "display");
+        if( activeDisplayId === displayId) {
+          elt.removeAttribute( "hidden");
+        } else {
+          elt.setAttribute( "hidden", "");
+        };
+      });
+  }
 }
 
 // Register the element with the browser

diff --git a/packages/slideshow/shared-styles.js b/packages/slideshow/shared-styles.js
@@ -2,7 +2,7 @@ import { css } from "lit-element";
 
 const
   CommonStyles = css`
-    :host[ hidden] { display: none }
+    :host([hidden]) { display: none }
   `,
   DiaShowStyles = css`
     :host {