Aller au contenu

MediaWiki:Vector.js

De Wikidébats, l'encyclopédie des débats et des arguments « pour » et « contre »

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).
  •  Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
/* Tout code JavaScript placé ici sera chargé pour les utilisateurs de l’habillage Vector */


/* Pour masquer/réafficher le menu latéral */
$(document).ready(function () {
	// Crée le bouton
	var $boutonPleinecran = $('<div>', {
		id: 'activer-pleinecran',
		class: 'bouton-vue'
	});

	// Ajoute le bouton à un conteneur (ici, à la fin du body)
	$('body').append($boutonPleinecran);

	// Exemple de gestion du clic pour modifier l'affichage
	$('#activer-pleinecran').on('click', function () {
		$('body').toggleClass('pleinecran-active');
	});
});

$(document).on('click', '#activer-pleinecran', function(event){
	var rightNavigation = document.querySelector('#right-navigation');
	var mwBody = document.querySelector(".mw-body");
	rightNavigation.style.marginRight = '0em';
	mwBody.style.marginRight = "0em";
	document.querySelector('#activer-pleinecran').setAttribute('id', 'desactiver-pleinecran');
});

$(document).on('click', '#desactiver-pleinecran', function(event){
	var rightNavigation = document.querySelector('#right-navigation');
	var mwBody = document.querySelector(".mw-body");
	rightNavigation.style.marginRight = '12em';
	mwBody.style.marginRight = "12em";
	document.querySelector('#desactiver-pleinecran').setAttribute('id', 'activer-pleinecran');
});

/* Pour générer un sommaire de niveau 1 dans le menu latéral */
$(document).ready(function() {
	// Copier le sommaire dans le menu latéral en supprimant les éléments toc-level-2
	var toc = $('#toc');
	var sidetoc = toc.clone().attr('id', 'sidetoc');
	sidetoc.find('.toclevel-2').remove();
	$('#content').after(sidetoc);
	$('#sidetoc').hide().addClass('supprimer-ariane');
});

/* Pour afficher ou masquer le sommaire latéral selon la position dans la page */
$(window).scroll(function() {
	var breadcrumb = $(document).find('#fil-ariane');
	var mwPanelElement = $('#mw-panel');
	var mwPanelOffset = mwPanelElement.offset().top + mwPanelElement.outerHeight();
	var scrollTop = $(window).scrollTop();

	if (mwPanelOffset < scrollTop) {
		if (breadcrumb.length) {
			var breadcrumbHeight = $('#fil-ariane').height();
			var sidetocOffset = breadcrumbHeight;
			$('#sidetoc').css('top', sidetocOffset + 'px');
			$('#sidetoc').show();
		} else {
			$('#sidetoc').show();
		}
	} else {
		$('#sidetoc').hide();
	}
});

/* Pour mettre en gras dans le sommaire latéral la rubrique dans laquelle se trouve le curseur */
$(document).ready(function() {
	var h2Elements = $('#bodyContent h2');
	var toctextElements = $('#sidetoc .toclevel-1 a .toctext');

	function updateActiveElement() {
		var activeElementIndex = -1;
		var mouseY = $(window).scrollTop() + $(window).height() / 2;

		h2Elements.each(function(index) {
			var currentH2 = $(this);
			var nextH2 = h2Elements.eq(index + 2);

			var currentH2Offset = currentH2.offset().top;
			var nextH2Offset = nextH2.length ? nextH2.offset().top : $(document).height();

			if (currentH2Offset <= mouseY && nextH2Offset > mouseY) {
				activeElementIndex = index;
				return false; // Sortir de la boucle each
			}
		});

		// Appliquer le style aux éléments du sommaire en fonction de l'élément actif
		toctextElements.removeClass('active');
		if (activeElementIndex !== -1) {
			toctextElements.eq(activeElementIndex).addClass('active');
		}
	}

	$(window).scroll(function() {
		updateActiveElement();
	});

	$(window).mousemove(function() {
		updateActiveElement();
	});
});

/* Pour déplacer la barre de recherche en haut à gauche de la page */
function moveSearchBar( $content ) {
	// Sélectionner l'élément #p-search
	var pSearchElement = document.getElementById('p-search');

	// Sélectionner l'élément #mw-page-base
	var mwPageBaseElement = document.getElementById('mw-page-base');

	// Vérifier si les deux éléments existent
	if (pSearchElement && mwPageBaseElement) {
		// Déplacer #p-search avant #mw-page-base
		mwPageBaseElement.parentNode.insertBefore(pSearchElement, mwPageBaseElement);
		// Ajouter display: block à #p-search
		pSearchElement.style.display = 'block';
	}
}
mw.hook( 'wikipage.content' ).add( moveSearchBar );


