resources/jquery/jquery.collapsibleTabs.js

   1 /*
   2  * Collapsible tabs jQuery Plugin
   3  */
   4 jQuery.fn.collapsibleTabs = function( options ) {
   5         // return if the function is called on an empty jquery object
   6         if( !this.length ) return this;
   7         //merge options into the defaults
   8         var $settings = $.extend( {}, $.collapsibleTabs.defaults, options );
   9
  10         this.each( function() {
  11                 var $this = $( this );
  12                 // add the element to our array of collapsible managers
  13                 $.collapsibleTabs.instances = ( $.collapsibleTabs.instances.length == 0 ?
  14                         $this : $.collapsibleTabs.instances.add( $this ) );
  15                 // attach the settings to the elements
  16                 $this.data( 'collapsibleTabsSettings', $settings );
  17                 // attach data to our collapsible elements
  18                 $this.children( $settings.collapsible ).each( function() {
  19                         $.collapsibleTabs.addData( $( this ) );
  20                 } );
  21         } );
  22
  23         // if we haven't already bound our resize hanlder, bind it now
  24         if( !$.collapsibleTabs.boundEvent ) {
  25                 $( window )
  26                         .delayedBind( '500', 'resize', function( ) { $.collapsibleTabs.handleResize(); } );
  27         }
  28         // call our resize handler to setup the page
  29         $.collapsibleTabs.handleResize();
  30         return this;
  31 };
  32 jQuery.collapsibleTabs = {
  33         instances: [],
  34         boundEvent: null,
  35         defaults: {
  36                 expandedContainer: '#p-views ul',
  37                 collapsedContainer: '#p-cactions ul',
  38                 collapsible: 'li.collapsible',
  39                 shifting: false,
  40                 expandCondition: function( eleWidth ) {
  41                         return ( $( '#left-navigation' ).position().left + $( '#left-navigation' ).width() )
  42                                 < ( $( '#right-navigation' ).position().left - eleWidth );
  43                 },
  44                 collapseCondition: function() {
  45                         return ( $( '#left-navigation' ).position().left + $( '#left-navigation' ).width() )
  46                                 > $( '#right-navigation' ).position().left;
  47                 }
  48         },
  49         addData: function( $collapsible ) {
  50                 var $settings = $collapsible.parent().data( 'collapsibleTabsSettings' );
  51                 $collapsible.data( 'collapsibleTabsSettings', {
  52                         'expandedContainer': $settings.expandedContainer,
  53                         'collapsedContainer': $settings.collapsedContainer,
  54                         'expandedWidth': $collapsible.width(),
  55                         'prevElement': $collapsible.prev()
  56                 } );
  57         },
  58         getSettings: function( $collapsible ) {
  59                 var $settings = $collapsible.data( 'collapsibleTabsSettings' );
  60                 if ( typeof $settings == 'undefined' ) {
  61                         $.collapsibleTabs.addData( $collapsible );
  62                         $settings = $collapsible.data( 'collapsibleTabsSettings' );
  63                 }
  64                 return $settings;
  65         },
  66         handleResize: function( e ){
  67                 $.collapsibleTabs.instances.each( function() {
  68                         var $this = $( this ), data = $.collapsibleTabs.getSettings( $this );
  69                         if( data.shifting ) return;
  70
  71                         // if the two navigations are colliding
  72                         if( $this.children( data.collapsible ).length > 0 && data.collapseCondition() ) {
  73
  74                                 $this.trigger( "beforeTabCollapse" );
  75                                 // move the element to the dropdown menu
  76                                 $.collapsibleTabs.moveToCollapsed( $this.children( data.collapsible + ':last' ) );
  77                         }
  78
  79                         // if there are still moveable items in the dropdown menu,
  80                         // and there is sufficient space to place them in the tab container
  81                         if( $( data.collapsedContainer + ' ' + data.collapsible ).length > 0
  82                                         && data.expandCondition( $.collapsibleTabs.getSettings( $( data.collapsedContainer ).children(
  83                                                         data.collapsible+":first" ) ).expandedWidth ) ) {
  84                                 //move the element from the dropdown to the tab
  85                                 $this.trigger( "beforeTabExpand" );
  86                                 $.collapsibleTabs
  87                                         .moveToExpanded( data.collapsedContainer + " " + data.collapsible + ':first' );
  88                         }
  89                 });
  90         },
  91         moveToCollapsed: function( ele ) {
  92                 var $moving = $( ele );
  93                 var data = $.collapsibleTabs.getSettings( $moving );
  94                 var dataExp = $.collapsibleTabs.getSettings( data.expandedContainer );
  95                 dataExp.shifting = true;
  96                 $moving
  97                         .remove()
  98                         .prependTo( data.collapsedContainer )
  99                         .data( 'collapsibleTabsSettings', data );
 100                 dataExp.shifting = false;
 101                 $.collapsibleTabs.handleResize();
 102         },
 103         moveToExpanded: function( ele ) {
 104                 var $moving = $( ele );
 105                 var data = $.collapsibleTabs.getSettings( $moving );
 106                 var dataExp = $.collapsibleTabs.getSettings( data.expandedContainer );
 107                 dataExp.shifting = true;
 108                 // remove this element from where it's at and put it in the dropdown menu
 109                 $moving.remove().insertAfter( data.prevElement ).data( 'collapsibleTabsSettings', data );
 110                 dataExp.shifting = false;
 111                 $.collapsibleTabs.handleResize();
 112         }
 113 };