75 lines
No EOL
2.5 KiB
JavaScript
75 lines
No EOL
2.5 KiB
JavaScript
/* Define the web component for settable list
|
|
https://stackoverflow.com/questions/50404970/web-components-pass-data-to-and-from
|
|
*/
|
|
class JsonListComponent extends HTMLElement {
|
|
#shadow;
|
|
#data;
|
|
constructor() {
|
|
super();
|
|
this.#shadow = this.attachShadow({ mode: "open" });
|
|
this.#data = [];
|
|
this.render();
|
|
}
|
|
|
|
setData(newData, append = false) {
|
|
if (!Array.isArray(newData)) {
|
|
console.warn("Invalid format, expected an array.");
|
|
return;
|
|
}
|
|
this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
|
|
this.render();
|
|
}
|
|
|
|
set data(value) {
|
|
this.setData(value, false);
|
|
}
|
|
get data() {
|
|
return this.#data;
|
|
}
|
|
|
|
/* Render the list items #data */
|
|
render() {
|
|
const list = document.createElement('ul');
|
|
const shad=this.#shadow;
|
|
this.#data.forEach((item, index) => {
|
|
const listItem = document.createElement('li');
|
|
listItem.textContent = `${item.name} - ${item.description}`;
|
|
// Adding a click event listener for user interaction
|
|
listItem.addEventListener('click', () => {
|
|
console.log('Item clicked:', item, listItem);
|
|
// You can dispatch a custom event here if needed.
|
|
this.dispatchEvent(new CustomEvent('itemSelected', {
|
|
detail: item,
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
});
|
|
list.addEventListener('click', function (e) {
|
|
if (e.target.tagName === 'LI') {
|
|
shad.querySelectorAll('li.selected').forEach(item=>{item.className = '';});
|
|
e.target.className = 'selected';
|
|
}
|
|
});
|
|
list.appendChild(listItem);
|
|
});
|
|
|
|
this.#shadow.innerHTML = '';
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
ul { list-style-type: none; padding: 0; margin: 0; }
|
|
li { padding: 1px; border-bottom: 1px solid #ccc; cursor: pointer; }
|
|
li :not(.selected) :hover { background: #ccc; }
|
|
.selected { background: lightgreen;}
|
|
`;
|
|
this.#shadow.appendChild(style);
|
|
this.#shadow.appendChild(list);
|
|
}
|
|
|
|
/* Render an error message if JSON fetching fails */
|
|
renderError(error) {
|
|
this.#shadow.innerHTML = `<p>Error loading data: ${error.message}</p>`;
|
|
}
|
|
}
|
|
|
|
/* Define the new custom element */
|
|
customElements.define('json-list', JsonListComponent); |