Archive/Tabs instead of menu in vector skin

tbd @

tabs instead of menu in vector skin

This does not seem to work anymore, and since in my opinion the vector skin is obsolete, I will not bother to fix it.

used methods

• jQuery: removeClass, addClass, css, find, unwrap, wrap, appendTo, children

used in

MediaWiki:Vector.js

/**
 * Convert Vector portlets menus to tabs.
 *
 * @source https://www.mediawiki.org/wiki/Snippets/Convert_vectorMenu_to_vectorTabs/Convert_vectorMenu_to_vectorTabs
 * @version 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") );
    }
} );

The following was the code I used before I found the more compact code above:

used methods

• jQuery: appendTo, children, contents, remove

Only the "move" link will be converted to a tab:

$( "#ca-move" ).appendTo( $( "#p-views" ).children("ul") );

$( "<span></span>" ).appendTo( "#ca-move" );

$( "#ca-move" ).contents().appendTo( $( "#ca-move" ).children("span") );

All links are converted to tabs, and the menu removed:

$( "#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();