chrome/common/extensions/docs/static/js/tabs.js

   1 // Copyright (c) 2012 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  * Add support for tab pannels on custom elements (tabs, header and content)
   7  *
   8  */
   9 (function() {
  10
  11 function registerEvent(target, eventType, handler) {
  12   if (target.addEventListener) {
  13     target.addEventListener(eventType, handler);
  14   } else {
  15     target.attachEvent(eventType, handler);
  16   }
  17 }
  18
  19 function getSessionKey(key) {
  20   return window.sessionStorage.getItem("__tab_"+key);
  21 }
  22
  23 function setSessionKey(key, value) {
  24   window.sessionStorage.setItem("__tab_"+key, value);
  25 }
  26
  27 function onTabHeaderKeyDown(e) {
  28   if (e.keyCode == 13) {
  29     e.preventDefault();
  30     onTabClicked(e);
  31   }
  32 }
  33
  34 function onTabClicked(e) {
  35   var tabs = e.target.parentNode;
  36   if (!tabs || tabs.tagName !== 'TABS')
  37     return;
  38
  39   var headers = tabs.getElementsByTagName('header'),
  40     contents = tabs.getElementsByTagName('content'),
  41     tabGroup = tabs.getAttribute("data-group"),
  42     tabValue = e.target.getAttribute("data-value");
  43
  44   if (tabGroup && tabValue && window.sessionStorage)
  45     setSessionKey(tabGroup, tabValue);
  46
  47   for (var i=0; i<headers.length; i++) {
  48     if (headers[i] === e.target) {
  49       headers[i].classList.remove('unselected');
  50       if (contents.length > i)
  51         contents[i].classList.remove('unselected');
  52     } else {
  53       headers[i].classList.add('unselected');
  54       if (contents.length > i)
  55         contents[i].classList.add('unselected');
  56     }
  57   }
  58 }
  59
  60 function initTabPane(tab) {
  61   var tabGroup = tab.getAttribute("data-group");
  62   if (tabGroup && window.sessionStorage)
  63     var tabGroupSelectedValue = getSessionKey(tabGroup);
  64
  65   var headers = tab.getElementsByTagName('header');
  66   var contents = tab.getElementsByTagName('content');
  67   var hasSelected = false;
  68
  69   if (headers.length==0 || contents.length==0)
  70     return;
  71
  72   for (var j=0; j<headers.length; j++) {
  73     var selected = tabGroup && tabGroupSelectedValue
  74       && tabGroupSelectedValue===headers[j].getAttribute("data-value");
  75
  76     if (!hasSelected && selected) {
  77       headers[j].classList.remove("unselected");
  78       contents[j].classList.remove("unselected");
  79       hasSelected = true;
  80     } else {
  81       headers[j].classList.add("unselected");
  82       contents[j].classList.add("unselected");
  83     }
  84
  85     headers[j].addEventListener('click', onTabClicked);
  86     headers[j].addEventListener('keydown', onTabHeaderKeyDown);
  87   }
  88
  89   if (!hasSelected) {
  90     headers[0].classList.remove("unselected");
  91     contents[0].classList.remove("unselected");
  92   }
  93 }
  94
  95 function onLoad() {
  96   var tabs = document.getElementsByTagName('tabs');
  97   for (var i=0; i<tabs.length; i++) {
  98     initTabPane(tabs[i]);
  99   }
 100 }
 101
 102 window.addEventListener('DOMContentLoaded', onLoad);
 103
 104 })();