Stops propagation of click event when handled in ‹dia-slide› and ‹dia…

…-po› (#3)
petitatelier · Mar 6, 2019 · 9df630e · 9df630e
1 parent 3b29097
commit 9df630e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 22 deletions.
diff --git a/packages/dia-show/dia-po.js b/packages/dia-show/dia-po.js
@@ -25,26 +25,33 @@ export class DiaPo extends LitElement {
 
   constructor() {
     super();
+
+    // Register event listeners
+    this.addEventListener( "click", this._onClick);
+
+    // Public observed properties
     this.display = undefined;
     this.parentSlide = undefined;
     this.activeSlide = undefined;
     this.activeDisplay = undefined;
     this.hidden = false;
   }
 
-  firstUpdated() {
-    // Fires a 'slide-selected' with the selected slide and a 'display-selected'
-    // event with the selected display when the `dia-po` is clicked.
-    this.addEventListener("click", () => {
-      var eventSlide = new CustomEvent("slide-selected", {
-        detail: { slide: this.parentSlide }, bubbles: true, composed: true
-      });
-      this.dispatchEvent(eventSlide);
-      var eventDisplay = new CustomEvent("display-selected", {
-        detail: { display: this.display }, bubbles: true, composed: true
-      });
-      this.dispatchEvent(eventDisplay);
-     });
+  // When a ‹dia-po› is clicked and we are in « summary / contact
+  // sheet », dispatch the `slide-selected` and `display-selected`
+  // events towards ‹dia-show›, to request it to switch to the
+  // combination of slide/display linked to the diapo.
+  _onClick( e) {
+    // TODO: noop when not in « summary / contact sheet »
+    e.stopPropagation();
+    this.dispatchEvent( new CustomEvent( "slide-selected", {
+      detail: { slide: this.parentSlide },
+      bubbles: true, composed: true
+    }));
+    this.dispatchEvent( new CustomEvent("display-selected", {
+      detail: { display: this.display },
+      bubbles: true, composed: true
+    }));
   }
 
   updated( changedProperties) {

diff --git a/packages/dia-show/dia-slide.js b/packages/dia-show/dia-slide.js
@@ -24,21 +24,27 @@ export class DiaSlide extends LitElement {
 
   constructor() {
     super();
+
+    // Register event listeners
+    this.addEventListener( "click", this._onClick);
+
+    // Public observed properties
     this.id = undefined;
     this.activeSlide = undefined;
     this.activeDisplay = undefined;
     this.hidden = false;
   }
 
-  firstUpdated() {
-    // Dispatch a 'slide-selected' event when the slide is clicked.  The detail
-    // contains the `id` of the clicked slide.
-    this.addEventListener("click", () => {
-      var event = new CustomEvent("slide-selected", {
-        detail: { slide: this.id }, bubbles: true, composed: true
-      });
-      this.dispatchEvent(event);
-     });
+  // When a ‹dia-slide› is clicked and we are in « summary / contact
+  // sheet », dispatch a `slide-selected` event towards ‹dia-show›,
+  // to request it to switch to the slide clicked.
+  _onClick( e) {
+    // TODO: noop when not in « summary / contact sheet »
+    e.stopPropagation();
+    this.dispatchEvent( new CustomEvent("slide-selected", {
+      detail: { slide: this.id },
+      bubbles: true, composed: true
+    }));
   }
 
   updated( changedProperties) {