Home | History | Annotate | Download | only in 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 })();
    105