1
0
mirror of https://github.com/mbirth/tcl_update_db.git synced 2024-11-09 23:06:45 +00:00

Move script tags to top, run after DOM Ready.

This commit is contained in:
Markus Birth 2018-01-06 21:33:54 +01:00
parent 3e86408b90
commit 61706d8651
Signed by: mbirth
GPG Key ID: A9928D7A098C3A9A
2 changed files with 26 additions and 24 deletions

View File

@ -1,25 +1,27 @@
window.mdc.autoInit() document.addEventListener 'DOMContentLoaded', (event) ->
window.tabBar = new mdc.tabs.MDCTabBar document.querySelector '#tab-bar'
# Hide all panels but the selected one window.mdc.autoInit()
activatePanel = (panelId) -> window.tabBar = new mdc.tabs.MDCTabBar document.querySelector '#tab-bar'
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 # Hide all panels but the selected one
window.tabBar.listen 'MDCTabBar:change', (t) -> activatePanel = (panelId) ->
nthChildIndex = t.detail.activeTabIndex allPanels = document.querySelectorAll '.panel'
tabId = t.srcElement.id for panel, i in allPanels
tab = document.querySelector "##{tabId} .mdc-tab:nth-child(#{nthChildIndex + 1})" if panel.id is panelId
panelId = tab.dataset.panel tabBar.activeTabIndex = i
activatePanel panelId panel.style.display = if panel.id is panelId then 'block' else 'none'
# If specific tab/panel given in URL, e.g. #motion, switch to that # React to clicking the tabs
hash = location.hash window.tabBar.listen 'MDCTabBar:change', (t) ->
if hash.length > 1 nthChildIndex = t.detail.activeTabIndex
activatePanel 'family-' + hash.substring 1 tabId = t.srcElement.id
else tab = document.querySelector "##{tabId} .mdc-tab:nth-child(#{nthChildIndex + 1})"
activatePanel 'family-keyone' 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'

View File

@ -5,6 +5,8 @@
<link rel="stylesheet" href="node_modules/material-components-web/dist/material-components-web.css"/> <link rel="stylesheet" href="node_modules/material-components-web/dist/material-components-web.css"/>
<link rel="stylesheet" href="assets/material-icons.css"/> <link rel="stylesheet" href="assets/material-icons.css"/>
<link rel="stylesheet" href="assets/style.css"/> <link rel="stylesheet" href="assets/style.css"/>
<script type="text/javascript" src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script type="text/javascript" src="assets/main.js"></script>
</head> </head>
<body class="mdc-typography"> <body class="mdc-typography">
<?php <?php
@ -90,7 +92,5 @@ foreach ($allVars as $family => $models) {
} }
?> ?>
</main> </main>
<script type="text/javascript" src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script type="text/javascript" src="assets/main.js"></script>
</body> </body>
</html> </html>