add: post image uploads (supporter)

This commit is contained in:
trisua 2025-05-11 14:27:55 -04:00
parent ba1f8ef063
commit 70965298b5
18 changed files with 455 additions and 50 deletions

View file

@ -238,7 +238,8 @@ and show_community and community.id != config.town_square or question %}
>
{{ post.content|markdown|safe }}
</span>
{% else %}
{{ self::post_media(upload_ids=post.uploads) }} {% else %}
<details>
<summary
class="card flex gap-2 items-center tertiary red w-full"
@ -247,13 +248,17 @@ and show_community and community.id != config.town_square or question %}
<b>{{ post.context.content_warning }}</b>
</summary>
<span
id="post-content:{{ post.id }}"
class="no_p_margin"
hook="long"
>
{{ post.content|markdown|safe }}
</span>
<div class="flex flex-col gap-2">
<span
id="post-content:{{ post.id }}"
class="no_p_margin"
hook="long"
>
{{ post.content|markdown|safe }}
</span>
{{ self::post_media(upload_ids=post.uploads) }}
</div>
</details>
{% endif %}
@ -386,6 +391,17 @@ and show_community and community.id != config.town_square or question %}
{% if community and show_community and community.id != config.town_square or
question %}
</div>
{% endif %} {%- endmacro %} {% macro post_media(upload_ids) -%} {% if
upload_ids|length > 0%}
<div class="media_gallery gap-2">
{% for upload in upload_ids %}
<img
src="/api/v1/uploads/{{ upload }}"
alt="Image upload"
onclick="trigger('ui::lightbox_open', ['/api/v1/uploads/{{ upload }}'])"
/>
{% endfor %}
</div>
{% endif %} {%- endmacro %} {% macro notification(notification) -%}
<div class="w-full card-nest">
<div class="card small notif_title flex items-center">
@ -1262,8 +1278,77 @@ show_kick=false, secondary=false) -%}
</div>
</div>
</dialog>
{% endif %} {%- endmacro %} {% macro supporter_ad(body="") -%} {% if
config.stripe and not is_supporter %}
{% endif %} {%- endmacro %} {% macro file_picker(files_list_id) -%}
<button
class="button small square quaternary"
onclick="pick_file()"
title="Images"
type="button"
>
{{ icon "image-up" }}
</button>
<input
type="file"
multiple
accept="image/png,image/jpeg,image/avif,image/webp"
style="display: none"
name="file_picker"
/>
<div style="display: none" id="file_template">
{{ icon "image" }}
<b class="name shorter" style="overflow-wrap: normal">.file_name</b>
</div>
<script>
(() => {
const input = document.querySelector("input[name=file_picker]");
const element = document.getElementById("{{ files_list_id }}");
const template = document.getElementById("file_template");
globalThis.pick_file = () => {
input.click();
};
globalThis.render_file_picker_files = () => {
element.innerHTML = "";
let idx = 0;
for (const file of input.files) {
element.innerHTML += `<div class="card small secondary flex items-center gap-2" onclick="remove_file(${idx})" style="cursor: pointer">${template.innerHTML.replace(
".file_name",
file.name,
)}</div>`;
idx += 1;
}
};
globalThis.remove_file = (idx) => {
const files = Array.from(input.files);
files.splice(idx - 1, 1);
// update files
const list = new DataTransfer();
for (item of files) {
list.items.add(item);
}
input.files = list.files;
// render
render_file_picker_files();
};
input.addEventListener("change", () => {
render_file_picker_files();
});
})();
</script>
{%- endmacro %} {% macro supporter_ad(body="") -%} {% if config.stripe and not
is_supporter %}
<div
class="card w-full supporter_ad"
ui_ident="supporter_ad"