MediaWiki 1.17.0

[autoinstallsdev/mediawiki.git] / resources / jquery / jquery.collapsibleTabs.js

diff --git a/resources/jquery/jquery.collapsibleTabs.js b/resources/jquery/jquery.collapsibleTabs.js
new file mode 100644 (file)
index 0000000..b239972
--- /dev/null
+++ b/resources/jquery/jquery.collapsibleTabs.js
@@ -0,0 +1,117 @@
+/*
+ * Collapsible tabs jQuery Plugin
+ */
+( function( $ ) {
+       $.fn.collapsibleTabs = function( options ) {
+               // return if the function is called on an empty jquery object
+               if( !this.length ) return this;
+               //merge options into the defaults
+               var $settings = $.extend( {}, $.collapsibleTabs.defaults, options );
+       
+               this.each( function() {
+                       var $this = $( this );
+                       // add the element to our array of collapsible managers
+                       $.collapsibleTabs.instances = ( $.collapsibleTabs.instances.length == 0 ?
+                               $this : $.collapsibleTabs.instances.add( $this ) );
+                       // attach the settings to the elements
+                       $this.data( 'collapsibleTabsSettings', $settings );
+                       // attach data to our collapsible elements
+                       $this.children( $settings.collapsible ).each( function() {
+                               $.collapsibleTabs.addData( $( this ) );
+                       } );
+               } );
+               
+               // if we haven't already bound our resize hanlder, bind it now
+               if( !$.collapsibleTabs.boundEvent ) {
+                       $( window )
+                               .delayedBind( '500', 'resize', function( ) { $.collapsibleTabs.handleResize(); } );
+               }
+               // call our resize handler to setup the page
+               $.collapsibleTabs.handleResize();
+               return this;
+       };
+       $.collapsibleTabs = {
+               instances: [],
+               boundEvent: null,
+               defaults: {
+                       expandedContainer: '#p-views ul',
+                       collapsedContainer: '#p-cactions ul',
+                       collapsible: 'li.collapsible',
+                       shifting: false,
+                       expandCondition: function( eleWidth ) {
+                               return ( $( '#left-navigation' ).position().left + $( '#left-navigation' ).width() )
+                                       < ( $( '#right-navigation' ).position().left - eleWidth );
+                       },
+                       collapseCondition: function() {
+                               return ( $( '#left-navigation' ).position().left + $( '#left-navigation' ).width() )
+                                       > $( '#right-navigation' ).position().left;
+                       }
+               },
+               addData: function( $collapsible ) {
+                       var $settings = $collapsible.parent().data( 'collapsibleTabsSettings' );
+                       if ( $settings != null ) {
+                               $collapsible.data( 'collapsibleTabsSettings', {
+                                       'expandedContainer': $settings.expandedContainer,
+                                       'collapsedContainer': $settings.collapsedContainer,
+                                       'expandedWidth': $collapsible.width(),
+                                       'prevElement': $collapsible.prev()
+                               } );
+                       }
+               },
+               getSettings: function( $collapsible ) {
+                       var $settings = $collapsible.data( 'collapsibleTabsSettings' );
+                       if ( typeof $settings == 'undefined' ) {
+                               $.collapsibleTabs.addData( $collapsible );
+                               $settings = $collapsible.data( 'collapsibleTabsSettings' );
+                       }
+                       return $settings;
+               },
+               handleResize: function( e ){
+                       $.collapsibleTabs.instances.each( function() {
+                               var $this = $( this ), data = $.collapsibleTabs.getSettings( $this );
+                               if( data.shifting ) return;
+       
+                               // if the two navigations are colliding
+                               if( $this.children( data.collapsible ).length > 0 && data.collapseCondition() ) {
+                                       
+                                       $this.trigger( "beforeTabCollapse" );
+                                       // move the element to the dropdown menu
+                                       $.collapsibleTabs.moveToCollapsed( $this.children( data.collapsible + ':last' ) );
+                               }
+       
+                               // if there are still moveable items in the dropdown menu,
+                               // and there is sufficient space to place them in the tab container
+                               if( $( data.collapsedContainer + ' ' + data.collapsible ).length > 0
+                                               && data.expandCondition( $.collapsibleTabs.getSettings( $( data.collapsedContainer ).children(
+                                                               data.collapsible+":first" ) ).expandedWidth ) ) {
+                                       //move the element from the dropdown to the tab
+                                       $this.trigger( "beforeTabExpand" );
+                                       $.collapsibleTabs
+                                               .moveToExpanded( data.collapsedContainer + " " + data.collapsible + ':first' );
+                               }
+                       });
+               },
+               moveToCollapsed: function( ele ) {
+                       var $moving = $( ele );
+                       var data = $.collapsibleTabs.getSettings( $moving );
+                       var dataExp = $.collapsibleTabs.getSettings( data.expandedContainer );
+                       dataExp.shifting = true;
+                       $moving
+                               .detach()
+                               .prependTo( data.collapsedContainer )
+                               .data( 'collapsibleTabsSettings', data );
+                       dataExp.shifting = false;
+                       $.collapsibleTabs.handleResize();
+               },
+               moveToExpanded: function( ele ) {
+                       var $moving = $( ele );
+                       var data = $.collapsibleTabs.getSettings( $moving );
+                       var dataExp = $.collapsibleTabs.getSettings( data.expandedContainer );
+                       dataExp.shifting = true;
+                       // remove this element from where it's at and put it in the dropdown menu
+                       $moving.detach().insertAfter( data.prevElement ).data( 'collapsibleTabsSettings', data );
+                       dataExp.shifting = false;
+                       $.collapsibleTabs.handleResize();
+               }
+       };
+} )( jQuery );