feat: pfe-navigation - report pfe-nav's height in a global CSS variable (#732)

* feat(pfe-navigation): report pfe-nav's height in a global CSS variable

* update changelog

* change the height var to be more BEMy

* set nav height variable to use px

* fixed merge conflict

* fixed variable name in readme

* fixed typo in readme

* fixed nav test to use correct variable name

* set height custom property to use underscores only if region is declared.

* added px value back into variable.

* removed px string from custom height property to match clientHeight.

* Updated nav readme, fixed typo and replaced ellipses with colon

Co-authored-by: Chris Doherty <[email protected]>
Co-authored-by: Kendall Totten <[email protected]>

Author: 3 people

CHANGELOG-prerelease.md

@@ -6,7 +6,8 @@ Tag: [v1.0.0-prerelease.39](https://github.com/patternfly/patternfly-elements/re
 - [f93af30](https://github.com/patternfly/patternfly-elements/commit/f93af30cc7eef3e7728effb7cedb4773f54a5f43) feat: adding the ability for pfe-navigation to use the full width of the viewport (#718)
 - [aac9925](https://github.com/patternfly/patternfly-elements/commit/aac992563a61495128c00d53f637d656bbe614dd) Update pfe-content-set to accept custom container queries
 - [6e45ab4](https://github.com/patternfly/patternfly-elements/commit/6e45ab42617086fb7e229af3b0953ff6912c0273) feat: pfe-cta add support for disabled button, reduce lightdom needs
-- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Move generator into the monorepo
+- [582ffc8](https://github.com/patternfly/patternfly-elements/commit/582ffc87fcbf2ef29aecf01967d19834a7aff116) feat: Move generator into the monorepo
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat(pfe-navigation): report pfe-nav's height in a global CSS variable (#732)
 
 ## Prerelease 38 ( 2020-02-03 )
 

elements/pfe-navigation/README.md

@@ -66,6 +66,11 @@ All slots are optional and can be left off if not needed. Slots prefixed with `m
 - `pfe-menu-label`: Translation for the Menu label on the main navigation dropdown.
 - `pfe-full-width`: Allows the navigation to span the full width of the viewport.
 
+### CSS Variables
+
+ - `--pfe-navigation--Height--actual`: when pfe-navigation initializes, it will create a global (on `body`) CSS variable that contains the height of the pfe-navigation item.  The primary uses for this is calculating the offset for anchor links, and for positioning a sticky sub-header below the pfe-navigation.  Note that multiple pfe-navigation elements will write the same variable, unless:
+ - `--pfe-navigation__${ID}--Height--actual`: like the previous variable, but if the pfe-navigation has an `id` attribute, it will be appended to the CSS variable name.  This makes it possible to distinguish the heights of multiple pfe-navigation elements on the same page.
+
 ---
 
 ## Navigation item

elements/pfe-navigation/demo/index.html

@@ -46,7 +46,7 @@
   <style>
   pfe-navigation {
      --pfe-navigation__logo--MinWidth: 280px;
-  }    
+  }
   @media (max-width: 440px) {
     pfe-navigation {
        --pfe-navigation__logo--MinWidth: 160px;
@@ -567,7 +567,7 @@ <h3 slot="pfe-card--header">Aside: right body bottom</h3>
       </pfe-cta>
     </pfe-card>
   </pfe-band>
-  
+
   <pfe-band pfe-color="lighter" pfe-aside-desktop="left">
     <header slot="pfe-band--header">
       <h2>Lighter band; no footer</h2>
@@ -595,7 +595,7 @@ <h3 slot="pfe-card--header">Aside: left body bottom</h3>
       </pfe-cta>
     </pfe-card>
   </pfe-band>
-  
+
   <pfe-band pfe-aside-height="full">
     <header slot="pfe-band--header">
       <h2>Default band</h2>
@@ -626,7 +626,7 @@ <h3>Aside: right full bottom</h3>
       </pfe-cta>
     </pfe-card>
   </pfe-band>
-  
+
   <pfe-band id="band" pfe-color="darker" pfe-aside-desktop="left" pfe-aside-height="full"
     pfe-img-src="https://www.redhat.com/profiles/rh/themes/redhatdotcom/img/header/header-hub-svsp-2000x1562.jpg">
     <header slot="pfe-band--header">
@@ -657,8 +657,8 @@ <h3 slot="pfe-card--header">Aside: left full bottom</h3>
       </pfe-cta>
     </pfe-card>
   </pfe-band>
-  
-  
+
+
   <pfe-band pfe-aside-desktop="left" pfe-aside-mobile="top">
     <header slot="pfe-band--header">
       <h2>Short content band</h2>

elements/pfe-navigation/src/pfe-navigation.js

@@ -55,7 +55,7 @@ class PfeNavigation extends PFElement {
   }
 
   static get observedAttributes() {
-    return ["pfe-full-width"];
+    return ["pfe-full-width", "id"];
   }
 
   constructor() {
@@ -165,6 +165,15 @@ class PfeNavigation extends PFElement {
     this._observer.disconnect();
   }
 
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    switch (name) {
+      case "id":
+        this._reportHeight();
+        break;
+    }
+  }
+
   _resizeHandler(event) {
     // Set the visibility of items
     this._setVisibility(this.offsetWidth);
@@ -194,6 +203,9 @@ class PfeNavigation extends PFElement {
     });
 
     this.overlay = this._activeNavigationItems.length > 0;
+
+    // update the reported height
+    this._reportHeight();
   }
 
   _stickyHandler() {
@@ -335,6 +347,9 @@ class PfeNavigation extends PFElement {
       document.addEventListener("click", this._outsideListener);
     }
 
+    // report the height of this pfe-navigation element
+    this._reportHeight();
+
     // @IE11 This is necessary so the script doesn't become non-responsive
     if (window.ShadyCSS) {
       setTimeout(() => {
@@ -358,6 +373,25 @@ class PfeNavigation extends PFElement {
     this._activeNavigationItems.map(item => item.close());
     this.overlay = false;
   }
+
+  /**
+   * Set a global CSS variable reporting the height of this navigation item.
+   * Used to position sticky subnavigation items under this.
+   *
+   * The name of the global CSS variable is `--pfe-navigation--Height--actual`.
+   * If this nav has an `id` attribute, the id will be appended to the variable
+   * name to distinguish it from other pfe-navigation items on the page
+   * (unlikely, but imagine a demo page with 20 example pfe-navigation elements
+   * in different states, and one genuine pfe-navigation element at the top
+   * used for actual navigation).
+   */
+  _reportHeight() {
+    const cssVarName = `--pfe-navigation${
+      this.id ? `__${this.id}--` : "--"
+    }Height--actual`;
+    const height = this.clientHeight + "px";
+    document.body.style.setProperty(cssVarName, height);
+  }
 }
 
 PFElement.create(PfeNavigationItem);

elements/pfe-navigation/test/pfe-navigation_test.html

@@ -602,6 +602,25 @@ <h3 slot="trigger"><a href="#">Products</a></h3>
         //   backdrop.click();
         //   assert.isUndefined(document.body.style.overlay);
         // });
+
+        test("it should report its height via a global CSS variable", () => {
+          const pfeNavigation = document.querySelector('pfe-navigation');
+
+          const reportedHeight = document.body.style.getPropertyValue("--pfe-navigation--Height--actual");
+
+          // there are multiple pfe-navigations on this page, so don't try to
+          // check the exact height (race condition over which writes its var
+          // last).  Just check that the var was created.
+          assert.isDefined(reportedHeight, "pfe-navigation without id reports height to default css variable");
+
+          // should also create a namespaced var if the nav has an ID
+          pfeNavigation.setAttribute("id", "ABCDEFG");
+
+          const reportedHeightNamespaced = document.body.style.getPropertyValue("--pfe-navigation__ABCDEFG--Height--actual").replace("px", "");
+
+          assert.isDefined(reportedHeightNamespaced, "pfe-navigation with id reports height to namespaced css variable");
+          assert.equal(pfeNavigation.clientHeight.toString(), reportedHeightNamespaced, "pfe-navigation with id reports the correct height");
+        });
       });