add: upload alt text

This commit is contained in:
trisua 2025-07-14 15:30:17 -04:00
parent 3b5b0ce1a1
commit e0e38b2b32
13 changed files with 224 additions and 59 deletions

View file

@ -442,7 +442,6 @@
("alt" "Image upload")
("onclick" "trigger('ui::lightbox_open', ['/api/v1/uploads/{{ upload }}'])"))
(text "{% endfor %}"))
(text "{%- endif %} {%- endmacro %} {% macro notification(notification) -%}")
(div
("class" "w-full card-nest")

View file

@ -574,32 +574,51 @@
(div
("class" "card flex flex-col gap-2 secondary")
(text "{{ components::supporter_ad(body=\"Become a supporter to upload images directly to posts!\") }} {% for upload in uploads %}")
(div
("class" "card flex flex-wrap gap-2 items-center justify-between")
(details
("class" "accordion w-full")
(summary
("class" "card flex flex-wrap gap-2 items-center justify-between")
(div
("class" "flex gap-2 items-center")
(icon_class (text "chevron-down") (text "dropdown_arrow"))
(b
(span
("class" "date")
(text "{{ upload.created }}"))
(text " ({{ upload.what }})")))
(div
("class" "flex gap-2")
(button
("class" "raised small")
("onclick" "trigger('ui::lightbox_open', ['/api/v1/uploads/{{ upload.id }}'])")
(text "{{ icon \"view\" }}")
(span
(text "{{ text \"general:action.view\" }}")))
(button
("class" "raised small red")
("onclick" "remove_upload('{{ upload.id }}')")
(text "{{ icon \"x\" }}")
(span
(text "{{ text \"stacks:label.remove\" }}")))))
(div
("class" "flex gap-2 items-center")
("onclick" "trigger('ui::lightbox_open', ['/api/v1/uploads/{{ upload.id }}'])")
("style" "cursor: pointer")
(text "{{ icon \"file-image\" }}")
(b
(span
("class" "date")
(text "{{ upload.created }}"))
(text "({{ upload.what }})")))
(div
("class" "flex gap-2")
(button
("class" "lowered small")
("onclick" "trigger('ui::lightbox_open', ['/api/v1/uploads/{{ upload.id }}'])")
(text "{{ icon \"view\" }}")
(span
(text "{{ text \"general:action.view\" }}")))
(button
("class" "lowered small red")
("onclick" "remove_upload('{{ upload.id }}')")
(text "{{ icon \"x\" }}")
(span
(text "{{ text \"stacks:label.remove\" }}")))))
("class" "inner flex flex-col gap-2")
(form
("class" "card lowered flex flex-col gap-2")
("onsubmit" "update_upload_alt(event, '{{ upload.id }}')")
(div
("class" "flex flex-col gap-1")
(label ("for" "alt_{{ upload.id }}") (b (str (text "settings:label.alt_text"))))
(textarea
("id" "alt_{{ upload.id }}")
("name" "alt")
("class" "w-full")
("placeholder" "Alternative text")
(text "{{ upload.alt|safe }}")))
(button
(icon (text "check"))
(str (text "general:action.save"))))))
(text "{% endfor %} {{ components::pagination(page=page, items=uploads|length, key=\"#/account/uploads\") }}")
(script
(text "globalThis.remove_upload = async (id) => {
@ -621,6 +640,26 @@
res.message,
]);
});
};
globalThis.update_upload_alt = async (e, id) => {
e.preventDefault();
fetch(`/api/v1/uploads/${id}/alt`, {
method: \"POST\",
headers: {
\"Content-Type\": \"application/json\",
},
body: JSON.stringify({
alt: e.target.alt.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
});
};"))))))
(text "{% if config.security.enable_invite_codes -%}")
@ -1508,7 +1547,6 @@
globalThis.render_preset_lis = (preset, id) => {
for (const x of preset) {
console.log(id);
document.getElementById(id).innerHTML += `<li><b>${x[0]}:</b> ${x[1]}</li>`;
}
}

View file

@ -156,9 +156,7 @@ media_theme_pref();
.replaceAll(" year ago", "y");
}
element.innerText =
pretty === undefined ? then.toLocaleDateString() : pretty;
element.innerText = !pretty ? then.toLocaleDateString() : pretty;
element.style.display = "inline-block";
}
});
@ -198,9 +196,7 @@ media_theme_pref();
.replaceAll(" year ago", "y")
.replaceAll("Yesterday", "1d") || "";
element.innerText =
pretty === undefined ? then.toLocaleDateString() : pretty;
element.innerText = !pretty ? then.toLocaleDateString() : pretty;
element.style.display = "inline-block";
}
});
@ -1145,8 +1141,15 @@ ${option.input_element_type === "textarea" ? `${option.value}</textarea>` : ""}
);
// lightbox
self.define("lightbox_open", (_, src) => {
self.define("lightbox_open", async (_, src) => {
document.getElementById("lightbox_img").src = src;
const data = await (await fetch(`${src}/data`)).json();
document
.getElementById("lightbox_img")
.setAttribute("alt", data.payload.alt);
document.getElementById("lightbox_img").title = data.payload.alt;
document.getElementById("lightbox_img_a").href = src;
document.getElementById("lightbox").classList.remove("hidden");
});