@foeewni/web-core 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/components/tools/jaunty.js

@@ -0,0 +1,375 @@
+/* @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, action = null) => {
+    if (
+      !target.firstChild ||
+      target.firstChild.nodeType !== Node.TEXT_NODE
+    ) {
+      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
+    const targetBox = target.getBoundingClientRect();
+    const parentBox = target.offsetParent ? target.offsetParent.getBoundingClientRect() : targetBox;
+
+    // switch(action) {
+    //   case 'resize':
+    //     target.dataset.points = false;
+    //     break;
+    // }
+
+    // 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');
+    // if (target.dataset.backgroundCanvasId) {
+    //   canvas.getContext('2d')
+    //     .clearRect(0, 0, canvas.width, canvas.height);
+    // } else {
+      // Create a unique ID to link this element with the canvas background
+      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';
+
+    // Collapse whitespace
+    target.textContent = target.textContent.replace(/\s+/g, ' ').trim();
+
+    // Get the individual lines as rendered on screen
+    const { textContent } = target.firstChild;
+    const range = document.createRange();
+    range.setStart(target.firstChild, 0);
+    range.setEnd(target.firstChild, textContent.length);
+
+    // const outerBox = range.getBoundingClientRect();
+    const boxes = target.dataset.jauntFull ? [targetBox] : Array.from(range.getClientRects());
+    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 *= -2;
+          break;
+        case JIGGLE_RIGHT:
+          xRandom *= 2;
+          break;
+        default:
+          // modify the corners less
+          xRandom -= 0.5;
+          break;
+      }
+      switch (mod) {
+        case JIGGLE_UP:
+          yRandom *= -2;
+          break;
+        case JIGGLE_DOWN:
+          yRandom *= 2;
+          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 ? - extension : (4 * extension));
+      const lineHeight = lineBox.height + (target.dataset.jauntFull ? - extension : (4 * extension));
+      const left = lineBox.left - targetBox.left + (target.dataset.jauntFull ? (3 * extension) : 0);
+      const right = lineBox.left - targetBox.left + (target.dataset.jauntFull ? (3 * extension) : 0) + lineWidth;
+      const top = lineBox.top - targetBox.top + (target.dataset.jauntFull ? (2 * extension) : 0);
+      const bottom = lineBox.top - targetBox.top + (target.dataset.jauntFull ? (2 * extension) : 0) + lineHeight;
+      // 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) => {
+    oneRemInPx = parseFloat(
+      getComputedStyle(document.documentElement).fontSize
+    );
+
+    const targets = document.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 = () => {
+    const targets = document.querySelectorAll('[data-jaunt-factor]');
+    createBackground('init');
+    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;
+})();

package/src/components/typography/blockquotes.scss

@@ -19,21 +19,18 @@ The Friends of the Earth blockquotes use the secondary font
 @import '../../utils/scss/loader';
 
 blockquote {
-  border-color: $gray-400;
-  border-style: double;
-  border-width: .2em 0;
-  padding: $spacer*1.5 0;
+  padding: $spacer * 1.5 0;
   width: 80%;
-  margin: $spacer*2 auto;
+  margin: ($spacer * 2) auto;
   float: none;
   clear: both;
 
   p {
     font-family: $font-family-serif;
-    font-weight: 700;
+    font-weight: normal;
     font-size: $blockquote-font-size;
     line-height: $blockquote-font-size * 1.35;
-    color: $foe-primary;
+    color: $foe-extradark;
 
     @include media-breakpoint-down(sm) {
       font-size: strip-units($blockquote-font-size) * $font-size-sm;
@@ -54,8 +51,6 @@ blockquote {
   }
 
   @include media-breakpoint-up(sm) {
-    width: calc(100% * 4 / 6);
-
     // NOTE: The width, margin-left, and margin-right values below are
     // over-ridden for sanity within CKEditor contexts.
     &.left {
@@ -63,6 +58,7 @@ blockquote {
       clear: left;
       margin-left: calc(-100% / 6);
       margin-right: 2em;
+      width: calc(100% * 4 / 6);
     }
 
     &.right {
@@ -70,29 +66,27 @@ blockquote {
       clear: right;
       margin-left: 2em;
       margin-right: calc(-100% / 6);
+      width: calc(100% * 4 / 6);
     }
   }
 
   cite,
   & + .citation {
-    font-family: $font-family-sans-serif;
-    font-size: 1rem;
-    line-height: 1.3rem;
-    font-weight: 400;
-    font-style: italic;
-    color: $gray-500;
+    width: 80%;
+    margin: auto;
+    font-family: $font-family-serif;
+    font-size: $blockquote-font-size;
+    line-height: $spacer * 2;
+    font-weight: bold;
+    color: $foe-extradark;
     display: block;
-    text-align: right;
-    margin-top: 1em;
-    padding-left: 10%;
-
-    &::before {
-      content: "\2014\00A0\00A0";
-      color: $foe-primary;
-    }
+    text-align: left;
+    margin-top: $spacer;
   }
 
   & + .citation {
-    margin-top: $spacer * -1;
+    margin-top: $spacer * -2.5;
+    margin-bottom: $spacer * 2;
+    text-align: center;
   }
 }

package/src/components/typography/fonts.scss

@@ -20,8 +20,8 @@ Our type system is comprised of two fonts:
 To use them on your CSS please import the webfonts through Google Fonts
 
 ```
-@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
 ```
 
 */
