| Index: trunk/extensions/UsabilityInitiative/CollapsibleTabs/CollapsibleTabs.js |
| — | — | @@ -1,89 +1,46 @@ |
| 2 | | -var CollapsibleTabs = { |
| 3 | | - // Variable for storing the left position of the left nav |
| 4 | | - leftNavPosition: 0, |
| 5 | | - // Variable for storing the width of the left nav |
| 6 | | - leftNavWidth: 0, |
| 7 | | - // pointer to the containing ul for tabs |
| 8 | | - tabContainer: null, |
| 9 | | - // pointer to the containing ul for the drop down menu items |
| 10 | | - dropDownConatiner: null, |
| 11 | | - // Variable for storing the number of items initially in the drop down menu |
| 12 | | - minDropDownItems: 0, |
| 13 | | - // Variable for storing tabs sizes before they're placed in the drop down menu |
| 14 | | - tabSizes: [], |
| 15 | | - // action flag to avoid multiple events altering the dom concurrently |
| 16 | | - shifting: false, |
| 17 | | - |
| 18 | | - init: function() { |
| 19 | | - // store the left navigations position and width |
| 20 | | - this.leftNavPosition = $j('#left-navigation').position().left; |
| 21 | | - this.leftNavWidth = $j('#left-navigation').width(); |
| 22 | | - |
| 23 | | - // store references to the two containers |
| 24 | | - this.tabContainer = $j('#p-views ul'); |
| 25 | | - this.dropDownContainer = $j('#p-cactions ul'); |
| 26 | | - |
| 27 | | - // store the number of items in the drop down menu on load |
| 28 | | - this.minDropDownItems = this.dropDownContainer.children("li").length; |
| 29 | | - |
| 30 | | - // call the resizeHandler function to place all links in the correct spot for the current window size |
| 31 | | - this.resizeHandler(); |
| 32 | | - |
| 33 | | - // bind the resizeHandler to the windows resize event |
| 34 | | - $j(window).bind( 'resize', this.resizeHandler ); |
| 35 | | - }, |
| 36 | | - |
| 37 | | - resizeHandler: function() { |
| 38 | | - // do nothing if the dom is already moving an element |
| 39 | | - if(CollapsibleTabs.shifting) return; |
| 40 | | - |
| 41 | | - // while their are still tabs available and the two navigations are colliding |
| 42 | | - while( CollapsibleTabs.tabContainer.children("li").length > 0 && |
| 43 | | - ( CollapsibleTabs.leftNavPosition + CollapsibleTabs.leftNavWidth + 4) |
| 44 | | - > $j('#right-navigation').position().left ) { |
| 45 | | - |
| 46 | | - // set our action flag |
| 47 | | - CollapsibleTabs.shifting = true; |
| 48 | | - // move the element to the dropdown menu |
| 49 | | - CollapsibleTabs.moveToDropDown( CollapsibleTabs.tabContainer.children('li:last') ); |
| 50 | | - // unset our action flag |
| 51 | | - CollapsibleTabs.shifting = false; |
| 52 | | - |
| 53 | | - } |
| 54 | | - |
| 55 | | - // while there are still moveable items in the dropdown menu, |
| 56 | | - // and there is sufficient space to place them in the tab container |
| 57 | | - while(CollapsibleTabs.dropDownContainer.children("li").length |
| 58 | | - > CollapsibleTabs.minDropDownItems && |
| 59 | | - ( CollapsibleTabs.leftNavPosition + CollapsibleTabs.leftNavWidth + 4) |
| 60 | | - < ($j('#right-navigation').position().left - |
| 61 | | - CollapsibleTabs.tabSizes[CollapsibleTabs.tabSizes.length-1])) { |
| 62 | | - |
| 63 | | - // set our action flag |
| 64 | | - CollapsibleTabs.shifting = true; |
| 65 | | - //move the element from the dropdown to the tab |
| 66 | | - CollapsibleTabs.moveToTab(CollapsibleTabs.dropDownContainer.children('li:first')); |
| 67 | | - // unset our action flag |
| 68 | | - CollapsibleTabs.shifting = false; |
| 69 | | - } |
| 70 | | - }, |
| 71 | | - |
| 72 | | - moveToDropDown: function( ele ) { |
| 73 | | - // push this elements width onto the tabSizes array so we know how much space |
| 74 | | - // it will require to render it as a tab again |
| 75 | | - this.tabSizes.push(ele.width()); |
| | 2 | +js2AddOnloadHook( function() { |
| | 3 | + |
| | 4 | + /* ANIMATION NOT READY FOR PRIME TIME |
| | 5 | + $j.collapsibleTabs.moveToCollapsed = function( ele ) { |
| | 6 | + $moving = $j(ele); |
| | 7 | + $j($moving.data('collapsibleTabsSettings').expandedContainer).data('collapsibleTabsSettings').shifting = true; |
| | 8 | + data = $moving.data('collapsibleTabsSettings'); |
| 76 | 9 | // Remove the element from where it's at and put it in the dropdown menu |
| 77 | | - ele.remove().prependTo(this.dropDownContainer); |
| 78 | | - }, |
| 79 | | - |
| 80 | | - moveToTab: function( ele ) { |
| 81 | | - // remove this elements width value from the tabSizes array |
| 82 | | - this.tabSizes.pop(); |
| | 10 | + target = $moving.data('collapsibleTabsSettings').collapsedContainer; |
| | 11 | + // $moving.hide(500); |
| | 12 | + $moving.css("position", "relative").css('right',0); |
| | 13 | + $moving.animate({width: '0px'},"normal",function(){ |
| | 14 | + //$j(this).remove().prependTo(target).data('collapsibleTabsSettings', data).show(); |
| | 15 | + $j(this).remove().prependTo(target).data('collapsibleTabsSettings', data); |
| | 16 | + $j(this).css("position", "static").css('right','auto').css("width", "auto"); |
| | 17 | + $j($j(ele).data('collapsibleTabsSettings').expandedContainer).data('collapsibleTabsSettings').shifting = false; |
| | 18 | + }); |
| | 19 | + //$moving.remove().prependTo(target).data('collapsibleTabsSettings', data); |
| | 20 | + }; |
| | 21 | + |
| | 22 | + $j.collapsibleTabs.moveToExpanded = function( ele ) { |
| | 23 | + $moving = $j(ele); |
| | 24 | + $j($moving.data('collapsibleTabsSettings').expandedContainer).data('collapsibleTabsSettings').shifting = true; |
| | 25 | + data = $moving.data('collapsibleTabsSettings'); |
| 83 | 26 | // remove this element from where it's at and put it in the dropdown menu |
| 84 | | - ele.remove().appendTo(this.tabContainer); |
| 85 | | - } |
| 86 | | -}; |
| | 27 | + target = $moving.data('collapsibleTabsSettings').prevElement; |
| | 28 | + expandedWidth = $moving.data('collapsibleTabsSettings').expandedWidth; |
| | 29 | + $moving.css("position", "relative").css('right',0).css('width','0px'); |
| | 30 | + $moving.remove().insertAfter(target).data('collapsibleTabsSettings', data) |
| | 31 | + .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'); |
| | 34 | + $j($moving.data('collapsibleTabsSettings').expandedContainer).data('collapsibleTabsSettings').shifting = false; |
| 87 | 35 | |
| 88 | | -js2AddOnloadHook( function() { |
| 89 | | - CollapsibleTabs.init(); |
| | 36 | + }); |
| | 37 | + }; |
| | 38 | + */ |
| | 39 | + |
| | 40 | + $j('#p-views ul').collapsibleTabs().bind("beforeTabCollapse", function(){ |
| | 41 | + $j("#p-cactions").removeClass("emptyPortlet").addClass("filledPortlet"); |
| | 42 | + }).bind("beforeTabExpand", function(){ |
| | 43 | + if($j("#p-cactions li.collapsible").length==1) |
| | 44 | + $j("#p-cactions").removeClass("filledPortlet").addClass("emptyPortlet"); |
| | 45 | + }); |
| | 46 | + |
| 90 | 47 | }); |
| \ No newline at end of file |
| Index: trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php |
| — | — | @@ -61,6 +61,7 @@ |
| 62 | 62 | array( 'src' => 'js/plugins/jquery.autoEllipse.js', 'version' => 3 ), |
| 63 | 63 | array( 'src' => 'js/plugins/jquery.browser.js', 'version' => 3 ), |
| 64 | 64 | array( 'src' => 'js/plugins/jquery.cookie.js', 'version' => 3 ), |
| | 65 | + array( 'src' => 'js/plugins/jquery.collapsibleTabs.js', 'version' => 1 ), |
| 65 | 66 | array( 'src' => 'js/plugins/jquery.delayedBind.js', 'version' => 1 ), |
| 66 | 67 | array( 'src' => 'js/plugins/jquery.namespaceSelect.js', 'version' => 1 ), |
| 67 | 68 | array( 'src' => 'js/plugins/jquery.suggestions.js', 'version' => 4 ), |
| Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.collapsibleTabs.js |
| — | — | @@ -0,0 +1,94 @@ |
| | 2 | +( function( $ ) { |
| | 3 | + |
| | 4 | +$.fn.collapsibleTabs = function( $$options ) { |
| | 5 | + // return if the function is called on an empty jquery object |
| | 6 | + if( !this.length ) return this; |
| | 7 | + //merge options into the defaults |
| | 8 | + var $settings = $.extend( {}, $.collapsibleTabs.defaults, $$options ); |
| | 9 | + |
| | 10 | + this.each( function() { |
| | 11 | + var $this = $( this ); |
| | 12 | + // add the element to our array of collapsible managers |
| | 13 | + $.collapsibleTabs.instances = ( $.collapsibleTabs.instances.length == 0 ? $this : $.collapsibleTabs.instances.add( $this ) ); |
| | 14 | + // attach the settings to the elements |
| | 15 | + $this.data( 'collapsibleTabsSettings', $settings ); |
| | 16 | + // attach data to our collapsible elements |
| | 17 | + $this.children( $settings.collapsible ).each(function() { |
| | 18 | + var $collapsible = $(this); |
| | 19 | + $collapsible.data('collapsibleTabsSettings', { |
| | 20 | + 'expandedContainer': $settings.expandedContainer, |
| | 21 | + 'collapsedContainer': $settings.collapsedContainer, |
| | 22 | + 'expandedWidth': $collapsible.width(), |
| | 23 | + 'prevElement': $collapsible.prev() |
| | 24 | + }); |
| | 25 | + } ); |
| | 26 | + } ); |
| | 27 | + |
| | 28 | + // if we haven't already bound our resize hanlder, bind it now |
| | 29 | + if(!$.collapsibleTabs.boundEvent) $(window).delayedBind('500','resize', function(){ $.collapsibleTabs.handleResize(); }); |
| | 30 | + // call our resize handler to setup the page |
| | 31 | + $.collapsibleTabs.handleResize(); |
| | 32 | + return this; |
| | 33 | +}; |
| | 34 | + |
| | 35 | +$.collapsibleTabs = { |
| | 36 | + instances: [], |
| | 37 | + boundEvent: null, |
| | 38 | + defaults: { |
| | 39 | + expandedContainer: '#p-views ul', |
| | 40 | + collapsedContainer: '#p-cactions ul', |
| | 41 | + collapsible: 'li.collapsible', |
| | 42 | + shifting: false, |
| | 43 | + expandCondition: function(eleWidth) { |
| | 44 | + return ( $('#left-navigation').position().left + $('#left-navigation').width() + 4) |
| | 45 | + < ($('#right-navigation').position().left - eleWidth); |
| | 46 | + }, |
| | 47 | + collapseCondition: function() { |
| | 48 | + return ( $('#left-navigation').position().left + $('#left-navigation').width() + 4) |
| | 49 | + > $('#right-navigation').position().left; |
| | 50 | + } |
| | 51 | + }, |
| | 52 | + handleResize: function(e){ |
| | 53 | + $.collapsibleTabs.instances.each(function() { |
| | 54 | + var $this = $(this), data = $this.data('collapsibleTabsSettings'); |
| | 55 | + if(data.shifting) return; |
| | 56 | + |
| | 57 | + // if the two navigations are colliding |
| | 58 | + if( $this.children(data.collapsible).length > 0 && data.collapseCondition() ) { |
| | 59 | + |
| | 60 | + $this.trigger("beforeTabCollapse"); |
| | 61 | + // move the element to the dropdown menu |
| | 62 | + $.collapsibleTabs.moveToCollapsed($this.children(data.collapsible+':last')); |
| | 63 | + } |
| | 64 | + |
| | 65 | + // if there are still moveable items in the dropdown menu, |
| | 66 | + // and there is sufficient space to place them in the tab container |
| | 67 | + if($(data.collapsedContainer + ' ' + data.collapsible ).length > 0 |
| | 68 | + && data.expandCondition( $(data.collapsedContainer).children( |
| | 69 | + data.collapsible+":first").data('collapsibleTabsSettings').expandedWidth)) { |
| | 70 | + //move the element from the dropdown to the tab |
| | 71 | + $this.trigger("beforeTabExpand"); |
| | 72 | + $.collapsibleTabs.moveToExpanded( data.collapsedContainer + " " + data.collapsible + ':first' ); |
| | 73 | + } |
| | 74 | + }); |
| | 75 | + }, |
| | 76 | + moveToCollapsed: function( ele ) { |
| | 77 | + var $moving = $(ele); |
| | 78 | + var data = $moving.data('collapsibleTabsSettings'); |
| | 79 | + $(data.expandedContainer).data('collapsibleTabsSettings').shifting = true; |
| | 80 | + $moving.remove().prependTo(data.collapsedContainer).data('collapsibleTabsSettings', data); |
| | 81 | + $(data.expandedContainer).data('collapsibleTabsSettings').shifting = false; |
| | 82 | + $.collapsibleTabs.handleResize(); |
| | 83 | + }, |
| | 84 | + moveToExpanded: function( ele ) { |
| | 85 | + var $moving = $(ele); |
| | 86 | + var data = $moving.data('collapsibleTabsSettings'); |
| | 87 | + $(data.expandedContainer).data('collapsibleTabsSettings').shifting = true; |
| | 88 | + // remove this element from where it's at and put it in the dropdown menu |
| | 89 | + $moving.remove().insertAfter(data.prevElement).data('collapsibleTabsSettings', data); |
| | 90 | + $(data.expandedContainer).data('collapsibleTabsSettings').shifting = false; |
| | 91 | + $.collapsibleTabs.handleResize(); |
| | 92 | + } |
| | 93 | +}; |
| | 94 | + |
| | 95 | +} )( jQuery ); |
| \ No newline at end of file |
| Property changes on: trunk/extensions/UsabilityInitiative/js/plugins/jquery.collapsibleTabs.js |
| ___________________________________________________________________ |
| Name: svn:eol-style |
| 1 | 96 | + native |