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                 /**
  74                  * @param {jQuery.Event} e
  75                  */
  76                 handleResize: function () {
  77                         $.collapsibleTabs.instances.each( function () {
  78                                 var $el = $( this ),
  79                                         data = $.collapsibleTabs.getSettings( $el );
  80
  81                                 if ( data.shifting ) {
  82                                         return;
  83                                 }
  84
  85                                 // if the two navigations are colliding
  86                                 if ( $el.children( data.collapsible ).length > 0 && data.collapseCondition() ) {
  87
  88                                         $el.trigger( 'beforeTabCollapse' );
  89                                         // move the element to the dropdown menu
  90                                         $.collapsibleTabs.moveToCollapsed( $el.children( data.collapsible + ':last' ) );
  91                                 }
  92
  93                                 // if there are still moveable items in the dropdown menu,
  94                                 // and there is sufficient space to place them in the tab container
  95                                 if ( $( data.collapsedContainer + ' ' + data.collapsible ).length > 0
  96                                                 && data.expandCondition( $.collapsibleTabs.getSettings( $( data.collapsedContainer ).children(
  97                                                                 data.collapsible + ':first' ) ).expandedWidth ) ) {
  98                                         //move the element from the dropdown to the tab
  99                                         $el.trigger( 'beforeTabExpand' );
 100                                         $.collapsibleTabs
 101                                                 .moveToExpanded( data.collapsedContainer + ' ' + data.collapsible + ':first' );
 102                                 }
 103                         });
 104                 },
 105                 moveToCollapsed: function ( ele ) {
 106                         var $moving = $( ele ),
 107                                 data = $.collapsibleTabs.getSettings( $moving ),
 108                                 dataExp = $.collapsibleTabs.getSettings( data.expandedContainer );
 109                         dataExp.shifting = true;
 110                         $moving
 111                                 .detach()
 112                                 .prependTo( data.collapsedContainer )
 113                                 .data( 'collapsibleTabsSettings', data );
 114                         dataExp.shifting = false;
 115                         $.collapsibleTabs.handleResize();
 116                 },
 117                 moveToExpanded: function ( ele ) {
 118                         var $moving = $( ele ),
 119                                 data = $.collapsibleTabs.getSettings( $moving ),
 120                                 dataExp = $.collapsibleTabs.getSettings( data.expandedContainer );
 121                         dataExp.shifting = true;
 122                         // remove this element from where it's at and put it in the dropdown menu
 123                         $moving.detach().insertAfter( data.prevElement ).data( 'collapsibleTabsSettings', data );
 124                         dataExp.shifting = false;
 125                         $.collapsibleTabs.handleResize();
 126                 }
 127         };
 128
 129 }( jQuery ) );