Merge pull request #120 from mgilardi/dev

Basic shadow DOM + Salesforce support

Author: mlsamuelson

packages/components-library/README.md

@@ -107,4 +107,3 @@ yarn test
 
 ## Use on static HTML page
 
-

packages/components-library/src/components/Header/index.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "preact/compat";
+import { useState, useEffect, useRef, useCallback } from "preact/compat";
 import PropTypes from "prop-types";
 import * as S from "./styles";
 import { Nav } from "../Nav";
@@ -52,7 +52,62 @@ const Header = ({
     setSrollPosition(position);
   };
 
+  const killEvent = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+  }, []);
+
+  /**
+   * This function solves a bug where all onclick functions are overwritten
+   * with the first declared onclick function.  This is known to occur
+   * when inserting the header component in a Lightning Web Component on
+   * Salesforce and may occur in other scenarios as well.
+   *
+   * When this function overwrites all other onclick functions, it then
+   * checks the event's target's data-onclick-identifier attribute to determine
+   * what was clicked on and intiates the correct process.
+   *
+   * When the bug does not occur, this function should never be called.
+   */
+  const onClickCallbackOverride = useCallback((e) => {
+    let whatWasClicked = e.target;
+    let limit = 100; // prevent infinite loop
+
+    // Climb DOM tree until someone has an identifier
+    while (limit > 0 && whatWasClicked.dataset.onclickIdentifier === undefined) {
+      whatWasClicked = whatWasClicked.parentNode;
+      limit--;
+    }
 
+    // Action depends on what was clicked
+    const identifier = whatWasClicked.dataset.onclickIdentifier;
+    if (identifier === "universal-search-bar") {
+      setSearchOpen(true);
+    } else if (identifier === "mobile-dropdown") {
+      toggle();
+    } else if (identifier.includes("toggle-dropdown.")) {
+      setSearchOpen(false);
+      clearSearchBar(whatWasClicked);
+      toggleNavDropdown(whatWasClicked)
+    } else if (identifier === "leave-open") {
+      killEvent();
+    }
+  }, []);
+  const toggleNavDropdown = (clickedDOM) => {
+    navRef.current.forceToggle(clickedDOM);
+  }
+  const clearSearchBar = (domElement) => {
+    let searchUp = domElement;
+    let limit = 100; // prevent infinite loop
+    while (limit > 0 && searchUp.dataset.onclickIdentifier !== 'top-of-header') {
+      limit--;
+      searchUp = searchUp.parentNode
+    }
+    if (searchUp.querySelector('[data-onclick-identifier = "universal-search-bar"]').querySelector("input").value.length > 0){
+      searchUp.querySelector('[data-onclick-identifier = "universal-search-bar"]').querySelector("input").value = "";
+    }
+  }
 
   // Attach scroll event lister which will update the scrollPosition state
   // when window scrolled
