r73046 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r73045‎ | r73046 | r73047 >
Date:02:03, 15 September 2010
Author:tparscal
Status:resolved (Comments)
Tags:
Comment:
Added collapsible tabs plugin, reworked tabIndex functions, and fixed some syntax errors.
Modified paths:
  • /trunk/phase3/resources/Resources.php (modified) (history)
  • /trunk/phase3/resources/jquery/jquery.client.js (modified) (history)
  • /trunk/phase3/resources/jquery/jquery.collapsibleTabs.js (added) (history)
  • /trunk/phase3/resources/jquery/jquery.tabIndex.js (modified) (history)

Diff [purge]

Index: trunk/phase3/resources/jquery/jquery.client.js
@@ -152,9 +152,9 @@
153153 * @return Boolean true if browser known or assumed to be supported, false if blacklisted
154154 */
155155 'test': function( map ) {
156 - var client = this.client();
 156+ var profile = $.client.profile();
157157 // Check over each browser condition to determine if we are running in a compatible client
158 - var browser = map[$( 'body' ).is( '.rtl' ) ? 'rtl' : 'ltr'][client.browser];
 158+ var browser = map[$( 'body' ).is( '.rtl' ) ? 'rtl' : 'ltr'][profile.browser];
159159 if ( typeof browser !== 'object' ) {
160160 // Unknown, so we assume it's working
161161 return true;
@@ -165,11 +165,11 @@
166166 if ( val === false ) {
167167 return false;
168168 } else if ( typeof val == 'string' ) {
169 - if ( !( eval( 'client.version' + op + '"' + val + '"' ) ) ) {
 169+ if ( !( eval( 'profile.version' + op + '"' + val + '"' ) ) ) {
170170 return false;
171171 }
172172 } else if ( typeof val == 'number' ) {
173 - if ( !( eval( 'client.versionNumber' + op + val ) ) ) {
 173+ if ( !( eval( 'profile.versionNumber' + op + val ) ) ) {
174174 return false;
175175 }
176176 }
Index: trunk/phase3/resources/jquery/jquery.tabIndex.js
@@ -1,11 +1,24 @@
2 -( function( $ ) {
3 -
42 /**
5 - * Finds the highest tabindex in use.
 3+ * Finds the lowerst tabindex in use within a selection
64 *
 5+ * @return Integer of lowest tabindex on the page
 6+ */
 7+jQuery.fn.firstTabIndex = function() {
 8+ var minTabIndex = 0;
 9+ $(this).find( '[tabindex]' ).each( function() {
 10+ var tabIndex = parseInt( $(this).attr( 'tabindex' ) );
 11+ if ( tabIndex > minTabIndex ) {
 12+ minTabIndex = tabIndex;
 13+ }
 14+ } );
 15+ return minTabIndex;
 16+};
 17+/**
 18+ * Finds the highest tabindex in use within a selection
 19+ *
720 * @return Integer of highest tabindex on the page
821 */
9 -$.fn.maxTabIndex( function() {
 22+jQuery.fn.lastTabIndex = function() {
1023 var maxTabIndex = 0;
1124 $(this).find( '[tabindex]' ).each( function() {
1225 var tabIndex = parseInt( $(this).attr( 'tabindex' ) );
@@ -14,6 +27,4 @@
1528 }
1629 } );
1730 return maxTabIndex;
18 -} );
19 -
20 -} )();
\ No newline at end of file
 31+};
\ No newline at end of file
Index: trunk/phase3/resources/jquery/jquery.collapsibleTabs.js
@@ -0,0 +1,113 @@
 2+/*
 3+ * Collapsible tabs jQuery Plugin
 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+ } );
 23+
 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()
 57+ } );
 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' );
 64+ }
 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' ) );
 78+ }
 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' );
 89+ }
 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
Property changes on: trunk/phase3/resources/jquery/jquery.collapsibleTabs.js
___________________________________________________________________
Added: svn:eol-style
1115 + native
Index: trunk/phase3/resources/Resources.php
@@ -30,6 +30,9 @@
3131 'jquery.client' => new ResourceLoaderFileModule(
3232 array( 'scripts' => 'resources/jquery/jquery.client.js' )
3333 ),
 34+ 'jquery.collapsibleTabs' => new ResourceLoaderFileModule(
 35+ array( 'scripts' => 'resources/jquery/jquery.collapsibleTabs.js' )
 36+ ),
3437 'jquery.color' => new ResourceLoaderFileModule(
3538 array( 'scripts' => 'resources/jquery/jquery.color.js' )
3639 ),

Follow-up revisions

RevisionCommit summaryAuthorDate
r74082Resolves issue in r73046 where a jQuery plugin assumed $; wrapped it in a clo...tparscal18:05, 1 October 2010
r74088Improved on r73046 by removing asumption of $ === jQuery.tparscal19:22, 1 October 2010
r81264Wrapping core modules (FIXME from r79929)...krinkle19:33, 31 January 2011

Comments

#Comment by Catrope (talk | contribs)   14:57, 1 October 2010

All these also need to be wrapped in a closure because they use $.

#Comment by Trevor Parscal (WMF) (talk | contribs)   18:06, 1 October 2010

Good catch, resolved in r74082.

#Comment by Catrope (talk | contribs)   18:08, 1 October 2010

That fixed collapsibleTabs but not tabIndex.

#Comment by Trevor Parscal (WMF) (talk | contribs)   19:22, 1 October 2010

Yup, darn me. All good in r74088.

Status & tagging log