voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move album drag-drop functions to cards.js.

Browse source
This commit is contained in:
voussoir 2021-01-25 13:46:24 -08:00
parent ce8c367901
commit 6c2da7a6f0
No known key found for this signature in database
GPG key ID: 5F7554F8C26DACCB
3 changed files with 80 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
frontends/etiquette_flask/static/js/cards.js
View file

@ -3,6 +3,71 @@ const cards = {};
/******************************************************************************/
cards.albums = {};
cards.albums.drag_start =
function drag_start(event)
{
const album_card = event.target.closest(".album_card");
event.dataTransfer.setData("text/plain", album_card.id);
}
cards.albums.drag_end =
function drag_end(event)
{
}
cards.albums.drag_over =
function drag_over(event)
{
event.preventDefault();
}
cards.albums.drag_drop =
function drag_drop(event)
{
const child = document.getElementById(event.dataTransfer.getData("text"));
const child_id = child.dataset.id;
const parent = event.currentTarget;
const parent_id = parent.dataset.id;
event.dataTransfer.clearData();
if (child_id == parent_id)
{
return;
}
let prompt;
if (parent_id === "root")
{
const child_title = child.querySelector('.album_card_title').textContent.trim();
prompt = `Remove child\n${child_title}?`;
}
else
{
const child_title = child.querySelector('.album_card_title').textContent.trim();
const parent_title = parent.querySelector('.album_card_title').textContent.trim();
prompt = `Move\n${child_title}\ninto\n${parent_title}?`;
}
if (! confirm(prompt))
{
return;
}
if (parent_id === "root")
{
api.albums.remove_child(ALBUM_ID, child_id, common.refresh_or_alert);
}
else if (ALBUM_ID)
{
api.albums.add_child(parent_id, child_id, null);
api.albums.remove_child(ALBUM_ID, child_id, common.refresh_or_alert);
}
else
{
api.albums.add_child(parent_id, child_id, common.refresh_or_alert);
}
}
/******************************************************************************/
cards.bookmarks = {};

59
frontends/etiquette_flask/templates/album.html
View file

@ -95,6 +95,7 @@ h2, h3
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
<script src="/static/js/common.js"></script>
<script src="/static/js/api.js"></script>
<script src="/static/js/cards.js"></script>
{{shared_css()}}
</head>
@ -464,63 +465,5 @@ function create_album_form(event)
const parent_id = ALBUM_ID;
api.albums.create(title, parent_id, api.albums.callback_follow);
}
function on_album_drag_start(event)
{
const album_card = event.target.closest(".album_card");
event.dataTransfer.setData("text/plain", album_card.id);
}
function on_album_drag_end(event)
{
}
function on_album_drag_over(event)
{
event.preventDefault();
}
function on_album_drag_drop(event)
{
const child = document.getElementById(event.dataTransfer.getData("text"));
const child_id = child.dataset.id;
const parent = event.currentTarget;
const parent_id = parent.dataset.id;
event.dataTransfer.clearData();
if (child_id == parent_id)
{
return;
}
let prompt;
if (parent_id === "root")
{
const child_title = child.querySelector('.album_card_title').textContent.trim();
prompt = `Remove child\n${child_title}?`;
}
else
{
const child_title = child.querySelector('.album_card_title').textContent.trim();
const parent_title = parent.querySelector('.album_card_title').textContent.trim();
prompt = `Move\n${child_title}\ninto\n${parent_title}?`;
}
if (! confirm(prompt))
{
return;
}
if (parent_id === "root")
{
api.albums.remove_child(ALBUM_ID, child_id, common.refresh_or_alert);
}
else if (ALBUM_ID)
{
api.albums.add_child(parent_id, child_id, null);
api.albums.remove_child(ALBUM_ID, child_id, common.refresh_or_alert);
}
else
{
api.albums.add_child(parent_id, child_id, common.refresh_or_alert);
}
}
</script>
</html>

28
frontends/etiquette_flask/templates/cards.html
View file

@ -8,32 +8,32 @@
id="{{id}}"
class="album_card album_card_{{view}}"
data-id="{{'root' if album == 'root' else album.id}}"
ondragstart="return on_album_drag_start(event);"
ondragend="return on_album_drag_end(event);"
ondragover="return on_album_drag_over(event);"
ondrop="return on_album_drag_drop(event);"
ondragstart="return cards.albums.drag_start(event);"
ondragend="return cards.albums.drag_end(event);"
ondragover="return cards.albums.drag_over(event);"
ondrop="return cards.albums.drag_drop(event);"
{% if album != "root" and draggable %}
draggable=true
{% endif %}
>
{% if album == "root" %}
<a class="album_card_thumbnail" href="/albums{{viewparam}}">
<a class="album_card_thumbnail" href="/albums{{viewparam}}" draggable="false">
{% else %}
<a class="album_card_thumbnail" href="/album/{{album.id}}{{viewparam}}">
<a class="album_card_thumbnail" href="/album/{{album.id}}{{viewparam}}" draggable="false">
{% endif %}
{% if album.thumbnail_photo %}
{% set thumbnail_src = "/thumbnail/" + album.thumbnail_photo.id + ".jpg" %}
{% else %}
{% set thumbnail_src = "/static/basic_thumbnails/album.png" %}
{% endif %}
<img src="{{thumbnail_src}}"/>
{% if album.thumbnail_photo %}
{% set thumbnail_src = "/thumbnail/" + album.thumbnail_photo.id + ".jpg" %}
{% else %}
{% set thumbnail_src = "/static/basic_thumbnails/album.png" %}
{% endif %}
<img src="{{thumbnail_src}}" draggable="false"/>
</a>
<div class="album_card_title">
{% if album == "root" %}
<a href="/albums{{viewparam}}">Albums</a>
<a href="/albums{{viewparam}}" draggable="false">Albums</a>
{% else %}
<a href="/album/{{album.id}}{{viewparam}}">{{album.display_name}}</a>
<a href="/album/{{album.id}}{{viewparam}}" draggable="false">{{album.display_name}}</a>
{% endif %}
</div>