diff --git a/packages/dia-show/dia-display-selector.js b/packages/dia-show/dia-display-selector.js index 771b4df..79f097b 100644 --- a/packages/dia-show/dia-display-selector.js +++ b/packages/dia-show/dia-display-selector.js @@ -32,7 +32,7 @@ export class DiaDisplaySelector extends LitElement { Array.from( this.displayList.values()) .map(( display) => html`${display}`) + @click=${this._onSelected}>${display}`) }`; } @@ -41,7 +41,7 @@ export class DiaDisplaySelector extends LitElement { this.displayList = new Set(); } - selected( e) { + _onSelected( e) { const selectedDisplay = e.target.id; this.dispatchEvent( new CustomEvent( "display-selected", { diff --git a/packages/dia-show/dia-po.js b/packages/dia-show/dia-po.js index c80f81c..9b3fbb5 100644 --- a/packages/dia-show/dia-po.js +++ b/packages/dia-show/dia-po.js @@ -56,20 +56,29 @@ export class DiaPo extends LitElement { 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( "activeSlide") + || changedProperties.has( "activeDisplay")) { + this._updatedActiveSlideOrDisplay(); } if( changedProperties.has( "hidden")) { - this.querySelectorAll( "dia-livecode") - .forEach(( element) => element.hidden = this.hidden); + this._updatedHidden(); } } + _updatedActiveSlideOrDisplay() { + 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); + } + + _updatedHidden() { + this.querySelectorAll( "dia-livecode") + .forEach(( element) => element.hidden = this.hidden); + } + } // Register the element with the browser diff --git a/packages/dia-show/dia-show.js b/packages/dia-show/dia-show.js index b557f53..71fdef8 100644 --- a/packages/dia-show/dia-show.js +++ b/packages/dia-show/dia-show.js @@ -42,17 +42,17 @@ export class DiaShow extends LitElement { updated( changedProperties) { if( changedProperties.has( "slide")) { - this._switchActiveSlide(); + this._updatedActiveSlide(); } if( changedProperties.has( "display")) { - this._switchActiveDisplay(); + this._updatedActiveDisplay(); } } // 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() { + _updatedActiveSlide() { const activeSlideId = this.slide != null ? this.slide : undefined; console.log( `dia-show › Switch to slide: ${activeSlideId}`); this.querySelectorAll( "dia-slide") @@ -62,7 +62,7 @@ export class DiaShow extends LitElement { // 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() { + _updatedActiveDisplay() { const activeDisplayId = this.display != null ? this.display : undefined; console.log( `dia-show › Switch to display: ${activeDisplayId}`); this.querySelectorAll( "dia-slide") diff --git a/packages/dia-show/dia-slide.js b/packages/dia-show/dia-slide.js index 94d71e8..8c72a62 100644 --- a/packages/dia-show/dia-slide.js +++ b/packages/dia-show/dia-slide.js @@ -50,21 +50,34 @@ export class DiaSlide extends LitElement { updated( changedProperties) { 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); + this._updatedActiveSlide(); } if( changedProperties.has( "activeDisplay")) { - this.querySelectorAll( "dia-po") - .forEach(( element) => element.activeDisplay = this.activeDisplay); + this._updatedActiveDisplay(); } if( changedProperties.has( "id")) { - this.querySelectorAll( "dia-po") - .forEach(( element) => element.parentSlide = this.id); + this._updatedId(); } } + _updatedActiveSlide() { + this.querySelectorAll( "dia-po") + .forEach(( element) => element.activeSlide = this.activeSlide); + + this.hidden = (typeof this.activeSlide !== "undefined" + && this.activeSlide !== this.id); + } + + _updatedActiveDisplay() { + this.querySelectorAll( "dia-po") + .forEach(( element) => element.activeDisplay = this.activeDisplay); + } + + _updatedId() { + this.querySelectorAll( "dia-po") + .forEach(( element) => element.parentSlide = this.id); + } + } // Register the element with the browser