From 0513b5aa7c5add531a590a837bd2ec807182c548 Mon Sep 17 00:00:00 2001 From: msharkey Date: Wed, 27 Mar 2024 08:05:03 -0500 Subject: [PATCH] Orienting flyout menus --- src/il-header/il-header.js | 6 +- src/il-header/il-header.styles.js | 23 +- src/il-main-nav/il-main-nav.css | 198 ------------------ src/il-main-nav/il-main-nav.js | 30 ++- src/il-main-nav/il-main-nav.spec.js | 16 ++ .../samples/with-section-links.html | 2 +- src/il-nav-section/il-nav-section.js | 57 +++++ 7 files changed, 113 insertions(+), 219 deletions(-) diff --git a/src/il-header/il-header.js b/src/il-header/il-header.js index 757c8722..4a7e36ee 100644 --- a/src/il-header/il-header.js +++ b/src/il-header/il-header.js @@ -114,10 +114,10 @@ export class HeaderComponent extends LitElement { - ${this.renderBlockI()} + - - University of Illinois Urbana-Champaign + + University of Illinois Urbana-Champaign diff --git a/src/il-header/il-header.styles.js b/src/il-header/il-header.styles.js index 0f44a9fb..9540050a 100644 --- a/src/il-header/il-header.styles.js +++ b/src/il-header/il-header.styles.js @@ -80,7 +80,7 @@ export default css` height: 3.1875rem; background-color: var(--il-blue); } - .block-i svg { + .block-i img { display: block; position: absolute; top: .5rem; @@ -88,24 +88,15 @@ export default css` width: 1.5rem; height: 2.1875rem; } - .block-i svg .outline { - fill: white; - } - .block-i svg .fill { - fill: var(--il-orange); - } - .wordmark { + .text { position: relative; + display: block; + padding: 0 .75rem; + } + .text img { + width: 28rem; height: 3.1875rem; display: block; - padding: 0 .5rem; - color: var(--il-blue); - text-transform: uppercase; - white-space: nowrap; - text-decoration: none; - letter-spacing: .056875rem; - font: 700 .875rem/3.1875rem var(--il-font-montserrat); - -webkit-font-smoothing: antialiased; } .featured-links { padding: 1.125rem 0 0 1.875rem; diff --git a/src/il-main-nav/il-main-nav.css b/src/il-main-nav/il-main-nav.css index f332e2f4..efa1243a 100644 --- a/src/il-main-nav/il-main-nav.css +++ b/src/il-main-nav/il-main-nav.css @@ -167,203 +167,5 @@ --il-nav-item-border-bottom-color: var(--il-industrial); } } - - - - - /* Navigation * / - - il-header[data-compact="false"] > il-main-nav[slot="navigation"] { - background-color: var(--il-cloud-1); - padding-left: var(--il-page-padding-left); - padding-right: var(--il-page-padding-right); - --il-nav-items-background: var(--il-cloud-1); - --il-nav-items-width: 20rem; - --il-nav-items-padding: 0 2px 2px; - --il-nav-item-background: var(--il-cloud-1); - --il-nav-item-color: var(--il-blue); - --il-nav-item-focus-background: var(--il-orange); - --il-nav-item-focus-color: var(--il-blue); - --il-nav-item-padding: .75rem 1rem; - - ul { - all: initial; - display: block; - } - - & > ul { - display: flex; - flex-direction: row; - } - - li { - all: initial; - display: block; - } - li:first-child { - margin-top: 0; - } - a { - all: initial; - display: block; - padding: var(--il-nav-item-padding); - background: var(--il-nav-item-background); - color: var(--il-nav-item-color); - font-size: 1rem; - font-weight: 400; - font-family: var(--il-font-sans); - cursor: pointer; - } - il-nav-section[data-level="1"], il-nav-section-with-link[data-level="1"] { - --il-nav-items-padding: 0 2px 2px; - } - il-nav-section[data-expanded="true"], il-nav-section-with-link[data-expanded="true"] { - background: var(--il-cloud-1); - --il-nav-item-background: white; - --il-nav-item-color: var(--il-blue); - } - il-nav-section[data-current="true"], il-nav-section-with-link[data-current="true"] { - --il-nav-item-background: var(--il-blue); - --il-nav-item-color: white; - } - } - - il-header[data-compact="true"] > il-main-nav[slot="navigation"] { - background-color: white; - --il-nav-item-background: var(--il-cloud-1); - --il-nav-item-color: var(--il-blue); - --il-nav-item-focus-background: var(--il-orange); - --il-nav-item-focus-color: var(--il-blue); - --il-nav-item-padding: .75rem 1rem; - - ul { - all: initial; - display: block; - } - - li { - all: initial; - display: block; - margin-top: 2px; - } - a { - all: initial; - display: block; - padding: var(--il-nav-item-padding); - background: var(--il-nav-item-background); - color: var(--il-nav-item-color); - font-size: 1rem; - font-weight: 400; - font-family: var(--il-font-sans); - cursor: pointer; - } - a:hover, a:focus { - background: var(--il-nav-item-focus-background); - color: var(--il-nav-item-focus-color); - } - il-nav-section[data-level="2"], il-nav-section[data-level="1"] a { - --il-nav-item-padding: .75rem 1rem .75rem 2.25rem; - } - il-nav-section[data-level="3"], il-nav-section[data-level="2"] a { - --il-nav-item-padding: .75rem 1rem .75rem 3.75rem; - } - il-nav-section[data-level="4"], il-nav-section[data-level="3"] a { - --il-nav-item-padding: .75rem 1rem .75rem 5.25rem; - } - il-nav-section[data-level="5"], il-nav-section[data-level="4"] a { - --il-nav-item-padding: .75rem 1rem .75rem 6.75rem; - } - il-nav-section[data-level="6"], il-nav-section[data-level="5"] a { - --il-nav-item-padding: .75rem 1rem .75rem 8.25rem; - } - il-nav-section[data-expanded="true"] { - background: var(--il-cloud-1); - --il-nav-item-background: white; - --il-nav-item-color: var(--il-blue); - } - il-nav-section[data-current="true"] { - background: var(--il-blue); - --il-nav-item-background: var(--il-blue); - --il-nav-item-color: white; - } - } - - - - - - - - - - - il-header il-main-nav { - --il-nav-section-indicator-width: 1rem; - } - - il-header[data-compact="true"] il-main-nav { - --il-nav-expanded-section-indicator-transform: rotate(180deg); - --il-nav-section-header-focus-background: var(--il-orange); - --il-nav-section-header-focus-color: var(--il-blue); - - il-nav-section[data-expanded="true"], il-nav-section-with-link[data-expanded="true"] { - --il-nav-item-background: white; - --il-nav-section-header-color: var(--il-blue); - } - il-nav-section[data-current="true"], il-nav-section-with-link[data-current="true"] { - --il-nav-section-header-background: var(--il-blue); - --il-nav-section-header-color: white; - - a { - background: var(--il-blue); - color: white; - } - } - } - - il-header[data-compact="false"] il-main-nav { - --il-nav-section-items-position: absolute; - --il-nav-section-header-padding: .75rem 1rem; - --il-nav-section-header-gap: 1rem; - --il-nav-section-header-focus-background: var(--il-orange); - --il-nav-section-header-focus-color: var(--il-blue); - - & > ul { - flex-direction: row; - gap: 1rem; - } - - il-nav-section, il-nav-section-with-link { - --il-nav-section-items-left: 100%; - --il-nav-section-items-top: 0; - --il-nav-section-indicator-transform: rotate(-90deg); - --il-nav-expanded-section-indicator-transform: rotate(-90deg); - - a:hover, a:focus { - background: var(--il-orange) !important; - color: var(--il-blue) !important; - } - } - il-nav-section[data-level="1"], il-nav-section-with-link[data-level="1"] { - --il-nav-section-items-left: 0; - --il-nav-section-items-top: 100%; - --il-nav-section-indicator-transform: none; - --il-nav-expanded-section-indicator-transform: rotate(180deg); - } - il-nav-section[data-expanded="true"], il-nav-section-with-link[data-expanded="true"] { - --il-nav-item-background: white; - --il-nav-section-header-color: var(--il-blue); - } - il-nav-section[data-current="true"], il-nav-section-with-link[data-current="true"] { - --il-nav-section-header-background: var(--il-blue); - --il-nav-section-header-color: white; - - a { - background: var(--il-blue); - color: white; - } - } - } - */ } diff --git a/src/il-main-nav/il-main-nav.js b/src/il-main-nav/il-main-nav.js index 885f7884..4ff94552 100644 --- a/src/il-main-nav/il-main-nav.js +++ b/src/il-main-nav/il-main-nav.js @@ -18,6 +18,7 @@ export class MainNavigation extends LitElement { window.addEventListener('click', this.handleWindowClick); window.addEventListener('keydown', this.handleWindowKeypress); this.addEventListener('il-nav-section', this.handleSectionConnect); + this.initializeResizeObserver(); } disconnectedCallback() { @@ -26,6 +27,10 @@ export class MainNavigation extends LitElement { window.removeEventListener('keydown', this.handleWindowKeypress); } + arrangeSections() { + + } + collapseSection(section) { section.expanded = false; section.setAttribute('data-expanded', false); @@ -45,10 +50,27 @@ export class MainNavigation extends LitElement { }); } + getContentRect() { + return this.querySelector('ul').getBoundingClientRect(); + } + getSections() { return this.querySelectorAll('il-nav-section, il-nav-section-with-link'); } + getTopLevelSections() { + return Object.values(this.getSections()).filter(section => section.isTopLevel()); + } + + handleResize() { + const navSize = this.getContentRect(); + this.getTopLevelSections().forEach(section => { + const size = section.getBoundingClientRect(); + const spaceToLeft = size.x - navSize.x; + const spaceToRight = navSize.width - spaceToLeft - size.width; + }) + } + handleSectionConnect(evt) { evt.stopPropagation(); this.initializeSection(evt.target); @@ -69,8 +91,14 @@ export class MainNavigation extends LitElement { } } + initializeResizeObserver() { + this.resizeObserver = new ResizeObserver(this.handleResize.bind(this)); + this.resizeObserver.observe(this); + } + initializeSection(elem) { - elem.setAttribute('data-level', elem.getLevel()); + //elem.setAttribute('data-level', elem.getLevel()); + elem.setDataAttributes(); if (!elem.hasAttribute('data-current')) { elem.setAttribute('data-current', 'false'); } diff --git a/src/il-main-nav/il-main-nav.spec.js b/src/il-main-nav/il-main-nav.spec.js index 98c41527..dcac21b6 100644 --- a/src/il-main-nav/il-main-nav.spec.js +++ b/src/il-main-nav/il-main-nav.spec.js @@ -13,6 +13,22 @@ test('navigation sections have a data-level attribute after load', async ({page} await expect(firstSectionHasLevel).toBeTruthy(); }) +test('navigation sections have a data-dir attribute after load', async ({page}) => { + await page.goto('il-main-nav/samples/with-section-links.html'); + const firstSectionHasDir = await page.evaluate(() => { + return document.querySelector('il-nav-section-with-link').hasAttribute('data-dir'); + }) + await expect(firstSectionHasDir).toBeTruthy(); +}) + +test('navigation sections orient themselves', async ({page}) => { + await page.goto('il-main-nav/samples/with-section-links.html'); + const fifthLevelSectionDirection = await page.evaluate(() => { + return document.querySelector('*[data-testid="fifth-level-section"]').getAttribute('data-dir'); + }) + await expect(fifthLevelSectionDirection).toEqual('right'); +}) + // Pointer interaction test('clicking the toggle of a collapsed section expands the section', async ({page}) => { diff --git a/src/il-main-nav/samples/with-section-links.html b/src/il-main-nav/samples/with-section-links.html index eee507f2..52980da0 100644 --- a/src/il-main-nav/samples/with-section-links.html +++ b/src/il-main-nav/samples/with-section-links.html @@ -31,7 +31,7 @@