@foeewni/web-core 3.0.0-alpha.10 → 3.0.0-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foeewni/web-core",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.12",
   "description": "Friend of the Earth EWNI Core for frontend projects",
   "browser": {
     "foe-core.js": "dist/js/foe.core.min.js",

package/src/components/form/buttons.scss

@@ -61,6 +61,10 @@ Form `type=submit`s, `button`s are by default uncolorized, please use one of the
   margin: 0 auto;
 }
 
+.btn-lg {
+  width: 100%;
+}
+
 .btn {
   &:focus {
     outline: $foe-element-default-outline;

package/src/components/layout/reset.scss

@@ -29,3 +29,8 @@ p a:not(.btn, .foe-cta) {
   text-decoration: underline;
   color: $foe-text;
 }
+
+.row > [class*="col-"] {
+  // reset the z-index on each column
+  z-index: 0;
+}

package/src/components/tools/jaunty.js

@@ -17,12 +17,20 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
 
 (() => {
   // Config
-  const ROTATION_MAX_DEGREES = 3; // Degrees. "Normal" is around 2.5
+  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 = '';
@@ -45,174 +53,276 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
     context.stroke();
   };
 
-  // const drawPoint = (context, x, y) => {
-  //   if (!context.fillStyle) {
-  //     context.fillStyle = "#61bdaa";
-  //   }
-  //   context.fillRect(x - 1.5, y - 1.5, 3, 3);
-  // };
-
-  const jauntTarget = (target) => {
-    if (!target.firstChild || target.firstChild.nodeType !== Node.TEXT_NODE) {
+  const jauntTarget = (target, action = null) => {
+    if (
+      !target.firstChild ||
+      target.firstChild.nodeType !== Node.TEXT_NODE
+    ) {
       return;
     }
 
-    // Create a unique ID to link this element with the canvas background
-    if (!target.dataset.backgroundCanvasId) {
-      target.dataset.backgroundCanvasId = generateRandomHex(12);
-    }
-
-    // Clean up any existing jauntiness
-    const existingCanvas = document.getElementById(
-      target.dataset.backgroundCanvasId
-    );
-    if (existingCanvas) {
-      existingCanvas.remove();
-    }
-    const previousTransform = getComputedStyle(target).transform;
-    target.style.transition = 'none';
-    target.style.transform = null;
+    // 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;
-    // 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;
 
     // Figure out the bounding boxes
-
-    // 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);
-
     // Get the bounding boxes
     const targetBox = target.getBoundingClientRect();
     const parentBox = target.offsetParent ? target.offsetParent.getBoundingClientRect() : targetBox;
-    const outerBox = range.getBoundingClientRect();
-    const boxes = Array.from(range.getClientRects());
 
-    // Insert the new 2D canvas element
+    // 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');
-    canvas.id = target.dataset.backgroundCanvasId;
-    target.parentNode.insertBefore(canvas, target);
-    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';
-
-    // Draw the background boxes
+    // 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 = null;
-    target.style.borderColor = null;
+    target.style.backgroundColor = '';
+    target.style.borderColor = '';
+    target.style.transition = 'none';
     context.fillStyle = getComputedStyle(target).backgroundColor;
-    if (!context.fillStyle) {
-      context.fillStyle = '#61bdaa';
-    }
     context.strokeStyle = getComputedStyle(target).borderColor;
+    target.dataset.jauntBackground = context.fillStyle;
+    target.dataset.jauntBorder = context.strokeStyle;
     target.style.backgroundColor = 'transparent';
     target.style.borderColor = 'transparent';
 
-    const leftShift = getComputedStyle(target).textAlign === 'center'
-      ? (targetBox.width - outerBox.width) / 2 - extension
-      : 0;
-    boxes.forEach((lineBox, i) => {
-      const points = [];
-
-      points.push({
-        // Top left
-        x: leftShift + lineBox.left - outerBox.left + 2 * extension,
-        y: lineBox.top - outerBox.top + 2 * extension,
-      });
-      points.push({
-        // Top right
-        x: points[0].x + lineBox.width + 2 * extension,
-        y: points[0].y,
-      });
-      points.push({
-        // Bottom right
-        x: points[0].x + lineBox.width + 2 * extension,
-        y: points[0].y + lineBox.height + 2 * extension,
-      });
-      points.push({
-        // Bottom left
-        x: points[0].x,
-        y: points[0].y + lineBox.height + 2 * extension,
-      });
+    // Collapse whitespace
+    target.textContent = target.textContent.replace(/\s+/g, ' ').trim();
 
-      // context.fillRect(
-      //   lineBox.left - outerBox.left + 2 * extension,
-      //   lineBox.top - outerBox.top + 2 * extension,
-      //   lineBox.width + 2 * extension,
-      //   lineBox.height + 2 * extension,
-      // );
+    // 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);
 
-      // Jiggle them points around
+    // 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 seedLength = boxSeed.length;
-      const pointSeedLength = seedLength / points.length;
-      points.forEach((point, index) => {
-        const startPoint = index * pointSeedLength;
-        const endPointX = startPoint + (pointSeedLength / 2);
-        const endPointY = startPoint + pointSeedLength;
-        const middle = pointSeedLength / 2 + 1;
-        let xRandom = boxSeed.substring(startPoint, endPointX);
-        let yRandom = boxSeed.substring(endPointX, endPointY);
-        xRandom = Number(`0x${xRandom}`);
-        yRandom = Number(`0x${yRandom}`);
-        xRandom /= 10 ** middle;
-        yRandom /= 10 ** middle;
-        points[index] = {
-          x:
-            point.x
-            + (xRandom * 2 - 1)
-              * oneRemInPx
-              * CORNER_JIGGLE_MAX
-              * jauntFactor,
-          y:
-            point.y
-            + (yRandom * 2 - 1)
-              * oneRemInPx
-              * CORNER_JIGGLE_MAX
-              * jauntFactor,
-        };
-      });
-
-      // points.forEach((point) => {
-      //   drawPoint(context, point.x, point.y);
-      // });
+      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.style.transform = previousTransform;
-    target.style.transition = null;
-
-    // Add rotation
-    const middle = jauntSeed.length / 2 + 1;
-    let rotationSeed = jauntSeed.substring(1, middle);
-    rotationSeed = Number(`0x${jauntSeed}`);
-    rotationSeed /= 10 ** (`${rotationSeed}`).length;
-    const rotationFactor = ROTATION_MAX_DEGREES * jauntFactor
-      * (rotationSeed * 2 - 1); // -1 to  +1
-    target.style.transform = `rotate(${rotationFactor}deg)`;
-    canvas.style.transform = `rotate(${rotationFactor}deg)`;
+    target.dataset.points = JSON.stringify(storedPoints);
   };
 
   // The main event
-  const createBackground = () => {
+  const createBackground = (action = null) => {
     oneRemInPx = parseFloat(
       getComputedStyle(document.documentElement).fontSize
     );
@@ -221,26 +331,45 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
 
     // Insert some jaunt
     targets.forEach((target) => {
-      jauntTarget(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',
-        'focus',
       ].forEach((action) => {
-        target.addEventListener(action, (e) => {
-          jauntTarget(e.target);
-        });
+        target.removeEventListener(action, processEvent);
+        target.addEventListener(action, processEvent);
       });
+      observer.observe(target);
     });
   };
 
-  const init = () => {
-    createBackground();
-  };
-
   // Go time
   document.addEventListener('DOMContentLoaded', init);
   document.addEventListener('load', init);
-  window.addEventListener('resize', createBackground);
+  window.addEventListener('resize', () => {
+    createBackground('resize');
+  });
   window.runJaunt = init;
 })();

package/src/utils/scss/helpers/_variables.scss

@@ -460,7 +460,7 @@ $font-weight-heavy:           700;
 $font-weight-base:            $font-weight-normal;
 $line-height-base:            1.5;
 
-$h1-font-size:                calc(60 / 16) * $font-size-base;
+$h1-font-size:                calc(56 / 16) * $font-size-base;
 $h2-font-size:                calc(40 / 16) * $font-size-base;
 $h3-font-size:                calc(32 / 16) * $font-size-base;
 $h4-font-size:                calc(26 / 16) * $font-size-base;
@@ -482,10 +482,10 @@ $headings-font-weight:        900;
 $headings-line-height:        1.2;
 $headings-color:              $foe-accent;
 
-$display1-size:               calc(60 / 16) * $font-size-base;
-$display2-size:               calc(60 / 16) * $font-size-base;
-$display3-size:               4.5rem;
-$display4-size:               3.5rem;
+$display1-size:               $h1-font-size;
+$display2-size:               $h1-font-size;
+$display3-size:               $h3-font-size;
+$display4-size:               $h4-font-size;
 
 $display1-weight:             900;
 $display2-weight:             300;