there also one final element I'd like to add to the tabs on the sheet while I'd like Ship power to always be a tab I'd like to be able to limit the ammount of ship floors there are on a given vehicle e.g. on a 2 floor ship, floors 3, 4, & 5 do not show at all, not even there tabs HTML: <input type="hidden" class="sheet-tabstoggle" name="attr_sheet_tab" value="ship-power"/>
<nav class="tab">
<button type="action" name="act_ship-power" class='nav-button nav-button--ship-power' >Ship Power</button>
<button type="action" name="act_ship-floor-1" class='nav-button nav-button--ship-floor-1' >Floor 1</button>
<button type="action" name="act_ship-floor-2" class='nav-button nav-button--ship-floor-2' >Floor 2</button>
<button type="action" name="act_ship-floor-3" class='nav-button nav-button--ship-floor-3' >Floor 3</button>
<button type="action" name="act_ship-floor-4" class='nav-button nav-button--ship-floor-4' >Floor 4</button>
<button type="action" name="act_ship-floor-5" class='nav-button nav-button--ship-floor-5' >Floor 5</button>
</nav>
<script type="text/worker">
const navigateSheet = function(event){
const target = event.triggerName.replace(/clicked:/,'');//Parse out our actual target
console.log(target);
$20('.navigable-section,.nav-button').removeClass('active');
$20(`.navigable-section--${target},.nav-button--${target}`).addClass('active');
setAttrs({sheet_tab:target},{silent:true});
};
on('sheet:opened',()=>{//
getAttrs(['sheet_tab'],(attributes)=>{
navigateSheet({trigerName:attributes.sheet_tab});
});
});
const buttonlist = ["ship-power","ship-floor-1","ship-floor-2","ship-floor-3","ship-floor-4","ship-floor-5"];
buttonlist.forEach(button => {
on(`clicked:${button}`, navigateSheet);
});
</script> CSS: .navigable-section:not(.active) {
display: none;
}
.nav-button:not(.active) {
opacity: 0%;
}
.nav-button:hover {
opacity: 100%;
}
div.tabs {
position: relative;
z-index: 1;
opacity: 60%;
}
