Added collapsible tabs plugin, reworked tabIndex functions, and fixed some syntax...

diff --git a/resources/Resources.php b/resources/Resources.php
index 0f40979..a9c970b 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -30,6 +30,9 @@ return array(
        'jquery.client' => new ResourceLoaderFileModule(
                array( 'scripts' => 'resources/jquery/jquery.client.js' )
        ),
+       'jquery.collapsibleTabs' => new ResourceLoaderFileModule(
+               array( 'scripts' => 'resources/jquery/jquery.collapsibleTabs.js' )
+       ),
        'jquery.color' => new ResourceLoaderFileModule(
                array( 'scripts' => 'resources/jquery/jquery.color.js' )
        ),

diff --git a/resources/jquery/jquery.client.js b/resources/jquery/jquery.client.js
index ed4c56e..657e146 100644 (file)
--- a/resources/jquery/jquery.client.js
+++ b/resources/jquery/jquery.client.js
@@ -152,9 +152,9 @@ jQuery.client = {
         * @return Boolean true if browser known or assumed to be supported, false if blacklisted
         */
        'test': function( map ) {
-               var client = this.client();
+               var profile = $.client.profile();
                // Check over each browser condition to determine if we are running in a compatible client
-               var browser = map[$( 'body' ).is( '.rtl' ) ? 'rtl' : 'ltr'][client.browser];
+               var browser = map[$( 'body' ).is( '.rtl' ) ? 'rtl' : 'ltr'][profile.browser];
                if ( typeof browser !== 'object' ) {
                        // Unknown, so we assume it's working
                        return true;
@@ -165,11 +165,11 @@ jQuery.client = {
                        if ( val === false ) {
                                return false;
                        } else if ( typeof val == 'string' ) {
-                               if ( !( eval( 'client.version' + op + '"' + val + '"' ) ) ) {
+                               if ( !( eval( 'profile.version' + op + '"' + val + '"' ) ) ) {
                                        return false;
                                }
                        } else if ( typeof val == 'number' ) {
-                               if ( !( eval( 'client.versionNumber' + op + val ) ) ) {
+                               if ( !( eval( 'profile.versionNumber' + op + val ) ) ) {
                                        return false;
                                }
                        }

diff --git a/resources/jquery/jquery.collapsibleTabs.js b/resources/jquery/jquery.collapsibleTabs.js
new file mode 100644 (file)
index 0000000..2e7c84d
--- /dev/null
+++ b/resources/jquery/jquery.collapsibleTabs.js
@@ -0,0 +1,113 @@
+/*
+ * Collapsible tabs jQuery Plugin
+ */
+jQuery.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;
+};
+jQuery.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' );
+               $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
+                       .remove()
+                       .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.remove().insertAfter( data.prevElement ).data( 'collapsibleTabsSettings', data );
+               dataExp.shifting = false;
+               $.collapsibleTabs.handleResize();
+       }
+};
\ No newline at end of file

diff --git a/resources/jquery/jquery.tabIndex.js b/resources/jquery/jquery.tabIndex.js
index ec86e88..3bce092 100644 (file)
--- a/resources/jquery/jquery.tabIndex.js
+++ b/resources/jquery/jquery.tabIndex.js
@@ -1,11 +1,24 @@
-( function( $ ) {
-
 /**
- * Finds the highest tabindex in use.
+ * Finds the lowerst tabindex in use within a selection
+ * 
+ * @return Integer of lowest tabindex on the page
+ */
+jQuery.fn.firstTabIndex = function() {
+       var minTabIndex = 0;
+       $(this).find( '[tabindex]' ).each( function() {
+               var tabIndex = parseInt( $(this).attr( 'tabindex' ) );
+               if ( tabIndex > minTabIndex ) {
+                       minTabIndex = tabIndex;
+               }
+       } );
+       return minTabIndex;
+};
+/**
+ * Finds the highest tabindex in use within a selection
  * 
  * @return Integer of highest tabindex on the page
  */
-$.fn.maxTabIndex( function() {
+jQuery.fn.lastTabIndex = function() {
        var maxTabIndex = 0;
        $(this).find( '[tabindex]' ).each( function() {
                var tabIndex = parseInt( $(this).attr( 'tabindex' ) );
@@ -14,6 +27,4 @@ $.fn.maxTabIndex( function() {
                }
        } );
        return maxTabIndex;
-} );
-
-} )();
\ No newline at end of file
+};
\ No newline at end of file