MediaWiki:Gadget-collapsible.js

/**
 * Az összes nyitó-csukó mechanizmus egy helyen:
 * 1. NavFrame       – becsukható <div>, régi rendszer
 * 2. collapsible    – becsukható táblázat, régi rendszer
 * 3. mw-collapsible – becsukható <div> és táblázat, új rendszer (fejlesztései)
 * 4. infobox        – becsukható fejezetek
 */

// nyitó-csukó gombok feliratai (1., 2., 4.)
var hide = '▲ becsuk',
	show = '▼ kinyit',
	mw_hide = 'becsuk',
	mw_show = 'kinyit';

// autocollapse határa (2., 3.) – ha ennél több becsukható doboz van,
// automatikusan becsukódnak az autocollapse osztályúak
var autoCollapseThreshold = 2;

/*
== 1. Becsukható <div> ==
*/

/**
 * Show or hide content and picture (if available) of navigation bars
 * 
 * @param {Event} e The click event
 */
function toggleNavigationBar( e ) {
	var $this  = $( e.target );
	var $frame = $this.closest( '.NavFrame' );
	
	// if shown now
	if ( $this.text() == hide ) {
		$frame.children( '.NavPic, .NavContent' ).hide();
		$this.text( show );
	}
	
	// if hidden now
	else if ($this.text() == show) {
		$frame.children( '.NavPic, .NavContent' ).show();
		$this.text( hide );
	}
	return false;
}

/**
 * Add show/hide button to navigation bars
 */
function createNavigationBarToggleButton( $content ) {
	$( 'div.NavFrame:not(.mw-collapsible) .NavHead', $content ).append(
		$( '<a>' )
			.attr( 'href', '#' )
			.addClass( 'NavToggle' )
			.text( show )
			.click( toggleNavigationBar )
	);
	// initially hidden
	$( 'div.NavFrame:not(.mw-collapsible)', $content ).children( '.NavPic, .NavContent' ).hide();
}
mw.hook( 'wikipage.content' ).add( createNavigationBarToggleButton );

/*
== 2. Becsukható táblázat ==
*/

/** Collapsible tables *********************************************************
 *
 *  Description: Allows tables to be collapsed, showing only the header. See
 *               Wikipedia:NavFrame.
 *  Maintainers: User:R. Koot
 */

/**
 * Collapse a given table.
 * 
 * @param {Event} e The click event
 */
function collapseTable( e ) {
	var $this  = $( e.target );
	var $rows = $this.closest( 'table.collapsible' ).find( 'tr:not(:first)' );
	
	if ( $this.text() === hide ) {
		$rows.css( 'visibility', 'collapse' );
		$rows.addClass( 'row-collapsed' );
		$this.text( show );
	} else {
		$rows.css( 'visibility', 'visible' );
		$rows.removeClass( 'row-collapsed' );
		$this.text( hide );
	}
	return false;
}

/**
 * Add show/hide buttons to collapsible tables
 */
function createCollapseButtons( $content ) {
	var $boxes = $( 'table.collapsible', $content ).has( 'tr:first th' );
	var autoCollapse = ( $boxes.length >= autoCollapseThreshold );
	$boxes.each( function () {
		$this = $( this );
		
		var $button = $( '<span>' );
		var $buttonLink = $( '<a>' );
		
		$button.css( {
			'float': 'right',
			'font-weight': 'normal',
			'text-align': 'right',
			'width': '6em'
		} );
		
		$buttonLink
			.attr( 'href', '#' )
			.addClass( 'collapseButton' )
			.click( collapseTable )
			.text( hide )
			.appendTo( $button );
		
		$button.appendTo( $this.find( 'tr:first th:first' ) );
		if ( $this.hasClass( 'collapsed' ) || autoCollapse && $this.hasClass( 'autocollapse' ) ) {
			$buttonLink.click();
		}
	} );
}
mw.hook( 'wikipage.content' ).add( createCollapseButtons );

/*
== 3. Becsukható <div> és táblázat ==
 * autocollapse, sticky és olvasható (színes) nyitó-csukó gomb
 * (maga a becsukás a MediaWiki-kódban)
 */
function mwCollapsibleSetup( $collapsibleContent ) {
	var autoCollapse = $collapsibleContent.length >= autoCollapseThreshold;
	$collapsibleContent.each( function () {
		var $this = $( this );
		
		// autocollapse
		if ( autoCollapse && $this.hasClass( 'mw-autocollapse' ) ) {
			$this.data( 'mw-collapsible' ).collapse();
		}
		
		// színezés
		var $header = $this.find( '.navbox-title' );
		if ( $header[ 0 ] && $header[ 0 ].style.color ) {
			// jQuery nem jó, mert csak a közvetlen színezés kell
			$header.find( '.mw-collapsible-toggle a' ).css( 'color', $header[ 0 ].style.color );
		}
		
		// sticky
		if ( $this.hasClass( 'mw-sticky' ) ) {
			var cookieName = 'collapsible-' + $this.attr( 'id' ),
				// Expanded by default
				cookie = mw.cookie.get( cookieName );
			mw.cookie.set( cookieName, cookie ); // don't expire every 30 days
			if ( cookie === 'collapsed' ) {
				$this.data( 'mw-collapsible' ).collapse();
			} else if ( cookie === 'expanded' ) {
				$this.data( 'mw-collapsible' ).expand();
			}
			$this
				.on( 'beforeExpand.mw-collapsible', function () {
					mw.cookie.set( cookieName, 'expanded' );
				} )
				.on( 'beforeCollapse.mw-collapsible', function () {
					mw.cookie.set( cookieName, 'collapsed' );
				} );
		}
	} );
}
mw.hook( 'wikipage.collapsibleContent' ).add( mwCollapsibleSetup );

/*
== 4. Kinyitható fejezetek az új infoboxokra specializálva ==
*/

/**
 * Collapse a given section.
 * 
 * @param {jQuery.Event} e The click event
 */
function ibSectionLinkClick( e ) {
	if ( e.type === 'keypress' && e.which !== 13 && e.which !== 32 ) {
		// Only handle keypresses on the "Enter" or "Space" keys
		return;
	} else {
		e.preventDefault();
		e.stopPropagation();
	}
	var $this = $( e.target ).is( 'span' ) ? $( e.target ) : $( e.target ).parent(),
		id = $this.attr( 'id' ) ? $this.attr( 'id' ).slice( 10 ) : null,
		open = $this.hasClass( 'becsukva' ),
		$parentInfobox = $this.closest( 'table.ujinfobox' );
	
	if(!id) return;
	$( 'tr.csoport-' + id, $parentInfobox ).toggle( open );
	$( 'a', $this ).text( open ? mw_hide : mw_show );
	$this.toggleClass( 'becsukva' );
	$( 'tr.nyitasinfo-' + id, $parentInfobox ).toggle( !open );
}

function ibSectionCollapse( $content ) {
	$( '.ujinfobox .nyitolink', $content ).each( function () {
		var $this = $( this );
		$this
			.append( $( '<a class="nyitolink-szoveg"></a>' ).text( mw_hide ) )
			.attr( {
				role: 'button',
				tabindex: 0
			} )
			.prepend( '<span>[</span>' )
			.append( '<span>]</span>' )
			.on( 'click.ib-collapsible keypress.ib-collapsible', ibSectionLinkClick );
		if ( $this.hasClass( 'becsukva' ) ) {
			// Remove class to make the event handler actually close the table
			$this
				.removeClass( 'becsukva' )
				.click();
		}
	} );
}
mw.hook( 'wikipage.content' ).add( ibSectionCollapse );