forked from andyburke/autonomous.contact
73 lines
1.4 KiB
HTML
73 lines
1.4 KiB
HTML
<script>
|
|
APP.on( "view_changed", ({ view }) => {
|
|
const target_tab = document.querySelector(`.tabswitch[data-view="${view}"]`);
|
|
|
|
if (target_tab) {
|
|
target_tab.click();
|
|
}
|
|
});
|
|
|
|
APP.on( 'load', () => {
|
|
const tab_switchers = document.querySelectorAll(".tabswitch");
|
|
for (const tab_switch of tab_switchers) {
|
|
tab_switch.addEventListener("input", (event) => {
|
|
const tab_selector = event.target;
|
|
const view = tab_selector.dataset.view;
|
|
|
|
if (view) {
|
|
window.location.hash = `/${view}${ document.body.dataset.channel ? `/channel/${ document.body.dataset.channel }` : '' }`;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
:root {
|
|
--tab-label-height: 4em;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.tabs .tabswitch {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
.tabs .tablabel {
|
|
cursor: pointer;
|
|
border: none;
|
|
text-align: center;
|
|
padding: 1em;
|
|
height: var(--tab-label-height);
|
|
line-height: 2em;
|
|
}
|
|
|
|
.tabs .tabswitch:checked + .tablabel {
|
|
border-bottom: 1px solid var(--accent);
|
|
}
|
|
|
|
.tabs .panel {
|
|
display: none;
|
|
position: relative;
|
|
padding: 1em;
|
|
width: 100%;
|
|
height: calc( 100vh - var(--tab-label-height) );
|
|
order: 99;
|
|
}
|
|
|
|
.tabs .tabswitch:checked + .tablabel + .panel {
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
<div class="tabs">
|
|
<!-- #include "./chat/chat.html" -->
|
|
<!-- #include "./blurbs/blurbs.html" -->
|
|
<!-- #include "./forum/forum.html" -->
|
|
<!-- #include "./essays/essays.html" -->
|
|
<!-- #include "./map/map.html" -->
|
|
</div>
|