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