מדיה ויקי:Gadget-foldPortalMenus.js

מתוך צפונות ויקי
גרסה מ־22:24, 15 ביוני 2014 מאת wikipedia:he>קיפודנחש (ככה לא בונים ממדינה)

הערה: לאחר הפרסום, ייתכן שיהיה צורך לנקות את זיכרון המטמון (cache) של הדפדפן כדי להבחין בשינויים.

  • פיירפוקס / ספארי: להחזיק את המקש Shift בעת לחיצה על טעינה מחדש (Reload) או ללחוץ על צירוף המקשים Ctrl-F5 או Ctrl-R (במחשב מק: ⌘-R).
  • גוגל כרום: ללחוץ על צירוף המקשים Ctrl-Shift-R (במחשב מק: ⌘-Shift-R).
  • אינטרנט אקספלורר / אדג': להחזיק את המקש Ctrl בעת לחיצה על רענן (Refresh) או ללחוץ על צירוף המקשים Ctrl-F5.
  • אופרה: ללחוץ על Ctrl-F5.
$( function() {
	"use strict";

	var storageKey = 'sidemenuFolded',
		skin = mw.config.get( 'skin' ),
		portalSelector,
		bodySelector,
		storage = $.jStorage.storageAvailable(),
		origFolded = [],
		heights = {},
		toggleElement = function( elem ) {
			var id = elem.closest( portalSelector ).attr( 'id' ),
				hide = ! elem.hasClass( 'foldmenu-folded' );
			elem.toggleClass( 'foldmenu-expanded', !hide )
				.toggleClass('foldmenu-folded', hide )
				.siblings( bodySelector ).animate( { maxHeight: hide ? 0 : heights[id] } );
			updateState();
		},
		updateState = function() {
			if (! storage)
				return;
			var folded = [];
			$( portalSelector + ' h3.foldmenu-folded' ).each( function( id, item ) {
				folded.push( $( item ).closest( portalSelector ).attr( 'id' ) );
			});
			$.jStorage.set( storageKey, folded );
		},
		preparePortalBody = function( index, elem ) {
			var $elem = $( elem ),
				id = $elem.closest( portalSelector ).attr( 'id' ),
				height = $elem.height();
			$elem.css( 'max-height', $elem.height() );
			heights[id] = height;
		},
		prepareHeader = function( selector ) {
			$( selector )
				.addClass( 'foldmenu-expanded' )
				.prepend( $('<span>', { 'class': 'plus' } ).text( '+' ) )
				.prepend( $('<span>', { 'class': 'minus' } ).text( '-' ) )
				.click( function() { toggleElement( $(this) ) } );
		},
		recalcHeights = function() {
			$( portalSelector + ' ' + bodySelector ).each( function() {
				var $div = $( this ),
					id = $div.closest( 'div.portal' ).attr( 'id' ),
					clone = $div.clone()
						.css( { maxHeight: 50000, left: -5000, display: 'block' } )
						.appendTo( 'body' ),
					height = heights[id] = Math.max( (heights[id] || 0), clone.height() );
				$div.css( { maxHeight: height } );
				clone.remove();
			});
		};

	switch( skin ) {
		case 'vector':
			portalSelector = 'div.portal';
			bodySelector = 'div.body';
			break;
		case 'monobook':
			portalSelector = 'div.portlet';
			bodySelector = 'div.pBody';
			break;
		default:
			return;
	}
	
	$( portalSelector + ' h3#p-navigation-label' ).toggle( true );
	$( portalSelector + ' ' + bodySelector ).each( preparePortalBody );
	prepareHeader( portalSelector + ' h3' );
	if (storage) {
			origFolded = $.jStorage.get( storageKey ) || [];
			$( origFolded ).each(function( index, item ) {
				toggleElement( $( portalSelector + '#' + item ).find( 'h3:first' ) );
			});
	}
	$( document ).on( 'new-div-portal', function( event, portalId ) {
		recalcHeights();
		if ( ! portalId )
			return;
		var ps = '#' + portalId;
		preparePortalBody( 0, ps );
		prepareHeader( ps + ' h3' );
		if ( $.inArray( portalId, origFolded ) + 1 )
			toggleElement( $( ps ).find( 'h3:first' ) );
	});
	
	var oldFunc = mw.util.addPortletLink;
	if (typeof oldFunc === 'function') 
		mw.util.addPortletLink = function() {
			var res = oldFunc.apply( this, arguments );
			$( document ).trigger( 'new-div-portal' );
			return res;
		};
});