Adjustments to the fatnav and sidenav, and other CSS updates

chrome/common/extensions/docs/static/js/article.js

Index: chrome/common/extensions/docs/static/js/article.js
diff --git a/chrome/common/extensions/docs/static/js/article.js b/chrome/common/extensions/docs/static/js/article.js
index 1c8ef09f409ee44053c6c329d9394e53fad7e403..ecdefb7329dbf03bee506db90fb30458e3ff9c5c 100644
--- a/chrome/common/extensions/docs/static/js/article.js
+++ b/chrome/common/extensions/docs/static/js/article.js
@@ -13,7 +13,6 @@ var isLargerThanMobileQuery =
     window.matchMedia('screen and (min-width: 581px)');
 
 var sidebar = document.querySelector('.inline-toc');
-var sidebarOffsetTop = null;
 var articleBody = document.querySelector('[itemprop="articleBody"]');
 
 // Bomb out unless we're on an article page and have a TOC.
@@ -21,6 +20,9 @@ if (!(sidebar && articleBody)) {
   return;
 }
 
+var toc = sidebar.querySelector('#toc');
+var tocOffsetTop = sidebar.offsetParent.offsetTop + toc.offsetTop;
+
 function addPermalink(el) {
   el.classList.add('has-permalink');
   var id = el.id || el.textContent.toLowerCase().replace(' ', '-');
@@ -37,16 +39,19 @@ function addPermalinkHeadings(container) {
   }
 }
 
+function toggleStickySidenav(){
+  toc.classList.toggle('sticky', window.scrollY >= tocOffsetTop);
+}
+
 function onScroll(e) {
-  window.scrollY >= sidebarOffsetTop ? sidebar.classList.add('sticky') :
-                                       sidebar.classList.remove('sticky');
+  toggleStickySidenav();
 }
 
 function onMediaQuery(e) {
   if (e.matches) {
     // On tablet & desktop, show permalinks, manage TOC position.
     document.body.classList.remove('no-permalink');
-    sidebarOffsetTop = sidebar.offsetParent.offsetTop
+    tocOffsetTop = sidebar.offsetParent.offsetTop + toc.offsetTop;
     document.addEventListener('scroll', onScroll);
   } else {
     // On mobile, hide permalinks. TOC is hidden, doesn't need to scroll.
@@ -62,14 +67,20 @@ articleBody.addEventListener('click', function(e) {
   }
 });
 
-sidebar.querySelector('#toc').addEventListener('click', function(e) {
-  var parent = e.target.parentElement;
-  if (e.target.localName == 'a' && parent.classList.contains('toplevel')) {
-    // Allow normal link click if  h2 toplevel heading doesn't have h3s.
-    if (parent.querySelector('.toc')) {
-      e.preventDefault();
-      parent.classList.toggle('active');
-    }
+toc.addEventListener('click', function(e) {
+  // React only if clicking on a toplevel menu anchor item
+  // that is not currently open
+  if (e.target.classList.contains('hastoc') &&
+      !e.target.parentElement.classList.contains('active')) {
+
+    // close any previously open subnavs
+    [].forEach.call(toc.querySelectorAll('.active'), function(li){
+      li.classList.remove('active');
+    });
+
+    // then open the clicked one
+    e.target.parentElement.classList.add('active');
+

[not at google - send to devlin, 2014/06/05 17:20:20]

no blank line here

[pearlchen, 2014/06/05 19:38:47]

Done.

   }

[not at google - send to devlin, 2014/06/05 17:20:20]

also it's good practice to e.preventDefault/e.stopPropagation unless there's
good reason not too.

[pearlchen, 2014/06/05 19:38:47]

I definitely don't want preventDefault but what would the benefit of
stopPropagation be here? Performance?

On 2014/06/05 17:20:20, kalman wrote:

[not at google - send to devlin, 2014/06/05 19:43:48]

actually the preventDefault thing would fix the issue I was seeing with the
expansion, hence my comment :) but if it's a feature not a bug.. hm.

as for stopPropagation, performance is one argument, but generally I think it's
good practice though not essential.

 });
 
@@ -82,6 +93,7 @@ sidebar.querySelector('#toc').addEventListener('click', function(e) {
 
 isLargerThanMobileQuery.addListener(onMediaQuery);
 onMediaQuery(isLargerThanMobileQuery);
+toggleStickySidenav();
 
 addPermalinkHeadings(articleBody);