badmanners/samey
1
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Add Sortable to pools

Browse source
This commit is contained in:
Bad Manners 2025-04-11 20:58:55 -03:00
parent 2b6b1f30f4
commit 239258e324
5 changed files with 141 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

30
templates/pool.html
View file

@ -16,6 +16,36 @@
{% if let Some(post) = posts.first() %}
<meta property="og:image" content="/files/{{ post.thumbnail }}" />
<meta property="twitter:image:src" content="/files/{{ post.thumbnail }}" />
{% endif %} {% if can_edit %}
<script>
htmx.onLoad(function (content) {
var sortables = content.querySelectorAll(".sortable");
for (var i = 0; i < sortables.length; i++) {
var sortable = sortables[i];
var sortableInstance = new Sortable(sortable, {
animation: 150,
ghostClass: "blue-background-class",
// Make the `.htmx-indicator` unsortable
filter: ".htmx-indicator",
onMove: function (evt) {
return evt.related.className.indexOf("htmx-indicator") === -1;
},
// Disable sorting on the `end` event
onEnd: function (evt) {
console.log(evt);
this.option("disabled", true);
},
});
// Re-enable sorting on the `htmx:afterSwap` event
sortable.addEventListener("htmx:afterSwap", function () {
sortableInstance.option("disabled", false);
});
}
});
</script>
{% endif %}
</head>
<body>

11
templates/pool_posts.html
View file

@ -2,9 +2,16 @@
{% if posts.is_empty() %}
<span>No posts in pool.</span>
{% else %}
<ul>
<ul
class="sortable"
hx-put="/pool/{{ pool.id }}/sort"
hx-trigger="end"
hx-vals="js:{old_index: event.oldIndex, new_index: event.newIndex}"
hx-target="#pool-posts"
hx-swap="outerHTML"
>
{% for post in posts %}
<li class="pool-post" data-position="{{ post.position }}">
<li class="pool-post">
<a href="/post/{{ post.id }}" title="{{ post.tags }}">
<img src="/files/{{ post.thumbnail }}" />
<div>{{ post.rating | upper }}</div>