MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */


/**
 * MediaWiki - Automatisches Einfügen von <div class="figure"> zwischen IMG-Kommentaren
 * Verwende dies in: MediaWiki:Common.js
 */

( function() {
  'use strict';

  // Funktion ausführen, wenn DOM bereit ist
  if ( document.readyState === 'loading' ) {
    document.addEventListener( 'DOMContentLoaded', wrapImagesInFigure );
  } else {
    wrapImagesInFigure();
  }

  /**
   * Findet <!-- START IMG --> und <!-- END IMG --> Kommentare
   * und wrapped den Inhalt dazwischen in <div class="figure">
   */
  function wrapImagesInFigure() {
    var walker = document.createTreeWalker(
      document.body,
      NodeFilter.SHOW_COMMENT,
      null,
      false
    );

    var startComment = null;
    var node;

    while ( node = walker.nextNode() ) {
      // Prüfe auf START IMG Kommentar
      if ( node.nodeValue.trim() === 'START IMG' ) {
        startComment = node;
      }
      // Prüfe auf END IMG Kommentar
      else if ( node.nodeValue.trim() === 'END IMG' && startComment ) {
        wrapContentBetweenComments( startComment, node );
        startComment = null;
      }
    }
  }

  /**
   * Wrapped Inhalte zwischen zwei Kommentaren in <div class="figure">
   */
  function wrapContentBetweenComments( startComment, endComment ) {
    var figureDiv = document.createElement( 'div' );
    figureDiv.className = 'figure';

    var currentNode = startComment.nextSibling;
    var nodesToMove = [];

    // Sammle alle Knoten zwischen START und END Kommentar
    while ( currentNode && currentNode !== endComment ) {
      nodesToMove.push( currentNode );
      currentNode = currentNode.nextSibling;
    }

    // Verschiebe alle Knoten in das figure-div
    nodesToMove.forEach( function( node ) {
      figureDiv.appendChild( node );
    });

    // Füge figure-div nach dem START-Kommentar ein
    startComment.parentNode.insertBefore( figureDiv, startComment.nextSibling );
  }

})();