From 5b56b998136102b79dc00d4bc0f30d0bb9ddd01c Mon Sep 17 00:00:00 2001 From: mattsharkey Date: Fri, 29 Mar 2024 16:37:09 -0400 Subject: [PATCH] Flyout orientation, multi-collapse --- src/il-main-nav/il-main-nav.css | 9 +- src/il-main-nav/il-main-nav.js | 5 +- src/il-main-nav/il-main-nav.spec.js | 4 + src/il-main-nav/samples/six-levels.html | 259 ++++++++++++++------ src/il-nav-section/il-nav-section.js | 41 +++- src/il-nav-section/il-nav-section.styles.js | 1 + 6 files changed, 222 insertions(+), 97 deletions(-) diff --git a/src/il-main-nav/il-main-nav.css b/src/il-main-nav/il-main-nav.css index efa1243a..ecb0f9be 100644 --- a/src/il-main-nav/il-main-nav.css +++ b/src/il-main-nav/il-main-nav.css @@ -45,7 +45,7 @@ --il-nav-section-indicator-padding-left: .5rem; --il-nav-section-link-padding-right: .5rem; --il-nav-section-items-position: absolute; - --il-nav-section-items-width: 20rem; + --il-nav-section-items-width: 15rem; --il-nav-section-background: var(--il-cloud-1); --il-nav-item-background: var(--il-cloud-1); --il-nav-item-border-color: white; @@ -66,6 +66,13 @@ --il-nav-section-indicator-transform: rotate(-90deg); --il-nav-expanded-section-indicator-transform: rotate(-90deg); } + il-nav-section[data-dir="right"], + il-nav-section-with-link[data-dir="right"] { + --il-nav-section-items-left: auto; + --il-nav-section-items-right: 100%; + --il-nav-section-indicator-transform: rotate(90deg); + --il-nav-expanded-section-indicator-transform: rotate(90deg); + } > ul { display: flex; flex-direction: row; diff --git a/src/il-main-nav/il-main-nav.js b/src/il-main-nav/il-main-nav.js index 4ff94552..77869f14 100644 --- a/src/il-main-nav/il-main-nav.js +++ b/src/il-main-nav/il-main-nav.js @@ -32,9 +32,7 @@ export class MainNavigation extends LitElement { } collapseSection(section) { - section.expanded = false; - section.setAttribute('data-expanded', false); - section.setAttribute('data-current', false); + this.expandSection(section.getParentSection()); } collapseAllSections() { @@ -47,6 +45,7 @@ export class MainNavigation extends LitElement { s.expanded = s.contains(section); s.setAttribute('data-expanded', s.expanded ? 'true' : 'false'); s.setAttribute('data-current', isCurrent ? 'true' : 'false'); + if (s.expanded) s.setDirection(); }); } diff --git a/src/il-main-nav/il-main-nav.spec.js b/src/il-main-nav/il-main-nav.spec.js index dcac21b6..ec650f0c 100644 --- a/src/il-main-nav/il-main-nav.spec.js +++ b/src/il-main-nav/il-main-nav.spec.js @@ -23,6 +23,10 @@ test('navigation sections have a data-dir attribute after load', async ({page}) test('navigation sections orient themselves', async ({page}) => { await page.goto('il-main-nav/samples/with-section-links.html'); + await page.evaluate(() => { + const section = document.querySelector('*[data-testid="fifth-level-section"]'); + document.querySelector('il-main-nav').expandSection(section); + }) const fifthLevelSectionDirection = await page.evaluate(() => { return document.querySelector('*[data-testid="fifth-level-section"]').getAttribute('data-dir'); }) diff --git a/src/il-main-nav/samples/six-levels.html b/src/il-main-nav/samples/six-levels.html index 53fa9ba7..640c4eac 100644 --- a/src/il-main-nav/samples/six-levels.html +++ b/src/il-main-nav/samples/six-levels.html @@ -4,117 +4,216 @@ - - - - - - - - - - - - - + - \ No newline at end of file +
+

Main navigation with six levels

+
+ diff --git a/src/il-nav-section/il-nav-section.js b/src/il-nav-section/il-nav-section.js index 74f0555e..021378e9 100644 --- a/src/il-nav-section/il-nav-section.js +++ b/src/il-nav-section/il-nav-section.js @@ -31,17 +31,26 @@ export class NavigationSection extends LitElement { getDirection() { const LEFT = true; const RIGHT = false; + const sectionWidth = 240; - let dir = LEFT; const navSize = this.getNavigation().getContentRect(); - const sectionWidth = 320; - - if (!this.isTopLevel()) { - const level = this.getLevel(); - const topLevel = this.getTopLevelParent(); - dir = topLevel.getDirection() === 'left'; - const topLevelSize = topLevel.getBoundingClientRect(); - + const topLevel = this.isTopLevel() ? this : this.getTopLevelParent(); + const topLevelSize = topLevel.getBoundingClientRect(); + + const navWidth = navSize.width; + const topLevelLeft = topLevelSize.x - navSize.x; + + let dir = (navWidth - topLevelLeft >= sectionWidth) ? LEFT : RIGHT; + let pos = (dir === LEFT) ? topLevelLeft : (navSize - topLevelLeft - topLevel.width); + + for (let i=1, level=this.getLevel(); i < level; i++) { + if (pos + sectionWidth * 2 > navWidth) { + dir = !dir; + pos = navWidth - pos; + } + else { + pos += sectionWidth; + } } return dir ? 'left' : 'right'; @@ -88,10 +97,16 @@ export class NavigationSection extends LitElement { } setDataAttributes() { - const level = this.getLevel(); - const dir = this.getDirection(); - this.setAttribute('data-level', level); - this.setAttribute('data-dir', dir); + this.setLevel(); + this.setDirection(); + } + + setDirection() { + this.setAttribute('data-dir', this.getDirection()); + } + + setLevel() { + this.setAttribute('data-level', this.getLevel()); } renderChevron() { diff --git a/src/il-nav-section/il-nav-section.styles.js b/src/il-nav-section/il-nav-section.styles.js index 60bfb572..a34df354 100644 --- a/src/il-nav-section/il-nav-section.styles.js +++ b/src/il-nav-section/il-nav-section.styles.js @@ -27,6 +27,7 @@ export const baseStyles = css` width: var(--il-nav-section-items-width); position: var(--il-nav-section-items-position); left: var(--il-nav-section-items-left); + right: var(--il-nav-section-items-right, auto); top: var(--il-nav-section-items-top); padding: var(--il-nav-items-padding, 0); border-top: var(--il-nav-section-items-border-top);