@damienmortini/damdom-gallery - npm Package Compare versions

Comparing version 0.0.12 to 0.0.14

index.js

@@ -1,11 +0,11 @@
-import style from './index.css' assert { type: 'css' }
+import style from './index.css' with { type: 'css' };
 
 class DamdomGalleryElement extends HTMLElement {
-  #highlightContainer
-  #gridContainer
-  #highlighted = null
-  #elementSlotMap
+  #highlightContainer;
+  #gridContainer;
+  #highlighted = null;
+  #elementSlotMap;
 
   constructor() {
-    super()
+    super();
 
@@ -18,8 +18,8 @@ this.attachShadow({ mode: 'open' }).innerHTML = `
       <div id="grid" part="grid"></div>
-    `
-    this.shadowRoot.adoptedStyleSheets = [style]
+    `;
+    this.shadowRoot.adoptedStyleSheets = [style];
 
-    this.#highlightContainer = this.shadowRoot.querySelector('#highlight')
-    this.#gridContainer = this.shadowRoot.querySelector('#grid')
-    const backButton = this.shadowRoot.querySelector('#backbutton')
+    this.#highlightContainer = this.shadowRoot.querySelector('#highlight');
+    this.#gridContainer = this.shadowRoot.querySelector('#grid');
+    const backButton = this.shadowRoot.querySelector('#backbutton');
 
@@ -29,41 +29,41 @@ const highlightButtonClick = (event) => {
         if (id === event.target.parentElement.id) {
-          this.highlighted = element
+          this.highlighted = element;
         }
       }
-    }
+    };
 
     const backButtonClick = () => {
-      this.highlighted = null
-    }
+      this.highlighted = null;
+    };
 
-    backButton.addEventListener('click', backButtonClick)
+    backButton.addEventListener('click', backButtonClick);
 
-    let slotUID = 0
-    this.#elementSlotMap = new Map()
+    let slotUID = 0;
+    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 = slotName
+          const slotName = `gallery-item-${slotUID++}`;
+          const container = document.createElement('div');
+          container.part = 'item';
+          container.classList.add('elementcontainer');
+          container.id = slotName;
           container.innerHTML = `
             <slot name="${slotName}"></slot>
             <div class="highlightbutton"></div>
-          `
-          container.querySelector('.highlightbutton').addEventListener('click', highlightButtonClick)
-          node.slot = this.#highlighted === node ? 'highlight' : slotName
-          this.#elementSlotMap.set(node, slotName)
-          this.#gridContainer.appendChild(container)
+          `;
+          container.querySelector('.highlightbutton').addEventListener('click', highlightButtonClick);
+          node.slot = this.#highlighted === node ? 'highlight' : slotName;
+          this.#elementSlotMap.set(node, slotName);
+          this.#gridContainer.appendChild(container);
         }
         for (const node of mutation.removedNodes) {
-          node.slot = ''
-          const container = this.#gridContainer.querySelector(`#${this.#elementSlotMap.get(node)}`)
-          container.querySelector('.highlightbutton').removeEventListener('click', highlightButtonClick)
-          container.remove()
-          this.#elementSlotMap.delete(node)
+          node.slot = '';
+          const container = this.#gridContainer.querySelector(`#${this.#elementSlotMap.get(node)}`);
+          container.querySelector('.highlightbutton').removeEventListener('click', highlightButtonClick);
+          container.remove();
+          this.#elementSlotMap.delete(node);
         }
       }
-    }
+    };
     mutationCallback([
@@ -74,31 +74,31 @@ {
       },
-    ])
-    const observer = new MutationObserver(mutationCallback)
-    observer.observe(this, { childList: true })
+    ]);
+    const observer = new MutationObserver(mutationCallback);
+    observer.observe(this, { childList: true });
   }
 
   get highlighted() {
-    return this.#highlighted
+    return this.#highlighted;
   }
 
   set highlighted(value) {
-    if (this.#highlighted === value) return
+    if (this.#highlighted === value) return;
     if (this.#highlighted) {
-      this.#highlighted.slot = `${this.#elementSlotMap.get(this.#highlighted)}`
-      this.#highlighted.toggleAttribute('highlighted', false)
+      this.#highlighted.slot = `${this.#elementSlotMap.get(this.#highlighted)}`;
+      this.#highlighted.toggleAttribute('highlighted', false);
     }
-    this.#highlighted = value
+    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')
+      this.#highlighted.slot = 'highlight';
+      this.#highlighted.toggleAttribute('highlighted', true);
+      this.#highlightContainer.classList.remove('hide');
+      this.#gridContainer.classList.add('hide');
     } else {
-      this.#highlightContainer.classList.add('hide')
-      this.#gridContainer.classList.remove('hide')
+      this.#highlightContainer.classList.add('hide');
+      this.#gridContainer.classList.remove('hide');
     }
-    this.dispatchEvent(new Event('highlightchange'))
+    this.dispatchEvent(new Event('highlightchange'));
   }
 }
 
-window.customElements.define('damdom-gallery', DamdomGalleryElement)
+window.customElements.define('damdom-gallery', DamdomGalleryElement);

package.json

 {
   "name": "@damienmortini/damdom-gallery",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "<damdom-gallery> custom element.",
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "index.js",
-  "author": "Damien Mortini",
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/damienmortini/lib",
-    "directory": "damdom/damdom-gallery"
-  },
   "keywords": [
@@ -20,5 +9,16 @@ "custom elements",
   ],
+  "homepage": "https://github.com/damienmortini/lib/tree/main/packages/damdom/damdom-gallery",
   "bugs": "https://github.com/damienmortini/lib/issues",
-  "homepage": "https://github.com/damienmortini/lib/tree/main/damdom/damdom-gallery",
-  "gitHead": "1a51bc388269ef4f4db9a6f145832a5e20db3645"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/damienmortini/lib",
+    "directory": "packages/damdom/damdom-gallery"
+  },
+  "license": "ISC",
+  "author": "Damien Mortini",
+  "type": "module",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  }
 }

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Is type module

Yes

Worsened metrics

Total package byte prevSize

7177

decreased by-8.64%

Number of package files

5

decreased by-16.67%

No dependency changes