Orienting flyout menus

web-illinois · Mar 27, 2024 · 0513b5a · 0513b5a
1 parent 2804e1c
commit 0513b5a
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 219 deletions.
diff --git a/src/il-header/il-header.js b/src/il-header/il-header.js
@@ -114,10 +114,10 @@ export class HeaderComponent extends LitElement {
         <a href="https://illinois.edu/">
           <span class="elements">
             <span class="block-i">
-              ${this.renderBlockI()}
+              <img src="https://cdn.brand.illinois.edu/header/block-i-reversed-orange.svg" alt="">
             </span>
-            <span class="wordmark" id="wordmark">
-              University of Illinois Urbana-Champaign
+            <span class="text">
+              <img src="https://cdn.brand.illinois.edu/header/university-heading-text-outlined-blue.svg" alt="University of Illinois Urbana-Champaign">
             </span>
           </span>
         </a>

diff --git a/src/il-header/il-header.styles.js b/src/il-header/il-header.styles.js
@@ -80,32 +80,23 @@ export default css`
     height: 3.1875rem;
     background-color: var(--il-blue);
   }
-  .block-i svg {
+  .block-i img {
     display: block;
     position: absolute;
     top: .5rem;
     left: .625rem;
     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
@@ -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
@@ -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
@@ -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
@@ -31,7 +31,7 @@
                               <ul>
                                 <li><a href="#">Siderite</a></li>
                                 <li>
-                                  <il-nav-section-with-link>
+                                  <il-nav-section-with-link data-testid="fifth-level-section">
                                     <a slot="link" href="#">Smithsonite</a>
                                     <ul>
                                       <li><a href="#">Amphibole</a></li>