/* Pour déplacer le bouton Renommer après le titre de la page */
function renameButton( $content ) {
	var $span = $content.find( '#bouton-renommer' );
	if ( $span.length ) {
		$span.css('display', 'inline');
		$( '.firstHeading' ).append( $span );
		$span.find('a').text(''); // Supprimer le texte à l'intérieur du lien
	}
}
mw.hook( 'wikipage.content' ).add( renameButton );

/* Pour créer un menu déroulant dans la barre personnelle */
function personalDropdown() {
	// Toujours forcer l’affichage inline du bloc #p-personal
	var personalBlock = document.getElementById('p-personal');
	if (personalBlock) {
		personalBlock.style.display = 'inline';
	}

	// Vérifier si l’utilisateur est connecté ou anonyme
	var userPage = document.getElementById('pt-userpage');
	if (userPage) {
		// Cas utilisateur connecté
		var ul = document.querySelector('.vector-menu-content-list');
		var startElement = document.getElementById('pt-mytalk');
		var endElement = document.getElementById('pt-logout');

		var dropdownLi = document.createElement('li');
		dropdownLi.style.position = 'relative';
		dropdownLi.style.paddingTop = '2px';

		var dropdownLink = document.createElement('a');
		dropdownLink.href = '#';
		dropdownLink.style.cursor = 'pointer';
		dropdownLink.style.height = '24px';
		dropdownLink.style.display = 'inline-block';

		var avatarSpan = document.createElement('span');
		avatarSpan.style.backgroundImage = 'linear-gradient(transparent,transparent),url(/w/skins/Vector/resources/skins.vector.styles/images/user-avatar.svg?b7f58)';
		avatarSpan.style.backgroundRepeat = 'no-repeat';
		avatarSpan.style.width = '24px';
		avatarSpan.style.height = '26px';
		avatarSpan.style.display = 'inline-block';
		avatarSpan.style.opacity = '0.85';

		var arrowSpan = document.createElement('span');
		arrowSpan.style.backgroundImage = 'linear-gradient(transparent,transparent),url(/w/skins/Vector/resources/skins.vector.styles/images/arrow-down.svg?e7827)';
		arrowSpan.style.height = '20px';
		arrowSpan.style.width = '12px';
		arrowSpan.style.display = 'inline-block';
		arrowSpan.style.backgroundRepeat = 'no-repeat';
		arrowSpan.style.opacity = '0.85';

		dropdownLink.appendChild(avatarSpan);
		dropdownLink.appendChild(arrowSpan);

		dropdownLi.appendChild(dropdownLink);

		var dropdownMenu = document.createElement('ul');
		dropdownMenu.style.display = 'none';
		dropdownMenu.className = 'pt-dropdown';

		var currentElement = startElement;
		while (currentElement && currentElement !== endElement.nextElementSibling) {
			var nextElement = currentElement.nextElementSibling;
			dropdownMenu.appendChild(currentElement);
			currentElement = nextElement;
		}

		dropdownLi.appendChild(dropdownMenu);

		var notificationsNotice = document.getElementById('pt-notifications-notice');
		notificationsNotice.parentNode.insertBefore(dropdownLi, notificationsNotice.nextSibling);

		dropdownLink.onclick = function(e) {
			e.preventDefault();
			if (dropdownMenu.style.display === 'block') {
				dropdownMenu.style.display = 'none';
			} else {
				dropdownMenu.style.display = 'block';
			}
		};

		document.addEventListener('click', function(e) {
			if (!dropdownLi.contains(e.target)) {
				dropdownMenu.style.display = 'none';
			}
		});
	} else {
		// Cas utilisateur anonyme
		var ul = document.querySelector('.vector-menu-content-list');
		var startElement = document.getElementById('pt-anontalk');
		var endElement = document.getElementById('pt-login');

		var dropdownLi = document.createElement('li');
		dropdownLi.style.position = 'relative';
		dropdownLi.style.paddingTop = '2px';

		var dropdownLink = document.createElement('a');
		dropdownLink.href = '#';
		dropdownLink.style.cursor = 'pointer';
		dropdownLink.style.height = '24px';
		dropdownLink.style.display = 'inline-block';

		var avatarSpan = document.createElement('span');
		avatarSpan.style.backgroundImage = 'linear-gradient(transparent,transparent),url(/w/skins/Vector/resources/skins.vector.styles/images/user-avatar.svg?b7f58)';
		avatarSpan.style.backgroundRepeat = 'no-repeat';
		avatarSpan.style.height = '21px';
		avatarSpan.style.width = '24px';
		avatarSpan.style.display = 'inline-block';
		avatarSpan.style.opacity = '0.85';

		var arrowSpan = document.createElement('span');
		arrowSpan.style.backgroundImage = 'linear-gradient(transparent,transparent),url(/w/skins/Vector/resources/skins.vector.styles/images/arrow-down.svg?e7827)';
		arrowSpan.style.height = '21px';
		arrowSpan.style.width = '12px';
		arrowSpan.style.display = 'inline-block';
		arrowSpan.style.backgroundRepeat = 'no-repeat';
		arrowSpan.style.verticalAlign = 'middle';
		arrowSpan.style.opacity = '0.85';

		dropdownLink.appendChild(avatarSpan);
		dropdownLink.appendChild(arrowSpan);

		dropdownLi.appendChild(dropdownLink);

		var dropdownMenu = document.createElement('ul');
		dropdownMenu.style.display = 'none';
		dropdownMenu.className = 'pt-dropdown';

		var currentElement = startElement;
		while (currentElement && currentElement !== endElement.nextElementSibling) {
			var nextElement = currentElement.nextElementSibling;
			dropdownMenu.appendChild(currentElement);
			currentElement = nextElement;
		}

		dropdownLi.appendChild(dropdownMenu);

		var anonUserPage = document.getElementById('pt-anonuserpage');
		anonUserPage.parentNode.insertBefore(dropdownLi, anonUserPage.nextSibling);

		dropdownLink.onclick = function(e) {
			e.preventDefault();
			if (dropdownMenu.style.display === 'block') {
				dropdownMenu.style.display = 'none';
			} else {
				dropdownMenu.style.display = 'block';
			}
		};

		document.addEventListener('click', function(e) {
			if (!dropdownLi.contains(e.target)) {
				dropdownMenu.style.display = 'none';
			}
		});
	}
}
personalDropdown();

