From 4e705851c31361722e0d6b9738d06ad9305815d5 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 28 Jul 2022 10:04:18 -0700 Subject: [PATCH 1/6] Update logic to match new HTML --- src/components/sky-nav/sky-nav.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/sky-nav/sky-nav.ts b/src/components/sky-nav/sky-nav.ts index 4d9716b14..a5a04a07c 100644 --- a/src/components/sky-nav/sky-nav.ts +++ b/src/components/sky-nav/sky-nav.ts @@ -59,13 +59,19 @@ export const initSkyNav = (navButton: HTMLButtonElement) => { // 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; + const elementsToShift: HTMLElement[] = [ + navWrapper.parentElement as HTMLElement, + ]; + let sibling: HTMLElement | null = elementsToShift[0]; // eslint-disable-next-line no-unmodified-loop-condition while ((sibling = sibling.nextElementSibling as HTMLElement | null)) { - elementsToShift.push(sibling); + if (sibling.tagName !== 'SCRIPT') { + elementsToShift.push(sibling); + } } + console.log({ elementsToShift }); + const duration = Number.parseFloat(tokens.time.transition.slow.value); const transition = `transform ${duration}s ${tokens.ease.in_out.value}`; clearTimeout(timeoutId); From 961a5beb951bdccc2cb931beb68cd49c7251511d Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 28 Jul 2022 10:04:35 -0700 Subject: [PATCH 2/6] Update demo to match site templates --- src/components/sky-nav/sky-nav.twig | 37 ++++++++++++++++++++++++++--- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/src/components/sky-nav/sky-nav.twig b/src/components/sky-nav/sky-nav.twig index 6bf7f0d5e..f93c842ee 100644 --- a/src/components/sky-nav/sky-nav.twig +++ b/src/components/sky-nav/sky-nav.twig @@ -1,6 +1,11 @@ {% set main_id = main_id|default('main') %} {% set _main_href = '#' ~ main_id %} +{% if include_main_demo %} +
+{% endif %} + + {# The Sky Nav component uses progressive enhancement and assumes JS is not available as the default. The `no-js` CSS class is the hook to style properly @@ -98,6 +103,10 @@ skyNav.classList.add('is-loading'); // 2 +{% if include_main_demo %} +
+{% endif %} + {# For some reason Twig.js really doesn't like including this template in a demo, showing errors related to extending inline templates that don't make sense @@ -106,9 +115,31 @@ @see https://github.com/twigjs/twig.js/issues/262 #} {% if include_main_demo %} -
-
-

Hello world! This is the main content.

+
+
+
+
+
+
+
+

+ Team +

+
+
+
+ Teamwork makes the dream work +
+
+
+
+
+
+
+
+
+

This is some content.

+
{% endif %} From d294c44ffd4561dbdcbc869674de20f599d77be2 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 28 Jul 2022 11:40:17 -0700 Subject: [PATCH 3/6] Use body for animation transition --- src/components/sky-nav/sky-nav.ts | 40 +++++++------------------------ 1 file changed, 8 insertions(+), 32 deletions(-) diff --git a/src/components/sky-nav/sky-nav.ts b/src/components/sky-nav/sky-nav.ts index a5a04a07c..fa07d7eb8 100644 --- a/src/components/sky-nav/sky-nav.ts +++ b/src/components/sky-nav/sky-nav.ts @@ -57,21 +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.parentElement as HTMLElement, - ]; - let sibling: HTMLElement | null = elementsToShift[0]; - // eslint-disable-next-line no-unmodified-loop-condition - while ((sibling = sibling.nextElementSibling as HTMLElement | null)) { - if (sibling.tagName !== 'SCRIPT') { - elementsToShift.push(sibling); - } - } - - console.log({ elementsToShift }); - const duration = Number.parseFloat(tokens.time.transition.slow.value); const transition = `transform ${duration}s ${tokens.ease.in_out.value}`; clearTimeout(timeoutId); @@ -80,34 +65,25 @@ 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.transition = transition; + document.body.style.transform = `translateY(${-heightDiff}px)`; timeoutId = setTimeout(() => { menu.hidden = true; - for (const el of elementsToShift) { - el.style.transition = ''; - el.style.transform = ''; - } + document.body.style.transition = ''; + document.body.style.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.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.transition = transition; + document.body.style.transform = ''; timeoutId = setTimeout(() => { - for (const el of elementsToShift) { - el.style.transition = ''; - } + document.body.style.transition = ''; }, duration * 1000) as any as number; } }; From 1a91015c00f5db99344951856d23345675a30e8e Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 28 Jul 2022 11:44:58 -0700 Subject: [PATCH 4/6] Remove header wrapper --- src/components/sky-nav/sky-nav.twig | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/sky-nav/sky-nav.twig b/src/components/sky-nav/sky-nav.twig index f93c842ee..29325db7d 100644 --- a/src/components/sky-nav/sky-nav.twig +++ b/src/components/sky-nav/sky-nav.twig @@ -1,11 +1,6 @@ {% set main_id = main_id|default('main') %} {% set _main_href = '#' ~ main_id %} -{% if include_main_demo %} -
-{% endif %} - - {# The Sky Nav component uses progressive enhancement and assumes JS is not available as the default. The `no-js` CSS class is the hook to style properly @@ -103,10 +98,6 @@ skyNav.classList.add('is-loading'); // 2 -{% if include_main_demo %} -
-{% endif %} - {# For some reason Twig.js really doesn't like including this template in a demo, showing errors related to extending inline templates that don't make sense From 434398c51b48d0cbb383d5d254e2cbd3150f2d40 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 28 Jul 2022 11:49:36 -0700 Subject: [PATCH 5/6] Add changeset --- .changeset/flat-points-smoke.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/flat-points-smoke.md diff --git a/.changeset/flat-points-smoke.md b/.changeset/flat-points-smoke.md new file mode 100644 index 000000000..58b1ea655 --- /dev/null +++ b/.changeset/flat-points-smoke.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': patch +--- + +Fix bug where content below Sky Nav was not animating open/closed From 84232b630079da353aaf078db86ee2da454c07ed Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 28 Jul 2022 14:38:13 -0700 Subject: [PATCH 6/6] Use CSSStyleDeclaration set/removeProperty() --- src/components/sky-nav/sky-nav.ts | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/sky-nav/sky-nav.ts b/src/components/sky-nav/sky-nav.ts index fa07d7eb8..4c86951db 100644 --- a/src/components/sky-nav/sky-nav.ts +++ b/src/components/sky-nav/sky-nav.ts @@ -65,25 +65,31 @@ export const initSkyNav = (navButton: HTMLButtonElement) => { const heightDiff = menu.getBoundingClientRect().height; if (isExpanded) { // Closing menu: slide the elements up before hiding the menu - document.body.style.transition = transition; - document.body.style.transform = `translateY(${-heightDiff}px)`; + document.body.style.setProperty('transition', transition); + document.body.style.setProperty( + 'transform', + `translateY(${-heightDiff}px)` + ); timeoutId = setTimeout(() => { menu.hidden = true; - document.body.style.transition = ''; - document.body.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 - document.body.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; - document.body.style.transition = transition; - document.body.style.transform = ''; + document.body.style.setProperty('transition', transition); + document.body.style.removeProperty('transform'); timeoutId = setTimeout(() => { - document.body.style.transition = ''; + document.body.style.removeProperty('transition'); }, duration * 1000) as any as number; } };