1// Copyright 2013 The Chromium Authors. All rights reserved. 2// Use of this source code is governed by a BSD-style license that can be 3// found in the LICENSE file. 4 5/** 6 * Adds toggle controls to the fat navbar. 7 */ 8 9(function() { 10var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)); 11var isLargerThanPhoneQuery = window.matchMedia('screen and (min-width: 581px)'); 12 13var fatNav = document.querySelector('#fatnav'); 14var search = document.querySelector('#search'); 15var mobileNavCollasper = document.querySelector('#topnav .collase-icon'); 16 17function hideActive(parentNode) { 18 //parentNode.classList.remove('active'); 19 20 [].forEach.call(parentNode.querySelectorAll('.active'), function(el, i) { 21 el.classList.remove('active'); 22 }); 23} 24 25// Clicking outside the fatnav. 26document.body.addEventListener('click', function(e) { 27 hideActive(fatNav); 28}); 29 30 31// Fatnav activates onclick and closes on mouseleave. 32var pillars = document.querySelectorAll('.pillar'); 33[].forEach.call(pillars, function(pillar, i) { 34 pillar.addEventListener('click', function(e) { 35 if (e.target.classList.contains('toplevel')) { 36 e.stopPropagation(); // prevent body handler from being called. 37 var wasAlreadyOpen = this.classList.contains('active'); 38 hideActive(fatNav); // de-activate other fatnav items. 39 wasAlreadyOpen ? this.classList.remove('active') : 40 this.classList.add('active'); 41 } 42 }); 43}); 44 45// Search button is used in tablet & desktop mode. 46// In phone mode search is embedded in the menu. 47search.addEventListener('click', function(e) { 48 if (!isLargerThanPhoneQuery.matches) 49 return; 50 e.stopPropagation(); 51 52 // Only toggle if magnifying glass is clicked. 53 if (e.target.localName == 'img') { 54 var wasAlreadyOpen = this.classList.contains('active'); 55 hideActive(fatNav); // de-activate other fatnav items. 56 wasAlreadyOpen ? this.classList.remove('active') : 57 this.classList.add('active'); 58 if (!wasAlreadyOpen) { 59 var searchField = document.getElementById('chrome-docs-cse-input'); 60 var cse = google && google.search && google.search.cse && 61 google.search.cse.element.getElement('results') || null; 62 if (cse) 63 cse.clearAllResults(); 64 searchField.select(); 65 searchField.focus(); 66 } 67 } 68}); 69 70// In phone mode, show the fatnav when the menu button is clicked. 71mobileNavCollasper.addEventListener('click', function(e) { 72 if (isLargerThanPhoneQuery.matches) 73 return; 74 e.stopPropagation(); 75 fatNav.classList.toggle('active'); 76 this.classList.toggle('active'); 77}); 78 79if (!isTouch) { 80 // Hitting ESC hides fatnav menus. 81 document.body.addEventListener('keydown', function(e) { 82 if (e.keyCode == 27) { // ESC 83 hideActive(fatNav); 84 } 85 }); 86} 87 88})(); 89