cgt-wp-theme/assets/js/main.js

/**
 * Scripts Vanilla ES6 — Union Locale CGT Foix Haute-Ariège
 * Menu mobile accessible + ombre header + partage + onglets & médias admin WP.
 */
(function () {
	'use strict';

	/* -------------------------------------------------------------------------
	 * 1. Navigation mobile accessible & sticky header
	 * ---------------------------------------------------------------------- */
	const header = document.querySelector('.cgt-header');
	const navToggle = document.querySelector('.cgt-nav-toggle');
	const navMenu = document.getElementById('cgt-primary-nav');

	if (header) {
		const onScroll = () => {
			header.classList.toggle('is-scrolled', window.scrollY > 10);
		};
		onScroll();
		window.addEventListener('scroll', onScroll, { passive: true });
	}

	if (navToggle && navMenu) {
		const setOpen = (isOpen) => {
			navToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
			navToggle.setAttribute(
				'aria-label',
				isOpen ? 'Fermer le menu principal' : 'Ouvrir le menu principal'
			);
			navMenu.classList.toggle('is-open', isOpen);
		};

		navToggle.addEventListener('click', () => {
			const expanded = navToggle.getAttribute('aria-expanded') === 'true';
			setOpen(!expanded);
		});

		document.addEventListener('keydown', (event) => {
			if (event.key === 'Escape' && navMenu.classList.contains('is-open')) {
				setOpen(false);
				navToggle.focus();
			}
		});

		document.addEventListener('click', (event) => {
			if (
				navMenu.classList.contains('is-open') &&
				!navMenu.contains(event.target) &&
				!navToggle.contains(event.target)
			) {
				setOpen(false);
			}
		});
	}

	/* -------------------------------------------------------------------------
	 * 2. Bouton copier le lien sur les articles
	 * ---------------------------------------------------------------------- */
	const copyBtns = document.querySelectorAll('[data-cgt-copy-url]');
	copyBtns.forEach((btn) => {
		btn.addEventListener('click', async () => {
			const url = btn.getAttribute('data-cgt-copy-url');
			if (!url || !navigator.clipboard) {
				return;
			}
			try {
				await navigator.clipboard.writeText(url);
				const original = btn.textContent;
				btn.textContent = 'Lien copié !';
				setTimeout(() => {
					btn.textContent = original;
				}, 2200);
			} catch (e) {
				// Ignore silencieusement si l'API clipboard est restreinte
			}
		});
	});

	/* -------------------------------------------------------------------------
	 * 3. Interface d'administration : onglets + sélecteur média WP
	 * ---------------------------------------------------------------------- */
	const adminWrap = document.querySelector('.cgt-admin-wrap');
	if (!adminWrap) {
		return;
	}

	const tabButtons = adminWrap.querySelectorAll('[data-cgt-tab]');
	const tabPanels = adminWrap.querySelectorAll('[data-cgt-panel]');
	const activeTabInput = adminWrap.querySelector('input[name="cgt_fha_active_tab"]');
	const refererInput = adminWrap.querySelector('input[name="_wp_http_referer"]');

	const activateTab = (tabId) => {
		tabButtons.forEach((btn) => {
			const match = btn.getAttribute('data-cgt-tab') === tabId;
			btn.classList.toggle('nav-tab-active', match);
			btn.setAttribute('aria-selected', match ? 'true' : 'false');
		});
		tabPanels.forEach((panel) => {
			const match = panel.getAttribute('data-cgt-panel') === tabId;
			panel.hidden = !match;
		});
		if (activeTabInput) {
			activeTabInput.value = tabId;
		}
		if (refererInput) {
			try {
				const url = new URL(refererInput.value, window.location.origin);
				url.searchParams.set('tab', tabId);
				refererInput.value = url.pathname + url.search;
			} catch (e) {
				// Ignore si l'URL est invalide
			}
		}
	};

	tabButtons.forEach((btn) => {
		btn.addEventListener('click', (event) => {
			event.preventDefault();
			activateTab(btn.getAttribute('data-cgt-tab'));
		});
	});

	// Sélecteurs de médias WordPress (wp.media)
	if (typeof wp !== 'undefined' && wp.media) {
		adminWrap.querySelectorAll('[data-cgt-media-select]').forEach((selectBtn) => {
			selectBtn.addEventListener('click', (event) => {
				event.preventDefault();
				const targetId = selectBtn.getAttribute('data-cgt-media-select');
				const inputEl = document.getElementById(targetId);
				const previewEl = document.getElementById(targetId + '_preview');

				const frame = wp.media({
					title: 'Choisir une image',
					button: { text: 'Utiliser cette image' },
					library: { type: 'image' },
					multiple: false,
				});

				frame.on('select', () => {
					const attachment = frame.state().get('selection').first().toJSON();
					if (inputEl && attachment.url) {
						inputEl.value = attachment.url;
					}
					if (previewEl && attachment.url) {
						previewEl.src = attachment.url;
						previewEl.hidden = false;
					}
				});

				frame.open();
			});
		});

		adminWrap.querySelectorAll('[data-cgt-media-clear]').forEach((clearBtn) => {
			clearBtn.addEventListener('click', (event) => {
				event.preventDefault();
				const targetId = clearBtn.getAttribute('data-cgt-media-clear');
				const defaultUrl = clearBtn.getAttribute('data-cgt-default-url') || '';
				const inputEl = document.getElementById(targetId);
				const previewEl = document.getElementById(targetId + '_preview');

				if (inputEl) {
					inputEl.value = defaultUrl;
				}
				if (previewEl) {
					if (defaultUrl) {
						previewEl.src = defaultUrl;
						previewEl.hidden = false;
					} else {
						previewEl.src = '';
						previewEl.hidden = true;
					}
				}
			});
		});
	}
})();