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