| 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.1 |
| | 17 | + * @version 0.0.2 |
| 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 = 1; |
| | 22 | +$wgCollapsibleTabsStyleVersion = 2; |
| 23 | 23 | |
| 24 | 24 | /* Setup */ |
| 25 | 25 | |
| Index: trunk/extensions/UsabilityInitiative/CollapsibleTabs/CollapsibleTabs.js |
| — | — | @@ -1,13 +1,89 @@ |
| | 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()); |
| | 76 | + // 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(); |
| | 83 | + // remove this element from where it's at and put it in the dropdown menu |
| | 84 | + ele.remove().appendTo(this.tabContainer); |
| | 85 | + } |
| | 86 | +}; |
| | 87 | + |
| 2 | 88 | js2AddOnloadHook( function() { |
| 3 | | - |
| 4 | | - // add first and last classes to left and right nav |
| 5 | | - var $leftNavPosition = $j('#left-navigation').position().left; |
| 6 | | - var $leftNavWidth = $j('#left-navigation').width(); |
| 7 | | - // add browser resive event |
| 8 | | - $j(window).bind('resize', function () { |
| 9 | | - if(( $leftNavPosition + $leftNavWidth) > $j('#right-navigation').position().left){ |
| 10 | | - // Collision! Pop the last item off the right nav and put it in the drop down |
| 11 | | - console.log('collision!'); |
| 12 | | - } |
| 13 | | - }); |
| | 89 | + CollapsibleTabs.init(); |
| 14 | 90 | }); |
| \ No newline at end of file |