diff options
Diffstat (limited to 'extensions/Vector/modules/ext.vector.collapsibleTabs.js')
| -rw-r--r-- | extensions/Vector/modules/ext.vector.collapsibleTabs.js | 102 |
1 files changed, 52 insertions, 50 deletions
diff --git a/extensions/Vector/modules/ext.vector.collapsibleTabs.js b/extensions/Vector/modules/ext.vector.collapsibleTabs.js index fb0681e7..31f91cbb 100644 --- a/extensions/Vector/modules/ext.vector.collapsibleTabs.js +++ b/extensions/Vector/modules/ext.vector.collapsibleTabs.js @@ -1,11 +1,11 @@ -/* +/** * Collapsible tabs for Vector */ -jQuery(function( $ ) { +jQuery( function ( $ ) { var rtl = $( 'body' ).is( '.rtl' ); // Overloading the moveToCollapsed function to animate the transition - $.collapsibleTabs.moveToCollapsed = function( ele ) { + $.collapsibleTabs.moveToCollapsed = function ( ele ) { var $moving = $( ele ); //$.collapsibleTabs.getSettings( $( $.collapsibleTabs.getSettings( $moving ).expandedContainer ) ).shifting = true; @@ -22,35 +22,36 @@ jQuery(function( $ ) { // Remove the element from where it's at and put it in the dropdown menu var target = data.collapsedContainer; - $moving.css( "position", "relative" ) + $moving.css( 'position', 'relative' ) .css( ( rtl ? 'left' : 'right' ), 0 ) - .animate( { width: '1px' }, "normal", function() { + .animate( { width: '1px' }, 'normal', function () { + var data; $( this ).hide(); // add the placeholder - $( '<span class="placeholder" style="display:none;"></span>' ).insertAfter( this ); + $( '<span class="placeholder" style="display: none;"></span>' ).insertAfter( this ); + // XXX: 'data' is undefined here, should the 'data' from the outer scope have + // a different name? $( this ).detach().prependTo( target ).data( 'collapsibleTabsSettings', data ); - $( this ).attr( 'style', 'display:list-item;' ); - //$.collapsibleTabs.getSettings( $( $.collapsibleTabs.getSettings( $( ele ) ).expandedContainer ) ) - // .shifting = false; - // Do the above, except with guards for JS errors - var data = $.collapsibleTabs.getSettings( $( ele ) ); - if ( !data ) { - return; - } - var expContainerSettings = $.collapsibleTabs.getSettings( $( data.expandedContainer ) ); - if ( !expContainerSettings ) { - return; + $( this ).attr( 'style', 'display: list-item;' ); + // $.collapsibleTabs.getSettings( $( $.collapsibleTabs.getSettings( $( ele ) ).expandedContainer ) ) + // .shifting = false; + // Do the above, except with guards for accessing properties of undefined. + data = $.collapsibleTabs.getSettings( $( ele ) ); + if ( data ) { + var expContainerSettings = $.collapsibleTabs.getSettings( $( data.expandedContainer ) ); + if ( expContainerSettings ) { + expContainerSettings.shifting = false; + $.collapsibleTabs.handleResize(); + } } - expContainerSettings.shifting = false; - $.collapsibleTabs.handleResize(); } ); }; // Overloading the moveToExpanded function to animate the transition - $.collapsibleTabs.moveToExpanded = function( ele ) { + $.collapsibleTabs.moveToExpanded = function ( ele ) { var $moving = $( ele ); //$.collapsibleTabs.getSettings( $( $.collapsibleTabs.getSettings( $moving ).expandedContainer ) ).shifting = true; - // Do the above, except with guards for JS errors + // Do the above, except with guards for accessing properties of undefined. var data = $.collapsibleTabs.getSettings( $moving ); if ( !data ) { return; @@ -64,60 +65,61 @@ jQuery(function( $ ) { // grab the next appearing placeholder so we can use it for replacing var $target = $( data.expandedContainer ).find( 'span.placeholder:first' ); var expandedWidth = data.expandedWidth; - $moving.css( "position", "relative" ).css( ( rtl ? 'right' : 'left' ), 0 ).css( 'width', '1px' ); - $target.replaceWith( $moving.detach().css( 'width', '1px' ).data( 'collapsibleTabsSettings', data ) - .animate( { width: expandedWidth+"px" }, "normal", function( ) { - $( this ).attr( 'style', 'display:block;' ); + $moving.css( 'position', 'relative' ).css( ( rtl ? 'right' : 'left' ), 0 ).css( 'width', '1px' ); + $target.replaceWith( + $moving + .detach() + .css( 'width', '1px' ) + .data( 'collapsibleTabsSettings', data ) + .animate( { width: expandedWidth + 'px' }, 'normal', function () { + $( this ).attr( 'style', 'display: block;' ); //$.collapsibleTabs.getSettings( $( $.collapsibleTabs.getSettings( $( ele ) ).expandedContainer ) ) // .shifting = false; - // Do the above, except with guards for JS errors + // Do the above, except with guards for accessing properties of undefined. var data = $.collapsibleTabs.getSettings( $( this ) ); - if ( !data ) { - return; - } - var expContainerSettings = $.collapsibleTabs.getSettings( $( data.expandedContainer ) ); - if ( !expContainerSettings ) { - return; + if ( data ) { + var expContainerSettings = $.collapsibleTabs.getSettings( $( data.expandedContainer ) ); + if ( expContainerSettings ) { + expContainerSettings.shifting = false; + $.collapsibleTabs.handleResize(); + } } - expContainerSettings.shifting = false; - $.collapsibleTabs.handleResize(); - } ) ); + } ) + ); }; // Bind callback functions to animate our drop down menu in and out // and then call the collapsibleTabs function on the menu - $( '#p-views ul' ).bind( 'beforeTabCollapse', function() { - if ( $( '#p-cactions' ).css( 'display' ) == 'none' ) { + $( '#p-views ul' ).bind( 'beforeTabCollapse', function () { + if ( $( '#p-cactions' ).css( 'display' ) === 'none' ) { $( '#p-cactions' ) .addClass( 'filledPortlet' ).removeClass( 'emptyPortlet' ) .find( 'h5' ) .css( 'width','1px' ).animate( { 'width':'26px' }, 390 ); } - } ).bind( 'beforeTabExpand', function() { - if ( $( '#p-cactions li' ).length == 1 ) { - $( '#p-cactions h5' ).animate( { 'width':'1px' }, 370, function() { + } ).bind( 'beforeTabExpand', function () { + if ( $( '#p-cactions li' ).length === 1 ) { + $( '#p-cactions h5' ).animate( { 'width':'1px' }, 370, function () { $( this ).attr( 'style', '' ) .parent().addClass( 'emptyPortlet' ).removeClass( 'filledPortlet' ); }); } } ).collapsibleTabs( { - expandCondition: function( eleWidth ) { - if( rtl ){ + expandCondition: function ( eleWidth ) { + if ( rtl ) { return ( $( '#right-navigation' ).position().left + $( '#right-navigation' ).width() + 1 ) < ( $( '#left-navigation' ).position().left - eleWidth ); - } else { - return ( $( '#left-navigation' ).position().left + $( '#left-navigation' ).width() + 1 ) - < ( $( '#right-navigation' ).position().left - eleWidth ); } + return ( $( '#left-navigation' ).position().left + $( '#left-navigation' ).width() + 1 ) + < ( $( '#right-navigation' ).position().left - eleWidth ); }, - collapseCondition: function() { - if( rtl ) { + collapseCondition: function () { + if ( rtl ) { return ( $( '#right-navigation' ).position().left + $( '#right-navigation' ).width() ) > $( '#left-navigation' ).position().left; - } else { - return ( $( '#left-navigation' ).position().left + $( '#left-navigation' ).width() ) - > $( '#right-navigation' ).position().left; } + return ( $( '#left-navigation' ).position().left + $( '#left-navigation' ).width() ) + > $( '#right-navigation' ).position().left; } } ); } ); |