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
11function registerEvent(target, eventType, handler) {
12  if (target.addEventListener) {
13    target.addEventListener(eventType, handler);
14  } else {
15    target.attachEvent(eventType, handler);
16  }
17}
18
19function getSessionKey(key) {
20  return window.sessionStorage.getItem("__tab_"+key);
21}
22
23function setSessionKey(key, value) {
24  window.sessionStorage.setItem("__tab_"+key, value);
25}
26
27function onTabHeaderKeyDown(e) {
28  if (e.keyCode == 13) {
29    e.preventDefault();
30    onTabClicked(e);
31  }
32}
33
34function 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
60function 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
95function onLoad() {
96  var tabs = document.getElementsByTagName('tabs');
97  for (var i=0; i<tabs.length; i++) {
98    initTabPane(tabs[i]);
99  }
100}
101
102window.addEventListener('DOMContentLoaded', onLoad);
103
104})();
105