Docserver: Fixes for expand/collapse issue and fatnav closing on mouseleave.

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 554f3bcdc56f92adb4f38fabfc6280a7fe7e8d84..262ab444f590bdd4b71a10a69f3aaeaf4b4b2873 100644
--- a/chrome/common/extensions/docs/static/js/article.js
+++ b/chrome/common/extensions/docs/static/js/article.js
@@ -9,11 +9,17 @@
 // button: click logic, and when to show it.
 (function() {
 
-var isLargerThanMobile = window.matchMedia('screen and (min-width: 580px)').matches;
+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.
+if (!(sidebar && articleBody)) {
+  return;
+}
 
 function addPermalink(el) {
   el.classList.add('has-permalink');
@@ -31,47 +37,54 @@ function addPermalinkHeadings(container) {
   }
 }
 
-// Bomb out if we're not on an article page and have a TOC.
-if (!(sidebar && articleBody)) {
-  return;
+function onScroll(e) {
+  window.scrollY >= sidebarOffsetTop ? sidebar.classList.add('sticky') :
+                                        sidebar.classList.remove('sticky');

[Renato Mangini (chromium), 2014/02/13 01:35:15]

nit: fix indentation

 }
 
-if (isLargerThanMobile) {
-  var toc = sidebar.querySelector('#toc');
-  var offsetTop = sidebar.offsetParent.offsetTop
+function onMediaQuery(e) {
+  if (e.matches) {
+    // Prevent permalinks from appearing on mobile.

[Renato Mangini (chromium), 2014/02/13 01:35:15]

I think this comment is wrong, since removing a "no-permalink" class should mean
the opposite. 

+    document.body.classList.remove('no-permalink');
 

[Renato Mangini (chromium), 2014/02/13 01:35:15]

nit: remove white lines in these if/else blocks, since they are not used to
separate semantic blocks.

-  document.addEventListener('scroll', function(e) {
-    window.scrollY >= offsetTop ? sidebar.classList.add('sticky') :
-                                  sidebar.classList.remove('sticky');
-  });
+    sidebarOffsetTop = sidebar.offsetParent.offsetTop
 
-  // Add +/- expander to headings with subheading children.
-  [].forEach.call(toc.querySelectorAll('.toplevel'), function(heading) {
-    if (heading.querySelector('.toc')) {
-      heading.firstChild.classList.add('hastoc');
-    }
-  });
+    document.addEventListener('scroll', onScroll);
+  } else {
+    // Prevent permalinks from appearing on mobile.
+    document.body.classList.add('no-permalink');
 
-  toc.addEventListener('click', function(e) {
-    var parent = e.target.parentElement;
-    if (e.target.localName == 'a' && e.target.classList.contains('hastoc') &&
-        parent.classList.contains('toplevel')) {
-      // Allow normal link click if  h2 toplevel heading doesn't have h3s.
+    document.removeEventListener('scroll', onScroll);
+  }
+}
+
+// Toggle collapsible sections (mobile).
+articleBody.addEventListener('click', function(e) {
+  if (e.target.localName == 'h2' && !isLargerThanMobileQuery.matches) {
+    e.target.parentElement.classList.toggle('active');
+  }
+});
+
+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');
     }
-  });
+  }
+});
 
-} else {
-  // Prevent permalinks from appearong on mobile.
-  document.body.classList.add('no-permalink');
+// Add +/- expander to headings with subheading children.
+[].forEach.call(toc.querySelectorAll('.toplevel'), function(heading) {
+  if (heading.querySelector('.toc')) {
+    heading.firstChild.classList.add('hastoc');
+  }
+});
 
-  articleBody.addEventListener('click', function(e) {
-    if (e.target.localName == 'h2') {
-      e.target.parentElement.classList.toggle('active');
-    }
-  });
-}
+isLargerThanMobileQuery.addListener(onMediaQuery);
+onMediaQuery(isLargerThanMobileQuery);
 
 addPermalinkHeadings(articleBody);