57 lines
1.5 KiB
HTML
57 lines
1.5 KiB
HTML
<script>
|
|
new MutationObserver((mutations, observer) => {
|
|
mutations.forEach((mutation) => {
|
|
const user_json = document.body.dataset.user;
|
|
const user = user_json
|
|
? JSON.parse(user_json)
|
|
: {
|
|
username: "",
|
|
meta: {
|
|
avatar: "/images/default_avatar.gif",
|
|
},
|
|
};
|
|
|
|
const avatars = document.querySelectorAll("[data-bind-user_meta_avatar]");
|
|
for (const avatar of avatars) {
|
|
const bound_to = avatar.dataset["bind-user_meta_avatar"] ?? "innerHTML";
|
|
avatar[bound_to] = user.meta?.avatar ?? "/images/default_avatar.gif";
|
|
}
|
|
|
|
const usernames = document.querySelectorAll("[data-bind-user_username]");
|
|
for (const username of usernames) {
|
|
const bound_to = username.dataset["bind-user_username"] ?? "innerHTML";
|
|
username[bound_to] = user.username;
|
|
}
|
|
});
|
|
}).observe(document.body, {
|
|
attributes: true,
|
|
attributeFilter: ["data-user"],
|
|
});
|
|
</script>
|
|
<div id="user" class="tab">
|
|
<input
|
|
type="radio"
|
|
name="top-level-tabs"
|
|
id="user-tab-input"
|
|
class="tab-switch"
|
|
data-hash="/profile"
|
|
/>
|
|
<label for="user-tab-input" class="tab-label"
|
|
><div class="icon user"></div>
|
|
<div class="label">Profile</div></label
|
|
>
|
|
<div class="tab-content">
|
|
<div class="avatar-container">
|
|
<img
|
|
id="user-avatar"
|
|
src="/images/default_avatar.gif"
|
|
alt="User Avatar"
|
|
data-bind-user_meta_avatar="src"
|
|
/>
|
|
</div>
|
|
|
|
<div class="username-container">
|
|
<span class="username" data-bind-user_username></span>
|
|
</div>
|
|
</div>
|
|
</div>
|