Adds a ‹dia-display-selector› element (#3)

packages/dia-show/dia-display-selector.js

@@ -0,0 +1,56 @@
+import { LitElement, html, css } from "lit-element";
+import { CommonStyles } from "./shared-styles.js";
+
+export class DiaDisplaySelector extends LitElement {
+  static get styles() {
+    return [
+      CommonStyles,
+      css`
+        :host { display: inline-block }
+        div.select {
+          display: inline-block;
+          background-color: white;
+          border-radius: 1em;
+          padding: 0.25em 0.5em }
+        span.item {
+          padding: 0 0.5em;
+          cursor: pointer }
+        span.item:hover {
+          color: blue }
+      `
+    ];
+  };
+
+  static get properties() {
+    return {
+      displayList: { type: Object, attribute: false } // an object of type `Set` actually
+    }
+  }
+
+  render() {
+    return html`<div class="select">${
+        Array.from( this.displayList.values())
+          .map(( display) =>
+            html`<span id="${display}" class="item"
+                       @click=${this.selected}>${display}</span>`)
+      }</div>`;
+  }
+
+  constructor() {
+    super();
+    this.displayList = new Set();
+  }
+
+  selected( e) {
+    const selectedDisplay = e.target.id;
+    this.dispatchEvent(
+      new CustomEvent( "display-selected", {
+        detail: { display: selectedDisplay },
+        bubbles: true, composed: true
+      })
+    );
+  }
+}
+
+// Register the element with the browser
+customElements.define( "dia-display-selector", DiaDisplaySelector);

packages/dia-show/dia-show.js

@@ -20,14 +20,23 @@ export class DiaShow extends LitElement {
   render() {
     return html`
       <div>‹dia-show slide ${this.slide}, display ${this.display}›</div>
+      <dia-display-selector .displayList=${this._displayList}></dia-display-selector>
       <slot></slot>
     `;
   }
 
   constructor() {
     super();
+
+    // Attach event listeners
+    this.addEventListener( "display-selected", this._displaySelected);
+
+    // Public observed properties
     this.slide = undefined;
     this.display = undefined;
+
+    // Private properties
+    this._displayList = this._enumerateDisplays(); // returns a `Set`
   }
 
   updated( changedProperties) {
@@ -58,6 +67,28 @@ export class DiaShow extends LitElement {
     this.querySelectorAll( "dia-slide")
       .forEach(( element) => element.activeDisplay = activeDisplayId);
   }
+
+  // Returns a `Set` of distinct display identifiers used
+  // on child ‹dia-po› elements
+  _enumerateDisplays() {
+    const diapoElements = this.querySelectorAll( "dia-po"),
+          displays = new Set();
+
+    diapoElements.forEach(( element) => {
+      // We use `getAttribute( "display")` to get the attribute value
+      // from the DOM, instead of `element.display`, because at the time
+      // this method gets called, the ‹dia-po› custom element might not
+      // have been defined yet
+      displays.add( element.getAttribute( "display"));
+    });
+    return displays;
+  }
+
+  _displaySelected( e) {
+    const selectedDisplay = e.detail.display;
+    console.log( `dia-show › _displaySelected(): ${selectedDisplay}`);
+    this.display = selectedDisplay;
+  }
 }
 
 // Register the element with the browser

packages/dia-show/index.js

@@ -1,9 +1,11 @@
 import { DiaShow } from "./dia-show.js";
 import { DiaSlide } from "./dia-slide.js";
 import { DiaPo } from "./dia-po.js";
+import { DiaDisplaySelector } from "./dia-display-selector.js";
 
 export default {
   DiaShow,
   DiaSlide,
-  DiaPo
+  DiaPo,
+  DiaDisplaySelector
 }

packages/dia-show/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 {