new sortable list implementation

app/templates/users/bookmark_collections.html

@@ -1,35 +1,41 @@
 {% extends "base.html" %}
+{% from 'common/macros.html' import sortable_list, sortable_list_item %}
 {% block title %}managing bookmark collections{% endblock %}
 {% block content %}
 <div class="darkbg">
   <h1>Manage bookmark collections</h1>
   <p>Drag collections to reoder them. You cannot move or remove the default collection, but you can rename it.</p>
-  <div>
-    <button type="button" id="add-collection-button">Add new collection</button>
-    <div id="collections-container">
-      {% for collection in collections | sort(attribute='sort_order') %}
-        <div class="draggable-collection {{ "default" if collection.is_default else ""}}"
-            {% if not collection.is_default %}
-            draggable="true"
-            ondragover="dragOver(event)"
-            ondragstart="dragStart(event)"
-            ondragend="dragEnd()"
-            {% else %}
-            id="default-collection"
-            {% endif %}
-            data-collection-id="{{ collection.id }}">
-          <input type="text" class="collection-name" value="{{ collection.name }}" placeholder="Collection name" required autocomplete="off" maxlength="60"><br>
-          <div>{{ collection.get_threads_count() }} {{ "thread" | pluralize(num=collection.get_threads_count()) }}, {{ collection.get_posts_count() }} {{ "post" | pluralize(num=collection.get_posts_count()) }}</div>
-          {% if collection.is_default %}
-            <i>Default collection</i>
-          {% else %}
-            <button type="button" class="delete-button critical">Delete</button>
-          {% endif %}
-        </div>
+  <bitty-7-0 data-connect="{{ '/static/js/bitties/pyrom-bitty.js' | cachebust }} CollectionsEditor">
+    <button type="button" data-send="addCollection">Add new collection</button>
+    {% set sorted_collections = collections | sort(attribute='sort_order') %}
+    {% macro collection_inner(collection) %}
+      <input type="text" class="collection-name" value="{{collection.name}}" placeholder="Collection name" required autocomplete="off" maxlength="60">
+      <div>{{ collection.get_threads_count() }} {{ "thread" | pluralize(num=collection.get_threads_count()) }}, {{ collection.get_posts_count() }} {{ "post" | pluralize(num=collection.get_posts_count()) }}</div>
+      {% if collection.is_default %}
+        <i>Default collection</i>
+      {% else %}
+        <button type="button" class="delete-button critical" data-send="deleteCollection">Delete</button>
+      {% endif %}
+    {% endmacro %}
+    {% call() sortable_list(attr={'data-receive': 'addCollection' }) %}
+      {% call() sortable_list_item(key='collections', immovable=true, attr={'data-collection-id': sorted_collections[0].id, 'data-receive': 'deleteCollection getCollectionData testValidity'}) %}
+        {{ collection_inner(sorted_collections[0]) }}
+      {% endcall %}
+      {% for collection in sorted_collections[1:] %}
+      {% call() sortable_list_item(key='collections', attr={'data-collection-id': collection.id, 'data-receive': 'deleteCollection getCollectionData testValidity'}) %}
+        {{ collection_inner(collection) }}
+      {% endcall %}
       {% endfor %}
-    </div>
-    <button type="button" id="save-button" data-submit-href="{{ url_for('api.manage_bookmark_collections', user_id=active_user.id) }}">Save</button>
+    {% endcall %}
+    <button data-use="saveCollections" type="button" id="save-button" data-submit-href="{{ url_for('api.manage_bookmark_collections', user_id=active_user.id) }}">Save</button>
   </div>
-</div>
-<script src="{{ "/static/js/manage-bookmark-collections.js" | cachebust }}"></script>
+<template id="new-collection-template">
+{% call() sortable_list_item(key='collections', attr={'data-receive': 'deleteCollection getCollectionData testValidity'}) %}
+  <input type="text" class="collection-name" value="" placeholder="Collection name" required autocomplete="off" maxlength="60">
+  <div>0 threads, 0 posts</div>
+  <button type="button" class="delete-button critical" data-send="deleteCollection">Delete</button>
+{% endcall %}
+</template>
+</bitty-7-0>
+{#<script src="{{ "/static/js/manage-bookmark-collections.js" | cachebust }}"></script>#}
 {% endblock %}

app/templates/users/settings.html

@@ -1,4 +1,4 @@
-{% from 'common/macros.html' import babycode_editor_component, badge_editor_single %}
+{% from 'common/macros.html' import babycode_editor_component, badge_editor_single, sortable_list %}
 {% extends 'base.html' %}
 {% block title %}settings{% endblock %}
 {% block content %}
@@ -57,7 +57,7 @@
       <legend>Badges</legend>
       <a href="{{ url_for('guides.guide_page', category='user-guides', slug='settings', _anchor='badges')}}">Badges help</a>
       <bitty-7-0 data-connect="{{ '/static/js/bitties/pyrom-bitty.js' | cachebust }} BadgeEditorForm" data-listeners="click input submit change">
-        <form data-use="badgeEditorPrepareSubmit" data-init='loadBadgeEditor' data-receive='addBadge' method='post' enctype='multipart/form-data' action='{{ url_for('users.save_badges', username=active_user.username) }}'>
+        <form data-use="badgeEditorPrepareSubmit" data-init='loadBadgeEditor' method='post' enctype='multipart/form-data' action='{{ url_for('users.save_badges', username=active_user.username) }}'>
           <div>Loading badges&hellip;</div>
           <div>If badges fail to load, JS may be disabled.</div>
         </form>
@@ -72,4 +72,8 @@
 <template id='badge-editor-template'>
 {{ badge_editor_single(options=uploads) }}
 </template>
+
+<template id="badges-list-template">
+{{ sortable_list(attr={'data-receive': 'addBadge'}) }}
+</template>
 {% endblock %}