MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus Phoenix-Larp Wiki

Keine Bearbeitungszusammenfassung
VE-Icon: robustere Suche der Hilfe-Werkzeuggruppe (aria-label ODER title)
 
(12 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
/* Das folgende JavaScript wird für alle Benutzer geladen. */
/* Das Burger-Menü-JavaScript, der Admin-Link zu den Spezialseiten und die 'Anmelden'-Beschriftung für abgemeldete Besucher wurden in den PhoenixSkin-Fork übernommen (resources/phoenix-custom.js) und hier entfernt, da PhoenixSkin seit 2026-09-08 der Standard-Skin des Wikis ist. */
mw.loader.using(['mediawiki.util']).done(function () {
  // Nur auf schmalen Screens aktiv
  if (!window.matchMedia('(max-width: 768px)').matches) return;


  // Burger-Button einfügen (mit ARIA)
/* Hinweis auf den Redaktionsleitfaden im Bearbeiten-Modus. Bewusst hier
  var $btn = $('<button class="mw-burger" aria-label="Menü" aria-controls="column-navigation" aria-expanded="false"><span></span></button>');
  in Common.js statt im Skin hinterlegt, damit Text/Ziel-Seite/Optik
  $('body').append($btn);
  direkt im Wiki gepflegt werden koennen, ohne den Skin anzufassen.


  // Overlay zum Schließen
  - Klassischer Wikitext-Editor: deutliche Hinweisbox mit Warnsymbol
  var $overlay = $('<div class="nav-overlay" tabindex="-1" aria-hidden="true"></div>');
    UNTERHALB des Quelltext-Feldes (nicht ueber dem ganzen Formular).
  $('body').append($overlay);
  - VisualEditor: das gleiche Warnsymbol als kleines Icon oben in der
    Werkzeugleiste, direkt vor dem Hilfe-("?")-Knopf. */
( function () {
var WARNING_ICON = '';


  function closeMenu() {
function insertClassicNotice( $editForm ) {
    $('body').removeClass('nav-open');
if ( document.getElementById( 'phoenix-editnotice-leitfaden' ) ) {
    $btn.attr('aria-expanded', 'false');
return;
  }
}
  function toggleMenu() {
var $anchor = $editForm.find( '#wpTextbox1' );
    var open = !$('body').hasClass('nav-open');
if ( !$anchor.length ) {
    $('body').toggleClass('nav-open', open);
$anchor = $editForm.find( 'textarea' ).first();
    $btn.attr('aria-expanded', String(open));
}
  }
if ( !$anchor.length ) {
return;
}
// Falls CodeMirror aktiv ist, haengt es seinen eigentlichen
// Editor-Container direkt hinter die (dann versteckte) Textarea -
// den Hinweis in dem Fall dahinter statt davor einfuegen.
var $cm = $anchor.next( '.cm-editor, .CodeMirror' );
var $insertAfter = $cm.length ? $cm : $anchor;


  $btn.on('click', toggleMenu);
var href = mw.util.getUrl( 'Phoenix_Larp_Wiki:Wiki-Projekt/Redaktionsleitfaden' );
  $overlay.on('click', closeMenu);
var $notice = $( '<div>', { id: 'phoenix-editnotice-leitfaden' } ).append(
  $(document).on('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });
$( '<span>', { 'class': 'phoenix-editnotice-icon', 'aria-hidden': 'true' } ).text( WARNING_ICON ),
$( '<span>', { 'class': 'phoenix-editnotice-text' } ).append(
document.createTextNode( 'Bitte beachte beim Bearbeiten den ' ),
$( '<a>', { href: href, text: 'Redaktionsleitfaden' } ),
document.createTextNode( '.' )
)
);
$insertAfter.after( $notice );
}


  // Schließt das Menü, wenn Viewport wieder breit wird
// Sucht die "Hilfe"-Werkzeuggruppe in der VisualEditor-Werkzeugleiste.
  window.matchMedia('(min-width: 769px)').addEventListener('change', function (mql) {
// OOUI setzt den Gruppentitel je nach Version/Aufbau entweder als
    if (mql.matches) closeMenu();
// aria-label oder als title-Attribut - daher werden beide geprueft,
  });
// statt uns auf eine bestimmte interne CSS-Klasse zu verlassen.
});
function findHelpGroup() {
var $bar = $( '.oo-ui-toolbar-bar' );
if ( !$bar.length ) {
return $();
}
return $bar.find( '.oo-ui-toolGroup, .oo-ui-tool' ).filter( function () {
var $el = $( this );
var label = ( $el.attr( 'aria-label' ) || $el.attr( 'title' ) || '' ).replace( /\s+/g, ' ' ).trim();
return label === 'Hilfe';
} ).first();
}


function insertVeIcon() {
if ( document.getElementById( 'phoenix-ve-editnotice-icon' ) ) {
return true;
}
var $help = findHelpGroup();
if ( !$help.length ) {
return false;
}
var href = mw.util.getUrl( 'Phoenix_Larp_Wiki:Wiki-Projekt/Redaktionsleitfaden' );
var $icon = $( '<a>', {
id: 'phoenix-ve-editnotice-icon',
href: href,
target: '_blank',
rel: 'noopener',
title: 'Redaktionsleitfaden beachten',
'aria-label': 'Redaktionsleitfaden beachten',
text: WARNING_ICON
} );
$help.before( $icon );
return true;
}


// Klassischer Wikitext-Editor: Kernhook, der beim Anzeigen des
// Bearbeitungsformulars feuert (auch bei AJAX-Nachladen, z. B. beim
// Bearbeiten einzelner Abschnitte).
mw.hook( 'wikipage.editform' ).add( function ( $editForm ) {
insertClassicNotice( $editForm );
} );


 
// VisualEditor: die Werkzeugleiste wird nach dem Aktivierungs-Hook
 
// teils noch asynchron fertig aufgebaut, daher kurz nachpruefen
mw.loader.using(['mediawiki.util']).done(function () {
// (max. ca. 8 Sekunden).
  function ensureUserToolsClonePortlet() {
mw.hook( 've.activationComplete' ).add( function () {
    var $srcPortlet = $('#p-usertools');
var tries = 0;
    var $srcBody    = $srcPortlet.find('.mw-portlet-body');
var iv = setInterval( function () {
    if (!$srcBody.length) return null;
tries++;
 
if ( insertVeIcon() || tries > 32 ) {
    // Ziel: der linke Menü-Container (Anisa: #mw-navigation in #column-navigation)
clearInterval( iv );
    var $nav = $('#mw-navigation');
}
    if (!$nav.length) $nav = $('#column-navigation'); // Fallback
}, 250 );
 
} );
    // Wenn unser Klon-Portlet schon existiert: referenzieren
}() );
    var $clonePortlet = $('#p-usertools-left');
    if (!$clonePortlet.length) {
      // Überschrift vom Original übernehmen (fällt z.B. "Werkzeuge", "Benutzer" etc.)
      var headingText = $.trim($srcPortlet.children('h3').first().text()) || 'Benutzer';
 
      // Neues Portlet am ENDE der vorhandenen Portlets anhängen -> „unter die bisherigen Menüpunkte“
      $clonePortlet = $(
        '<div id="p-usertools-left" class="mw-portlet" role="navigation" aria-label="' + headingText + '">' +
          '<h3>' + $('<div>').text(headingText).html() + '</h3>' +
          '<div class="mw-portlet-body"></div>' +
        '</div>'
      );
 
      // exakt ans Ende der bestehenden Portlets setzen
      // (falls Anisa weitere Wrapper hat, hängt .append() automatisch nach den letzten Menüpunkten)
      $nav.append($clonePortlet);
    }
    return $clonePortlet.find('.mw-portlet-body');
  }
 
  function cloneUserToolsIntoLeftMenu() {
    var $srcBody = $('#p-usertools .mw-portlet-body');
    if (!$srcBody.length) return;
 
    var $dstBody = ensureUserToolsClonePortlet();
    if (!$dstBody || !$dstBody.length) return;
 
    // Ziel leeren, dann frische Kopie erzeugen
    $dstBody.empty();
 
    // Nur die direkten Kinder klonen, IDs entfernen, damit es keine Duplikate gibt
    $srcBody.children().each(function () {
      var $clone = $(this).clone(true, true);
      $clone.find('[id]').addBack('[id]').removeAttr('id');
      $dstBody.append($clone);
    });
  }
 
  function apply() {
    cloneUserToolsIntoLeftMenu();
  }
 
  // initial + bei Soft-Navigation/Ajax
  apply();
  mw.hook('wikipage.content').add(apply);
 
  // Aktualisieren, wenn sich das Original-Portlet dynamisch ändert
  var srcNode = document.querySelector('#p-usertools .mw-portlet-body');
  if (srcNode && 'MutationObserver' in window) {
    new MutationObserver(function () { cloneUserToolsIntoLeftMenu(); })
      .observe(srcNode, { childList: true, subtree: true });
  }
});

Aktuelle Version vom 9. September 2026, 05:39 Uhr

/* Das Burger-Menü-JavaScript, der Admin-Link zu den Spezialseiten und die 'Anmelden'-Beschriftung für abgemeldete Besucher wurden in den PhoenixSkin-Fork übernommen (resources/phoenix-custom.js) und hier entfernt, da PhoenixSkin seit 2026-09-08 der Standard-Skin des Wikis ist. */

/* Hinweis auf den Redaktionsleitfaden im Bearbeiten-Modus. Bewusst hier
   in Common.js statt im Skin hinterlegt, damit Text/Ziel-Seite/Optik
   direkt im Wiki gepflegt werden koennen, ohne den Skin anzufassen.

   - Klassischer Wikitext-Editor: deutliche Hinweisbox mit Warnsymbol
     UNTERHALB des Quelltext-Feldes (nicht ueber dem ganzen Formular).
   - VisualEditor: das gleiche Warnsymbol als kleines Icon oben in der
     Werkzeugleiste, direkt vor dem Hilfe-("?")-Knopf. */
( function () {
	var WARNING_ICON = '⚠';

	function insertClassicNotice( $editForm ) {
		if ( document.getElementById( 'phoenix-editnotice-leitfaden' ) ) {
			return;
		}
		var $anchor = $editForm.find( '#wpTextbox1' );
		if ( !$anchor.length ) {
			$anchor = $editForm.find( 'textarea' ).first();
		}
		if ( !$anchor.length ) {
			return;
		}
		// Falls CodeMirror aktiv ist, haengt es seinen eigentlichen
		// Editor-Container direkt hinter die (dann versteckte) Textarea -
		// den Hinweis in dem Fall dahinter statt davor einfuegen.
		var $cm = $anchor.next( '.cm-editor, .CodeMirror' );
		var $insertAfter = $cm.length ? $cm : $anchor;

		var href = mw.util.getUrl( 'Phoenix_Larp_Wiki:Wiki-Projekt/Redaktionsleitfaden' );
		var $notice = $( '<div>', { id: 'phoenix-editnotice-leitfaden' } ).append(
			$( '<span>', { 'class': 'phoenix-editnotice-icon', 'aria-hidden': 'true' } ).text( WARNING_ICON ),
			$( '<span>', { 'class': 'phoenix-editnotice-text' } ).append(
				document.createTextNode( 'Bitte beachte beim Bearbeiten den ' ),
				$( '<a>', { href: href, text: 'Redaktionsleitfaden' } ),
				document.createTextNode( '.' )
			)
		);
		$insertAfter.after( $notice );
	}

	// Sucht die "Hilfe"-Werkzeuggruppe in der VisualEditor-Werkzeugleiste.
	// OOUI setzt den Gruppentitel je nach Version/Aufbau entweder als
	// aria-label oder als title-Attribut - daher werden beide geprueft,
	// statt uns auf eine bestimmte interne CSS-Klasse zu verlassen.
	function findHelpGroup() {
		var $bar = $( '.oo-ui-toolbar-bar' );
		if ( !$bar.length ) {
			return $();
		}
		return $bar.find( '.oo-ui-toolGroup, .oo-ui-tool' ).filter( function () {
			var $el = $( this );
			var label = ( $el.attr( 'aria-label' ) || $el.attr( 'title' ) || '' ).replace( /\s+/g, ' ' ).trim();
			return label === 'Hilfe';
		} ).first();
	}

	function insertVeIcon() {
		if ( document.getElementById( 'phoenix-ve-editnotice-icon' ) ) {
			return true;
		}
		var $help = findHelpGroup();
		if ( !$help.length ) {
			return false;
		}
		var href = mw.util.getUrl( 'Phoenix_Larp_Wiki:Wiki-Projekt/Redaktionsleitfaden' );
		var $icon = $( '<a>', {
			id: 'phoenix-ve-editnotice-icon',
			href: href,
			target: '_blank',
			rel: 'noopener',
			title: 'Redaktionsleitfaden beachten',
			'aria-label': 'Redaktionsleitfaden beachten',
			text: WARNING_ICON
		} );
		$help.before( $icon );
		return true;
	}

	// Klassischer Wikitext-Editor: Kernhook, der beim Anzeigen des
	// Bearbeitungsformulars feuert (auch bei AJAX-Nachladen, z. B. beim
	// Bearbeiten einzelner Abschnitte).
	mw.hook( 'wikipage.editform' ).add( function ( $editForm ) {
		insertClassicNotice( $editForm );
	} );

	// VisualEditor: die Werkzeugleiste wird nach dem Aktivierungs-Hook
	// teils noch asynchron fertig aufgebaut, daher kurz nachpruefen
	// (max. ca. 8 Sekunden).
	mw.hook( 've.activationComplete' ).add( function () {
		var tries = 0;
		var iv = setInterval( function () {
			tries++;
			if ( insertVeIcon() || tries > 32 ) {
				clearInterval( iv );
			}
		}, 250 );
	} );
}() );