diff options
Diffstat (limited to 'resources/jquery/jquery.collapsibleTabs.js')
-rw-r--r-- | resources/jquery/jquery.collapsibleTabs.js | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/resources/jquery/jquery.collapsibleTabs.js b/resources/jquery/jquery.collapsibleTabs.js new file mode 100644 index 00000000..b2399727 --- /dev/null +++ b/resources/jquery/jquery.collapsibleTabs.js @@ -0,0 +1,117 @@ +/* + * 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 ); |