Benutzer:StipenTreublatt/Anpassungen über javascript

aus Wiki Aventurica, dem DSA-Fanprojekt
Wechseln zu: Navigation, Suche

Grundsätzliches

Bei Anpassungen über javascript muss man bedenken, dass Nutzer javascript deaktiviert haben können. Man sollte daher nicht Teile der Benutzeroberfläche (z.B. einen wichtigen Link) per CSS entfernen, wenn man vor hat, diese Teile an anderer Stelle per javascript wieder einzubauen. In einem solchen Fall sollte man das Entfernen an der ursprünglichen Stelle auch per javascript erledigen lassen, idealerweise nach dem Einfügen an der neuen Stelle.

Meist ist es auch sinnvoller, nicht direkt javascript zu verwenden, sondern die von jQuery oder MediaWiki bereitgestellten Funktionen zu verwenden.

Dokumentationen: javascript, jQuery, MediaWiki
Auswahl von Elementen bei jQuery: über id: "#element", über class: ".element"
Zum Debuggen hilfreich: console.log( "Test1" );

Element aus Infobox entfernen

Ist man der Meinung, dass die Überschrift der Infobox zu viel Platz wegnimmt, kann man sie wie folgt entfernen (angewendet in MediaWiki:Gadget-MinimalDesign.js).

Verwendete Funktionen:
$( "table.infobox" ).find( "tr" ).filter( ":first" ).remove(); //Überschrift der Infoboxen entfernen

Abschnittsüberschrift entfernen

Abschnittsüberschriften enthalten immer ein "span"-Element mit der ID des Abschnittsnamens. Um das Überschriftenelement komplett zu entfernen, muss man daher von diesem "span"-Element auf das Elternelement zugreifen (angewendet in MediaWiki:Gadget-MinimalDesign.js).

Verwendete Funktionen:
$( "#Kurzbeschreibung" ).parent().remove(); //Überschrift "Kurzbeschreibung" entfernen

Erstellen eines neuen Links in der Benutzeroberfläche

Hier am Beispiel eines "Cache leeren"-Links, der zu den Seitenreitern hinzugefügt wird; angewendet in MediaWiki:Common.js, da auch anonyme Nutzer die Möglichkeit haben sollen, diese Funktion zu nutzen (z.B. zum Auffrischen von automatischen Listen; die Funktion ist so ausgelegt, dass sie nicht von Bots ausgelöst werden sollte, siehe Manual:Purge).

Verwendete Funktionen:
/**
 * Fügt den Seitenreitern einen "Cache leeren"-Link hinzu
 *
 * @source https://www.mediawiki.org/wiki/Snippets/Purge_action
 * @revision 2015-02-10, adapted for Wiki Aventurica
 */
$( function () {
    if ( !$( '#ca-purge' ).length && mw.config.get( 'wgIsArticle' ) ) {
        mw.util.addPortletLink(
            mw.config.get( 'skin' ) === 'vector' ? 'p-views' : 'p-cactions',
            mw.util.getUrl( null, { action: 'purge', forcelinkupdate: true } ),
            '*',
            'ca-purge',
            'Servercache dieser Seite leeren',
            '*'
        );
    }
} );

Weiteres Beispiel: Einfügen eines eigenen "Sandkasten"-Links zu den persönlichen Links; angewendet in MediaWiki:Group-user.js, damit jeder angemeldete Nutzer einen Direktlink auf eine eigene Seite zum Experimentieren hat.

$( function () {
  mw.util.addPortletLink(
    'p-personal',
    mw.util.getUrl( 'Special:MyPage/Sandkasten' ),
    'Sandkasten',
    'pt-mysandbox',
    'Persönliche Seite zum Experimentieren',
    null,
    '#pt-preferences'
  );
});

Hinzufügen von Links in der "Links auf diese Seite"-Liste

Möchte man die "Links auf diese Seite"-Liste (auch mit [[wlh:Seitenname]] verlinkbar) einer Seite schnell leeren (z.B. weil die Seite gelöscht werden soll), ist es hilfreich, direkte Bearbeitungs- und Löschlinks auf die betroffenen Seiten angezeigt zu bekommen; dies wird auf MediaWiki:Common.js angewendet.

/**
 * Special:WhatLinksHere edit, history and delete links
 *
 * Adds "edit", "hist" and "delete" link to [[Special:WhatLinksHere]]
 *
 * @source: https://www.mediawiki.org/wiki/Snippets/Special:WhatLinksHere_action_links
 * @rev: 2015-07-08, adapted for Wiki Aventurica
 */
