MediaWiki:Mobile.js

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

• Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
• Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
• Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
• Opera : appuyez sur Ctrl + F5.

/* Tout code JavaScript placé ici sera chargé avec les pages accédées par les utilisateurs du site mobile */

(function() {
	// Fonction pour ajouter un item de menu
	function addMenuItem(parent, itemId, linkText, url, imageUrl, insertAtStart) {
		// Si l'élément existe déjà ou si le parent est inexistant, on ne fait rien
		if (!parent || document.getElementById(itemId)) return;

		var newItem = document.createElement('li');
		newItem.id = itemId;

		// Remplacement du template literal par une concaténation classique
		newItem.innerHTML = '<a href="' + url + '" class="menu__item--home">' +
			'<span class="menu-item-text">' + linkText + '</span>' +
			'</a>';

		// Insertion de l'élément dans le bon ordre (avant ou après)
		insertAtStart ? parent.insertBefore(newItem, parent.firstChild) : parent.appendChild(newItem);

		// Définir l'image de fond via une variable CSS
		newItem.querySelector('.menu-item-text').style.setProperty('--image-url', 'url(' + imageUrl + ')');
	}

	// C'est au premier clic sur le bouton qu'on ajoute les éléments
	document.getElementById("mw-mf-main-menu-button").addEventListener("click", function handler() {
		var navigationMenu = document.querySelector("ul#p-navigation");
		if (navigationMenu) {
			// Ajouter les trois nouveaux éléments entre "Accueil" et "Au hasard"
			addMenuItem(navigationMenu, 'pt-all-documentaires', 'Documentaires', 'https://militotheque.org/wiki/Catégorie:Documentaire', '/w/images/8/82/Videographie_noir.svg');
			addMenuItem(navigationMenu, 'pt-all-films', 'Films', 'https://militotheque.org/wiki/Catégorie:Film', '/w/images/8/82/Videographie_noir.svg');
			addMenuItem(navigationMenu, 'pt-carte-videos', 'Carte des vidéos', 'https://militotheque.org/wiki/Militothèque:Carte_des_vidéos', '/w/images/6/6e/Mappemonde.svg');

			// Réorganiser les éléments pour que l'ordre soit correct
			var accueil = navigationMenu.querySelector('li:first-child'); // "Accueil"
			var auHasard = navigationMenu.querySelector('li:nth-child(2)'); // "Au hasard"

			// Insérer les nouveaux éléments entre "Accueil" et "Au hasard"
			var allDocumentaires = navigationMenu.querySelector('#pt-all-documentaires');
			var allFilms = navigationMenu.querySelector('#pt-all-films');
			var carteVideos = navigationMenu.querySelector('#pt-carte-videos');

			// Insérer les éléments dans l'ordre correct
			if (allDocumentaires) navigationMenu.insertBefore(allDocumentaires, auHasard);
			if (allFilms) navigationMenu.insertBefore(allFilms, auHasard);
			if (carteVideos) navigationMenu.insertBefore(carteVideos, auHasard);
		}

		// Désactivation du script après le premier clic
		document.getElementById("mw-mf-main-menu-button").removeEventListener("click", handler);
	});

	// Ajouter les styles personnalisés une seule fois
	if (!document.querySelector('#menu-item-styles')) {
		var style = document.createElement('style');
		style.id = 'menu-item-styles';
		style.innerHTML = 
			'#p-navigation li a .menu-item-text {' +
				'position: relative;' +
				'display: inline-block;' +
				'padding-left: 30px;' + /* Espace pour l'image de fond */ 
			'}' +
			'#p-navigation li a .menu-item-text::before {' +
				'content: "";' +
				'position: absolute;' +
				'left: 0;' +
				'top: 0;' +
				'width: 20px;' + /* Taille de l'icône */ 
				'height: 20px;' + /* Taille de l'icône */ 
				'background-size: contain;' +
				'background-repeat: no-repeat;' +
				'background-position: center;' +
				'opacity: 0.65;' + /* Opacité appliquée uniquement à l'image de fond */ 
				'background-image: var(--image-url);' + /* Utilisation de la variable CSS pour l'image */ 
			'}';
		document.head.appendChild(style);
	}
})();