Metiers_du_patrimoine_theme/resources/js/artisans.ts

45 lines
1.8 KiB
TypeScript

interface MemberElement extends Element {
querySelector(selectors: string): Element | null;
}
window.addEventListener('DOMContentLoaded', (): void => {
const artisansMembers: NodeListOf<MemberElement> = document.querySelectorAll('.acf-field-670d268f2b324 div[data-layout="membre"]');
artisansMembers.forEach((member: MemberElement): void => {
setMemberName(member);
// Créer un MutationObserver pour surveiller les changements de classe
const observer: MutationObserver = new MutationObserver((mutations: MutationRecord[]): void => {
mutations.forEach((mutation: MutationRecord): void => {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
setTimeout((): void => {
setMemberName(member);
}, 200);
}
});
});
// Configuration de l'observateur pour surveiller les changements de classe
observer.observe(member, {
attributes: true,
attributeFilter: ['class'],
});
});
});
function setMemberName(member: MemberElement): void {
const memberFirstName: string | undefined = (member.querySelector('div[data-name="first_name"] input') as HTMLInputElement)?.value;
const memberLastName: string | undefined = (member.querySelector('div[data-name="last_name"] input') as HTMLInputElement)?.value;
const memberName: string = `${memberFirstName} ${memberLastName}`;
const spanOrder: Element | null = member.querySelector('.acf-fc-layout-handle span');
const panelTitleDiv: Element | null = member.querySelector('.acf-fc-layout-handle');
if (memberName && memberName !== '' && panelTitleDiv) {
panelTitleDiv.textContent = memberName;
if (spanOrder) {
panelTitleDiv.prepend(spanOrder);
}
}
}