resources/jquery/jquery.collapsibleTabs.js

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