Issue #3144 - Bootstrap 5 accordion work continued for outsatanding

cases.
DMPRoadmap · Jul 17, 2023 · 32c62d6 · 32c62d6
1 parent 0d09dec
commit 32c62d6
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 54 deletions.
diff --git a/app/javascript/src/utils/accordion.js b/app/javascript/src/utils/accordion.js
@@ -9,26 +9,48 @@
  * <a href="#" data-toggle-direction="hide"><%= _('collapse all') %></a>
  * </div>
  *
- * Your accordion should follow the Boostrap 3.x layout:
+ * Your accordion should follow the Boostrap 5.x layout:
  * ------------------------------------------------------------
- * <div id="accordion" class="panel-group" role="tablist" aria-multiselectable="true">
- * <div class="panel panel-default">
- * <div class="panel-heading" role="tab" id="headingA">
- * <h2 class="panel-title">
- * <a role="button" data-toggle="collapse" data-parent="accordion"
- * href="#collapseA" aria-controls="collapseA" aria-expanded="false">
- * Section A
- * </a>
- * </h2>
- * </div>
- * <div id="collapseA" class="panel-collapse collapse" role="tabpanel"
- * aria-labelledby="headingA">
- * <div class="panel-body">
- * This is test section A.
- * </div>
- * </div>
- * </div>
- * </div>
+* <div class="accordion" id="accordionDefault">
+* <div class="accordion-item">
+* <h2 class="accordion-header" id="headingDefaultOne">
+* <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseDefaultOne" aria-expanded="true" aria-controls="collapseDefaultOne">
+* Accordion Item #1
+* </button>
+* </h2>
+* <div id="collapseDefaultOne" class="accordion-collapse collapse show" aria-labelledby="headingDefaultOne" data-bs-parent="#accordionDefault">
+* <div class="accordion-body">
+* Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+Donec mattis posuere consequat. Nulla fermentum sodales augue, 
+vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero.
+* </div>
+* </div>
+* </div>
+* <div class="accordion-item">
+* <h2 class="accordion-header" id="headingDefaultTwo">
+* <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseDefaultTwo" aria-expanded="false" aria-controls="collapseDefaultTwo">
+* Accordion Item #2
+* </button>
+* </h2>
+* <div id="collapseDefaultTwo" class="accordion-collapse collapse" aria-labelledby="headingDefaultTwo" data-bs-parent="#accordionDefault">
+* <div class="accordion-body">
+* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero.
+* </div>
+* </div>
+* </div>
+* <div class="accordion-item">
+* <h2 class="accordion-header" id="headingDefaultThree">
+* <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseDefaultThree" aria-expanded="false" aria-controls="collapseDefaultThree">
+* Accordion Item #3
+* </button>
+* </h2>
+* <div id="collapseDefaultThree" class="accordion-collapse collapse" aria-labelledby="headingDefaultThree" data-bs-parent="#accordionDefault">
+* <div class="accordion-body">
+* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero.
+* </div>
+* </div>
+* </div>
+* </div>
  */
 $(() => {
  $('body').on('click', '.accordion-controls a', (e) => {
@@ -38,23 +60,21 @@ $(() => {
  const direction = target.attr('data-toggle-direction');
  const parentTargetName = currentTarget.parent().attr('data-parent');
  if (direction) {
- // Selects all .panel elements where the parent is currentTarget.attr('data-parent') and
- // after gets the immediately children whose class selector is panel-collapse
+ // Selects all .accordion-item elements where the parent is
+ // currentTarget.attr('data-parent') and
+ // after gets the immediately children whose class selector is accordion-collapse
  const parentTarget = $(`#${parentTargetName}`).length ? $(`#${parentTargetName}`) : $(`.${parentTargetName}`);
- $(parentTarget).find('.panel').find('.panel-collapse').each((i, el) => {
- const panelCollapse = $(el);
- // Expands or collapses the panel according to the
+ $(parentTarget).find('.accordion-item').each((i, el) => {
+ const accordionItem = $(el);
+ // Expands or collapses according to the
  // direction passed (e.g. show --> expands, hide --> collapses)
  if (direction === 'show') {
- if (!panelCollapse.find('.panel-body').attr('data-loaded') || !panelCollapse.hasClass('in')) {
- panelCollapse.prev()[0].click();
- }
+ accordionItem.find('.accordion-button').addClass('collapsed');
+ accordionItem.find('.accordion-collapse').addClass('show');
  } else {
- panelCollapse.collapse(direction);
+ accordionItem.find('.accordion-button').removeClass('collapsed');
+ accordionItem.find('.accordion-collapse').removeClass('');
  }
- // Sets icon at panel-title accordingly
- panelCollapse.prev().find('i.fa')
- .removeClass('fa-plus fa-minus').addClass(direction === 'show' ? 'fa-minus' : 'fa-plus');
  });
  }
  });

diff --git a/app/views/org_admin/phases/_index.html.erb b/app/views/org_admin/phases/_index.html.erb
@@ -13,15 +13,15 @@
 </div>
 <div class="row">
  <div class="col-md-12">
- <div class="card-group" id="phases_accordion" role="tablist">
+ <div class="accordion" id="phases_accordion" role="tablist">
  <!-- If template has phases-->
  <% if template_hash[:template][:phases].present? %>
  <% i = 0 %>
  <% template_hash[:template][:phases].each do |phase_no, phase_hash| %>
  <% phase = phase_hash[:data] %>
  <div class="card card-default">
- <div class="heading-button" role="button" data-toggle="collapse"
- data-parent="phases_accordion"
+ <div class="heading-button" role="button" data-bs-toggle="collapse"
+ data-bs-parent="phases_accordion"
  href="#collapsePhase<%= phase.id %>"
  aria-expanded="<%= i == 0 ? 'true' : 'false' %>"
  aria-controls="#collapsePhase<%= phase.id %>">
@@ -36,7 +36,7 @@
  <div class="clearfix"></div>
  </div>
  </div>
- <div id="<%= "collapsePhase#{phase.id}" %>" class="card-collapse collapse<%= i == 0 ? 'in' : '' %>" role="tabcard" aria-labelledby="<%= "headingPhase#{phase.id}" %>"<%= i == 0 ? 'aria-expanded="true"' : '' %>>
+ <div id="<%= "collapsePhase#{phase.id}" %>" class="accordion-collapse collapse<%= i == 0 ? 'show' : 'hide' %>" role="tabcard" aria-labelledby="<%= "headingPhase#{phase.id}" %>"<%= i == 0 ? 'aria-expanded="true"' : '' %>>
  <div class="card-body">
  <%= render partial: 'org_admin/templates/show_phases_sections', locals: { phase: phase, phase_hash: phase_hash, template: template, current: current } %>
  </div>

diff --git a/app/views/org_admin/sections/_index.html.erb b/app/views/org_admin/sections/_index.html.erb
@@ -49,7 +49,7 @@
  </div>
 
  <% if template.latest? && (modifiable || template.customization_of.present?) %>
- <div class="card card-default">
+ <div class="accordion">
  <a href="#new_section" class="heading-button"
  data-toggle="collapse" data-parent="sections-accordion"
  data-target="#collapseSectionNew"

diff --git a/app/views/phases/_edit_plan_answers.html.erb b/app/views/phases/_edit_plan_answers.html.erb
@@ -12,9 +12,9 @@
  </div>
  </div>
  </div>
+ <div class="col-md-4">
  <div id="progress-data" data-sections="<%= sections_info(plan).to_json %>" data-remove="<%= remove_list(plan).to_json %>">
  </div>
- <div class="col-md-4">
  <% if plan.present? && phase.present? %>
  <div class="progress">
  <%= render partial: "/plans/progress",
@@ -25,33 +25,30 @@
  </div>
  </div>
  </div>
- <div class="card-group" id="sections-accordion" role="tablist"
+ <div class="accordion" id="sections-accordion" role="tablist"
  aria-multiselectable="true">
  <% phase.sections.sort {|a,b| a.number <=> b.number }.each do |section| %>
- <div class="card card-default">
- <div class="heading-button" role="button" data-toggle="collapse"
+ <div class="accordion-item w-100 my-3">
+ <h2 class="accordion-header" role="tab" id="heading-<%= section.id %>">
+ <div class="accordion-button" role="button" data-bs-toggle="collapse"
  id="section-panel-<%= section.id %>"
- data-parent="sections-accordion"
+ data-bs-parent="sections-accordion"
  href="#collapse-<%= section.id %>"
  aria-expanded="false"
  aria-controls="collapse-<%= section.id %>">
-
- <div class="card-heading" role="tab" id="heading-<%= section.id %>">
- <div class="card-title pull-left">
  <%= section.title %>
  <% if plan.present? %>
  <span class="section-progress-<%= section.id %>">
  <%= render partial: "/org_admin/sections/progress",
  locals: { section: section, plan: plan } %>
  </span>
  <% end %>
- </div>
- <i class="fas fa-plus pull-right" aria-hidden="true"></i>
- <div class="clearfix"></div>
  </div>
+ </h2>
+
  </div>
- <div id="collapse-<%= section.id %>" class="card-collapse collapse" role="tabpanel" aria-labelledby="heading-<%= section.id %>">
- <div class="card-body"><!-- accordion body -->
+ <div id="collapse-<%= section.id %>" class="accordion-collapse collapse" role="tabpanel" aria-labelledby="heading-<%= section.id %>">
+ <div class="accordion-body"><!-- accordion body -->
  <div class="section-description">
  <div class="display-readonly-textarea-content">
  <%= sanitize section.description %>
@@ -114,10 +111,9 @@
  <hr />
  <% end %>
  <% end %> <!-- section.questions.each do -->
- </div> <!-- card-body -->
- </div> <!-- card-collapse -->
- </div> <!-- card card-default -->
+ </div> <!-- accordion-body -->
+ </div> <!-- accordion-collapse -->
  <% end %> <!-- phase.sections.sort {|a,b| a.number <=> b.number }.each do -->
- </div> <!-- card-group -->
+ </div> <!-- accordion -->
  </div> <!-- tab card -->
 </div> <!-- tab panels -->
diff --git a/app/views/plans/_overview_details.html.erb b/app/views/plans/_overview_details.html.erb
@@ -26,7 +26,7 @@
  <% if plan.template.phases.size == 1 %>
  <%= render(partial: '/phases/overview', locals: { plan_id: plan.id, phase: plan.template.phases.first }) %>
  <% else %>
- <div class="card-group" id="plan-overview-accordion" role="tablist" aria-multiselectable="true">
+ <div class="accordion" id="plan-overview-accordion" role="tablist" aria-multiselectable="true">
  <% plan.template.phases.each do |p| %>
  <% questions_size = p.sections.map{|s| s.questions.size }.reduce(0){|sum,x| sum + x } %>
  <div class="card card-default">