feature: implement basic dragging

ckanext/tour/assets/js/tour-steps.js

@@ -26,6 +26,21 @@ ckan.module("tour-steps", function ($) {
 
             this._toggleRemoveBtns();
             this._updateLastStepId();
+
+            new Sortable.default(document.querySelectorAll('.tour-steps__steps'), {
+                draggable: '.tour-accordion',
+                handle: ".dragger",
+                sortAnimation: {
+                    duration: 200,
+                    easingFunction: 'ease-in-out',
+                },
+                plugins: [Plugins.SortAnimation]
+            })
+                .on('drag:start', () => console.log('drag:start'))
+                .on('drag:move', () => console.log('drag:move'))
+                .on('drag:stop', () => console.log('drag:stop'))
+                .on("sortable:stop", () => console.log("sortable:stop"))
+
         },
 
         _onAddStep: function (e) {
@@ -40,18 +55,21 @@ ckan.module("tour-steps", function ($) {
         _onRemoveStep: function (e) {
             e.preventDefault();
 
-            $(e.target).closest(".tour-accordion").remove();
+            var self = this;
 
-            this._toggleRemoveBtns();
-            this._updateLastStepId();
+            $(e.target).closest(".tour-accordion").hide('slow', function () {
+                this.remove();
+                self._toggleRemoveBtns();
+                self._updateLastStepId();
+            });
         },
 
         /**
          * Should be at least 1 step for a tour. Disable remove step button if
          * only 1 left.
          */
         _toggleRemoveBtns: function () {
-            var steps = $(".tour-steps__steps .tour-step");
+            var steps = $(".tour-steps__steps .tour-accordion");
             $(".remove-step").toggleClass("disabled", steps.length == 1)
         },
 

ckanext/tour/templates/base.html

@@ -6,10 +6,6 @@
     <span class="hidden" data-module="tour-init"></span>
 
     {% asset 'tour/tour-js' %}
-    <!-- Draggable only -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.js"></script>
-<!-- Sortable only -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/sortable.js"></script>
 {% endblock %}
 
 {% block styles %}

ckanext/tour/templates/tour/snippets/tour_step.html

@@ -7,8 +7,11 @@
     <div class="accordion-item">
         <h3 class="accordion-header" id="headingOne">
             <div class="accordion-header--text">
-                Step <span class="step-idx">0</span>
+                Step <span class="step-idx">{{ step_id }}</span>
             </div>
+            <span class="dragger">
+                {% snippet 'snippets/svg/drag.svg' %}
+            </span>
             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ step_id }}"
                 aria-expanded="true" aria-controls="collapse-{{ step_id }}">
             </button>

ckanext/tour/templates/tour/tour_edit.html

@@ -57,5 +57,9 @@ <h3>{{ _("Tour steps:") }}</h3>
 {% block scripts %}
     {{ super() }}
 
+    <!-- <script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/sortable.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins/sort-animation.js"></script>
     {% asset 'tour/tour-htmx' %}
 {% endblock %}

ckanext/tour/theme/elements.scss

@@ -39,6 +39,8 @@
 }
 
 .accordion.tour-accordion {
+    width: 100%;
+
     .accordion-header {
         display: flex;
         align-items: center;
@@ -48,6 +50,16 @@
             margin-right: auto;
         }
 
+        .dragger {
+            height: 38px;
+            width: 38px;
+            display: flex;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+            cursor: grab;
+        }
+
         .accordion-button {
             width: fit-content;
             padding: 0.5rem;