feature: implement collapse all steps button

DataShades · Sep 12, 2023 · ed06efa · ed06efa
1 parent e8cb74e
commit ed06efa
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/ckanext/tour/assets/js/tour-steps.js b/ckanext/tour/assets/js/tour-steps.js
@@ -13,6 +13,7 @@ ckan.module("tour-steps", function ($) {
             // add event listeners
             $(document).on('click', '.add-step', this._onAddStep);
             $(document).on('click', '.remove-step', this._onRemoveStep);
+            $(document).on('click', '.btn-collapse-steps', this._onCollapseAllSteps);
 
             // HTMX events
             document.body.addEventListener('htmx:afterSwap', function (e) {
@@ -90,6 +91,11 @@ ckan.module("tour-steps", function ($) {
         _updateStepIndexes: function (idx, step) {
             $(step).find(".step-number").text(idx);
             $(step).find("input[name='step_index']").val(idx);
+        },
+
+        _onCollapseAllSteps: function (e) {
+            e.preventDefault();
+            $(".tour-steps__steps .accordion-collapse").collapse("hide");
         }
     };
 });
diff --git a/ckanext/tour/templates/tour/snippets/tour_step.html b/ckanext/tour/templates/tour/snippets/tour_step.html
@@ -5,7 +5,7 @@
 
 <div class="accordion tour-accordion" id="step-{{ step_id }}">
     <div class="accordion-item">
-        <h3 class="accordion-header" id="headingOne">
+        <h3 class="accordion-header" id="step-header-{{ step_id }}">
             <div class="accordion-header--text">
                <span class="step-number">{{ step_index or 0 }}</span> {{ _("Step") }}
             </div>
@@ -17,7 +17,7 @@ <h3 class="accordion-header" id="headingOne">
             </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"
+        <div id="collapse-{{ step_id }}" class="accordion-collapse collapse show" aria-labelledby="step-header-{{ step_id }}"
             data-bs-parent="#step-{{ step_id }}">
             <div class="accordion-body">
                 <fieldset class="tour-step" id="step_{{ step_id }}" data-step-id="{{ step_id }}">

diff --git a/ckanext/tour/templates/tour/tour_add.html b/ckanext/tour/templates/tour/tour_add.html
@@ -20,6 +20,12 @@
             {{ form.info(_('Optional. A path to a page, where tour will be applied. Note, that a page tour will be triggered automatically.', classes=['info-help-tight'])) }}
         {% endcall %}
 
+
+        <div class="form-actions js-form-wrapper form-wrapper">
+            <button class="btn btn-primary" type="submit">{{ _("Create tour") }}</button>
+            <button class="btn btn-black btn-collapse-steps">{{ _("Collapse all steps") }}</button>
+        </div>
+
         <h3>{{ _("Tour steps:") }}</h3>
 
         {#} it's a temporary solution {#}
@@ -55,10 +61,6 @@ <h3>{{ _("Tour steps:") }}</h3>
                 </button>
             </div>
         </div>
-
-        <div class="form-actions js-form-wrapper form-wrapper">
-            <button class="btn btn-primary" type="submit">{{ _("Create tour") }}</button>
-        </div>
     </form>
 {% endblock ap_content %}
 

diff --git a/ckanext/tour/templates/tour/tour_edit.html b/ckanext/tour/templates/tour/tour_edit.html
@@ -23,6 +23,7 @@
 
         <div class="form-actions js-form-wrapper form-wrapper">
             <button class="btn btn-primary" type="submit">{{ _("Update tour") }}</button>
+            <button class="btn btn-black btn-collapse-steps">{{ _("Collapse all steps") }}</button>
         </div>
 
         <h3>{{ _("Tour steps:") }}</h3>