@foeewni/web-core 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/components/navigation/_nav-items.scss

@@ -22,6 +22,8 @@
       padding-top: 0;
       padding-bottom: 0;
       float: none; // Resets bootstrap floating.
+      // #13294 Not sure why the mobile nav wasn't left aligned
+      text-align: left;
 
       @include media-breakpoint-up(lg) {
         float: left; // Reinstate for MD+
@@ -29,30 +31,28 @@
 
       > a {
         position: relative;
+        padding: .2rem;
         line-height: $foe-nav-height-small;
-        font-weight: bold;
+        font-weight: 900;
+        font-size: 1.25rem;
         display: block;
         color: $foe-extradark;
         text-decoration: none;
-        box-shadow: inset 0 0 0 0 $foe-accent;
-        transition:
-          color $foe-transition-duration-base ease-in-out,
-          box-shadow $foe-transition-duration-base ease-in-out;
-        // transition: line-height $foe-transition-duration-base $foe-transition-easing, color $foe-transition-duration-base $foe-transition-easing;
 
         @include media-breakpoint-up(lg) {
           padding: 0 18px;
-          line-height: $foe-nav-height-large/2;
+          line-height: $foe-nav-height-large / 3;
         }
 
         &:focus {
           background-color: transparent;
-          outline: 0 none transparent;
+          box-shadow: 0 0 0 .125rem $foe-extradark;
+          outline: .125rem solid $foe-offwhite;
+          outline-offset: .125rem;
         }
 
         &:hover {
           color: $foe-offwhite;
-          box-shadow: inset 10rem 0 0 0 $foe-accent;
           text-decoration: none;
         }
       }
@@ -61,30 +61,135 @@
         font-weight: 300;
       }
 