-@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');

package/src/fonts.js

@@ -32,6 +32,7 @@ To use them on your CSS please import the webfonts through Google Fonts
 // Note, single line deep imports are needed here, for some reason fontawesome messes up
 // with normal imports and webpack ends up bundling the whole library (1.25mb!)
 import { library, dom } from '@fortawesome/fontawesome-svg-core';
+
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope';
 import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
@@ -40,19 +41,6 @@ import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons/faExt
 import { faArrowAltCircleUp } from '@fortawesome/free-solid-svg-icons/faArrowAltCircleUp';
 import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
 import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
-import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
-import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
-import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
-import { faPinterest } from '@fortawesome/free-brands-svg-icons/faPinterest';
-import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin';
-import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
-import { faYoutube } from '@fortawesome/free-brands-svg-icons/faYoutube';
-import { faTumblr } from '@fortawesome/free-brands-svg-icons/faTumblr';
-import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp';
-import { faFacebookMessenger } from '@fortawesome/free-brands-svg-icons/faFacebookMessenger';
-import { faTelegram } from '@fortawesome/free-brands-svg-icons/faTelegram';
-import { faTelegramPlane } from '@fortawesome/free-brands-svg-icons/faTelegramPlane';
-import { faTiktok } from '@fortawesome/free-brands-svg-icons/faTiktok';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
@@ -76,6 +64,23 @@ import { faSave } from '@fortawesome/free-solid-svg-icons/faSave';
 import { faSignInAlt } from '@fortawesome/free-solid-svg-icons/faSignInAlt';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
 
+import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
+import { faXTwitter } from '@fortawesome/free-brands-svg-icons/faXTwitter';
+import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
+import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
+import { faPinterest } from '@fortawesome/free-brands-svg-icons/faPinterest';
+import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin';
+import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
+import { faYoutube } from '@fortawesome/free-brands-svg-icons/faYoutube';
+import { faTumblr } from '@fortawesome/free-brands-svg-icons/faTumblr';
+import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp';
+import { faFacebookMessenger } from '@fortawesome/free-brands-svg-icons/faFacebookMessenger';
+import { faTelegram } from '@fortawesome/free-brands-svg-icons/faTelegram';
+import { faTelegramPlane } from '@fortawesome/free-brands-svg-icons/faTelegramPlane';
+import { faTiktok } from '@fortawesome/free-brands-svg-icons/faTiktok';
+import { faBluesky } from '@fortawesome/free-brands-svg-icons/faBluesky';
+import { faThreads } from '@fortawesome/free-brands-svg-icons/faThreads';
+
 
 // Add actually used FA icons
 library.add(
@@ -88,6 +93,7 @@ library.add(
   faShare,
   faLink,
   faTwitter,
+  faXTwitter,
   faFacebook,
   faFacebookF,
   faPinterest,
@@ -121,20 +127,25 @@ library.add(
   faSave,
   faTrashAlt,
   faCloudUploadAlt,
-  faSignInAlt
+  faSignInAlt,
+  faBluesky,
+  faThreads
 );
 
 // Look for Google fonts and append them if they are not there already
 // We avoiding using @import url(); because the new URL has semicolons on it
 // and it tremendously gets broken from some preprocessors.
 
-const fonts = window.document.createElement('link');
 // eslint-disable-next-line max-len
-const href = 'https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;1,400;1,700&display=swap';
-fonts.setAttribute('rel', 'stylesheet');
-fonts.setAttribute('crossorigin', 'anonymous');
-fonts.setAttribute('href', href);
-document.head.appendChild(fonts);
+const googleFontsHref = 'https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;1,400;1,700&display=swap';
+const googleFontsLink = window.document.querySelector(`link[href="${googleFontsHref}"]`);
+if (!googleFontsLink) {
+  const fonts = window.document.createElement('link');
+  fonts.setAttribute('rel', 'stylesheet');
+  fonts.setAttribute('crossorigin', 'anonymous');
+  fonts.setAttribute('href', googleFontsHref);
+  document.head.appendChild(fonts);
+}
 
 // Kicks off the process of finding <i> tags and replacing with <svg>
 dom.watch();

package/src/main.js

@@ -19,6 +19,7 @@ import './components/tools/data-click-track';
 import './components/tools/rubik-tracking';
 import './components/tools/data-defer-src';
 import './components/tools/stickystack';
+import './components/tools/jaunty';
 
 // Bootstrap helpers
 import './components/layout/alerts.scss';

package/src/utils/scss/helpers/_mixins.scss

@@ -31,12 +31,13 @@
 
 // Applies colours to <p> and <a> elements
 @mixin text_colours ($main, $link) {
-  p,
-  li {
+  label,
+  li,
+  p {
     color: $main;
   }
 
-  a:not(.foe-cta) {
+  a:not(.foe-cta):not(.btn) {
     color: $link;
 
     &:hover {