Adds default attribute to ‹dia-po› and improves comments describing…

… properties/attributes of all elements (#3)
petitatelier · Mar 6, 2019 · 2cb6c5f · 2cb6c5f
1 parent db5625c
commit 2cb6c5f
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git a/demos/dia-show.html b/demos/dia-show.html
@@ -21,20 +21,20 @@
       <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="tv02" default></dia-po>
         <dia-po display="pres01"></dia-po>
         <dia-po display="pres02"></dia-po>
       </dia-slide>
       <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="tv02" default></dia-po>
         <dia-po display="pres01"></dia-po>
         <dia-po display="pres02"></dia-po>
       </dia-slide>
       <dia-slide id="s03">
         <dia-po display="proj01"></dia-po>
-        <dia-po display="tv01"></dia-po>
+        <dia-po display="tv01" default></dia-po>
         <dia-po display="tv02"></dia-po>
         <dia-po display="pres01"></dia-po>
         <dia-po display="pres02"></dia-po>

diff --git a/packages/dia-show/dia-po.js b/packages/dia-show/dia-po.js
@@ -8,11 +8,20 @@ export class DiaPo extends LitElement {
 
   static get properties() {
     return {
-      display: { type: String },
+      // Public observed properties/attributes, set by slideshow author
+      display: { type: String },    // Target display of the diapositive
+      default: { type: Boolean },   // Diapositive displayed to audience (which has a single display)
+
+      // Computed property, set by parent ‹dia-slide›, reflected
+      // to an attribute, to allow CSS selectors to act upon it
+      hidden: { type: Boolean, reflect: true },
+
+      // Computed properties, set by parent ‹dia-slide›, with no
+      // linked attribute; we want to set/read/observe them, but
+      // not expose them as attributes in the DOM
       parentSlide: { type: String, attribute: false },
       activeSlide: { type: String, attribute: false },
       activeDisplay: { type: String, attribute: false },
-      hidden: { type: Boolean, reflect: true }
     }
   }
 
@@ -31,10 +40,11 @@ export class DiaPo extends LitElement {
 
     // Public observed properties
     this.display = undefined;
+    this.default = false;
+    this.hidden = false;
     this.parentSlide = undefined;
     this.activeSlide = undefined;
     this.activeDisplay = undefined;
-    this.hidden = false;
   }
 
   // When a ‹dia-po› is clicked and we are in « summary / contact

diff --git a/packages/dia-show/dia-show.js b/packages/dia-show/dia-show.js
@@ -9,11 +9,19 @@ export class DiaShow extends LitElement {
 
   static get properties() {
     return {
+      // The two properties/attributes `slide` and `display` are initially
+      // set by the slideshow author, to define the slide/display first
+      // displayed (defaults to first slide, first display, when left
+      // undefined); subsequently set by the keyboard or remote controller.
+
       // Active slide (varies when speaker asks next/previous slide);
-      // filters out other slides
+      // filters out/hides other slides.
       slide: { type: String, reflect: true },
-      // Active display (remains fixed, once set); filters out
-      // all diapositives that are bound to other displays
+
+      // Active display (usually remains fixed, once set, although the
+      // remote controller might change it for the audience, which has
+      // only target display); filters out/hides all diapositives that
+      // are bound to other displays.
       display: { type: String, reflect: true }
     }
   }

diff --git a/packages/dia-show/dia-slide.js b/packages/dia-show/dia-slide.js
@@ -8,10 +8,18 @@ export class DiaSlide extends LitElement {
 
   static get properties() {
     return {
-      id: { type: String },
+      // Public observed property/attribut, set by the slideshow author
+      id: { type: String },   // Identifier of the slides (must be unique among all slides)
+
+      // Computed property, set by parent ‹dia-slide›, reflected
+      // to an attribute, to allow CSS selectors to act upon it
+      hidden: { type: Boolean, reflect: true },
+
+      // Computed properties, set by parent ‹dia-show›, with no
+      // linked attribute; we want to set/read/observe them, but
+      // not expose them as attributes in the DOM
       activeSlide: { type: String, attribute: false },
-      activeDisplay: { type: String, attribute: false },
-      hidden: { type: Boolean, reflect: true }
+      activeDisplay: { type: String, attribute: false }
     }
   }
 

diff --git a/packages/dia-show/shared-styles.js b/packages/dia-show/shared-styles.js
@@ -20,8 +20,11 @@ const
   DiaPoStyles = css`
     :host {
       display: flex; flex-direction: column;
-      flex-grow: 1;
-      background-color: green }
+      flex-grow: 1; box-sizing: border-box;
+      background-color: green;
+      border: 1px dashed black }
+    :host([ default]) {
+      border: 2px solid red }
   `;
 
 export {