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 isLargerThanPhone = window.matchMedia('screen and (min-width: 580px)').matches;
  12
  13 var fatNav = document.querySelector('#fatnav');
  14 var search = document.querySelector('#search');
  15
  16 function hideActive(parentNode) {
  17   //parentNode.classList.remove('active');
  18
  19   [].forEach.call(parentNode.querySelectorAll('.active'), function(el, i) {
  20     el.classList.remove('active');
  21   });
  22 }
  23
  24 // Clicking outside the fatnav.
  25 document.body.addEventListener('click', function(e) {
  26   hideActive(fatNav);
  27 });
  28
  29
  30 // Fatnav activates onclick and closes on mouseleave.
  31 var pillars = document.querySelectorAll('.pillar');
  32 [].forEach.call(pillars, function(pillar, i) {
  33   pillar.addEventListener('click', function(e) {
  34     if (e.target.classList.contains('toplevel')) {
  35       e.stopPropagation(); // prevent body handler from being called.
  36       var wasAlreadyOpen = this.classList.contains('active');
  37       hideActive(fatNav); // de-activate other fatnav items.
  38       wasAlreadyOpen ? this.classList.remove('active') :
  39                        this.classList.add('active');
  40     }
  41   });
  42
  43   pillar.addEventListener('mouseleave', function(e) {
  44     if (!e.target.classList.contains('pillar') ||
  45         e.toElement.classList.contains('expandee')) {
  46       return;
  47     }
  48
  49     if (e.toElement != fatNav && !e.toElement.classList.contains('pillar') &&
  50         e.toElement != search) {
  51       hideActive(fatNav);
  52     }
  53   });
  54
  55 });
  56
  57 if (isLargerThanPhone) {
  58   search.addEventListener('click', function(e) {
  59     e.stopPropagation();
  60
  61     // Only toggle if magnifying glass is clicked.
  62     if (e.target.localName == 'img') {
  63       var wasAlreadyOpen = this.classList.contains('active');
  64       hideActive(fatNav); // de-activate other fatnav items.
  65       wasAlreadyOpen ? this.classList.remove('active') :
  66                        this.classList.add('active');
  67       if (!wasAlreadyOpen) {
  68         var searchField = document.getElementById('chrome-docs-cse-input');
  69         var cse = google && google.search && google.search.cse && google.search.cse.element.getElement('results') || null;
  70         if (cse)
  71           cse.clearAllResults();
  72         searchField.select();
  73         searchField.focus();
  74       }
  75     }
  76   });
  77
  78 } else {
  79   var mobileNavCollasper = document.querySelector('#topnav .collase-icon');
  80   mobileNavCollasper.addEventListener('click', function(e) {
  81     e.stopPropagation();
  82     fatNav.classList.toggle('active');
  83     this.classList.toggle('active');
  84   });
  85 }
  86
  87 if (!isTouch) {
  88   // Hitting ESC hides fatnav menus.
  89   document.body.addEventListener('keydown', function(e) {
  90     if (e.keyCode == 27) { // ESC
  91       hideActive(fatNav);
  92     }
  93   });
  94 }
  95
  96 })();