2 * Collapsible tabs jQuery Plugin
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
);
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 ) );
24 // if we haven't already bound our resize hanlder, bind it now
25 if( !$.collapsibleTabs
.boundEvent
) {
27 .delayedBind( '500', 'resize', function( ) { $.collapsibleTabs
.handleResize(); } );
29 // call our resize handler to setup the page
30 $.collapsibleTabs
.handleResize();
37 expandedContainer
: '#p-views ul',
38 collapsedContainer
: '#p-cactions ul',
39 collapsible
: 'li.collapsible',
41 expandCondition: function( eleWidth
) {
42 return ( $( '#left-navigation' ).position().left
+ $( '#left-navigation' ).width() )
43 < ( $( '#right-navigation' ).position().left
- eleWidth
);
45 collapseCondition: function() {
46 return ( $( '#left-navigation' ).position().left
+ $( '#left-navigation' ).width() )
47 > $( '#right-navigation' ).position().left
;
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()
61 getSettings: function( $collapsible
) {
62 var $settings
= $collapsible
.data( 'collapsibleTabsSettings' );
63 if ( typeof $settings
== 'undefined' ) {
64 $.collapsibleTabs
.addData( $collapsible
);
65 $settings
= $collapsible
.data( 'collapsibleTabsSettings' );
69 handleResize: function( e
){
70 $.collapsibleTabs
.instances
.each( function() {
71 var $this = $( this ), data
= $.collapsibleTabs
.getSettings( $this );
72 if( data
.shifting
) return;
74 // if the two navigations are colliding
75 if( $this.children( data
.collapsible
).length
> 0 && data
.collapseCondition() ) {
77 $this.trigger( "beforeTabCollapse" );
78 // move the element to the dropdown menu
79 $.collapsibleTabs
.moveToCollapsed( $this.children( data
.collapsible
+ ':last' ) );
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" );
90 .moveToExpanded( data
.collapsedContainer
+ " " + data
.collapsible
+ ':first' );
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;
101 .prependTo( data
.collapsedContainer
)
102 .data( 'collapsibleTabsSettings', data
);
103 dataExp
.shifting
= false;
104 $.collapsibleTabs
.handleResize();
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();