$( '#mw-whatlinkshere-list li' ).each( function() {
  var url = mw.config.get( 'wgScript' ) + '?title=' + encodeURIComponent( $( 'a:first', this ).text() ) + '&action=';
  //if #ca-delete exists, user should be allowed to delete
  if ($( "#ca-delete" ).length) {
    $( '.mw-whatlinkshere-tools a:last', this ).after( $( '<a>' ).attr( 'href', url + 'delete' ).text( 'Löschen' ) ).after( ' | ' );
  }
  $( '.mw-whatlinkshere-tools a:last', this )
    .after( $( '<a>' ).attr( 'href', url + 'history' ).text( 'Versionen' ) ).after( ' | ' )
    .after( $( '<a>' ).attr( 'href', url + 'edit' ).text( 'Bearbeiten' ) ).after( ' | ' );
});

Einfaches Verschieben eines Links in der Benutzeroberfläche

Hier am Beispiel des Spezial:Hochladen-Links, der von den Werkzeugen in der Seitenleiste in die persönlichen Links direkt vor den "Abmelden"-Link verschoben wird; angewendet in MediaWiki:Group-user.js, da nur angemeldete Benutzer hochladen dürfen.

Entfernen und Neuerstellen
Verwendete Funktionen:
$( function () {
  mw.util.addPortletLink(
    'p-personal',
    mw.util.getUrl( 'Special:Upload' ),
    'Datei hochladen',
    'pt-upload',
    'Datei ins Wiki hochladen',
    null,
    '#pt-logout'
  );
});
 
$( "#t-upload" ).remove();
Direktes Verschieben

Die jQuery-Funktion after verschiebt das ausgewählte Element, wenn nur ein Zielort angegeben wird.

$( "#pt-mycontris" ).after( $( "#t-upload" ) );

Komplizierter kann man auch mit der appendTo-Funktion vorgehen, die ebenfalls das ausgewählte Element verschiebt, wenn nur ein Zielort angegeben wird.

$( "#t-upload" ).appendTo( $( "#p-personal" ).children("ul") );
$( "#pt-logout" ).appendTo( $( "#p-personal" ).children("ul") );

Tabs statt Menü in Vector

Wenn man einen Link aus dem ausklappbaren Vector-Menü ("#p-cactions") in die Seitenreiter ("#p-views") verschieben will, führt das einfache, direkte Verschieben aus dem vorigen Abschnitt zu einer Fehldarstellung, da die Listenelemente der Seitenreiter noch von einem "span"-Element umschlossen sind. Daher folgende, möglicherweise noch optimierbare Lösung, die in MediaWiki:Vector.js zur Anwendung kommt:

Verwendete Funktionen:
Einzelbeispiel

Nur der "Verschieben"-Link wird zu den Seitenreitern verschoben.

$( "#ca-move" ).appendTo( $( "#p-views" ).children("ul") );
 
$( "<span></span>" ).appendTo( "#ca-move" );
 
$( "#ca-move" ).contents().appendTo( $( "#ca-move" ).children("span") );
Komplettbeispiel

Alle Links werden zu den Seitenreitern verschoben, und das ausklappbare Menü deaktiviert.

$( "#ca-move" ).appendTo( $( "#p-views" ).children("ul") );
 
$( "#ca-purge" ).appendTo( $( "#p-views" ).children("ul") );
 
$( "#ca-protect, #ca-unprotect" ).appendTo( $( "#p-views" ).children("ul") );
 
$( "#ca-delete, #ca-undelete" ).appendTo( $( "#p-views" ).children("ul") );
 
$( "#ca-watch, #ca-unwatch" ).appendTo( $( "#p-views" ).children("ul") );
 
$( "<span></span>" ).appendTo( "#ca-move, #ca-protect, #ca-unprotect, #ca-delete, #ca-undelete" );
 
$( "#ca-move" ).contents().appendTo( $( "#ca-move" ).children("span") );
 
$( "#ca-protect" ).contents().appendTo( $( "#ca-protect" ).children("span") );
 
$( "#ca-delete" ).contents().appendTo( $( "#ca-delete" ).children("span") );
 
$( "#ca-unprotect" ).contents().appendTo( $( "#ca-unprotect" ).children("span") );
 
$( "#ca-undelete" ).contents().appendTo( $( "#ca-undelete" ).children("span") );
 
$( "#p-cactions" ).remove();
Kompakter
/**
 * Convert Vector portlets menus to tabs.
 *
 * @source: https://www.mediawiki.org/wiki/Snippets/Convert_vectorMenu_to_vectorTabs/Convert_vectorMenu_to_vectorTabs
 * @rev: 02.10.2015, adapted for Wiki Aventurica
 * @author: [[med:User:Edokter]] on https://www.mediawiki.org
 */
