In my Svelte store, I have an ASCII-Logo that I want to integrate into a button spanning two symbols ("-."). However, I do not want to split the ASCII into separate parts and just insert the button between them on my +page.svelte.
Currently, I have set up the ASCII-Logo to include the necessary JavaScript code. The issue now is that I am unable to retrieve values from my Svelte "runtime" because the Javascript embedded in the Svelte store is completely separate from it.
For example:
// src/lib/stores.ts
const ascii =
`//||<button class="hiddenButton" onclick="{
let elems = document.getElementsByClassName('hiddenImage');
for (const elem of elems) {
elem.classList.toggle('off')
};
}">-.</button>||\\`;
Is there a way to access values from my Svelte TypeScript within the JavaScript being loaded from a Svelte store? Or should I consider splitting the ASCII instead?
The desired behavior I want to achieve is toggling between the ASCII and an image that replaces it while maintaining visibility. Currently, this is achieved by adding a CSS class with display: none.
- Toggling to reveal the image and hide the ASCII - works fine.
- Toggling to hide the image and show the ASCII - reveals the ASCII but doesn't toggle off the image.
Here's a simplified version of the code illustrating the problem.
// src/routes/+page.svelte
<script lang="ts">
import { ascii } from '$lib/stores';
$: off = true;
let togglePicture = () => {
let elems = document.getElementsByClassName('hiddenImage')!;
for (const elem of elems) {
elem.classList.toggle('off')
}
off = !off;
};
</script>
<style>
:global(.off) {
display: none;
}
</style>
<p class="hiddenImage">{@html ascii}</p><button on:click={togglePicture}>
<img src='/pics/favicons/dark-favicon.ico' alt="Dark Logo" class="pixelLogo hiddenImage{off === true ? " off" : null}">