| Index: trunk/extensions/UsabilityInitiative/CollapsibleTabs/CollapsibleTabs.js |
| — | — | @@ -1,6 +1,6 @@ |
| 2 | 2 | js2AddOnloadHook( function() { |
| 3 | 3 | |
| 4 | | - /* ANIMATION NOT READY FOR PRIME TIME |
| | 4 | + //Overloading the moveToCollapsed function to animate the transition |
| 5 | 5 | $j.collapsibleTabs.moveToCollapsed = function( ele ) { |
| 6 | 6 | $moving = $j(ele); |
| 7 | 7 | $j($moving.data('collapsibleTabsSettings').expandedContainer).data('collapsibleTabsSettings').shifting = true; |
| — | — | @@ -9,15 +9,16 @@ |
| 10 | 10 | target = $moving.data('collapsibleTabsSettings').collapsedContainer; |
| 11 | 11 | // $moving.hide(500); |
| 12 | 12 | $moving.css("position", "relative").css('right',0); |
| 13 | | - $moving.animate({width: '0px'},"normal",function(){ |
| | 13 | + $moving.animate({width: '1px'},"normal",function(){ |
| 14 | 14 | //$j(this).remove().prependTo(target).data('collapsibleTabsSettings', data).show(); |
| | 15 | + $j(this).hide(); |
| 15 | 16 | $j(this).remove().prependTo(target).data('collapsibleTabsSettings', data); |
| 16 | | - $j(this).css("position", "static").css('right','auto').css("width", "auto"); |
| | 17 | + $j(this).attr('style', ''); |
| 17 | 18 | $j($j(ele).data('collapsibleTabsSettings').expandedContainer).data('collapsibleTabsSettings').shifting = false; |
| 18 | 19 | }); |
| 19 | | - //$moving.remove().prependTo(target).data('collapsibleTabsSettings', data); |
| 20 | 20 | }; |
| 21 | 21 | |
| | 22 | + // Overloading the moveToExpanded function to animate the transition |
| 22 | 23 | $j.collapsibleTabs.moveToExpanded = function( ele ) { |
| 23 | 24 | $moving = $j(ele); |
| 24 | 25 | $j($moving.data('collapsibleTabsSettings').expandedContainer).data('collapsibleTabsSettings').shifting = true; |
| — | — | @@ -25,22 +26,26 @@ |
| 26 | 27 | // remove this element from where it's at and put it in the dropdown menu |
| 27 | 28 | target = $moving.data('collapsibleTabsSettings').prevElement; |
| 28 | 29 | expandedWidth = $moving.data('collapsibleTabsSettings').expandedWidth; |
| 29 | | - $moving.css("position", "relative").css('right',0).css('width','0px'); |
| 30 | | - $moving.remove().insertAfter(target).data('collapsibleTabsSettings', data) |
| | 30 | + $moving.css("position", "relative").css('left',0).css('width','1px'); |
| | 31 | + $moving.remove().css('width','1px').insertAfter(target).data('collapsibleTabsSettings', data) |
| 31 | 32 | .animate({width: expandedWidth+"px"}, "normal", function(){ |
| 32 | | - //$j(this).remove().prependTo(target).data('collapsibleTabsSettings', data).show(); |
| 33 | | - $j(this).css("position", "static").css('right','auto'); |
| | 33 | + $j(this).attr('style', ''); |
| 34 | 34 | $j($moving.data('collapsibleTabsSettings').expandedContainer).data('collapsibleTabsSettings').shifting = false; |
| 35 | 35 | |
| 36 | 36 | }); |
| 37 | 37 | }; |
| 38 | | - */ |
| 39 | | - if($j("#p-cactions li").length==0) $j("#p-cactions").removeClass("emptyPortlet").addClass("filledPortlet"); |
| 40 | | - $j('#p-views ul').collapsibleTabs().bind("beforeTabCollapse", function(){ |
| 41 | | - $j("#p-cactions").removeClass("emptyPortlet").addClass("filledPortlet"); |
| | 38 | + |
| | 39 | + // Bind callback functions to animate our drop down menu in and out |
| | 40 | + // and then call the collapsibleTabs function on the menu |
| | 41 | + $j('#p-views ul').bind("beforeTabCollapse", function(){ |
| | 42 | + if($j('#p-cactions').css('display')=='none') |
| | 43 | + $j("#p-cactions").addClass("filledPortlet").removeClass("emptyPortlet") |
| | 44 | + .find('h5').css('width','1px').animate({'width':'26px'}, 390); |
| 42 | 45 | }).bind("beforeTabExpand", function(){ |
| 43 | | - if($j("#p-cactions li.collapsible").length==1) |
| 44 | | - $j("#p-cactions").removeClass("filledPortlet").addClass("emptyPortlet"); |
| 45 | | - }); |
| | 46 | + if($j('#p-cactions li').length==1) |
| | 47 | + $j("#p-cactions h5").animate({'width':'1px'},370, function(){ |
| | 48 | + $j(this).attr('style','').parent().addClass("emptyPortlet").removeClass("filledPortlet"); |
| | 49 | + }); |
| | 50 | + }).collapsibleTabs(); |
| 46 | 51 | |
| 47 | 52 | }); |
| \ No newline at end of file |