@@ -68,6 +123,7 @@ const Header = ({
   const universalRef = useRef(null);
   const logoRef = useRef(null);
   const titleRef = useRef(null);
+  const navRef = useRef(null);
 
   // Calculate the mobile nav menu max-height every time the mobile nav is opened
   // or the viewport changes size
@@ -94,7 +150,9 @@ const Header = ({
           ? "scrolled"
           : ""
       }
+      data-onclick-identifier = "top-of-header"
     >
+      <div onmousedown={killEvent} onclick={onClickCallbackOverride} data-onclick-identifier="no-action"></div>
       <S.UniversalNav open={mobileOpen} ref={universalRef} {...{ searchOpen }}>
         <S.UniversalNavLinks>
           <a href="https://www.asu.edu/">ASU home</a>
@@ -115,6 +173,7 @@ const Header = ({
         }}
         mobileOpen={mobileOpen}
         logo={<Logo {...logo} ref={logoRef} />}
+        data-onclick-identifier = "mobile-dropdown"
       >
         {props.dangerouslyGenerateStub ? (
           <div id="asu-generated-stub" />
@@ -137,6 +196,7 @@ const Header = ({
                 breakpoint,
                 expandOnHover
               }}
+              ref={navRef}
             />
           </>
         )}

packages/components-library/src/components/Nav/DropNav.js

@@ -59,8 +59,11 @@ const DropNav = forwardRef(
             //navOpen(pIndex);
             setFocus([pIndex, -1, -1]);
           }}
+          onClick={e => {}}
           tabIndex="0"
           ref={ref}
+          data-onclick-identifier = {"toggle-dropdown." + pIndex}
+          data-onclick-dropdown-open = "false"
         >
           {text}{" "}
           <S.IconChevronDown sr={text} className={isOpen ? "open" : ""} />

packages/components-library/src/components/Nav/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo, useRef, createRef } from "preact/compat";
+import { useEffect, useState, useMemo, useRef, createRef, forwardRef, useImperativeHandle } from "preact/compat";
 import PropTypes from "prop-types";
 import NavItem from "../NavItem";
 import DropNav from "./DropNav";
@@ -10,21 +10,55 @@ import * as S from "./styles";
  * Render entire Nav.
  * @param {} props
  */
-const Nav = ({
+const Nav = forwardRef (({
   navTree,
   width,
   mobileOpen,
   maxMobileHeight,
   buttons,
   injectStyles,
   breakpoint,
-  expandOnHover,
-}) => {
+  expandOnHover
+}, ref) => {
   /** State to keep track of currently focused Nav Item */
   const [focused, setFocus] = useState([-1, -1, -1]);
   /** State for keeping track of open dropdown nav */
   const [open, setOpen] = useState(-1);
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      forceToggle(whatWasClicked) {
+        let isAriaOpen = false;
+
+        // Check if already open
+        for (let i=0; i<whatWasClicked.attributes.length; i++) {
+          let attribute = whatWasClicked.attributes[i];
+          if (attribute.name === 'aria-expanded') {
+            if (attribute.value === 'true') {
+              isAriaOpen = true;
+            }
+          }
+        }
+
+        const id = whatWasClicked.dataset.onclickIdentifier;
+        if (!isAriaOpen || (isAriaOpen !== (whatWasClicked.dataset.onclickDropdownOpen === 'true'))) {
+          setOpen(parseInt(id.substring(id.indexOf(".")+1)));
+          whatWasClicked.dataset.onclickDropdownOpen = 'true';
+        } else {
+          setOpen(-1);
+          whatWasClicked.dataset.onclickDropdownOpen = 'false';
+        }
+      },
+
+      forceOpen(whatWasClicked) {
+        const id = whatWasClicked.dataset.onclickIdentifier;
+        setOpen(parseInt(id.substring(id.indexOf(".")+1)));
+        whatWasClicked.dataset.onclickDropdownOpen = 'true';
+      }
+    }),
+  )
+
   const setFocusCallback = newFocus => {
     setFocus(newFocus);
   };
@@ -304,7 +338,7 @@ const Nav = ({
       }
     </S.Nav>
   );
-};
+});
 
 Nav.propTypes = {
   navTree: PropTypes.arrayOf(PropTypes.object),

packages/components-library/src/components/Nav/styles.js

@@ -334,7 +334,7 @@ const dropdownContainerStyles = breakpoint => css`
 
 const DropdownContainer = props => {
   return (
-    <div class={cx("dropdown", props.open ? "open" : "", props.class)}>
+    <div class={cx("dropdown", props.open ? "open" : "", props.class)} data-onclick-identifier = {"leave-open"} onMouseDown={e => {}} onClick={e => {}}>
       <div>{props.children}</div>
       {props.buttons ? (
         <div class="button-row">

packages/components-library/src/components/Search/index.js

@@ -103,6 +103,7 @@ const UniversalSearch = ({ type, open, setOpen, mobile}) => {
       onfocusin={onFocusCallback}
       onfocusout={onBlurCallBack}
       onClick={onClickCallback}
+      data-onclick-identifier="universal-search-bar"
     >
       <Search {...{ open, type, inputRef, mobile }} />
     </S.UniversalSearch>

packages/components-library/src/helpers.js

@@ -23,12 +23,13 @@ const checkSSOCookie = () => {
   const cookies = document.cookie.split(";"); // try to parse out the username from SSONAME cookie
 
   for (let i = 0; i < cookies.length; i++) {
-    if (cookies[i].indexOf("SSONAME") > 0) {
-      if (cookies[i].substring(9) == "") {
+    const cookie = cookies[i];
+    if (cookie.includes("SSONAME")) {
+      if (cookie.substring(cookie.indexOf('=')+1) == "") {
         break;
       }
 
-      loginStatus.userName = cookies[i].substring(9);
+      loginStatus.userName = cookie.substring(cookie.indexOf('=')+1);
       loginStatus.loggedIn = true;
       break;
     }
@@ -87,7 +88,7 @@ const checkFirstLoad = root => {
  * @param {*} target - The ID of the containing <div> where the header should
  * be either hydrated or rendered.
  */
-const initHeader = (props, target = "headerContainer", hydrate = false) => {
+const initHeader = (props, target = "headerContainer", hydrate = false, rootOfDOM = document) => {
   const { loggedIn, userName, loginLink, ...theRest } = props;
   const fullLoginUrl = loginLink
     ? loginLink
@@ -122,9 +123,9 @@ const initHeader = (props, target = "headerContainer", hydrate = false) => {
   };
 
   if (hydrate) {
-    HydratePreact(Header, headerProps, document.getElementById(target));
+    HydratePreact(Header, headerProps, rootOfDOM.querySelector('#' + target));
   } else {
-    RenderPreact(Header, headerProps, document.getElementById(target));
+    RenderPreact(Header, headerProps, rootOfDOM.querySelector('#' + target));
   }
 };