Index: chrome/common/extensions/docs/static/js/fatnav.js |
diff --git a/chrome/common/extensions/docs/static/js/fatnav.js b/chrome/common/extensions/docs/static/js/fatnav.js |
new file mode 100644 |
index 0000000000000000000000000000000000000000..7cf7d06e97dd259c0a077c4ef72de8ed9df93570 |
--- /dev/null |
+++ b/chrome/common/extensions/docs/static/js/fatnav.js |
@@ -0,0 +1,96 @@ |
+// Copyright (c) 2013 The Chromium Authors. All rights reserved. |
+// Use of this source code is governed by a BSD-style license that can be |
+// found in the LICENSE file. |
+ |
+/** |
+ * Adds toggle controls to the fat navbar. |
+ */ |
+ |
+(function() { |
+var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)); |
+var isLargerThanPhone = window.matchMedia('screen and (min-width: 580px)').matches; |
+ |
+var fatNav = document.querySelector('#fatnav'); |
+var search = document.querySelector('#search'); |
+ |
+function hideActive(parentNode) { |
+ //parentNode.classList.remove('active'); |
+ |
+ [].forEach.call(parentNode.querySelectorAll('.active'), function(el, i) { |
+ el.classList.remove('active'); |
+ }); |
+} |
+ |
+// Clicking outside the fatnav. |
+document.body.addEventListener('click', function(e) { |
+ hideActive(fatNav); |
+}); |
+ |
+ |
+// Fatnav activates onclick and closes on mouseleave. |
+var pillars = document.querySelectorAll('.pillar'); |
+[].forEach.call(pillars, function(pillar, i) { |
+ pillar.addEventListener('click', function(e) { |
+ if (e.target.classList.contains('toplevel')) { |
+ e.stopPropagation(); // prevent body handler from being called. |
+ var wasAlreadyOpen = this.classList.contains('active'); |
+ hideActive(fatNav); // de-activate other fatnav items. |
+ wasAlreadyOpen ? this.classList.remove('active') : |
+ this.classList.add('active'); |
+ } |
+ }); |
+ |
+ pillar.addEventListener('mouseleave', function(e) { |
+ if (!e.target.classList.contains('pillar') || |
+ e.toElement.classList.contains('expandee')) { |
+ return; |
+ } |
+ |
+ if (e.toElement != fatNav && !e.toElement.classList.contains('pillar') && |
+ e.toElement != search) { |
+ hideActive(fatNav); |
+ } |
+ }); |
+ |
+}); |
+ |
+if (isLargerThanPhone) { |
+ search.addEventListener('click', function(e) { |
+ e.stopPropagation(); |
+ |
+ // Only toggle if magnifying glass is clicked. |
+ if (e.target.localName == 'img') { |
+ var wasAlreadyOpen = this.classList.contains('active'); |
+ hideActive(fatNav); // de-activate other fatnav items. |
+ wasAlreadyOpen ? this.classList.remove('active') : |
+ this.classList.add('active'); |
+ if (!wasAlreadyOpen) { |
+ var searchField = document.getElementById('chrome-docs-cse-input'); |
+ var cse = google && google.search && google.search.cse && google.search.cse.element.getElement('results') || null; |
+ if (cse) |
+ cse.clearAllResults(); |
+ searchField.select(); |
+ searchField.focus(); |
+ } |
+ } |
+ }); |
+ |
+} else { |
+ var mobileNavCollasper = document.querySelector('#topnav .collase-icon'); |
+ mobileNavCollasper.addEventListener('click', function(e) { |
+ e.stopPropagation(); |
+ fatNav.classList.toggle('active'); |
+ this.classList.toggle('active'); |
+ }); |
+} |
+ |
+if (!isTouch) { |
+ // Hitting ESC hides fatnav menus. |
+ document.body.addEventListener('keydown', function(e) { |
+ if (e.keyCode == 27) { // ESC |
+ hideActive(fatNav); |
+ } |
+ }); |
+} |
+ |
+})(); |