/* Pour créer un menu pour les langues dans la barre personnelle */
(function () {
	function buildLangMenu() {
		var $userPageItem = $('#pt-userpage');
		if (!$userPageItem.length) {
			return;
		}
		// ✅ Si aucun lien interlangue, on arrête tout
		/* Suppression du lien interwiki français (inutile) */
		var $FrenchInterwikiLink = $('li.interlanguage-link.interwiki-fr');
		if ($FrenchInterwikiLink.length > 0) {
			$FrenchInterwikiLink.remove();
		}
		var $interwikiLinks = $('li.interlanguage-link');
		if ($interwikiLinks.length === 0) {
			clearInterval(waitForReady);
			return;
		}
		
		/* -------- Construction du bloc -------- */
		var $menuWrapper = $('<div>').addClass('menu-langues');

		var $icon = $('<span>').addClass('menu-langues-icon');
		var $toggle = $('<span>')
			.addClass('menu-langues-toggle')
			.text('Français');

		// Remplace ul par un div
		var $dropdown = $('<div>')
			.addClass('languages-dropdown')
			.css('display', 'none');

		var $header = $('<div>')
			.addClass('langues-disponibles')
			.text($interwikiLinks.length > 0 ? 'Autres langues' : 'Aucune autre langue disponible')
			.css('cursor', 'default');

		$dropdown.append($header);

		// Nouveau <ul> pour y insérer les liens interlangues
		if ($interwikiLinks.length > 0) {
			var $list = $('<ul>');
			$interwikiLinks.appendTo($list);
			$dropdown.append($list);
		}

		/* -------- Bouton « Modifier les liens interlangues » -------- */
		var $editButton = $('#bouton-modifier-interlangue');
		if ($editButton.length) {
			var $link = $editButton.find('a').first();
			if ($link.length) {
				var $newLink = $link.clone()
					.text('Modifier les liens interlangues')
					.css({
						color: 'inherit',
						textDecoration: 'none',
						cursor: 'pointer'
					});

				$('<div>')
					.addClass('modifier-langues')
					.append($newLink)
					.appendTo($dropdown);
			}
			$editButton.remove();
		}

		/* -------- Assemblage final -------- */
		$menuWrapper
			.append($icon)
			.append($toggle)
			.append($dropdown);

		$userPageItem.before($menuWrapper);

		/* -------- Comportement déroulant -------- */
		$menuWrapper.on('click', function (e) {
			e.stopPropagation();
			$dropdown.toggle();
			$menuWrapper.toggleClass('open');
		});

		$(document).on('click', function () {
			$dropdown.hide();
			$menuWrapper.removeClass('open');
		});

		clearInterval(waitForReady);
	}

	var waitForReady = setInterval(buildLangMenu, 300);
})();
Récupérée de "https://dev.wikidebates.org/w/index.php?title=MediaWiki:Vector.js&oldid=185500"