| Index: trunk/extensions/UsabilityInitiative/CollapsibleTabs/CollapsibleTabs.php |
| — | — | @@ -13,12 +13,12 @@ |
| 14 | 14 | * |
| 15 | 15 | * @author Adam Miller <amiller@wikimedia.org> |
| 16 | 16 | * @license GPL v2 or later |
| 17 | | - * @version 0.0.6 |
| | 17 | + * @version 0.0.7 |
| 18 | 18 | */ |
| 19 | 19 | |
| 20 | 20 | /* Configuration */ |
| 21 | 21 | // Bump the version number every time you change any of the .css/.js files |
| 22 | | -$wgCollapsibleTabsStyleVersion = 6; |
| | 22 | +$wgCollapsibleTabsStyleVersion = 7; |
| 23 | 23 | |
| 24 | 24 | /* Setup */ |
| 25 | 25 | |
| — | — | @@ -27,7 +27,7 @@ |
| 28 | 28 | 'path' => __FILE__, |
| 29 | 29 | 'name' => 'CollapsibleTabs', |
| 30 | 30 | 'author' => 'Adam Miller', |
| 31 | | - 'version' => '0.0.6', |
| | 31 | + 'version' => '0.0.7', |
| 32 | 32 | 'url' => 'http://www.mediawiki.org/wiki/Extension:CollapsibleTabs', |
| 33 | 33 | 'descriptionmsg' => 'collapsibletabs-desc', |
| 34 | 34 | ); |
| Index: trunk/extensions/UsabilityInitiative/CollapsibleTabs/CollapsibleTabs.js |
| — | — | @@ -1,5 +1,7 @@ |
| 2 | 2 | js2AddOnloadHook( function() { |
| 3 | 3 | |
| | 4 | + var rtl = $j( 'body.rtl' ).size() ? true : false; |
| | 5 | + |
| 4 | 6 | //Overloading the moveToCollapsed function to animate the transition |
| 5 | 7 | $j.collapsibleTabs.moveToCollapsed = function( ele ) { |
| 6 | 8 | var $moving = $j(ele); |
| — | — | @@ -7,11 +9,12 @@ |
| 8 | 10 | var data = $moving.data('collapsibleTabsSettings'); |
| 9 | 11 | // Remove the element from where it's at and put it in the dropdown menu |
| 10 | 12 | var target = $moving.data('collapsibleTabsSettings').collapsedContainer; |
| 11 | | - // $moving.hide(500); |
| 12 | | - $moving.css("position", "relative").css('right',0); |
| | 13 | + $moving.css("position", "relative").css( ( rtl ? 'left' : 'right'), 0 ); |
| 13 | 14 | $moving.animate({width: '1px'},"normal",function(){ |
| 14 | 15 | //$j(this).remove().prependTo(target).data('collapsibleTabsSettings', data).show(); |
| 15 | 16 | $j(this).hide(); |
| | 17 | + // add the placeholder |
| | 18 | + $j('<span class="placeholder" style="display:none;"></span>').insertAfter(this); |
| 16 | 19 | $j(this).remove().prependTo(target).data('collapsibleTabsSettings', data); |
| 17 | 20 | $j(this).attr('style', ''); |
| 18 | 21 | $j($j(ele).data('collapsibleTabsSettings').expandedContainer).data('collapsibleTabsSettings').shifting = false; |
| — | — | @@ -24,16 +27,16 @@ |
| 25 | 28 | var $moving = $j(ele); |
| 26 | 29 | $j($moving.data('collapsibleTabsSettings').expandedContainer).data('collapsibleTabsSettings').shifting = true; |
| 27 | 30 | var data = $moving.data('collapsibleTabsSettings'); |
| 28 | | - // remove this element from where it's at and put it in the dropdown menu |
| 29 | | - var target = $moving.data('collapsibleTabsSettings').prevElement; |
| | 31 | + // grab the next appearing placeholder so we can use it for replacing |
| | 32 | + var $target = $j($moving.data('collapsibleTabsSettings').expandedContainer).find('span.placeholder:first'); |
| 30 | 33 | var expandedWidth = $moving.data('collapsibleTabsSettings').expandedWidth; |
| 31 | | - $moving.css("position", "relative").css('left',0).css('width','1px'); |
| 32 | | - $moving.remove().css('width','1px').insertAfter(target).data('collapsibleTabsSettings', data) |
| | 34 | + $moving.css("position", "relative").css( ( rtl ? 'right' : 'left'), 0 ).css('width','1px'); |
| | 35 | + $target.replaceWith($moving.remove().css('width','1px').data('collapsibleTabsSettings', data) |
| 33 | 36 | .animate({width: expandedWidth+"px"}, "normal", function(){ |
| 34 | 37 | $j(this).attr('style', ''); |
| 35 | 38 | $j($moving.data('collapsibleTabsSettings').expandedContainer).data('collapsibleTabsSettings').shifting = false; |
| 36 | 39 | $j.collapsibleTabs.handleResize(); |
| 37 | | - }); |
| | 40 | + })); |
| 38 | 41 | }; |
| 39 | 42 | |
| 40 | 43 | // Bind callback functions to animate our drop down menu in and out |
| — | — | @@ -47,6 +50,24 @@ |
| 48 | 51 | $j("#p-cactions h5").animate({'width':'1px'},370, function(){ |
| 49 | 52 | $j(this).attr('style','').parent().addClass("emptyPortlet").removeClass("filledPortlet"); |
| 50 | 53 | }); |
| 51 | | - }).collapsibleTabs(); |
| 52 | | - |
| | 54 | + }).collapsibleTabs({ |
| | 55 | + expandCondition: function(eleWidth) { |
| | 56 | + if( rtl ){ |
| | 57 | + return ( $j('#right-navigation').position().left + $j('#right-navigation').width()) |
| | 58 | + < ($j('#left-navigation').position().left - eleWidth); |
| | 59 | + } else { |
| | 60 | + return ( $j('#left-navigation').position().left + $j('#left-navigation').width()) |
| | 61 | + < ($j('#right-navigation').position().left - eleWidth); |
| | 62 | + } |
| | 63 | + }, |
| | 64 | + collapseCondition: function() { |
| | 65 | + if( rtl ){ |
| | 66 | + return ( $j('#right-navigation').position().left + $j('#right-navigation').width()) |
| | 67 | + > $j('#left-navigation').position().left; |
| | 68 | + } else { |
| | 69 | + return ( $j('#left-navigation').position().left + $j('#left-navigation').width()) |
| | 70 | + > $j('#right-navigation').position().left; |
| | 71 | + } |
| | 72 | + } |
| | 73 | + }); |
| 53 | 74 | }); |
| \ No newline at end of file |