@foeewni/web-core 3.0.0-alpha.18 → 3.0.0-alpha.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foeewni/web-core",
-  "version": "3.0.0-alpha.18",
+  "version": "3.0.0-alpha.19",
   "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

@@ -110,8 +110,9 @@ Form `type=submit`s, `button`s are by default uncolorized, please use one of the
 }
 
 .btn-sunset {
-  color: $foe-extradark;
   @include button-variant($foe-sunset, $foe-sunset);
+
+  color: $foe-extradark;
 }
 
 .btn-donate {

package/src/components/navigation/_mega-menu.scss

@@ -27,11 +27,11 @@
     display: block;
   }
 
-    > .container {
-      @include media-breakpoint-up(md) {
-        justify-content: flex-end;
-      }
+  > .container {
+    @include media-breakpoint-up(md) {
+      justify-content: flex-end;
     }
+  }
 
   &.megamenu-search { // Allow the search "megamenu" to persist at smaller breakpoints
     @include media-breakpoint-up(sm) {
@@ -228,7 +228,7 @@ ul.navbar-nav.menu-main {
           }
 
           > a {
-            line-height: calc($foe-submenu-tile-height / 4 - 0.4rem);
+            line-height: calc($foe-submenu-tile-height / 4 - .4rem);
             font-weight: 600;
             color: $foe-extradark;
             transition: color 400ms ease-in-out;

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

@@ -85,6 +85,7 @@
       }
     }
 
+    /* stylelint-disable no-descending-specificity */
     > li {
       > a {
         background: linear-gradient(90deg, $foe-accent 0%, $foe-accent 50%, transparent 50%, transparent 100%);
@@ -100,6 +101,7 @@
         }
       }
     }
+    /* stylelint-enable no-descending-specificity */
 
     &.menu-main {
       display: block;
@@ -172,7 +174,7 @@
               }
             }
           }
-          
+
           div.foe-megamenu-container { /* just for mobile menu */
             position: relative;
             background-color: transparent;

package/src/components/tools/jaunty.js

@@ -17,7 +17,7 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
 
 (() => {
   // Config
-  const ROTATION_MAX_DEGREES = 2; // 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
@@ -72,6 +72,11 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
 
     // 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;
 
@@ -86,27 +91,27 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
     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.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)`;
+    // 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');
 
@@ -121,17 +126,24 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
     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 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 boxes = target.dataset.jauntFull ? [targetBox] : Array.from(range.getClientRects());
     const storedPoints = [];
 
     // function to jiggle the points around using a seed
@@ -192,12 +204,15 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
     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;
+      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;