h/projectreshoot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored alpinejs in forms for better maintainability

Browse Source
This commit is contained in:
Haelnorr
2025-02-16 11:26:57 +11:00
parent 07453b0f02
commit fa64b05415
6 changed files with 120 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
view/component/account/changebio.templ
View File

@@ -15,6 +15,41 @@ templ ChangeBio(err string, bio string) {
class="w-[90%] mx-auto mt-5"
x-data={ templ.JSFuncCall("bioComponent", bio, user.Bio, err).CallInline }
>
<script>
function bioComponent(newBio, oldBio, err) {
return {
bio: newBio,
initialBio: oldBio,
err: err,
bioLenText: '',
updateTextArea() {
this.$nextTick(() => {
if (this.$refs.bio) {
this.$refs.bio.style.height = 'auto';
this.$refs.bio.style.height = `
${this.$refs.bio.scrollHeight+20}px`;
};
this.bioLenText = `${this.bio.length}/128`;
});
},
resetBio() {
this.bio = this.initialBio;
this.err = "",
this.updateTextArea();
},
init() {
this.$nextTick(() => {
// this timeout makes sure the textarea resizes on
// page render correctly. seems 20ms is the sweet
// spot between a noticable delay and not working
setTimeout(() => {
this.updateTextArea();
}, 20);
});
}
};
}
</script>
<div
class="flex flex-col"
>
@@ -78,40 +113,5 @@ templ ChangeBio(err string, bio string) {
x-show="err"
x-text="err"
></p>
<script>
function bioComponent(newBio, oldBio, err) {
return {
bio: newBio,
initialBio: oldBio,
err: err,
bioLenText: '',
updateTextArea() {
this.$nextTick(() => {
if (this.$refs.bio) {
this.$refs.bio.style.height = 'auto';
this.$refs.bio.style.height = `
${this.$refs.bio.scrollHeight+20}px`;
};
this.bioLenText = `${this.bio.length}/128`;
});
},
resetBio() {
this.bio = this.initialBio;
this.err = "",
this.updateTextArea();
},
init() {
this.$nextTick(() => {
// this timeout makes sure the textarea resizes on
// page render correctly. seems 20ms is the sweet
// spot between a noticable delay and not working
setTimeout(() => {
this.updateTextArea();
}, 20);
});
}
};
}
</script>
</form>
}

24
view/component/account/changeusername.templ
View File

@@ -13,11 +13,25 @@ templ ChangeUsername(err string, username string) {
hx-post="/change-username"
hx-swap="outerHTML"
class="w-[90%] mx-auto mt-5"
x-data={ "{ err: '" + err + "'}" }
x-data={ templ.JSFuncCall(
"usernameComponent", username, user.Username, err,
).CallInline }
>
<script>
function usernameComponent(newUsername, oldUsername, err) {
return {
username: newUsername,
initialUsername: oldUsername,
err: err,
resetUsername() {
this.username = this.initialUsername;
this.err = "";
},
};
}
</script>
<div
class="flex flex-col sm:flex-row"
x-data={ "{username: '" + username + "'}" }
>
<div
class="flex flex-col sm:flex-row sm:items-center relative"
@@ -65,7 +79,7 @@ templ ChangeUsername(err string, username string) {
class="rounded-lg bg-blue py-1 px-2 text-mantle sm:ml-2
hover:cursor-pointer hover:bg-blue/75 transition"
x-cloak
x-show={ "username !=='" + user.Username + "'" }
x-show="username !== initialUsername"
x-transition.opacity.duration.500ms
>
Update
@@ -76,9 +90,9 @@ templ ChangeUsername(err string, username string) {
type="button"
href="#"
x-cloak
x-show={ "username !=='" + user.Username + "'" }
x-show="username !== initialUsername"
x-transition.opacity.duration.500ms
@click={ "username='" + user.Username + "';err=''" }
@click="resetUsername()"
>
Cancel
</button>