Shared Utilities

Overview

All shared JavaScript utilities live in src/handoff/js/components/ and src/handoff/js/utilities/. They are imported by js/main.js (the shared bundle entry point) and re-imported as needed by individual block script.js files.

Vite deduplicates these imports at build time — each utility appears exactly once in the final public/api/component/main.js bundle, regardless of how many blocks reference it.

Component utilities (`js/components/`)

accordion.js

Expandable/collapsible content panels using jQuery slide animations.

Triggers: .c-accordion__toggle

Behavior: Clicking a toggle expands its sibling panel and collapses all other panels within the same .c-accordion parent.

Used by: accordion-simple, callout, content, feature

JavaScript

import '../../js/components/accordion.js';

default-slider.js

Slick Carousel initialization for three standard slider variants.

Triggers:

.js-default-slider — dots on, responsive adaptive height
.js-default-slider-alt — no dots, no arrows variant
.js-default-slider-alt-adaptive — no dots, adaptive height on breakpoints

Library: Slick Carousel 1.8.1 + jQuery

Used by: banner, testimonial-slider

JavaScript

import '../../js/components/default-slider.js';

article-card-slider.js

Slick Carousel for article/post card grids.

Triggers: .js-article-card-slider

Library: Slick Carousel + jQuery

Used by: posts-featured

carousel-content.js

Content carousel (used for before/after image reveal panels).

Triggers: .js-carousel-content

Used by: before-after

header.js

Sticky header behavior and notification banner dismissal.

Triggers:

.c-header__bottom — becomes sticky when user scrolls past the header offset
.eb-js-header — alternate sticky class for other implementations
.c-notification__close — dismisses the notification banner and sets a cookie (via js.cookie)

Used by: header

main-nav.js

Primary navigation dropdowns and mega-menu behavior.

Triggers: .c-main-nav

Used by: header

mobile-nav.js

Mobile navigation drawer open/close.

Triggers: .c-mobile-nav

Used by: header

hamburger-icon.js

Hamburger/close icon toggle for mobile navigation.

Triggers: .c-hamburger

Used by: header

search-bar.js

Site search bar expand/collapse and form submission.

Triggers: .c-site-search

Used by: header

offcanvas.js

Bootstrap 5 Offcanvas panel initialization.

Triggers: .c-offcanvas elements with data-bs-toggle="offcanvas"

Library: Bootstrap 5

Used by: header

jump-nav.js

Sticky in-page anchor navigation that highlights the active section as the user scrolls.

Triggers: .c-jump-nav

Used by: header, hero-product

tabs.js

Tab switching with optional scroll-to behavior.

Triggers: .js-toggle-tab, .c-tabs, .c-search-filter__tab

Behavior: Activates the clicked tab, deactivates siblings, shows the matching .c-tabs child panel. Scrolls to the panel if it is off-screen.

Used by: Any block with tab navigation

selects.js

Select2 initialization for all select dropdown variants across the site.

Triggers:

.c-select select — default styled select
.event-form-select — event filter select (shows search after 5 results)
.mktoForm select — Marketo form selects (wrapped in .c-select on init)
.c-lang-switcher select — language switcher
.c-provider-finder__select select — provider finder single selects
.c-provider-finder__select--treatment select — multi-select with counter
.c-provider-finder__select--product select — multi-select with counter
.c-select--treatment select — footer treatment multi-select
.c-select--product select — footer product multi-select

Library: Select2 4.1.0

Used by: cta-provider, download, downloads-columns, downloads-list, downloads-split, events-upcoming-list-sidebar, footer, grid-three-column, grid-three-column-nav, hero-contact, hero-news, hero-search-provider, posts-latest

See Select2 for full configuration details.

popup.js

Magnific Popup lightbox for inline modals, video popups, and brochure download gates.

Triggers:

