@damienmortini/damdom-gallery
Advanced tools
Comparing version 0.0.7 to 0.0.8
76
index.js
| class DamdomGalleryElement extends HTMLElement { | ||
| #highlightedIndex = -1 | ||
| #highlight | ||
| #grid | ||
| #highlightedElement | ||
| #highlightContainer | ||
| #gridContainer | ||
| #highlighted = null | ||
| #elementSlotMap | ||
@@ -96,12 +96,16 @@ constructor() { | ||
| this.#highlight = this.shadowRoot.querySelector('#highlight') | ||
| this.#grid = this.shadowRoot.querySelector('#grid') | ||
| this.#highlightContainer = this.shadowRoot.querySelector('#highlight') | ||
| this.#gridContainer = this.shadowRoot.querySelector('#grid') | ||
| const backButton = this.shadowRoot.querySelector('#backbutton') | ||
| const highlightButtonClick = (event) => { | ||
| this.highlightedIndex = Number(event.target.parentElement.id) | ||
| for (const [element, id] of this.#elementSlotMap) { | ||
| if (id === event.target.parentElement.id) { | ||
| this.highlighted = element | ||
| } | ||
| } | ||
| } | ||
| const backButtonClick = () => { | ||
| this.highlightedIndex = -1 | ||
| this.highlighted = null | ||
| } | ||
@@ -112,26 +116,26 @@ | ||
| let slotUID = 0 | ||
| const nodeContainerMap = new Map() | ||
| this.#elementSlotMap = new Map() | ||
| const mutationCallback = (mutationsList) => { | ||
| for (const mutation of mutationsList) { | ||
| for (const node of mutation.addedNodes) { | ||
| const slotName = `gallery-item-${slotUID++}` | ||
| const container = document.createElement('div') | ||
| container.part = 'item' | ||
| container.classList.add('elementcontainer') | ||
| container.id = slotUID | ||
| container.id = slotName | ||
| container.innerHTML = ` | ||
| <slot name="element${slotUID}"></slot> | ||
| <slot name="${slotName}"></slot> | ||
| <div class="highlightbutton"></div> | ||
| ` | ||
| container.querySelector('.highlightbutton').addEventListener('click', highlightButtonClick) | ||
| node.slot = `element${slotUID}` | ||
| this.#grid.appendChild(container) | ||
| nodeContainerMap.set(node, container) | ||
| slotUID++ | ||
| node.slot = slotName | ||
| this.#elementSlotMap.set(node, slotName) | ||
| this.#gridContainer.appendChild(container) | ||
| } | ||
| for (const node of mutation.removedNodes) { | ||
| node.slot = '' | ||
| const container = nodeContainerMap.get(node) | ||
| const container = this.#gridContainer.querySelector(`#${this.#elementSlotMap.get(node)}`) | ||
| container.querySelector('.highlightbutton').removeEventListener('click', highlightButtonClick) | ||
| container.remove() | ||
| nodeContainerMap.delete(node) | ||
| this.#elementSlotMap.delete(node) | ||
| } | ||
@@ -148,32 +152,26 @@ } | ||
| get highlightedIndex() { | ||
| return this.#highlightedIndex | ||
| get highlighted() { | ||
| return this.#highlighted | ||
| } | ||
| set highlightedIndex(value) { | ||
| this.#highlightedElement = this.querySelector(`[slot=element${value}]`) | ||
| if (!this.#highlightedElement) value = -1 | ||
| if (value === this.#highlightedIndex) return | ||
| if (value !== -1) { | ||
| this.#highlightedElement.slot = 'highlight' | ||
| this.#highlightedElement.toggleAttribute('highlighted', true) | ||
| this.#highlight.classList.remove('hide') | ||
| this.#grid.classList.add('hide') | ||
| set highlighted(value) { | ||
| if (this.#highlighted === value) return | ||
| if (this.#highlighted) { | ||
| this.#highlighted.slot = `${this.#elementSlotMap.get(this.#highlighted)}` | ||
| this.#highlighted.toggleAttribute('highlighted', false) | ||
| } | ||
| this.#highlighted = value | ||
| if (this.#highlighted) { | ||
| this.#highlighted.slot = 'highlight' | ||
| this.#highlighted.toggleAttribute('highlighted', true) | ||
| this.#highlightContainer.classList.remove('hide') | ||
| this.#gridContainer.classList.add('hide') | ||
| } else { | ||
| this.#highlight.classList.add('hide') | ||
| this.#grid.classList.remove('hide') | ||
| const highlightedElement = this.querySelector(`[slot=highlight]`) | ||
| if (!highlightedElement) return | ||
| highlightedElement.slot = `element${this.#highlightedIndex}` | ||
| highlightedElement.toggleAttribute('highlighted', false) | ||
| this.#highlightContainer.classList.add('hide') | ||
| this.#gridContainer.classList.remove('hide') | ||
| } | ||
| this.#highlightedIndex = value | ||
| this.dispatchEvent(new Event('highlightchange')) | ||
| } | ||
| get highlightedElement() { | ||
| return this.#highlightedElement | ||
| } | ||
| } | ||
| window.customElements.define('damdom-gallery', DamdomGalleryElement) |
| { | ||
| "name": "@damienmortini/damdom-gallery", | ||
| "version": "0.0.7", | ||
| "version": "0.0.8", | ||
| "description": "<damdom-gallery> custom element.", | ||
@@ -22,3 +22,3 @@ "publishConfig": { | ||
| "homepage": "https://github.com/damienmortini/lib/tree/main/damdom/damdom-gallery", | ||
| "gitHead": "462c3882ee68e145aca44e96056950073ff139db" | ||
| "gitHead": "ac2465ab13c675aac92f8bec7343b8282616c5d7" | ||
| } |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.64%
8088
- Lines of code
- decreased by-0.64%
156
No dependency changes