Merge pull request #577 from art-institute-of-chicago/feature/add-ran…

…ged-accordion-to-generic-pages Add Ranged Accordion Block to generic pages [WEB-2944]
art-institute-of-chicago · Oct 22, 2024 · 77f1986 · 77f1986
2 parents a04de1e + fa74340
commit 77f1986
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 28 deletions.
diff --git a/frontend/js/behaviors/core/rangedAccordion.js b/frontend/js/behaviors/core/rangedAccordion.js
@@ -1,28 +1,66 @@
-import { getOffset } from '@area17/a17-helpers';
+import { triggerCustomEvent } from '@area17/a17-helpers';
 
 const rangedAccordion = function(container) {
 
-    function _toggleAccordion() {
+    function _toggleAccordion(event) {
+
+        // Prevent default behavior
+        event.preventDefault();
 
         // Get the trigger element
         let trigger = container.querySelector('.o-accordion__trigger');
 
         // Get the associated panel
         let panel = document.getElementById('panel_' + trigger.id);
 
+        // Get the current scroll position
+        const currentScrollY = window.scrollY;
+
         // Toggle the expanded state
         const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
         trigger.setAttribute('aria-expanded', !isExpanded);
 
-        // Toggle the height of the panel
-        panel.style.height = isExpanded ? '0' : 'max-content';
+        // Add the fading effect
+        if (!isExpanded) {
+            // Expanding the panel
+            panel.style.height = 'auto'; // Let content height determine the space
+            panel.style.opacity = '0';   // Set initial opacity to 0 for fade-in
+            panel.style.transition = 'opacity 0.5s ease'; // Add transition for fade-in effect
+
+            // Timeout to ensure the height is calculated before applying opacity
+            setTimeout(() => {
+                panel.style.opacity = '1'; // Fade-in effect
+            }, 10); // Minimal delay to ensure transition kicks in
+        } else {
+            // Collapsing the panel
+            panel.style.transition = 'opacity 0.5s ease'; // Add transition for fade-out effect
+            panel.style.opacity = '0'; // Fade-out effect
+
+            // Set timeout to hide after fade-out completes
+            setTimeout(() => {
+                panel.style.height = '0';  // Collapse the height
+            }, 500); // Match with transition duration (0.5s)
+        }
 
         // Toggle the active class on the trigger
         trigger.classList.toggle('is-active');
 
-        // On close scroll to the top of the accordion
-        const offset = getOffset(container.querySelector('#' + trigger.id));
-        window.scrollTo(0, offset.top);
+        // Adjust scroll position only if closing the accordion
+        if (isExpanded) {
+            setTimeout(() => {
+                window.scrollTo({
+                    top: currentScrollY,
+                    behavior: 'instant'
+                });
+                triggerCustomEvent(document, 'accordion:toggled',);
+            }, 500);
+        } else {
+            window.scrollTo({
+                top: currentScrollY,
+                behavior: 'instant'
+            });
+            triggerCustomEvent(document, 'accordion:toggled',);
+        }
     };
 
     function _init() {

diff --git a/frontend/js/behaviors/core/stickySidebar.js b/frontend/js/behaviors/core/stickySidebar.js
@@ -179,6 +179,9 @@ const stickySidebar = function(container){
     window.addEventListener('scroll', handleScroll);
     window.addEventListener('resized', handleResize);
 
+    document.addEventListener('accordion:toggled', () => {
+      window.requestAnimationFrame(update);
+    }, false);
     document.addEventListener('stickySidebar:open', _showSidebar, false);
     document.addEventListener('stickySidebar:close', _hideSidebar, false);
     document.addEventListener('stickySidebar:toggle', _toggleSidebar, false);
@@ -195,6 +198,7 @@ const stickySidebar = function(container){
     window.removeEventListener('resized', handleResize);
     window.removeEventListener('scroll', handleScroll);
 
+    document.removeEventListener('accordion:toggled', window.requestAnimationFrame(update));
     document.removeEventListener('stickySidebar:open', _showSidebar);
     document.removeEventListener('stickySidebar:close', _hideSidebar);
     document.removeEventListener('stickySidebar:toggle', _toggleSidebar);

diff --git a/frontend/scss/organisms/_o-accordion.scss b/frontend/scss/organisms/_o-accordion.scss
@@ -1,13 +1,40 @@
+.o-accordion {
 
+  h3 {
+    padding: 25px 0;
+  }
+
+  .o-article + & {
+    margin-top: 40px;
+  }
 
-.o-accordion {
+  &.o-ranged-accordion {
+    // Only apply margin-top if the previous sibling is not another o-ranged-accordion
+    &:not(.o-ranged-accordion + .o-ranged-accordion) {
+      margin-top: 40px;
+    }
 
-h3 {
-  padding: 25px 0;
-}
+    h3 {
+      border-top: 1px solid $color__rules--primary;
+      padding: 16px 0 !important;
+    }
 
-.o-article + & {
-    margin-top: 40px;
+    .o-accordion__trigger.f-module-title-2 {
+      padding-top: 0;
+      border-top: none;
+
+      &:before {
+        display: none !important;
+      }
+
+      @include breakpoint('small+') {
+        padding-top: 0;
+      }
+
+      .o-accordion__trigger-icon {
+        top: 6px;
+      }
+    }
   }
 }
 
@@ -303,6 +330,10 @@ h3 {
   }
 }
 
+.o-accordion__panel-content.o-blocks > .m-media {
+  margin-top: 44px;
+}
+
 .o-accordion__panel-content.o-blocks > h4:not([class*=f-]) + p:not([class*=f-]),
 .o-accordion__panel-content.o-blocks > .f-subheading-1 + .f-body,
 .o-accordion__panel-content.o-blocks > .f-subheading-1 + .f-body-editorial {

diff --git a/resources/views/admin/genericPages/form.blade.php b/resources/views/admin/genericPages/form.blade.php
@@ -71,7 +71,7 @@
 
     @formField('block_editor', [
         'blocks' => BlockHelpers::getBlocksForEditor([
-            'paragraph', 'image', 'hr', 'artwork', 'split_block', 'gallery_new', 'link', 'video', 'tour_stop', 'accordion', 'media_embed', 'list', 'timeline', 'child_pages', 'grid', 'button', 'newsletter_signup_inline', 'table', 'audio_player', 'vtour_embed', 'mirador_embed', 'custom_banner', 'search_bar', 'membership_banner', '3d_model', 'mobile_app', 'mirador_modal'
+            'paragraph', 'image', 'hr', 'artwork', 'split_block', 'gallery_new', 'link', 'video', 'tour_stop', 'accordion', 'ranged_accordion', 'media_embed', 'list', 'timeline', 'child_pages', 'grid', 'button', 'newsletter_signup_inline', 'table', 'audio_player', 'vtour_embed', 'mirador_embed', 'custom_banner', 'search_bar', 'membership_banner', '3d_model', 'mobile_app', 'mirador_modal'
         ])
     ])
 @stop

diff --git a/resources/views/site/blocks/ranged_accordion.blade.php b/resources/views/site/blocks/ranged_accordion.blade.php
@@ -5,20 +5,19 @@
 
 @endphp
 
-<div class="o-accordion{{ (isset($variation)) ? ' '.$variation : '' }}" data-behavior="rangedAccordion">
-    @if ($type === 'start')
-    <h3><button id="accordion_{{ StringHelpers::getUtf8Slug($title) }}" class="o-accordion__trigger {{ $titleFont ?? 'f-list-3' }}" tabindex="0">
-        {!! $title !!}
-        <span class="o-accordion__trigger-icon">
-            <svg class="icon--plus"><use xlink:href="#icon--plus" /></svg>
-            <svg class="icon--minus"><use xlink:href="#icon--minus" /></svg>
-        </span>
-    </button></h3>
-    <div id="panel_accordion_{{ StringHelpers::getUtf8Slug($title) }}" class="o-accordion__panel" aria-labelledby="{{ StringHelpers::getUtf8Slug($title)}}">
-        <div class="o-accordion__panel-content o-blocks">
-    @else
+@if ($type === 'start')
+    <div class="o-accordion{{ (isset($variation)) ? ' '.$variation : '' }} o-ranged-accordion" data-behavior="rangedAccordion">
+        <h3><button id="accordion_{{ StringHelpers::getUtf8Slug($title) }}" class="o-accordion__trigger {{ $titleFont ?? 'f-module-title-2' }}" tabindex="0">
+            {!! $title !!}
+            <span class="o-accordion__trigger-icon">
+                <svg class="icon--plus"><use xlink:href="#icon--plus" /></svg>
+                <svg class="icon--minus"><use xlink:href="#icon--minus" /></svg>
+            </span>
+        </button></h3>
+        <div id="panel_accordion_{{ StringHelpers::getUtf8Slug($title) }}" class="o-accordion__panel" aria-labelledby="{{ StringHelpers::getUtf8Slug($title)}}">
+            <div class="o-accordion__panel-content o-blocks o-blocks--with-sidebar">
+@else
             </div>
         </div>
     </div>
-    </div>
-    @endif
+@endif