wiki.techinc.nl/resources/jquery/jquery.collapsibleTabs.js

/*
 * Collapsible tabs jQuery Plugin
 */
( function( $ ) {
	$.fn.collapsibleTabs = function( options ) {
		// return if the function is called on an empty jquery object
		if( !this.length ) return this;
		//merge options into the defaults
		var $settings = $.extend( {}, $.collapsibleTabs.defaults, options );

		this.each( function() {
			var $this = $( this );
			// add the element to our array of collapsible managers
			$.collapsibleTabs.instances = ( $.collapsibleTabs.instances.length == 0 ?
				$this : $.collapsibleTabs.instances.add( $this ) );
			// attach the settings to the elements
			$this.data( 'collapsibleTabsSettings', $settings );
			// attach data to our collapsible elements
			$this.children( $settings.collapsible ).each( function() {
				$.collapsibleTabs.addData( $( this ) );
			} );
		} );

		// if we haven't already bound our resize hanlder, bind it now
		if( !$.collapsibleTabs.boundEvent ) {
			$( window )
				.delayedBind( '500', 'resize', function( ) { $.collapsibleTabs.handleResize(); } );
		}
		// call our resize handler to setup the page
		$.collapsibleTabs.handleResize();
		return this;
	};
	$.collapsibleTabs = {
		instances: [],
		boundEvent: null,
		defaults: {
			expandedContainer: '#p-views ul',
			collapsedContainer: '#p-cactions ul',
			collapsible: 'li.collapsible',
			shifting: false,
			expandCondition: function( eleWidth ) {
				return ( $( '#left-navigation' ).position().left + $( '#left-navigation' ).width() )
					< ( $( '#right-navigation' ).position().left - eleWidth );
			},
			collapseCondition: function() {
				return ( $( '#left-navigation' ).position().left + $( '#left-navigation' ).width() )
					> $( '#right-navigation' ).position().left;
			}
		},
		addData: function( $collapsible ) {
			var $settings = $collapsible.parent().data( 'collapsibleTabsSettings' );
			if ( $settings != null ) {
				$collapsible.data( 'collapsibleTabsSettings', {
					'expandedContainer': $settings.expandedContainer,
					'collapsedContainer': $settings.collapsedContainer,
					'expandedWidth': $collapsible.width(),
					'prevElement': $collapsible.prev()
				} );
			}
		},
		getSettings: function( $collapsible ) {
			var $settings = $collapsible.data( 'collapsibleTabsSettings' );
			if ( typeof $settings == 'undefined' ) {
				$.collapsibleTabs.addData( $collapsible );
				$settings = $collapsible.data( 'collapsibleTabsSettings' );
			}
			return $settings;
		},
		handleResize: function( e ){
			$.collapsibleTabs.instances.each( function() {
				var $this = $( this ), data = $.collapsibleTabs.getSettings( $this );
				if( data.shifting ) return;

				// if the two navigations are colliding
				if( $this.children( data.collapsible ).length > 0 && data.collapseCondition() ) {

					$this.trigger( "beforeTabCollapse" );
					// move the element to the dropdown menu
					$.collapsibleTabs.moveToCollapsed( $this.children( data.collapsible + ':last' ) );
				}

				// if there are still moveable items in the dropdown menu,
				// and there is sufficient space to place them in the tab container
				if( $( data.collapsedContainer + ' ' + data.collapsible ).length > 0
						&& data.expandCondition( $.collapsibleTabs.getSettings( $( data.collapsedContainer ).children(
								data.collapsible+":first" ) ).expandedWidth ) ) {
					//move the element from the dropdown to the tab
					$this.trigger( "beforeTabExpand" );
					$.collapsibleTabs
						.moveToExpanded( data.collapsedContainer + " " + data.collapsible + ':first' );
				}
			});
		},
		moveToCollapsed: function( ele ) {
			var $moving = $( ele );
			var data = $.collapsibleTabs.getSettings( $moving );
			var dataExp = $.collapsibleTabs.getSettings( data.expandedContainer );
			dataExp.shifting = true;
			$moving
				.detach()
				.prependTo( data.collapsedContainer )
				.data( 'collapsibleTabsSettings', data );
			dataExp.shifting = false;
			$.collapsibleTabs.handleResize();
		},
		moveToExpanded: function( ele ) {
			var $moving = $( ele );
			var data = $.collapsibleTabs.getSettings( $moving );
			var dataExp = $.collapsibleTabs.getSettings( data.expandedContainer );
			dataExp.shifting = true;
			// remove this element from where it's at and put it in the dropdown menu
			$moving.detach().insertAfter( data.prevElement ).data( 'collapsibleTabsSettings', data );
			dataExp.shifting = false;
			$.collapsibleTabs.handleResize();
		}
	};
} )( jQuery );