diff --git a/base.css b/base.css index f55a66d..adf600f 100644 --- a/base.css +++ b/base.css @@ -228,6 +228,23 @@ body { font-family: -apple-system, BlinkMacSystemFont, Ubuntu, 'Segoe UI', 'Roboto', Sans-Serif; } +.tabs { + display: flex; + flex-direction: row; + justify-content: center; +} + +.tabs h3 { + margin: 2px; + cursor: pointer; +} + +.tabs h3.selected { + border-bottom: #5555ff 2px solid; + border-bottom-left-radius: 5%; + border-bottom-right-radius: 5%; +} + @media print { footer, .no-print { display: none !important; diff --git a/common/tabs.js b/common/tabs.js new file mode 100644 index 0000000..330b83e --- /dev/null +++ b/common/tabs.js @@ -0,0 +1,66 @@ +var selectedTab = 0 + +/** + * @param {number} idx + */ +function selectTab(idx) { + var tabs = document.querySelectorAll('.tabs h3') + var tabViews = document.querySelectorAll('.tab-view') + if (tabs.length > 0) { + tabs.forEach(function (tab, tIdx) { + if (idx == tIdx) { + return + } + + tab.classList.remove('selected') + tabViews[tIdx].classList.add('hidden') + }) + tabs[idx].classList.add('selected') + tabViews[idx].classList.remove('hidden') + } +} + +/** + * @param {number} offset + */ +function tabNav(offset) { + var items = document.querySelectorAll('.tab-view') + + selectedTab += offset + if (selectedTab < 0) { + selectedTab += items.length + } + if (selectedTab >= items.length) { + selectedTab -= items.length + } + selectTab(selectedTab) +} + +function handleTabKeyDown(e) { + switch (e.key) { + case 'ArrowLeft': + e.preventDefault() + e.stopPropagation() + tabNav(-1) + break + case 'ArrowRight': + e.preventDefault() + e.stopPropagation() + tabNav(1) + break + } +} + +window.addEventListener('load', function (e) { + // Select first item + selectTab(selectedTab) + // Add onclick + document.querySelectorAll('.tabs h3').forEach(function (tab, tIdx) { + tab.addEventListener('click', function (e) { + selectedTab = tIdx + selectTab(selectedTab) + }) + }) + + document.body.addEventListener('keydown', handleTabKeyDown) +})