Home | History | Annotate | Download | only in js 
      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() {
     10 var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
     11 var isLargerThanPhoneQuery = window.matchMedia('screen and (min-width: 581px)');
     12 
     13 var fatNav = document.querySelector('#fatnav');
     14 var search = document.querySelector('#search');
     15 var mobileNavCollasper = document.querySelector('#topnav .collase-icon');
     16 
     17 function 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.
     26 document.body.addEventListener('click', function(e) {
     27   hideActive(fatNav);
     28 });
     29 
     30 
     31 // Fatnav activates onclick and closes on mouseleave.
     32 var 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.
     47 search.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.
     71 mobileNavCollasper.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 
     79 if (!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