tcl_update_db/assets/main.coffee

document.addEventListener 'DOMContentLoaded', (event) -> 

    window.mdc.autoInit()
    window.tabBar = new mdc.tabs.MDCTabBar document.querySelector '#tab-bar'

    # Hide all panels but the selected one
    activatePanel = (panelId) ->
        allPanels = document.querySelectorAll '.panel'
        for panel, i in allPanels
            if panel.id is panelId
                tabBar.activeTabIndex = i
            panel.style.display = if panel.id is panelId then 'block' else 'none'

    # React to clicking the tabs
    window.tabBar.listen 'MDCTabBar:change', (t) ->
        nthChildIndex = t.detail.activeTabIndex
        tabId = t.srcElement.id
        tab = document.querySelector "##{tabId} .mdc-tab:nth-child(#{nthChildIndex + 1})"
        panelId = tab.dataset.panel
        activatePanel panelId

    # If specific tab/panel given in URL, e.g. #motion, switch to that
    hash = location.hash
    if hash.length > 1
        activatePanel 'family-' + hash.substring 1
    else
        activatePanel 'family-keyone'