chrome/common/extensions/docs/static/js/fatnav.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 var catLinks = fatNav.querySelectorAll('.category > a');
  18 var catPath = findCategoryPath();
  19
  20 function hideActive(parentNode) {
  21   //parentNode.classList.remove('active');
  22
  23   [].forEach.call(parentNode.querySelectorAll('.active'), function(el, i) {
  24     el.classList.remove('active');
  25   });
  26 }
  27
  28 function findCategoryPath() {
  29   var sel = document.querySelector('.inline-site-toc .selected');
  30   if (!sel || !sel.parentElement.previousElementSibling)
  31     return;
  32   return sel.parentElement.previousElementSibling.getAttribute('href');
  33 }
  34
  35 function findPillar(el) {
  36   var p = el;
  37   while (p && !p.classList.contains('pillar')) {
  38     p = p.parentElement;
  39   }
  40   return p;
  41 }
  42
  43 // Clicking outside the fatnav.
  44 document.body.addEventListener('click', function(e) {
  45   hideActive(fatNav);
  46 });
  47
  48 // Fatnav activates onclick and closes on mouseleave.
  49 var pillars = document.querySelectorAll('.pillar');
  50 [].forEach.call(pillars, function(pillar, i) {
  51   pillar.addEventListener('click', function(e) {
  52     if (e.target.classList.contains('toplevel')) {
  53       e.stopPropagation(); // prevent body handler from being called.
  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     }
  59   });
  60 });
  61
  62 // Search button is used in tablet & desktop mode.
  63 // In phone mode search is embedded in the menu.
  64 search.addEventListener('click', function(e) {
  65   if (!isLargerThanPhoneQuery.matches)
  66     return;
  67   e.stopPropagation();
  68
  69   // Only toggle if magnifying glass is clicked.
  70   if (e.target.localName == 'img') {
  71     var wasAlreadyOpen = this.classList.contains('active');
  72     hideActive(fatNav); // de-activate other fatnav items.
  73     wasAlreadyOpen ? this.classList.remove('active') :
  74                      this.classList.add('active');
  75     if (!wasAlreadyOpen) {
  76       var searchField = document.getElementById('chrome-docs-cse-input');
  77       var cse = google && google.search && google.search.cse &&
  78                 google.search.cse.element.getElement('results') || null;
  79       if (cse)
  80         cse.clearAllResults();
  81       searchField.select();
  82       searchField.focus();
  83     }
  84   }
  85 });
  86
  87 // In phone mode, show the fatnav when the menu button is clicked.
  88 mobileNavCollasper.addEventListener('click', function(e) {
  89   if (isLargerThanPhoneQuery.matches)
  90     return;
  91   e.stopPropagation();
  92   fatNav.classList.toggle('active');
  93   this.classList.toggle('active');
  94 });
  95
  96 if (!isTouch) {
  97   // Hitting ESC hides fatnav menus.
  98   document.body.addEventListener('keydown', function(e) {
  99     if (e.keyCode == 27) { // ESC
 100       hideActive(fatNav);
 101     }
 102   });
 103 }
 104
 105 // Highlight selected menu item based on the current URL
 106 for (var i = 0, a; a = catLinks[i]; i++) {
 107   var href = a.getAttribute('href');
 108   if (href === window.location.pathname || catPath && href === catPath) {
 109     a.classList.add('highlight');
 110     p = findPillar(a);
 111     if (p) {
 112       p.classList.add('highlight');
 113     }
 114     break;
 115   }
 116 }
 117
 118 })();