MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus Phoenix-Larp Wiki

Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
VE-Icon: robustere Suche der Hilfe-Werkzeuggruppe (aria-label ODER title)
 
(15 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 () {
var bp = '(max-width: 768px)';
  var mql = window.matchMedia(bp);


  // Zustände merken
/* Hinweis auf den Redaktionsleitfaden im Bearbeiten-Modus. Bewusst hier
  var moved = false;
  in Common.js statt im Skin hinterlegt, damit Text/Ziel-Seite/Optik
  var $srcBody = null;          // #p-usertools .mw-portlet-body (Quelle)
  direkt im Wiki gepflegt werden koennen, ohne den Skin anzufassen.
  var $dstBody = null;          // #p-usertools-mobile .mw-portlet-body (Ziel im Menü)
  var $movedItems = $();        // jQuery-Collection der verschobenen Kindelemente
  var placeholder = null;      // Platzhalter-Kommentar an ursprünglicher Position


  function getOrCreateDestination() {
  - Klassischer Wikitext-Editor: deutliche Hinweisbox mit Warnsymbol
    // Menü-Spalte (Off-Canvas) – in Anisa ist das die linke Spalte
    UNTERHALB des Quelltext-Feldes (nicht ueber dem ganzen Formular).
    var $col = $('#column-navigation');
  - VisualEditor: das gleiche Warnsymbol als kleines Icon oben in der
    if (!$col.length) return null;
    Werkzeugleiste, direkt vor dem Hilfe-("?")-Knopf. */
( function () {
var WARNING_ICON = '';


    // Bevorzugt innerhalb von #mw-navigation arbeiten, wenn vorhanden
function insertClassicNotice( $editForm ) {
    var $mwNav = $('#mw-navigation');
if ( document.getElementById( 'phoenix-editnotice-leitfaden' ) ) {
    var $container = $mwNav.length ? $mwNav : $col;
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;


    // Ziel-Portlet anlegen, falls nicht vorhanden
var href = mw.util.getUrl( 'Phoenix_Larp_Wiki:Wiki-Projekt/Redaktionsleitfaden' );
    var $portlet = $('#p-usertools-mobile');
var $notice = $( '<div>', { id: 'phoenix-editnotice-leitfaden' } ).append(
    if (!$portlet.length) {
$( '<span>', { 'class': 'phoenix-editnotice-icon', 'aria-hidden': 'true' } ).text( WARNING_ICON ),
      $portlet = $(
$( '<span>', { 'class': 'phoenix-editnotice-text' } ).append(
        '<div id="p-usertools-mobile" class="mw-portlet">' +
document.createTextNode( 'Bitte beachte beim Bearbeiten den ' ),
          '<h3>Benutzer</h3>' +
$( '<a>', { href: href, text: 'Redaktionsleitfaden' } ),
          '<div class="mw-portlet-body"></div>' +
document.createTextNode( '.' )
        '</div>'
)
      );
);
      // Sinnvoll weit oben einfügen
$insertAfter.after( $notice );
      $container.prepend($portlet);
}
    }
    return $portlet.find('.mw-portlet-body');
  }


  function moveBodyChildrenIntoMenu() {
// Sucht die "Hilfe"-Werkzeuggruppe in der VisualEditor-Werkzeugleiste.
    if (moved) return;
// 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();
}


    $srcBody = $('#p-usertools .mw-portlet-body');
function insertVeIcon() {
    if (!$srcBody.length) return; // Quelle existiert nicht → nichts tun
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;
}


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


    // Kinder der Source-Body ermitteln (nur echte Kindelemente, Whitespace vermeiden)
// VisualEditor: die Werkzeugleiste wird nach dem Aktivierungs-Hook
    var children = $srcBody.contents().filter(function () {
// teils noch asynchron fertig aufgebaut, daher kurz nachpruefen
      // Knoten: ELEMENT_NODE (1) oder Text mit sichtbarem Inhalt
// (max. ca. 8 Sekunden).
      return this.nodeType === 1 || (this.nodeType === 3 && this.nodeValue.trim().length > 0);
mw.hook( 've.activationComplete' ).add( function () {
    });
var tries = 0;
    if (!children.length) return; // nichts zu verschieben
var iv = setInterval( function () {
 
tries++;
    // Platzhalter an der Originalposition, um die spätere Rückkehr zu erleichtern
if ( insertVeIcon() || tries > 32 ) {
    placeholder = document.createComment('p-usertools-body-placeholder');
clearInterval( iv );
    $srcBody[0].appendChild(placeholder);
}
 
}, 250 );
    // Inhalte abklemmen und ins Ziel hängen (nicht klonen, Zustände behalten)
} );
    $movedItems = $(children).detach();
}() );
    $dstBody.append($movedItems);
 
    moved = true;
  }
 
  function moveBackToOriginalBody() {
    if (!moved) return;
    if (!$srcBody || !$srcBody.length || !$movedItems.length) {
      // Failsafe: Reset interner Flags
      moved = false;
      $movedItems = $();
      placeholder = null;
      return;
    }
 
    // Zurück in die ursprüngliche Body
    $movedItems.detach().appendTo($srcBody);
 
    // Ziel-Portlet optional aufräumen, wenn leer
    if ($dstBody && $dstBody.length && !$dstBody.children().length) {
      var $portlet = $dstBody.closest('#p-usertools-mobile');
      if ($portlet.length) $portlet.remove();
    }
 
    // Platzhalter entfernen
    if (placeholder && placeholder.parentNode) {
      placeholder.parentNode.removeChild(placeholder);
    }
 
    // Reset
    moved = false;
    $movedItems = $();
    placeholder = null;
    $dstBody = null;
  }
 
  function apply() {
    if (mql.matches) {
      // Mobile → nur Body-Inhalte verschieben
      moveBodyChildrenIntoMenu();
    } else {
      // Desktop → zurückschieben
      moveBackToOriginalBody();
    }
  }
 
  // initial und bei Breakpoint-Wechsel
  apply();
  if (mql.addEventListener) mql.addEventListener('change', apply);
  else mql.addListener(apply);
 
  // Bei AJAX/Soft-Navigation (z. B. nach Seitenwechsel per PJAX) erneut anwenden
  mw.hook('wikipage.content').add(apply); 
 
  // Nur auf schmalen Screens aktiv
  if (!window.matchMedia('(max-width: 768px)').matches) return;
 
  // Burger-Button einfügen (mit ARIA)
  var $btn = $('<button class="mw-burger" aria-label="Menü" aria-controls="column-navigation" aria-expanded="false"><span></span></button>');
  $('body').append($btn);
 
  // Overlay zum Schließen
  var $overlay = $('<div class="nav-overlay" tabindex="-1" aria-hidden="true"></div>');
  $('body').append($overlay);
 
  function closeMenu() {
    $('body').removeClass('nav-open');
    $btn.attr('aria-expanded', 'false');
  }
  function toggleMenu() {
    var open = !$('body').hasClass('nav-open');
    $('body').toggleClass('nav-open', open);
    $btn.attr('aria-expanded', String(open));
  }
 
  $btn.on('click', toggleMenu);
  $overlay.on('click', closeMenu);
  $(document).on('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });
 
  // Schließt das Menü, wenn Viewport wieder breit wird
  window.matchMedia('(min-width: 769px)').addEventListener('change', function (mql) {
    if (mql.matches) closeMenu();
  });
});

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 );
	} );
}() );