character-ref/src/components/nsfw-barrier.webc

53 lines
1.2 KiB
Text

<script>
const nsfwButtonBtns = document.querySelectorAll('.nsfw-toggle');
nsfwButtonBtns.forEach((btn) =>
btn.addEventListener('click', () => {
const isInHornyJail = storeProxy.getItem('isInHornyJail') === 'true';
const isHorny = storeProxy.getItem('isHorny') === 'true';
if (isInHornyJail) {
storeProxy.setItem('isHorny', !isHorny);
} else {
open();
}
})
);
</script>
<div webc:root="override">
<div class="message" webc:type="11ty" @11ty:type="md">
<slot name="message"></slot>
</div>
<ref-button class="nsfw-toggle" command="show-modal" commandfor="nsfw-warning">
<span>Show NSFW</span>
<span class="nsfw-label">Hide NSFW</span>
</ref-button>
<div class="nsfw-content" webc:type="11ty" @11ty:type="md" webc:keep>
<slot></slot>
</div>
</div>
<style webc:scoped="nsfw-barrier">
:host {
.nsfw & :where(.nsfw-content) {
display: block;
}
.nsfw & .nsfw-toggle .nsfw-label {
display: block;
}
.nsfw & .nsfw-toggle :not(.nsfw-label) {
display: none;
}
}
:host .nsfw-toggle {
text-align: end;
}
:host :where(.nsfw-content, .nsfw-label) {
display: none;
}
</style>