Move album drag-drop functions to cards.js.

frontends/etiquette_flask/static/js/cards.js

@@ -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 = {};
 

frontends/etiquette_flask/templates/album.html

@@ -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>

frontends/etiquette_flask/templates/cards.html

@@ -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);"
+ondragstart="return cards.albums.drag_start(event);"
-ondragend="return on_album_drag_end(event);"
+ondragend="return cards.albums.drag_end(event);"
-ondragover="return on_album_drag_over(event);"
+ondragover="return cards.albums.drag_over(event);"
-ondrop="return on_album_drag_drop(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}}"/>
+        <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>