SHS-5963: FE performance refactor theme javascript

[mariannuar]

READY FOR REVIEW

Summary

Improve FE performance by refactoring the theme javascript

Need Review By (Date)

12/03

Urgency

medium

Steps to Test

• Repeat the steps below in both sites Traditional and Colorful

Testing instructions for Carousel Slides Height Script

• Go to the this page /components/hero-images-full-width-region-and-main-region and go to each hero image
• Confirm the following components have a min-height in the text wrapper:
  • Banner image(s) with partial overlay and text Slider
  • Banner image(s) with text box Slider
  • Banner image with full overlay and text Slider
  • Spotlights Slider
• Please test this in the FE and in the preview (su_humsci gin admin)

Testing instructions for Table wrap Script

• Go to the following paths:
  • /components/text-area-typography
  • /default-views/courses (uses table pattern)
  • /default-views/publications scroll down to table (uses a normal table)
• Confirm or a
  wrapper has a table-wrap class
• Review this in the the preview please (for the text area paragraph)

Testing instructions for Table scope Script

• Go to /components/text-area-typography and /default-views/publications scroll down to table
• Confirm table headers have a scope attribute
• Review this also in the preview please

Testing instructions for Table pattern Script

• Go to /default-views/courses
• Couldn't find an specific table that uses this script, so check the table-pattern.js script is being loaded.

Testing instructions for Navigation Index Scripts (Main Menu Toggle, Main Menu Nested Toggler, Collapse Main Menu, Secondary Toggler)

• Go to any page with a navigation menu and a secondary menu too (sidebar)
• Confirm main menu in small viewports are being collapsed into a hambuger menu
• Confirm main menu items are changing their aria-expanded status according to if they are expanded or collapsed, and confirm arrows are changing according to this
• Also in small viewports, the nested togglers (For example Components > Accordions) that have submenu items (Accordion Secondary), also change their aria-expanded status
• Confirm secondary menus are working as expected (Sidebar navigation)

Testing instructions for Equal Height Grid Script

• Go to the following pages:
  • /components/collections/collections-postcards/vertical-linked-cards
  • /private-pages/private-page-collection-cards
• Go to the layout configuration and in the Field Formatter Class field, add a .hb-stretch-vertical-linked-cards class
• Confirm the script is setting equal heights to the vertical linked cards

Testing instructions for Video with caption Script

• Create a flexible page and add a Text Area / WYSIWYG component
• Add a video via a Youtube URL and add a caption to it
• Check the video is inside a <figure> element
• Check the figure takes 100% of the width when there's a caption

Testing instructions for Page Scroll Animation Script

• Go to /admin/appearance/settings/humsci_colorful (or traditional)
• Scroll down and checked Animation Enhancements
• Clear cache
• Now go the each option in /components/hero-images-full-width-region-and-main-region and go to /components/text-area-typography
• Confirm the following components have a animate class when they are being intersected and animations work as expected:
  • Banner image(s) with partial overlay and text Slider
  • Banner image(s) with text box Slider
  • Banner image with full overlay and text Slider
  • Splahs font in Text Area

Testing instructions for Expanded Collapse Timeline Script

• Go /components/vertical-timeline-without-and-collection
• Confirm the timelines that have the Collapse by default field checked, are closed by default, and when you open them, they work as expected
• Review this in the the preview please

Testing instructions for Accordion Toggle All Script

• Go /components/accordion, edit one or add a new one
• Check the Add Expand/Collapse All field
• Confirm the Expand / Collapse All button works as expected
• Review this in the the preview please

Testing instructions for Linked Cards All Script

• Go the following pages:
  • /components/collections/collections-postcards/vertical-cards
  • /components/collections/collections-postcards/vertical-linked-cards
  • /default-views/events
• Confirm that when the title is focus, there's a is-focused class in Vertical Cards, Vertical Linked Cards and Date Stacked Vertical Cards when the card title is a link
• Please review this in the preview of Vertical Cards and Vertical Linked Cards

Testing instructions for Editoria11y Script

• Go to any page
• Confirm Editoria11y works and looks as it was before (For example in /components/collections/collections-postcards/vertical-cards the toggle-count text should be black instead of red



Testing instructions for Prefered Reduced Motion Script

• Go to the this page /components/hero-images-full-width-region-and-main-region and /components/photo-album
• Check the following components:
  • Banner image(s) with partial overlay and text Slider
  • Banner image(s) with text box Slider
  • Banner image with full overlay and text Slider
  • Spotlights Slider
  • Photo Album Slider
• Check that if prefered reduced motion is on in your computer configuration, the script disables motion effects in the slider
• And if it's not, it restores the default easing ('ease') for slider transitions

Testing instructions for Main Content Fallback Script

• Find a node with an overridden layout configuration. Click on the Layout tab and confirm that the Main Content Anchor Target is present
• Visit any page with a layout builder configuration
• Remove the Main Content Anchor Target from the layout.
• Save it and confirm that the js fallback works by using the Skip to Main Content link

Testing instructions for Mega Menu Script

• Go to https://music.suhumsci.loc/
• Confirm the mega menu is working as expected

Testing instructions for Add to cal Script

• Go to any upcoming event listing in https://dlcl.suhumsci.loc/events-news/upcoming-events
• Confirm there's an Add to calendarbutton and the aria-expanded status of it changed from to true to false or otherwise depending if the options are being shown



Testing instructions for Vertical Tabs Script

• Go to any flexible page and go to the tab of the layout builder config
• Confirm vertical tabs inside the layout builder form are closed by default



Testing instructions for Colorbox Script

• Go to /components/photo-album
• Click on any image in the Photo Album grid
• Inspect the code and confirm the colorbox content is being updated



PR Checklist

• PR Checklist
• Humsci Basic PR Checklist

[mariannuar]

@cienvaras Ready for review again!

[ahughes3]

Tugboat has finished building the preview for this pull request!

Links:

• https://pr1691-yjaw12j2elpdkv3tainq9lof6up2zgx4.tugboatqa.com
• https://hs-colorful-yjaw12j2elpdkv3tainq9lof6up2zgx4.tugboatqa.com
• https://hs-traditional-yjaw12j2elpdkv3tainq9lof6up2zgx4.tugboatqa.com
• https://english-yjaw12j2elpdkv3tainq9lof6up2zgx4.tugboatqa.com
• https://history-yjaw12j2elpdkv3tainq9lof6up2zgx4.tugboatqa.com
• https://west-yjaw12j2elpdkv3tainq9lof6up2zgx4.tugboatqa.com

Dashboard:

• https://dashboard.tugboatqa.com/674dfa21b8d4abaca99d0b9c

Visual Diffs:

• https://dashboard.tugboatqa.com/674dfa21b8d4abaca99d0b9c/visualdiffs

[cienvaras]

@mariannuar Good work, thanks for all the fixes, it was a complicated ticket. I added some extra fixes, we can review them when we come back from the break.

@ahughes3 This one is ready for you to review next year! I was a big refactor, but there shouldn't be any content, visual or behavior change, it was a low level update on how JS code is organized and loaded. I did a thoroughly review before approving the PR and confirmed that all changes work as expected. Mari added instructions on how to change each feature, but if you want to do a quick review you can visit some representative pages and test the interactive elements.