$(document).ready( function() {
    if ( mw.config.get( 'skin' ) == 'vector' ) {
        $( '#p-cactions' )
            .removeClass( 'vectorMenu' )
            .addClass( 'vectorTabs' )
            .css( 'margin-left', '0.5em' )
            .find( 'div.menu > ul' )
                .unwrap()
            .find( 'li > a' )
                .wrap( '<span></span>' );
        $( "#ca-delete, #ca-undelete" ).appendTo( $( "#p-cactions" ).children("ul") );
    }
} );

Verschieben eines Links unter die Titelzeile

Es gibt in jedem MediaWiki-Artikel ein "div"-Element mit dem Namen "#contentSub", das direkt unter der Titelzeile angezeigt wird. Folgendes Beispiel baut nun aus einigen der Links aus der "Werkzeuge"-Seitenleiste sowie einigen neu erzeugten Links eine Liste mit Links direkt unter der Titelzeile zusammen:

Verwendete Funktionen:
(function ($) { // Wrap with anonymous function
    //only work on "User" and "User discussion" namespace, and not on subpages
    if((mw.config.get("wgNamespaceNumber") == 2 || mw.config.get("wgNamespaceNumber") == 3) && !(/\//.test(mw.config.get("wgTitle")))) {
        var username = mw.config.get('wgTitle');
        var pagename = mw.config.get('wgPageName');
        //construct some additional Links for everyone
        mw.util.addPortletLink(
            'p-tb',
            mw.util.getUrl( 'Special:Log/block', { page: pagename } ),
            'Sperr-Logbuch',
            't-blocklog'
        );
        mw.util.addPortletLink(
            'p-tb',
            mw.util.getUrl( 'Special:ListFiles/' + username ),
            'Dateien',
            't-uploaded'
        );
        mw.util.addPortletLink(
            'p-tb',
            mw.util.getUrl( 'Special:AbuseLog', { wpSearchUser: username } ),
            'Gefilterte Aktionen',
            't-filtered'
        );
        //construct some additional Links if user is sysop
        if ($( "#t-blockip" ).length) {
            mw.util.addPortletLink(
                'p-tb',
                mw.util.getUrl( 'Spezial:DeletedContributions/' + username ),
                'Gelöschte Beiträge',
                't-deleted'
            );
        }
        //construct some additional Links if user is bureaucrat
        if ($( "#t-userrights" ).length) {
            mw.util.addPortletLink(
                'p-tb',
                mw.util.getUrl( 'Special:RenameUser/' + username ),
                'Benutzer umbenennen',
                't-rename'
            );
            mw.util.addPortletLink(
                'p-tb',
                mw.util.getUrl( 'Special:UserMerge/' + username ),
                'Konto vereinigen',
                't-merge'
            );
            mw.util.addPortletLink(
                'p-tb',
                mw.util.getUrl( 'Special:Log/suppress', { offender: username } ),
                'Unterdrückte Beiträge',
                't-suppress'
            );
        }
        //move all Links to contentSub
        $( "#t-contributions" ).contents().contents().replaceWith( "Beiträge" );
        $( "#contentSub" ).append( "(", $( "#t-contributions" ).contents() );
        $( "#contentSub" ).append( " | ", $( "#t-uploaded" ).contents() );
        // use .length to determine, if element exists
        if ($( "#t-emailuser" ).length) {
            $( "#t-emailuser" ).contents().contents().replaceWith( "Email" );
            $( "#contentSub" ).append( " | ", $( "#t-emailuser" ).contents() );
        }
        $( "#contentSub" ).append( " | ", $( "#t-log" ).contents() );
        $( "#contentSub" ).append( " | ", $( "#t-filtered" ).contents() );
        $( "#contentSub" ).append( " | ", $( "#t-blocklog" ).contents() );
        if ($( "#t-blockip" ).length) {
            $( "#t-blockip" ).contents().contents().replaceWith( "Sperren" );
            $( "#contentSub" ).append( " | ", $( "#t-blockip" ).contents() );
            $( "#contentSub" ).append( " | ", $( "#t-deleted" ).contents() );
        }
        if ($( "#t-userrights" ).length) {
            $( "#t-userrights" ).contents().contents().replaceWith( "Rechte ändern" );
            $( "#contentSub" ).append( " | ", $( "#t-userrights" ).contents() );
            $( "#contentSub" ).append( " | ", $( "#t-rename" ).contents() );
            $( "#contentSub" ).append( " | ", $( "#t-merge" ).contents() );
            $( "#contentSub" ).append( " | ", $( "#t-suppress" ).contents() );
        }
        $( "#contentSub" ).append( ")" );
        //remove the scraps
        $( "#t-contributions, #t-log, #t-emailuser, #t-blockip, #t-userrights, #t-rename, #t-merge, #t-blocklog, #t-suppress, #t-uploaded, #t-filtered, #t-deleted" ).remove();
    }
}(jQuery)); // End wrap with anonymous function

Spezial:Alle Seiten und Spezial:Präfixindex einspaltig formatieren

Die dreispaltige Ansicht von Spezial:Alle Seiten und Spezial:Präfixindex kann unübersichtlich sein. Das folgende Script formatiert die Suchergebnisse in eine (nummerierte) Liste (als Gadget-OneColumn.js auf Spezial:Helferlein verfügbar).

Verwendete Funktionen:
$( function () {
  if ( mw.config.get('wgCanonicalSpecialPageName') == 'Prefixindex' ) {
    $( "#mw-content-text" ).append( "<ol id='mw-prefixindex-list'></ol>" );
    $( ".mw-prefixindex-list-table" ).find( "td" ).contents().appendTo( "#mw-prefixindex-list" );
    $( "#mw-prefixindex-list" ).find( "a" ).wrap( "<li></li>" );
    $( ".mw-prefixindex-list-table" ).remove();
  }
  if ( mw.config.get('wgCanonicalSpecialPageName') == 'Prefixindex' ) {
    $( "#mw-content-text" ).append( "<ol id='mw-allpages-list'></ol>" );
    $( ".mw-allpages-chunk" ).children( "li" ).appendTo( "#mw-allpages-list" );
    $( ".mw-allpages-chunk" ).remove();
  }
} );

"Danke"-Link für die aktuelle Version in den Seitenreitern

Die "Danke"-Funktion ist ein wenig vergraben, da sie nur in der Versionsgeschichte und der Änderungsansicht angezeigt wird. Ich dachte mir, dass man ja wenigstens für den Fall, dass die aktuelle Version einer Seite im Benutzernamensraum von dem Benutzer, zu dem die Seite gehört, geändert wurde, einen Link in die Seitenreiter einbindgen könnte. Bei diesem Skript gibt es jedoch unter anderem noch das Problem, dass nicht geprüft wird, ob man sich für die aktuelle Version schon bedankt hat.

Eventuell wäre es besser, für die Extension:Favorites Echo-Meldungen einzubauen, so dass man informiert wird, wenn ein anderer Nutzer eine Benutzerseite unter die Favoriten eingeordnet hat.

verwendete Funktionen
mw.loader.using("mediawiki.api", function() {
   //nur im Benutzernamensraum, und auch nur, wenn der Betrachter nicht mit dem Besitzer der Seite übereinstimmt
   if ( ( mw.config.get('wgNamespaceNumber') === 2 ) && ( mw.config.get('wgUserName') !== mw.config.get('wgRelevantUserName') ) ) {
      //rufe den Autor der aktuellen Version der Seite auf
      new mw.Api().get( {
          action: 'query',
          prop: 'revisions',
          revids: mw.config.get('wgCurRevisionId'),
          rvprop: 'user'
      } ).done( function ( data ) {
         var pages = data.query.pages;
         for (var page in pages) {
            var mPage = pages[page];
            var User = mPage.revisions[0].user;
            //nur wenn Autor der aktuellen Version mit dem Besitzer der Seite übereinstimmt
            if ( User === mw.config.get('wgRelevantUserName') ) {
               mw.util.addPortletLink(
                  mw.config.get( 'skin' ) === 'vector' ? 'p-views' : 'p-cactions',
                  mw.util.getUrl( 'Special:Thanks/' + mw.config.get('wgCurRevisionId') ),
                  'Danke',
                  'ca-thanks',
                  'Diesem Benutzer für diese Seite danken'
               );
               $( "#ca-thanks" ).addClass( "icon" );
            }
         }
      } );
   }
} );

Dieses CSS (direkt aus dem Vector-Skin kopiert) verwandelt den angezeigten Link in ein Symbol, das natürlich noch angepasst werden müsste.

#ca-thanks.icon a {
	margin: 0;
	padding: 0;
	display: block;
	width: 26px;
	/* This hides the text but shows the background image */
	padding-top: 3.1em;
	margin-top: 0;
	height: 0;
	overflow: hidden;
	background-position: 5px 60%;
	background-image: url("images/2/21/Beobachten_aus.svg");
}