11define ( 'navbar' ,
2- [ 'categories' , 'jquery' , 'log' , 'navigation' , 'nunjucks' , 'settings' ,
3- 'underscore' , 'urls' , 'user' , 'z' ] ,
4- function ( cats , $ , log , navigation , nunjucks , settings , _ , urls , user , z ) {
2+ [ 'capabilities' , 'categories' , 'jquery' , 'log' , 'navigation' , 'nunjucks' ,
3+ 'settings' , 'underscore' , 'user' , 'z' ] ,
4+ function ( capabilities , cats , $ , log , navigation , nunjucks , settings , _ ,
5+ user , z ) {
56 'use strict' ;
67 var logger = log ( 'navbar' ) ;
78
8- var DESKTOP_WIDTH = 710 ;
9- var NAV_MKT_BASE_OFFSET = - 65 ;
10- var NAV_SETTINGS_BASE_OFFSET = 0 ;
119 var NAV_LINK_VISIBLE_WIDTH = 50 ;
1210
1311 function initNavbarButtons ( ) {
1412 // Navbar settings + Marketplace buttons.
13+ var $navContainer = $ ( '.navbar-container' ) ;
1514 var $mktNav = $ ( '.nav-mkt' ) ;
1615 var $settingsNav = $ ( '.nav-settings' ) ;
1716 var $mktNavGroup = $mktNav . add ( '.act-tray-mobile' ) ;
@@ -20,14 +19,15 @@ define('navbar',
2019 function toggleNavbar ( $on , $off ) {
2120 $on . addClass ( 'active' ) ;
2221 $off . removeClass ( 'active' ) ;
22+ $navContainer [ 0 ] . scrollLeft = 0 ;
2323 }
2424
2525 function fitNavbarOnSwitch ( $navbar , $item ) {
2626 // Switching between navbars makes it difficult to do initial
2727 // line-fitting since the navbar is in a transitioning state. So
2828 // we do a timeout. But for navbars that have already been fitted,
2929 // don't do a timeout delay.
30- var waitForTransition = 500 ;
30+ var waitForTransition = 200 ;
3131 if ( $navbar . data ( 'fitted' ) ) {
3232 waitForTransition = 0 ;
3333 }
@@ -41,7 +41,6 @@ define('navbar',
4141 z . body . on ( 'click' , '.act-tray-mobile' , function ( e ) {
4242 // Activate Settings page navbar.
4343 e . preventDefault ( ) ;
44- $mktNav . css ( 'right' , '' ) ; // Reset the offset for transition effect.
4544 toggleNavbar ( $settingsNavGroup , $mktNavGroup ) ;
4645
4746 var $firstLink = $settingsNavGroup . find ( '[data-tab]:first-child a' ) ;
@@ -53,7 +52,6 @@ define('navbar',
5352 . on ( 'click' , '.mkt-tray' , function ( e ) {
5453 // Activate Marketplace pages navbar.
5554 e . preventDefault ( ) ;
56- $ ( '.nav-settings' ) . css ( 'right' , '' ) ; // Reset the offset for transition effect.
5755 toggleNavbar ( $mktNavGroup , $settingsNavGroup ) ;
5856
5957 var $firstLink = $mktNavGroup . find ( '[data-tab]:first-child a' ) ;
@@ -65,76 +63,22 @@ define('navbar',
6563 . on ( 'click' , '.site a' , function ( ) {
6664 // Activate Marketplace pages navbar.
6765 toggleNavbar ( $mktNavGroup , $settingsNavGroup ) ;
68- } ) ;
69- }
70- z . body . one ( 'loaded' , initNavbarButtons ) ;
71-
72- z . body . on ( 'click' , '.navbar li > a' , function ( ) {
73- var $this = $ ( this ) ;
74- if ( $this . hasClass ( 'desktop-cat-link' ) ) {
75- // Don't allow click of category tab on desktop.
76- return ;
77- }
78-
79- calcNavbarOffset ( $this . closest ( 'li' ) ) ;
80- } ) ;
81-
82- function calcNavbarOffset ( $item ) {
83- // Calculate appropriate offsets for the navbar so that it slides well
84- // for any language. Good luck understanding what's going on.
85- var $navbar = $item . closest ( '.navbar' ) ;
86- if ( ! $navbar . length ) {
87- return ;
88- }
89-
90- var currentNavbarOffset = $navbar . offset ( ) . left * - 1 ;
91- var padding = 10 ;
92- var right = currentNavbarOffset ;
93- var rightEdgeOffset = $item . offset ( ) . left + $item . width ( ) ;
94-
95- var baseOffset = NAV_MKT_BASE_OFFSET ;
96- var windowWidth = z . win . width ( ) ;
97- if ( $navbar . hasClass ( 'nav-settings' ) ) {
98- baseOffset = NAV_SETTINGS_BASE_OFFSET ;
99- windowWidth -= $ ( '.mkt-tray' ) . width ( ) ;
100- }
101-
102- if ( rightEdgeOffset > windowWidth ) {
103- // Sliding forwards.
104- // If the link is overflowing off the right edge of the page,
105- // slide the navbar enough so the link is fully visible.
106- right = ( currentNavbarOffset +
107- ( rightEdgeOffset - windowWidth ) + padding ) ;
108-
109- // If there is another link after the current link, move the navbar
110- // some more such that the next link is clickable (50px target).
111- if ( $item . next ( ) . length ) {
112- right += NAV_LINK_VISIBLE_WIDTH ;
113- }
114- } else if ( currentNavbarOffset !== NAV_MKT_BASE_OFFSET ) {
115- // Sliding backwards.
116- // If the next link to the one clicked is in full view, slide it
117- // so it becomes visible by only 50px and thus clickable.
118- var $next = $item . next ( ) ;
119- if ( $next . length ) {
120- var nextLeftEdgeOffset = $next . offset ( ) . left ;
121- var nextRightEdgeOffset = nextLeftEdgeOffset + $next . width ( ) ;
122- if ( nextRightEdgeOffset < windowWidth ) {
123- right = ( currentNavbarOffset -
124- ( windowWidth + NAV_LINK_VISIBLE_WIDTH - nextRightEdgeOffset ) +
125- padding ) ;
126- }
66+ } )
67+ . on ( 'click' , '.tab-link' , function ( e ) {
68+ if ( capabilities . widescreen ( ) ) {
69+ return ;
12770 }
128- }
129-
130- if ( right < baseOffset ) {
131- // Don't scroll past the base starting point.
132- right = baseOffset ;
133- }
13471
135- $item . closest ( '.navbar' ) . css ( 'right' , right + 'px' ) ;
136- return right ;
72+ // Jump to the beginning when user clicks on the first link.
73+ if ( $ ( this ) . closest ( '.tab-item' ) . is ( ':first-child' ) ) {
74+ $navContainer [ 0 ] . scrollLeft = 0 ;
75+ } else {
76+ $navContainer [ 0 ] . scrollLeft = this . getBoundingClientRect ( ) . left ;
77+ }
78+ this . blur ( ) ;
79+ } ) ;
13780 }
81+ z . body . one ( 'loaded' , initNavbarButtons ) ;
13882
13983 function linefitNavbarMobile ( $navbar ) {
14084 // Linefits the navbar on mobile such that the nav element flowing
@@ -183,20 +127,17 @@ define('navbar',
183127 }
184128
185129 function fitNavbarMobile ( $item ) {
186- // Does both line-fitting and offset calculations for the navbar.
187- // Note that line-fitting must be done first since the offset affects
188- // its calculations.
130+ // Does line-fitting for the navbar.
189131 linefitNavbarMobile ( $item . closest ( '.navbar' ) ) ;
190- calcNavbarOffset ( $item ) ;
191132 }
192133
193134 function fitNavbarDesktop ( ) {
194135 // Shrinks the font-size and padding of the nav elements until it
195136 // all fits within the window.
196- var windowWidth = z . win . width ( ) ;
197- if ( windowWidth < DESKTOP_WIDTH ) {
137+ if ( ! capabilities . widescreen ( ) ) {
198138 return ;
199139 }
140+ var windowWidth = z . win . width ( ) ;
200141 var $navbar = $ ( '.nav-mkt' ) ;
201142 var $navbarItems = $navbar . find ( 'li' ) ;
202143 var navbarWidth = $navbar . width ( ) ;
0 commit comments