diff --git a/README.md b/README.md index 197c855..9c237a2 100644 --- a/README.md +++ b/README.md @@ -122,7 +122,6 @@ Here is a brief overview of the project to help you learn your way around: - A "card" representation of albums, like photos. - Similarly, rename all "tag_object" to tag card and unify that experience a bit. - Batch movement of Albums... but without winding up with a second clipboard system? -- Drag-and-drop of cards on album pages for easier moving. - Overall, more dynamism with cards and tag objects and updating page without requiring refresh. - Absolute consistency of CSS classes for divs that hold photo cards. diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html index 2f0a938..6397c55 100644 --- a/frontends/etiquette_flask/templates/album.html +++ b/frontends/etiquette_flask/templates/album.html @@ -113,7 +113,7 @@ h2, h3

Albums

{% for album in albums %} - {{album_card.create_album_card(album, view=view)}} + {{album_card.create_album_card(album, view=view, draggable=true)}} {% endfor %}
@@ -264,7 +264,7 @@ ALBUM_ID = undefined;

{{sub_albums|length}} Children

{% for sub_album in sub_albums|sort(attribute='title') %} - {{album_card.create_album_card(sub_album, view=view, unlink_parent=album)}} + {{album_card.create_album_card(sub_album, view=view, unlink_parent=album, draggable=true)}} {% endfor %}
{% endif %} @@ -392,5 +392,46 @@ function create_child(title) var parent_id = ALBUM_ID; api.albums.create(title, parent_id, api.albums.callback_follow); } + +function on_album_drag_start(event) +{ + event.dataTransfer.setData("text/plain", event.target.id); +} +function on_album_drag_end(event) +{ +} +function on_album_drag_over(event) +{ + event.preventDefault(); +} +function on_album_drag_drop(event) +{ + var child_id = event.dataTransfer.getData("text"); + var child = document.getElementById(child_id); + child_id = child.dataset.id; + var parent = event.currentTarget; + var parent_id = parent.dataset.id; + event.dataTransfer.clearData(); + + if (child_id == parent_id) + { + return; + } + + var child_title = child.querySelector('.album_card_title').textContent.trim(); + var parent_title = parent.querySelector('.album_card_title').textContent.trim(); + if (confirm(`Move\n${child_title}\ninto\n${parent_title}?`)) + { + if (ALBUM_ID) + { + api.albums.add_child(parent_id, child_id, null); + api.albums.remove_child(ALBUM_ID, child_id, common.refresh); + } + else + { + api.albums.add_child(parent_id, child_id, common.refresh); + } + } +} diff --git a/frontends/etiquette_flask/templates/album_card.html b/frontends/etiquette_flask/templates/album_card.html index e72e93b..61fb468 100644 --- a/frontends/etiquette_flask/templates/album_card.html +++ b/frontends/etiquette_flask/templates/album_card.html @@ -1,7 +1,19 @@ -{% macro create_album_card(album, view="grid", unlink_parent=none) %} +{% macro create_album_card(album, view="grid", unlink_parent=none, draggable=false) %} +{% set id = "album_card_root" if album == "root" else "album_card_" + album.id %} {% set view = (view if view in ("list", "grid") else "grid") %} {% set viewparam = "?view=list" if view == "list" else "" %} -
+
{% if album == "root" %} {% else %}