-      &.foe-has-megamenu:hover {
-        .foe-megamenu-container {
-          opacity: 1;
-          visibility: visible;
-          transition-delay: .2s;
-          z-index: $zindex-navbar + 20;
+      .foe-megamenu-container {
+        a:hover {
+          text-decoration: underline;
         }
+      }
+
+      &.foe-has-megamenu {
+        &:focus-within,
+        &:hover {
+          .foe-megamenu-container {
+            opacity: 1;
+            visibility: visible;
+            transition-delay: .2s;
+            z-index: $zindex-navbar + 20;
+          }
 
-        > a::after {
-          opacity: 1;
-          transition-delay: .2s;
+          > a::after {
+            opacity: 1;
+            transition-delay: .2s;
+          }
         }
       }
     }
-  }
 
-  @include media-breakpoint-up(lg) {
-    &.js-menustack-stuck {
-      .foe-nav-cta a {
-        @include margin-vertical-align($foe-nav-height-large-scrolled, $foe-nav-cta-height-large);
+    /* stylelint-disable no-descending-specificity */
+    > li {
+      > a {
+        background: linear-gradient(90deg, $foe-accent 0%, $foe-accent 50%, transparent 50%, transparent 100%);
+        background-size: 200% 100%;
+        background-position: 101% 50%;
+        background-repeat: no-repeat;
+        transition:
+          color $foe-transition-duration-base ease-in-out,
+          background-position $foe-transition-duration-base ease-in-out;
+
+        &:hover {
+          background-position: 0% 50%;
+        }
       }
+    }
+    /* stylelint-enable no-descending-specificity */
+
+    &.menu-main {
+      display: block;
+      width: auto;
+      float: right;
+      padding: 0;
+      line-height: 4rem;
 
-      ul.navbar-nav > li > a {
-        line-height: $foe-nav-height-large-scrolled;
+      @include media-breakpoint-down(md) {
+        width: 100%;
+        overflow: hidden;
+        // #13294 this should be covered by the styles on web-core 3.0.0
+        transition: max-height $foe-transition-duration-base*2 $foe-transition-easing;
+      }
+
+      li.foe-has-megamenu {
+        &:focus-within,
+        &:hover {
+          .foe-megamenu-container {
+            display: block;
+          }
+
+          a + .open-megamenu {
+            &::after {
+              transform: rotate(45deg);
+              -webkit-transform: rotate(45deg);
+            }
+          }
+        }
+
+        div.foe-megamenu-container {
+          &.collapsed {
+            display: none;
+          }
+
+          &.un-collapsed {
+            opacity: 1;
+            visibility: visible;
+            display: block;
+          }
+        }
+
+        @include media-breakpoint-down(md) {
+          a {
+            display: inline-block;
+
+            &.is-active {
+              &::after {
+                transform: rotate(45deg);
+                -webkit-transform: rotate(45deg);
+              }
+            }
+
+            & + .open-megamenu {
+              padding: 1rem;
+
+              &::after {
+                position: relative;
+                content: '';
+                opacity: 1;
+                border: solid $foe-extradark;
+                border-width: 0 3px 3px 0;
+                display: inline-block;
+                padding: 3px;
+                transform: rotate(-45deg);
+                -webkit-transform: rotate(-45deg);
+                margin-left: .5rem;
+                left: 0;
+                bottom: .05rem;
+              }
+            }
+          }
+
+          div.foe-megamenu-container { /* just for mobile menu */
+            position: relative;
+            background-color: transparent;
+            box-shadow: none;
+
+            li.foe-has-megamenu {
+              &:focus-within,
+              &:hover {
+                .foe-megamenu-container {
+                  display: block;
+                }
+              }
+            }
+          }
+        }
       }
     }
   }
@@ -92,8 +197,6 @@
   // Handheld only
   @include media-breakpoint-down(md) {
     &.foe-header-mobile-is-open {
-      background-color: $foe-extradark !important;
-
       ul.navbar-nav {
         max-height: calc(100vh - 4rem);
         overflow-y: auto;

package/src/components/navigation/_search.scss

@@ -14,13 +14,21 @@
     a.search-button {
       text-decoration: none !important;
       position: relative;
-      line-height: $foe-nav-height-small;
-      color: $foe-offwhite !important;
+      height: $foe-nav-height-small;
+      color: $foe-extradark !important;
       transition: line-height $foe-transition-duration-base $foe-transition-easing;
       width: calc($spacer * 3);
       padding-left: calc($grid-gutter-width / 2);
       padding-right: calc($grid-gutter-width / 2);
-      display: block;
+      // #13293 display switched to inline-flex for search icon alignment on mobile
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+
+      .svg-inline--fa {
+        height: 1.5em;
+        transition: height $foe-transition-duration-base $foe-transition-easing;
+      }
 
       .fa-times {
         display: none;
@@ -35,11 +43,11 @@
       }
 
       @include media-breakpoint-up(md) {
-        line-height: $foe-nav-height-medium;
+        height: $foe-nav-height-medium;
       }
 
       @include media-breakpoint-up(lg) {
-        line-height: $foe-nav-height-large;
+        height: $foe-nav-height-large;
       }
 
       &::after {
@@ -117,8 +125,12 @@
   &.js-menustack-stuck {
     .header-search {
       a.search-button {
+        .svg-inline--fa {
+          height: 1em;
+        }
+
         @include media-breakpoint-up(lg) {
-          line-height: $foe-nav-height-large-scrolled;
+          height: $foe-nav-height-large-scrolled;
         }
       }
     }

package/src/components/navigation/defocus.js

@@ -0,0 +1,30 @@
+/**
+ * This is introduced to overcome the :focus-within styles on the mega menu remaining open when ctrl-clicking a navigation link.
+ * The mega menu styles hold the menu open when a link is focused on so that a keyboard user can navigate through.
+ * However if you click on the link element it gains the focus state but as it's opening an external window/tab so
+ * the focus remains and mousing out of the menu doesn't close it. This snippet removes the focus state when something
+ * is clicked on wit the ctrl key on clicked on with a middle mouse button.
+ */
+
+(() => {
+  const DeFocus = {
+    init: () => {
+      document.addEventListener('click', (e) => {
+        // ctrl click for openning in a new tab
+        if (e.ctrlKey) {
+          DeFocus.removeFocus();
+        }
+      });
+      document.addEventListener('auxclick', (e) => {
+        // middle button click
+        if (e.button === 1) {
+          DeFocus.removeFocus();
+        }
+      });
+    },
+    removeFocus: () => {
+      document.querySelectorAll(':focus').forEach(element => element.blur());
+    },
+  };
+  window.addEventListener('DOMContentLoaded', DeFocus.init);
+})();

package/src/components/navigation/index.js

@@ -1,3 +1,4 @@
+import './defocus';
 import './menustack';
 
 // import 'bootstrap/js/src/collapse';

package/src/components/tools/data-defer-src.js

@@ -50,20 +50,15 @@ import './data-defer-src.scss';
       entries.forEach((entry) => {
         if (!isVisible && entry.intersectionRatio > 0) {
           isVisible = true;
-          if (el.tagName === 'IFRAME') {
-            el.contentWindow.location.replace(source);
-          } else {
-            el.src = source;
-          }
+          el.src = source;
         }
 
         if (el.hasAttribute('data-defer-dispose') && isVisible && entry.intersectionRatio === 0) {
           isVisible = false;
           if (el.tagName === 'IFRAME') {
             el.contentWindow.location.replace('about:blank');
-          } else {
-            el.removeAttribute('src');
           }
+          el.removeAttribute('src');
           el.classList.add('js-defer-is-loading');
         }
       });

package/src/components/tools/jaunty.js

@@ -0,0 +1,379 @@
+/* @docs
+
+# Scripts:Jaunty
+
+Jauntifies a text header with the data-jaunt-factor attribute.
+
+Usage:
+```
+<h1 data-jaunt-factor="1">Jaunty Title</h1>
+
+<h2 data-jaunt-factor="2">Very Jaunty Title</h2>
+```
+
+Based on James South Codepen https://codepen.io/jrsouth/pen/ZEmeoJz with ideas from
+https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node-in-javascript.htm
+*/
+
+(() => {
+  // Config
+  // const ROTATION_MAX_DEGREES = 2; // Degrees. "Normal" is around 2.5
+  const BACKGROUND_EXTENSION = 0.5; // rem. Normal is around 1
+  const CORNER_JIGGLE_MAX = 1; // rem. Normal is around .2
+  const BREAK_RATIO = 2.5; // ratio for when the variation on the side happens
+  let oneRemInPx = 0;
+  let extension = 0;
+
+  // Constants
+  const JIGGLE_ALL = 0;
+  const JIGGLE_UP = 1;
+  const JIGGLE_DOWN = 2;
+  const JIGGLE_LEFT = 3;
+  const JIGGLE_RIGHT = 4;
+
+  // Helpers
+  const generateRandomHex = (length) => {
+    let result = '';
+    const characters = 'ABCDEF1234567890';
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+  };
+
+  const drawPolygon = (context, points) => {
+    context.beginPath();
+    context.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+      context.lineTo(points[i].x, points[i].y);
+    }
+    context.lineTo(points[0].x, points[0].y);
+    context.fill();
+    context.stroke();
+  };
+
+  const jauntTarget = (target) => {
+    if (
+      !target.firstChild
+      || target.firstChild.nodeType !== Node.TEXT_NODE
+      || !target.textContent.replace(/\s+/g, ' ').trim().length
+    ) {
+      return;
+    }
+
+    // jauntSeed is stored on page so remains constant when resizing or hovering
+    const jauntSeed = target.dataset.jauntSeed ? target.dataset.jauntSeed : generateRandomHex(4 * 8);
+    target.dataset.jauntSeed = jauntSeed;
+
+    // Set up the parameters
+    const jauntFactor = parseFloat(target.dataset.jauntFactor);
+    extension = BACKGROUND_EXTENSION * oneRemInPx * jauntFactor;
+
+    // Figure out the bounding boxes
+    // Get the bounding boxes
+    if (getComputedStyle(target.parentNode).position === 'static') {
+      // static parents were resultibngin top drift on the top positioning
+      // A lot of the button elements have a parent with relative anyway
+      target.parentNode.style.position = 'relative';
+    }
+    const targetBox = target.getBoundingClientRect();
+    const parentBox = target.offsetParent ? target.offsetParent.getBoundingClientRect() : targetBox;
+
+    // Insert the new 2D canvas element or find the existing one
+    if (target.dataset.backgroundCanvasId) {
+      document.getElementById(
+        target.dataset.backgroundCanvasId
+      ).remove();
+    }
+    const canvas = document.createElement('canvas');
+    target.dataset.backgroundCanvasId = generateRandomHex(12);
+    canvas.id = target.dataset.backgroundCanvasId;
+    canvas.style.position = 'absolute';
+    canvas.style.zIndex = -1;
+    canvas.style.top = `${(targetBox.top - parentBox.top) - (2 * extension)}px`;
+    canvas.style.left = `${(targetBox.left - parentBox.left) - (2 * extension)}px`;
+    canvas.style.width = `${targetBox.width + (4 * extension)}px`;
+    canvas.style.height = `${targetBox.height + (4 * extension)}px`;
+    canvas.width = targetBox.width + (4 * extension);
+    canvas.height = targetBox.height + (4 * extension);
+    canvas.style.pointerEvents = 'none';
+    target.parentNode.insertBefore(canvas, target);
+
+    // Add rotation
+    // if (!target.dataset.jauntRotation) {
+    //   const middle = jauntSeed.length / 2 + 1;
+    //   let rotationSeed = jauntSeed.substring(1, middle);
+    //   rotationSeed = Number(`0x${rotationSeed}`);
+    //   rotationSeed /= 10 ** (`${rotationSeed}`).length;
+    //   const rotationFactor = ROTATION_MAX_DEGREES * jauntFactor
+    //     * (rotationSeed * 2 - 1); // -1 to  +1
+    //   target.dataset.jauntRotation = rotationFactor;
+    // }
+    // target.style.transform = `rotate(${target.dataset.jauntRotation}deg)`;
+    // canvas.style.transform = `rotate(${target.dataset.jauntRotation}deg)`;
+
+    const context = canvas.getContext('2d');
+
+    // set the background color and remove and existing background
+    target.style.backgroundColor = '';
+    target.style.borderColor = '';
+    target.style.transition = 'none';
+    context.fillStyle = getComputedStyle(target).backgroundColor;
+    context.strokeStyle = getComputedStyle(target).borderColor;
+    target.dataset.jauntBackground = context.fillStyle;
+    target.dataset.jauntBorder = context.strokeStyle;
+    target.style.backgroundColor = 'transparent';
+    target.style.borderColor = 'transparent';
+
+    const boxes = target.dataset.jauntFull ? [targetBox] : [];
+    if (!target.dataset.jauntFull) {
+      target.childNodes.forEach((text) => {
+        if (text.nodeType === Node.TEXT_NODE) {
+          // Collapse whitespace
+          text.textContent = text.textContent.replace(/\s+/g, ' ').trim();
+          // Get the individual lines as rendered on screen
+          const nodeRange = document.createRange();
+          nodeRange.setStart(text, 0);
+          nodeRange.setEnd(text, text.textContent.length);
+          Array.from(nodeRange.getClientRects()).forEach((rect) => {
+            boxes.push(rect);
+          });
+        }
+      });
+    }
+
+    // const outerBox = range.getBoundingClientRect();
+    const storedPoints = [];
+
+    // function to jiggle the points around using a seed
+    const jigglePoint = (point, seed, mod = JIGGLE_ALL) => {
+      // isolate a point seed from the master seed
+      const startPoint = seed.index * seed.pointSeedLength;
+      const endPointX = startPoint + (seed.pointSeedLength / 2);
+      const endPointY = startPoint + seed.pointSeedLength;
+      const middle = seed.pointSeedLength / 2 + 1;
+      let xRandom = seed.boxSeed.substring(startPoint, endPointX);
+      let yRandom = seed.boxSeed.substring(endPointX, endPointY);
+      // convert the hex seed to decimal
+      xRandom = Number(`0x${xRandom}`);
+      yRandom = Number(`0x${yRandom}`);
+      // reduce the points to 0 -> 1 random float
+      xRandom /= 10 ** middle;
+      yRandom /= 10 ** middle;
+      // modify the direction of jiggle based on modifications
+      switch (mod) {
+        case JIGGLE_LEFT:
+          xRandom *= -1;
+          break;
+        case JIGGLE_RIGHT:
+          xRandom *= 1;
+          break;
+        default:
+          // modify the corners less
+          xRandom -= 0.5;
+          break;
+      }
+      switch (mod) {
+        case JIGGLE_UP:
+          yRandom *= -1;
+          break;
+        case JIGGLE_DOWN:
+          yRandom *= 1;
+          break;
+        default:
+          // modify the corners less
+          yRandom -= 0.5;
+          break;
+      }
+      return {
+        x:
+          point.x
+          + xRandom
+            * extension / 2
+            * CORNER_JIGGLE_MAX
+            * jauntFactor,
+        y:
+          point.y
+          + yRandom
+            * extension / 2
+            * CORNER_JIGGLE_MAX
+            * jauntFactor,
+      };
+    };
+    boxes.forEach((lineBox, i) => {
+      const points = [];
+      // dimension constants to use for points
+      const lineWidth = lineBox.width + (target.dataset.jauntFull ? 0 : (4 * extension));
+      const lineHeight = lineBox.height + (target.dataset.jauntFull ? 0 : (4 * extension));
+      if (!lineWidth || !lineHeight) {
+        return;
+      }
+      const left = lineBox.left - targetBox.left + (target.dataset.jauntFull ? 2 * extension : 0);
+      const right = lineBox.left - targetBox.left + lineWidth + (target.dataset.jauntFull ? 2 * extension : 0);
+      const top = lineBox.top - targetBox.top + (target.dataset.jauntFull ? 2 * extension : 0);
+      const bottom = lineBox.top - targetBox.top + lineHeight + (target.dataset.jauntFull ? 2 * extension : 0);
+      // number of intemidiate points vertically and horizontally
+      const widthPointCount = Math.ceil(lineWidth / (lineHeight * BREAK_RATIO)) - 1;
+      const heightPointCount = Math.ceil(lineHeight / (lineWidth * BREAK_RATIO)) - 1;
+      // modify the seed string for this line box and calculate the secion lengths
+      const boxSeed = jauntSeed.substring(i) + jauntSeed.substring(0, i);
+      const pointSeedLength = boxSeed.length / (widthPointCount * 2 + heightPointCount * 2 + 4);
+
+      // Top left
+      let index = 0;
+      points.push(jigglePoint({
+        x: left,
+        y: top,
+      }, {
+        index,
+        boxSeed,
+        pointSeedLength,
+      }));
+      index += 1;
+      // Top edge additional points
+      let j = 0;
+      while (j < widthPointCount) {
+        j += 1;
+        points.push(jigglePoint({
+          x: left + (j * lineWidth / (widthPointCount + 1)),
+          y: top,
+        }, {
+          index,
+          boxSeed,
+          pointSeedLength,
+        }, JIGGLE_UP));
+        index += 1;
+      }
+      // Top right
+      points.push(jigglePoint({
+        x: right,
+        y: top,
+      }, {
+        index,
+        boxSeed,
+        pointSeedLength,
+      }));
+      index += 1;
+      // Right edge additional points
+      j = 0;
+      while (j < heightPointCount) {
+        j += 1;
+        points.push(jigglePoint({
+          x: right,
+          y: top + (j * lineHeight / (heightPointCount + 1)),
+        }, {
+          index,
+          boxSeed,
+          pointSeedLength,
+        }, JIGGLE_RIGHT));
+        index += 1;
+      }
+      // Bottom right
+      points.push(jigglePoint({
+        x: right,
+        y: bottom,
+      }, {
+        index,
+        boxSeed,
+        pointSeedLength,
+      }));
+      index += 1;
+      // Bottom edge additional points
+      j = 0;
+      while (j < widthPointCount) {
+        j += 1;
+        points.push(jigglePoint({
+          x: right - (j * lineWidth / (widthPointCount + 1)),
+          y: bottom,
+        }, {
+          index,
+          boxSeed,
+          pointSeedLength,
+        }, JIGGLE_DOWN));
+        index += 1;
+      }
+      // Bottom left
+      points.push(jigglePoint({
+        x: left,
+        y: bottom,
+      }, {
+        index,
+        boxSeed,
+        pointSeedLength,
+      }));
+      index += 1;
+      // Right edge additional points
+      j = 0;
+      while (j < heightPointCount) {
+        j += 1;
+        points.push(jigglePoint({
+          x: left,
+          y: bottom - (j * lineHeight / (heightPointCount + 1)),
+        }, {
+          index,
+          boxSeed,
+          pointSeedLength,
+        }, JIGGLE_LEFT));
+        index += 1;
+      }
+
+      drawPolygon(context, points);
+      storedPoints.push(points);
+    });
+
+    target.dataset.points = JSON.stringify(storedPoints);
+  };
+
+  // The main event
+  const createBackground = (action = null, context = document) => {
+    oneRemInPx = parseFloat(
+      getComputedStyle(document.documentElement).fontSize
+    );
+
+    const targets = context.querySelectorAll('[data-jaunt-factor]');
+
+    // Insert some jaunt
+    targets.forEach((target) => {
+      jauntTarget(target, action);
+    });
+  };
+
+  const processEvent = (e) => {
+    jauntTarget(e.target, e.type);
+  };
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      jauntTarget(entry.target, 'visibility');
+    });
+  }, {
+    root: document.documentElement,
+  });
+
+  const init = (context = document) => {
+    const targets = context.querySelectorAll('[data-jaunt-factor]');
+    createBackground('init', context);
+    targets.forEach((target) => {
+      [
+        'blur',
+        'change',
+        'focus',
+        'mouseenter',
+        'mouseleave',
+      ].forEach((action) => {
+        target.removeEventListener(action, processEvent);
+        target.addEventListener(action, processEvent);
+      });
+      observer.observe(target);
+    });
+  };
+
+  // Go time
+  document.addEventListener('DOMContentLoaded', () => init());
+  document.addEventListener('load', () => init());
+  window.addEventListener('resize', () => {
+    createBackground('resize');
+  });
+  window.runJaunt = init;
+})();