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