feature: finilize dragging steps

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

@@ -20,12 +20,12 @@ ckan.module("tour-steps", function ($) {
 
                 if (requestPath === "/admin_panel/config/tour/add_step") {
                     self._toggleRemoveBtns();
-                    self._updateLastStepId();
+                    self._updateStepsIndexes();
                 }
             });
 
             this._toggleRemoveBtns();
-            this._updateLastStepId();
+            this._updateStepsIndexes();
 
             new Sortable.default(document.querySelectorAll('.tour-steps__steps'), {
                 draggable: '.tour-accordion',
@@ -35,11 +35,7 @@ ckan.module("tour-steps", function ($) {
                     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"))
+            }).on('drag:stopped', () => this._updateStepsIndexes())
 
         },
 
@@ -60,7 +56,7 @@ ckan.module("tour-steps", function ($) {
             $(e.target).closest(".tour-accordion").hide('slow', function () {
                 this.remove();
                 self._toggleRemoveBtns();
-                self._updateLastStepId();
+                self._updateStepsIndexes();
             });
         },
 
@@ -74,14 +70,27 @@ ckan.module("tour-steps", function ($) {
         },
 
         /**
-         * Update the stepId we are sending to a server when adding a new step
+         * Update the steps indexes on sorting or adding a new one
          */
-        _updateLastStepId: function () {
-            var steps = $(".tour-steps__steps .tour-step");
+        _updateStepsIndexes: function () {
+            var steps = $(".tour-steps__steps .tour-accordion")
+                .not(".draggable-source--is-dragging")
+                .not(".draggable--original");
+            console.log(steps.length);
 
-            this.addStepBtn.attr("hx-vals", JSON.stringify({
-                stepId: steps.last().data("step-id") + 1
-            }))
+            steps.each((idx, step) => this._updateStepIndexes(idx + 1, step));
+        },
+
+        /**
+         * Update a specific step indexes
+         *  - update accordion header
+         *  - update a hidden field we are sending to the server
+         *
+         * @param {HTMLElement} step
+         */
+        _updateStepIndexes: function (idx, step) {
+            $(step).find(".step-number").text(idx);
+            $(step).find("input[name='step_index']").val(idx);
         }
     };
 });

ckanext/tour/assets/webassets.yml

@@ -21,3 +21,11 @@ tour-css:
   contents:
     - css/vendor/introjs.min.css
     - css/style.css
+
+tour-draggable:
+  filter: cssrewrite
+  output: ckanext-tour/%(version)s-tour-draggable.css
+  contents:
+    - js/vendor/draggable/plugins.min.js
+    - js/vendor/draggable/sort-animation.min.js
+    - js/vendor/draggable/sortable.min.js

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

@@ -7,7 +7,7 @@
     <div class="accordion-item">
         <h3 class="accordion-header" id="headingOne">
             <div class="accordion-header--text">
-                Step <span class="step-idx">{{ step_id }}</span>
+               <span class="step-number">{{ step_index or 0 }}</span> {{ _("Step") }}
             </div>
             <span class="dragger">
                 {% snippet 'snippets/svg/drag.svg' %}
@@ -22,6 +22,8 @@ <h3 class="accordion-header" id="headingOne">
             <div class="accordion-body">
                 <fieldset class="tour-step" id="step_{{ step_id }}" data-step-id="{{ step_id }}">
                     {{ form.hidden("step_id", value=step.step_id or step.id) }}
+                    {{ form.hidden("step_index", value=step.step_index or step.index) }}
+
                     {{ form.input("step_title", label=_("Tour title"), value=step.step_title or step.title) }}
 
                     {% call form.input("step_element", label=_("HTML element query"), value=step.step_element or step.element, attrs={'required': 1, 'class': 'form-control'}) %}

ckanext/tour/templates/tour/tour_add.html

@@ -28,7 +28,7 @@ <h3>{{ _("Tour steps:") }}</h3>
 
             <div class="tour-steps__steps">
                 {% for step in data.steps %}
-                    {% snippet 'tour/snippets/tour_step.html', step=step %}
+                    {% snippet 'tour/snippets/tour_step.html', step=step, step_index=loop.index %}
                 {% else %}
                     {% snippet 'tour/snippets/tour_step.html', step={} %}
                 {% endfor %}
@@ -58,5 +58,6 @@ <h3>{{ _("Tour steps:") }}</h3>
 {% block scripts %}
     {{ super() }}
 
+    {% asset 'tour/tour-draggable' %}
     {% asset 'tour/tour-htmx' %}
 {% endblock %}

ckanext/tour/templates/tour/tour_edit.html

@@ -29,7 +29,7 @@ <h3>{{ _("Tour steps:") }}</h3>
 
             <div class="tour-steps__steps">
                 {% for step in tour.steps %}
-                    {% snippet 'tour/snippets/tour_step.html', step=step, edit=1 %}
+                    {% snippet 'tour/snippets/tour_step.html', step=step, step_index=loop.index %}
                 {% endfor %}
             </div>
 
@@ -57,9 +57,6 @@ <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-draggable' %}
     {% asset 'tour/tour-htmx' %}
 {% endblock %}

ckanext/tour/theme/elements.scss

@@ -8,11 +8,6 @@
         gap: 12px;
 
         .tour-step {
-            border: 1px solid $step-border-color;
-            border-radius: $step-border-radius;
-            padding: 8px;
-            margin-bottom: 8px;
-
             position: relative;
 
             .form-group {
@@ -41,13 +36,24 @@
 .accordion.tour-accordion {
     width: 100%;
 
+    &.draggable-source--is-dragging {
+        opacity: .5;
+    }
+
     .accordion-header {
         display: flex;
         align-items: center;
         gap: 8px;
 
         .accordion-header--text {
             margin-right: auto;
+
+            .step-number {
+                border: 1px solid black;
+                color: black;
+                padding: 5px 11px;
+                border-radius: 50%;
+            }
         }
 
         .dragger {

ckanext/tour/views/tour_add.py

@@ -81,5 +81,4 @@ def _prepare_payload(self):
 
 class TourAddStepView(MethodView):
     def post(self) -> str:
-        tk.asint(tk.request.form.get("stepId", 0))
         return tk.render("tour/snippets/tour_step.html", extra_vars={"step": {}})