2 * Collapsible tabs jQuery Plugin
5 $.fn
.collapsibleTabs = function ( options
) {
6 // return if the function is called on an empty jquery object
10 // Merge options into the defaults
11 var $settings
= $.extend( {}, $.collapsibleTabs
.defaults
, options
);
13 this.each( function () {
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 ) );
26 // if we haven't already bound our resize hanlder, bind it now
27 if ( !$.collapsibleTabs
.boundEvent
) {
29 .delayedBind( '500', 'resize', function ( ) {
30 $.collapsibleTabs
.handleResize();
33 // call our resize handler to setup the page
34 $.collapsibleTabs
.handleResize();
41 expandedContainer
: '#p-views ul',
42 collapsedContainer
: '#p-cactions ul',
43 collapsible
: 'li.collapsible',
45 expandCondition: function ( eleWidth
) {
46 return ( $( '#left-navigation' ).position().left
+ $( '#left-navigation' ).width() )
47 < ( $( '#right-navigation' ).position().left
- eleWidth
);
49 collapseCondition: function () {
50 return ( $( '#left-navigation' ).position().left
+ $( '#left-navigation' ).width() )
51 > $( '#right-navigation' ).position().left
;
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()
65 getSettings: function ( $collapsible
) {
66 var $settings
= $collapsible
.data( 'collapsibleTabsSettings' );
67 if ( $settings
=== undefined ) {
68 $.collapsibleTabs
.addData( $collapsible
);
69 $settings
= $collapsible
.data( 'collapsibleTabsSettings' );
74 * @param {jQuery.Event} e
76 handleResize: function () {
77 $.collapsibleTabs
.instances
.each( function () {
79 data
= $.collapsibleTabs
.getSettings( $el
);
81 if ( data
.shifting
) {
85 // if the two navigations are colliding
86 if ( $el
.children( data
.collapsible
).length
> 0 && data
.collapseCondition() ) {
88 $el
.trigger( 'beforeTabCollapse' );
89 // move the element to the dropdown menu
90 $.collapsibleTabs
.moveToCollapsed( $el
.children( data
.collapsible
+ ':last' ) );
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' );
101 .moveToExpanded( data
.collapsedContainer
+ ' ' + data
.collapsible
+ ':first' );
105 moveToCollapsed: function ( ele
) {
106 var $moving
= $( ele
),
107 data
= $.collapsibleTabs
.getSettings( $moving
),
108 dataExp
= $.collapsibleTabs
.getSettings( data
.expandedContainer
);
109 dataExp
.shifting
= true;
112 .prependTo( data
.collapsedContainer
)
113 .data( 'collapsibleTabsSettings', data
);
114 dataExp
.shifting
= false;
115 $.collapsibleTabs
.handleResize();
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();