Merge pull request #354 from itk-dev/feature/1712-step-by-step

1712: Added “Expand all steps” link on step by step

Author: martinyde

CHANGELOG.md

@@ -8,6 +8,8 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+- [PR-354](https://github.com/itk-dev/os2loop/pull/354)
+  1712: Added “Expand all steps” link on step by step
 - [PR-353](https://github.com/itk-dev/os2loop/pull/353):
   Security update
 - [PR-352](https://github.com/itk-dev/os2loop/pull/352):

web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss

@@ -113,3 +113,11 @@ img {
 //     }
 //   }
 // }
+
+// Offset used for (trying to) prevent topbar from overlapping content when using URL fragment identifier.
+$target-offset: 64px;
+
+:target {
+	margin-top: -$target-offset;
+	padding-top: $target-offset;
+}

web/profiles/custom/os2loop/themes/os2loop_theme/os2loop_theme.theme

@@ -18,6 +18,13 @@ use Drupal\user\Entity\User;
 function os2loop_theme_preprocess(&$variables) {
   $variables['logopath'] = \Drupal::service('file_url_generator')->generateString(theme_get_setting('logo.url'));
   $variables['os2loop_container_class'] = theme_get_setting('container_class') ?: 'container-fluid';
+  // Poor man's App Global Variable
+  // (https://symfony.com/doc/current/templates.html#the-app-global-variable).
+  $variables['app'] = [
+    'request' => \Drupal::request(),
+  ];
+  // Add the `expanded` query string parameter to the cache context.
+  $variables['#cache']['contexts'][] = 'url.query_args:expanded';
 }
 
 /**

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/paragraph--os2loop-documents-step-by-step.html.twig

@@ -47,10 +47,15 @@
   ]
 %}
 {% block paragraph %}
-  <div{{ attributes.addClass(classes) }}>
+  {% set paragraph_id = 'paragraph-id-' ~ paragraph.id.value %}
+  {% set expanded = app.request.query.get('expanded') %}
+  <div{{ attributes.addClass(classes) }} id="{{ paragraph_id }}">
     {{ content.contextual_links }}
     {{ include('@os2loop_theme/content-entities/os2loop_documents_title.html.twig') }}
     {{ content.os2loop_documents_description }}
+
+    <a class="btn btn-link os2loop-expand" href="{{ path('<current>', {expanded: not expanded}, {fragment: paragraph_id}) }}">{{ expanded ? 'Collapse all steps'|trans : 'Expand all steps'|trans }}</a>
+
     <ol class="os2loop-documents-steps">
       {{ content.os2loop_documents_steps }}
     </ol>

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/paragraph--os2loop-documents-step.html.twig

@@ -51,24 +51,27 @@
 
 {% set has_title = content.os2loop_documents_step_title['#title'] is not null %}
 
+{% set expanded = app.request.query.get('expanded') %}
+{% set class_collapsed = not expanded ? 'collapsed' %}
+
 {% block paragraph %}
   {% block content %}
     <li {{ attributes.addClass(classes) }}>
       {# A hack to check if we're rendering content for pdf generation #}
       {% if 'print/pdf' in url('<current>')['#markup'] %}
-        <span class="collapsed step--collapse-toggle">
+        <span class="{{ class_collapsed }} step--collapse-toggle">
           <span class="bold">
             {{ has_title ? content.os2loop_documents_step_title : content.os2loop_documents_step_text }}
           </span>
         </span>
       {% else %}
-        <a class="collapsed step--collapse-toggle" type="button" data-toggle="collapse" data-target="#paragraph-id-{{ paragraph.id() }}">
+        <a class="{{ class_collapsed }} step--collapse-toggle" type="button" data-toggle="collapse" data-target="#paragraph-id-{{ paragraph.id() }}">
           <span class="bold {{ has_title ? 'line-clamp-1' }}">
             {{ has_title ? content.os2loop_documents_step_title : content.os2loop_documents_step_text }}
           </span>
         </a>
       {% endif %}
-      <div class="row no-gutters collapse" id="paragraph-id-{{ paragraph.id() }}">
+      <div class="row no-gutters collapse {{ expanded ? 'show' }}" id="paragraph-id-{{ paragraph.id() }}">
         <div class="col">
           <div class="row no-gutters">
             <div class="col">