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                         $collapsible.data( 'collapsibleTabsSettings', {
  53                                 'expandedContainer': $settings.expandedContainer,
  54                                 'collapsedContainer': $settings.collapsedContainer,
  55                                 'expandedWidth': $collapsible.width(),
  56                                 'prevElement': $collapsible.prev()
  57                         } );
  58                 },
  59                 getSettings: function( $collapsible ) {
  60                         var $settings = $collapsible.data( 'collapsibleTabsSettings' );
  61                         if ( typeof $settings == 'undefined' ) {
  62                                 $.collapsibleTabs.addData( $collapsible );
  63                                 $settings = $collapsible.data( 'collapsibleTabsSettings' );
  64                         }
  65                         return $settings;
  66                 },
  67                 handleResize: function( e ){
  68                         $.collapsibleTabs.instances.each( function() {
  69                                 var $this = $( this ), data = $.collapsibleTabs.getSettings( $this );
  70                                 if( data.shifting ) return;
  71
  72                                 // if the two navigations are colliding
  73                                 if( $this.children( data.collapsible ).length > 0 && data.collapseCondition() ) {
  74
  75                                         $this.trigger( "beforeTabCollapse" );
  76                                         // move the element to the dropdown menu
  77                                         $.collapsibleTabs.moveToCollapsed( $this.children( data.collapsible + ':last' ) );
  78                                 }
  79
  80                                 // if there are still moveable items in the dropdown menu,
  81                                 // and there is sufficient space to place them in the tab container
  82                                 if( $( data.collapsedContainer + ' ' + data.collapsible ).length > 0
  83                                                 && data.expandCondition( $.collapsibleTabs.getSettings( $( data.collapsedContainer ).children(
  84                                                                 data.collapsible+":first" ) ).expandedWidth ) ) {
  85                                         //move the element from the dropdown to the tab
  86                                         $this.trigger( "beforeTabExpand" );
  87                                         $.collapsibleTabs
  88                                                 .moveToExpanded( data.collapsedContainer + " " + data.collapsible + ':first' );
  89                                 }
  90                         });
  91                 },
  92                 moveToCollapsed: function( ele ) {
  93                         var $moving = $( ele );
  94                         var data = $.collapsibleTabs.getSettings( $moving );
  95                         var dataExp = $.collapsibleTabs.getSettings( data.expandedContainer );
  96                         dataExp.shifting = true;
  97                         $moving
  98                                 .remove()
  99                                 .prependTo( data.collapsedContainer )
 100                                 .data( 'collapsibleTabsSettings', data );
 101                         dataExp.shifting = false;
 102                         $.collapsibleTabs.handleResize();
 103                 },
 104                 moveToExpanded: function( ele ) {
 105                         var $moving = $( ele );
 106                         var data = $.collapsibleTabs.getSettings( $moving );
 107                         var dataExp = $.collapsibleTabs.getSettings( data.expandedContainer );
 108                         dataExp.shifting = true;
 109                         // remove this element from where it's at and put it in the dropdown menu
 110                         $moving.remove().insertAfter( data.prevElement ).data( 'collapsibleTabsSettings', data );
 111                         dataExp.shifting = false;
 112                         $.collapsibleTabs.handleResize();
 113                 }
 114         };
 115 } )( jQuery );