Skip to content

Content below Sky Nav animates again #1986

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 28, 2022
Merged

Content below Sky Nav animates again #1986

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4e70585
Update logic to match new HTML
gerardo-rodriguez Jul 28, 2022
961a5be
Update demo to match site templates
gerardo-rodriguez Jul 28, 2022
d294c44
Use body for animation transition
gerardo-rodriguez Jul 28, 2022
1a91015
Remove header wrapper
gerardo-rodriguez Jul 28, 2022
434398c
Add changeset
gerardo-rodriguez Jul 28, 2022
84232b6
Use CSSStyleDeclaration set/removeProperty()
gerardo-rodriguez Jul 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/flat-points-smoke.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@cloudfour/patterns': patch
---

Fix bug where content below Sky Nav was not animating open/closed
40 changes: 14 additions & 26 deletions src/components/sky-nav/sky-nav.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,6 @@ export const initSkyNav = (navButton: HTMLButtonElement) => {
return;
}

// We need to keep track of the siblings after the menu,
// because we will push them down for the animation
const elementsToShift: HTMLElement[] = [navWrapper];
let sibling: HTMLElement | null = navWrapper;
// eslint-disable-next-line no-unmodified-loop-condition
while ((sibling = sibling.nextElementSibling as HTMLElement | null)) {
elementsToShift.push(sibling);
}

const duration = Number.parseFloat(tokens.time.transition.slow.value);
const transition = `transform ${duration}s ${tokens.ease.in_out.value}`;
clearTimeout(timeoutId);
Expand All @@ -74,34 +65,31 @@ export const initSkyNav = (navButton: HTMLButtonElement) => {
const heightDiff = menu.getBoundingClientRect().height;
if (isExpanded) {
// Closing menu: slide the elements up before hiding the menu
for (const el of elementsToShift) {
el.style.transition = transition;
el.style.transform = `translateY(${-heightDiff}px)`;
}
document.body.style.setProperty('transition', transition);
document.body.style.setProperty(
'transform',
`translateY(${-heightDiff}px)`
);

timeoutId = setTimeout(() => {
menu.hidden = true;
for (const el of elementsToShift) {
el.style.transition = '';
el.style.transform = '';
}
document.body.style.removeProperty('transition');
document.body.style.removeProperty('transform');
}, duration * 1000) as any as number;
} else {
// Opening menu: start the elements higher than their "resting position" and then slide them down
for (const el of elementsToShift)
el.style.transform = `translateY(${-heightDiff}px)`;
document.body.style.setProperty(
'transform',
`translateY(${-heightDiff}px)`
);

// Flush changes to the DOM
// eslint-disable-next-line @cloudfour/typescript-eslint/no-unused-expressions, mdx/no-unused-expressions
navWrapper.offsetWidth;
for (const el of elementsToShift) {
el.style.transition = transition;
el.style.transform = '';
}
document.body.style.setProperty('transition', transition);
document.body.style.removeProperty('transform');
timeoutId = setTimeout(() => {
for (const el of elementsToShift) {
el.style.transition = '';
}
document.body.style.removeProperty('transition');
}, duration * 1000) as any as number;
}
};
Expand Down
28 changes: 25 additions & 3 deletions src/components/sky-nav/sky-nav.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,31 @@
@see https://github.com/twigjs/twig.js/issues/262
#}
{% if include_main_demo %}
<main class="o-container o-container--pad" id="{{ main_id }}">
<div class="o-container__content">
<p>Hello world! This is the main content.</p>
<main id="main" class="o-page__content" style="">
<div class="c-cloud-cover t-dark">
<div class="o-container o-container--pad-inline">
<div class="o-container__content c-cloud-cover__inner">
<div class="c-cloud-cover__content">
<div class="o-rhythm o-rhythm--condensed">
<div class="c-cloud-cover__heading">
<h1 class="c-heading c-heading--level-n2">
Team
</h1>
</div>
<div class="c-cloud-cover__copy">
<div class="o-rhythm">
Teamwork makes the dream work
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-container o-container--pad">
<div class="o-container__content">
<p>This is some content.</p>
</div>
</div>
</main>
{% endif %}