Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// créer une class qui extend HTMLElement
class UserDetailsCard extends HTMLElement {
constructor() {
super();
// Ajouter un click listener sur notre component
this.addEventListener('click', e => {
this.toggleDetails();
});
}
connectedCallback() {
// get current scoop context
this.currentDocument = document.currentScript.ownerDocument;
// Création d'une racine fantôme
const shadowRoot = this.attachShadow({mode: 'open'});
// creation du template de base avec une class css pour l'identifié par la suite
const template = this.currentDocument.createElement('div');
template.setAttribute('class', 'card__preview');
// on genere une instance uniqu
const instance = template.cloneNode(true);
// et on l'ajout au ShadowDom
shadowRoot.appendChild(instance);
// pour finir on peu charger les info user
this.loadUserData();
}
async loadUserData() {
// on check si l'attribut `api-url` à bien été renseigné
if(!this.hasAttribute('api-url'))
throw new Error('Vous devez implementer le paramettre `api-url` pour faire fonctionner ce component');
// si oui on récupère l'url et on lance la requête
const apiUrl = this.getAttribute('api-url');
// request api to get data
const {data: user} = await fetch(apiUrl)
.then(res => res.json())
.catch((error) => {
console.error(error);
});
// pui on update de ShadowDOM
this.render(user);
}
render(user) {
// on identifi l'element html à modifier
const card__preview = this.shadowRoot.querySelector('.card__preview');
// on ajoute de cpntenu HTML avec les info en provenance de l'api
card__preview.insertAdjacentHTML('afterbegin', `
<img class=card__img" src="${user?.avatar}">
<p class="card__details">
${user?.email}<br/>
${user?.first_name} ${user?.last_name}
</p>
`);
// on cache le details content
const card__details = this.shadowRoot.querySelector('.card__details');
card__details.style.display = 'none';
}
toggleDetails() {
// on identifi la zone à traiter
const card__details = this.shadowRoot.querySelector('.card__details');
// get current display mode
const display = card__details.style.display;
// switch display mode
if (display === 'none') {
card__details.style.display = 'block';
} else {
card__details.style.display = 'none';
}
}
}
customElements.define('user-details-card', UserDetailsCard);
// usage: <user-details-card api-url="https://reqres.in/api/users/1"></user-details-card>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.