83 lines
1.9 KiB
Svelte
83 lines
1.9 KiB
Svelte
<script>
|
|
import { onMount, tick } from 'svelte';
|
|
let title = 'Inventory'; // Default title
|
|
let editing = false;
|
|
|
|
// Function to save the title to local storage
|
|
function saveTitle(newTitle) {
|
|
localStorage.setItem('userTitle', newTitle);
|
|
title = newTitle;
|
|
editing = false;
|
|
}
|
|
|
|
onMount(async () => {
|
|
const storedTitle = localStorage.getItem('userTitle');
|
|
if (storedTitle) {
|
|
title = storedTitle;
|
|
}
|
|
await tick(); // Ensures Svelte has completed initial DOM updates
|
|
});
|
|
|
|
// Function to handle key events
|
|
function handleKeydown(event) {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault(); // Prevent form submission
|
|
saveTitle(event.target.innerText);
|
|
event.target.blur(); // Remove focus from the element
|
|
}
|
|
if (event.key === 'Escape') {
|
|
editing = false;
|
|
event.target.innerText = title; // Revert changes
|
|
event.target.blur(); // Remove focus from the element
|
|
}
|
|
}
|
|
|
|
// Click outside to stop editing
|
|
function handleClickOutside(event) {
|
|
if (editing) {
|
|
saveTitle(event.target.innerText);
|
|
editing = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window on:click={handleClickOutside}/>
|
|
|
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
<div>
|
|
<h2
|
|
contenteditable={true}
|
|
class:editable={editing}
|
|
on:click={() => editing = true}
|
|
on:keydown={handleKeydown}
|
|
on:blur={() => saveTitle(title)}
|
|
tabindex="0"
|
|
>{title}</h2>
|
|
|
|
<small>Click the title, to edit your inventory name</small>
|
|
</div>
|
|
|
|
<style>
|
|
h2 {
|
|
font-family: "Lekton", sans-serif;
|
|
font-weight: bold;
|
|
font-size: 3rem;
|
|
margin: 0;
|
|
color: var(--accent-3);
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
outline: none;
|
|
padding: 0.25rem;
|
|
}
|
|
.editable {
|
|
border-bottom: 2px solid var(--accent-3); /* Visual cue to show editable state */
|
|
}
|
|
h2:focus {
|
|
border-bottom: 2px solid var(--accent-3);
|
|
}
|
|
small {
|
|
font-size: 0.8rem;
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|