Skin:Chameleon/Cookbook

From MediaWiki.org
Jump to: navigation, search

This page is a collection of instructions on how to achieve more complex customizations of the Chameleon skin.

Menu depending on the logged-in user[edit]

Mediawiki 1.26 ???
Chameleon 1.3 (with standard layout)???

Problem:[edit]

I'm using user depending menus for a complex wiki. Therefore - with style monobook - we use the function "ModifySidebar" as described for monobook style.

Now I want to change to the Chameleon skin, but "ModifySidebar" doesn't work anymore.

Solution:[edit]

It is not really complex. The difference to skin Monotype in the HTML structure of the page is the following:

monotype structure

<div>
    <ul id="...">
        <li>
        ...
        </li>
    </ul>
</div>

chameleon structure

<div>
    <ul>
    <a>...</a>
        <li>
            <ul id="...">
                <li>
                ...
                </li>
            </ul>
        </li>
    </ul>
</div>

Here is the JavaScript code that works for Chameleon: (click on Expand)

function ModifyMenu( action, section, name, link ) {
	try {
		switch ( section ) {
			case 'languages':
				var target = 'p-lang';
				break;
			case 'toolbox':
				var target = 'p-tb';
				break;
			case 'navigation':
				var target = 'p-navigation';
				break;
			default:
				var target = 'p-' + section;
				break;
		}

		if ( action == 'addMenu' ) {
			var node = document.getElementById( 'mw-navigation-collapse').getElementsByTagName('ul')[0];
 
			var aNode = document.createElement( 'a' );
			var ulNode = document.createElement( 'ul' );
			var bNode = document.createElement( 'b' );
			var liNode = document.createElement( 'li' );
 
			bNode.className='caret';
			aNode.appendChild( document.createTextNode( name ) );
			aNode.className='dropdown-toggle';
			aNode.setAttribute('data-toggle','dropdown');
			aNode.appendChild(bNode);
			ulNode.className='dropdown-menu';
			ulNode.id=target;
			liNode.appendChild( aNode );
			liNode.appendChild( ulNode );
			liNode.className='dropdown';
			node.appendChild( liNode);
		}

		if ( action == 'addItem' ) {
			var node = document.getElementById( target );
 
			var aNode = document.createElement( 'a' );
			var liNode = document.createElement( 'li' );
 
			aNode.appendChild( document.createTextNode( name ) );
			aNode.setAttribute( 'href', link );
			liNode.appendChild( aNode );
			node.appendChild( liNode );
		}
 
		if ( action == 'removeItem' ) {
			var list = document.getElementById( target );
 
			var listelements = list.getElementsByTagName( 'li' );
 
			for ( var i = 0; i < listelements.length; i++ ) {
				if (
					listelements[i].getElementsByTagName( 'a' )[0].innerHTML == name ||
					listelements[i].getElementsByTagName( 'a' )[0].href == link
				)
				{
					list.removeChild( listelements[i] );
				}
			}
		}
 
	} catch( e ) {
		// let's just ignore what's happened
		return;
	}
}
 
function CustomizeModificationsOfMenu() {
	// adds links to box "Teststellung"
	ModifyMenu( 'addMenu', 'sandbox', 'Sandkastenmann');
	ModifyMenu( 'addItem', 'sandbox', 'Sandkasten','Sandkasten');
	ModifyMenu( 'addItem', 'sandbox', 'Sandkasten2','Sandkasten');
	ModifyMenu( 'addItem', 'sandbox', 'Sandkasten3','Sandkasten');
	ModifyMenu( 'removeItem', 'sandbox', 'Sandkasten','Sandkasten');
}
 
addOnloadHook( CustomizeModificationsOfMenu );

In CustomizeModificationsOfMenu the new menu is added. First of all we add the new menu sandbox, then we add its menu items.