.js-open-content-popup — generic inline modal
.eb-js-showcase-slider — showcase slider with delegated popup
.js-open-content-popup-brochure — brochure popup; injects Pardot iframe on open
.js-open-content-popup-asset — asset download popup; injects Pardot iframe
.js-open-content-popup-asset-gf — asset popup with Gravity Form via AJAX
.js-popup-map — moves a Google Map into a fullscreen popup
.js-open-video — opens a video URL in an iframe lightbox
.js-open-wistia-video-popup — Wistia video popup

Library: Magnific Popup 1.2.0 + jQuery

Used by: download, downloads-columns, downloads-list, downloads-split, hero-contact

See Magnific Popup for configuration details.

reveal.js

ScrollReveal entrance animations applied globally.

Triggers:

.will-slide-right — slides in from the left (120px, 1000ms)
.will-slide-left — slides in from the right (120px, 1000ms, 250ms delay)
.will-fade-in — fades in (1000ms, 200ms delay)
.eb-c-products-showcase__rotation-trigger — watches for viewport entry to trigger rotation removal

Library: ScrollReveal 4.0.9

Used by: Any block — add these classes to any element to enable entrance animations.

parallax.js

Scroll-based parallax movement for background elements.

Triggers: [data-parallax]

Used by: Any block with a parallax background image.

smooth-scroll.js

Smooth animated scrolling to anchor targets.

Triggers: .js-smooth-scroll

comparison-slider.js / compare-slider.js

Before/after image comparison sliders.

Triggers: .js-comparison-slider, .js-compare-slider

Library: jquery.twentytwenty.js (bundled vendor)

Used by: comparison-slider, before-after

speaker-card.js

Speaker biography expand/collapse.

Triggers: .c-speaker-card

Used by: content-bio-list

observer.js

IntersectionObserver utility for lazy-loading and viewport entry detection.

Triggers: [data-observe]

gravity-forms.js

Gravity Forms field enhancements (styling, validation hooks).

Triggers: .gform_wrapper

consent.js

Cookie consent banner initialization.

Triggers: .c-consent

intro-label.js

Intro label reveal animation.

Triggers: .c-intro-label

ticker-slider.js

Ticker/marquee text slider.

Triggers: .js-ticker-slider

Library: Slick Carousel

video-carousel.js

Video carousel with play/pause controls.

Triggers: .js-video-carousel

featured-content.js

cta-columns-slider.js

CTA columns slider for mobile breakpoints.

Triggers: .js-cta-columns-slider

Library: Slick Carousel

showcase-slider.js

Product showcase slider with popup integration.

Triggers: .eb-js-showcase-slider

pointer-events.js

Disables pointer events during scroll to improve rendering performance.

Utility modules (`js/utilities/`)

svg-inline-loader.js

Replaces <img> tags pointing to SVG files with inline <svg> elements. This enables CSS-based SVG styling (fill, stroke, etc.) that is not possible with <img> tags.

Triggers: img[src$=".svg"] (SVG images)

Used by: callout, event-upcoming-callout, events-upcoming, events-upcoming-asset, footer, full-screen-video, full-width-video, header, hero-article, hero-basic, hero-contact, hero-news, hero-product, hero-search, notification, testimonials, and components/buttons

get-scroll.js

Returns the current scroll position, cross-browser compatible.

Consumed by: header.js

passive-event-supported.js

Detects whether the browser supports passive event listeners. Returns a boolean used by header.js to attach scroll listeners efficiently.

Consumed by: header.js

Overview

Component utilities (js/components/)

accordion.js

default-slider.js

article-card-slider.js

carousel-content.js

header.js

main-nav.js

mobile-nav.js

hamburger-icon.js

search-bar.js

offcanvas.js

jump-nav.js

tabs.js

selects.js

popup.js

reveal.js

parallax.js

smooth-scroll.js

comparison-slider.js / compare-slider.js

speaker-card.js

observer.js

gravity-forms.js

consent.js

intro-label.js

ticker-slider.js

video-carousel.js

featured-content.js

cta-columns-slider.js

showcase-slider.js

pointer-events.js

Utility modules (js/utilities/)

svg-inline-loader.js

get-scroll.js

passive-event-supported.js

Component utilities (`js/components/`)

Utility modules (`js/utilities/`)