feature: put steps into accordions

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

@@ -40,9 +40,7 @@ ckan.module("tour-steps", function ($) {
         _onRemoveStep: function (e) {
             e.preventDefault();
 
-            var stepId = $(e.target).closest(".tour-step").data("stepId");
-
-            $(`#step_${stepId}`).remove();
+            $(e.target).closest(".tour-accordion").remove();
 
             this._toggleRemoveBtns();
             this._updateLastStepId();

ckanext/tour/templates/base.html

@@ -6,6 +6,10 @@
     <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

@@ -1,21 +1,40 @@
 {% import 'macros/form.html' as form %}
 {% from "tour/snippets/tour_image_upload.html" import image_upload %}
 
-<fieldset class="tour-step" id="step_{{ step_id }}" data-step-id="{{ step_id }}">
-    <button class="remove-step btn">X</button>
+{% set step_id = step.step_id or step.id %}
 
-    {{ form.hidden("step_id", value=step.step_id or step.id) }}
-    {{ form.input("step_title", label=_("Tour title"), value=step.step_title or step.title) }}
+<div class="accordion tour-accordion" id="step-{{ step_id }}">
+    <div class="accordion-item">
+        <h3 class="accordion-header" id="headingOne">
+            <div class="accordion-header--text">
+                Step <span class="step-idx">0</span>
+            </div>
+            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ step_id }}"
+                aria-expanded="true" aria-controls="collapse-{{ step_id }}">
+            </button>
+            <button class="remove-step btn btn-danger" data-step-id="{{ step_id }}">{{ _("Delete") }}</button>
+        </h3>
+        <div id="collapse-{{ step_id }}" class="accordion-collapse collapse show" aria-labelledby="headingOne"
+            data-bs-parent="#step-{{ step_id }}">
+            <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.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'}) %}
-        {{ form.info(_('Example: .dataset-list or #map')) }}
-    {% endcall %}
+                    {% call form.input("step_element", label=_("HTML element query"), value=step.step_element or step.element, attrs={'required': 1, 'class': 'form-control'}) %}
+                        {{ form.info(_('Example: .dataset-list or #map')) }}
+                    {% endcall %}
 
-    {% call form.input("step_intro", label=_("Intro"), value=step.step_intro or step.intro) %}
-        {{ form.info(_('Supports HTML')) }}
-    {% endcall %}
+                    {% call form.input("step_intro", label=_("Intro"), value=step.step_intro or step.intro) %}
+                        {{ form.info(_('Supports HTML')) }}
+                    {% endcall %}
 
-    {{ form.select('step_position', label=_('Position'), options=h.tour_get_position_options(), selected=step.step_position or step.position, error=error or {}) }}
+                    {{ form.select('step_position', label=_('Position'), options=h.tour_get_position_options(), selected=step.step_position or step.position, error=error or {}) }}
 
-    {{ image_upload(step) }}
-</fieldset>
+                    {{ image_upload(step) }}
+                </fieldset>
+            </div>
+        </div>
+    </div>
+
+</div>

ckanext/tour/theme/elements.scss

@@ -3,6 +3,9 @@
 
     .tour-steps__steps {
         margin-bottom: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
 
         .tour-step {
             border: 1px solid $step-border-color;
@@ -33,5 +36,25 @@
             }
         }
     }
+}
+
+.accordion.tour-accordion {
+    .accordion-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .accordion-header--text {
+            margin-right: auto;
+        }
 
+        .accordion-button {
+            width: fit-content;
+            padding: 0.5rem;
+        }
+
+        .remove-step {
+            height: 38px;
+        }
+    }
 }