|
|
| Line 1: |
Line 1: |
| $( document ).ready( function() { | | $( function() { |
| var portlet = [];
| | if ( mw.config.get( 'skin' ) == 'vector' ) { |
| var portletId = [];
| | $( '#p-cactions' ) |
| var portletToggle = [];
| | .removeClass( 'vectorMenu' ) |
| var toggleDiv = '<div class="vectorToggle" id="$1"><span><a href="#"></a></span></div>';
| | .addClass( 'vectorTabs' ) |
|
| | .css( 'margin-left', '0.5em' ) |
| /* Portlets to exclude */
| | .find( 'div.menu > ul' ) |
| var excludePortlets = [ 'p-namespaces', 'p-twinkle' ];
| | .unwrap() |
|
| | .find( 'li > a' ) |
| /* MenuToTabs */
| | .wrap( '<span></span>' ); |
| function MenuToTabs( portlet, id ) {
| | } |
| portlet.removeClass( 'vectorMenu' ).addClass( 'vectorTabs' ).css( 'margin-left', '-1px' )
| |
| .find( 'div.menu > ul' ).unwrap()
| |
| .find( 'li > a' ).wrap( '<span></span>' );
| |
| portlet.find( 'li.icon-collapsed' ).removeClass( 'icon-collapsed' ).addClass( 'icon' );
| |
| $.cookie( 'vector-tabs-' + id, 'tabs', { expires: 30, path: '/' } );
| |
| }
| |
|
| |
| /* TabsToMenu */
| |
| function TabsToMenu( portlet, id ) {
| |
| portlet.removeClass( 'vectorTabs' ).addClass( 'vectorMenu' ).css( 'margin-left', '' )
| |
| .find( 'ul' ).wrap( '<div class="menu"></div>' )
| |
| .find( 'span > a' ).unwrap();
| |
| portlet.find( 'li.icon' ).removeClass( 'icon' ).addClass( 'icon-collapsed' );
| |
| $.cookie( 'vector-tabs-' + id, 'menu', { expires: 30, path: '/' } );
| |
| }
| |
|
| |
| /* Initialize */
| |
| if ( !mw.config.get( 'skin' ) == 'vector' ) {
| |
| return;
| |
| }
| |
|
| |
| // Enumerate all instances of vectorMenu
| |
| $( '.vectorMenu, .vectorTabs' ).each( function(i) {
| |
| portlet[i] = $( this );
| |
| portletId[i] = portlet[i].attr( 'id' );
| |
|
| |
| // Skip p-namespaces and other excluded portlets
| |
| if ( $.inArray( portletId[i], excludePortlets ) == -1 ) {
| |
|
| |
| // Disable collapsible tabs
| |
| portlet[i].find( 'li.collapsible' )
| |
| .removeClass( 'collapsible' );
| |
|
| |
| // Left or right?
| |
| if ( portlet[i].parent().attr( 'id' ) == 'left-navigation' ) {
| |
| portletToggle[i] = $( toggleDiv
| |
| .replace( '$1', portletId[i] + '-toggle' ) )
| |
| .addClass( 'toggle-left' )
| |
| .insertBefore( portlet[i].find( 'ul' ) );
| |
| } else {
| |
| portletToggle[i] = $( toggleDiv
| |
| .replace( '$1', portletId[i] + '-toggle' ) )
| |
| .addClass( 'toggle-right' )
| |
| .insertAfter( portlet[i].find( 'ul' ) );
| |
| }
| |
|
| |
| // Menu or Tabs?
| |
| if ( portlet[i].hasClass( 'vectorMenu' ) ) {
| |
| if ( $.cookie( 'vector-tabs-' + portletId[i] ) == 'tabs' ) {
| |
| MenuToTabs( portlet[i], portletId[i] );
| |
| }
| |
| }
| |
| else if ( portlet[i].hasClass( 'vectorTabs' ) ) {
| |
| portlet[i].find( 'h5' )
| |
| .wrapInner( '<span></span>' )
| |
| .append( '<a href="#"></a>' );
| |
| if ( $.cookie( 'vector-tabs-' + portletId[i] ) == 'menu' ) {
| |
| TabsToMenu( portlet[i], portletId[i] );
| |
| }
| |
| }
| |
|
| |
| // Assign click events
| |
| portlet[i].find( 'h5 > a' ).click( function(e) {
| |
| e.preventDefault();
| |
| var ul = portlet[i].find( 'ul' );
| |
| ul.animate( { height: 'hide' }, 125, function() {
| |
| MenuToTabs( portlet[i], portletId[i] );
| |
| ul.animate( { width: 'show' }, 125 );
| |
| });
| |
| });
| |
| portletToggle[i].find( 'a' ).click( function(e) {
| |
| e.preventDefault();
| |
| var ul = portlet[i].find( 'ul' );
| |
| ul.animate( { width: 'hide' }, 125, function() {
| |
| TabsToMenu( portlet[i], portletId[i] );
| |
| ul.animate( { height: 'show' }, 125 );
| |
| });
| |
| });
| |
| }
| |
| });
| |
| }); | | }); |
