@foeewni/web-core 2.2.5 → 2.2.8

package/src/components/form/buttons.scss

@@ -9,33 +9,34 @@ Form `type=submit`s, `button`s are by default uncolorized, please use one of the
 
 ```html_example
 <div class="row">
-  <div class="col-md-4">
+  <div class="col-md-6">
     <h4>Primary palette</h4>
     <button class="btn btn-primary btn-block">.btn-primary</button>
     <button class="btn btn-secondary btn-block">.btn-secondary</button>
     <button class="btn btn-offwhite btn-block">.btn-offwhite</button>
     <button class="btn btn-dark btn-block">.btn-dark</button>
     <button class="btn btn-extradark btn-block">.btn-extradark</button>
+    <button class="btn btn-sunset btn-block">.btn-sunset</button>
+    <button class="btn btn-accent btn-block">.btn-accent</button>
+    <button class="btn btn-join btn-block">.btn-join</button>
+    <button class="btn btn-donate btn-block">.btn-donate</button>
     <a href="#" class="btn btn-primary btn-block">Link as button</a>
   </div>
 
-  <div class="col-md-4">
+  <div class="col-md-6">
     <h4>Outlined</h4>
     <button class="btn btn-outline-primary btn-block">.btn-outline-primary</button>
     <button class="btn btn-outline-secondary btn-block">.btn-outline-secondary</button>
     <button class="btn btn-outline-offwhite btn-block">.btn-outline-offwhite</button>
     <button class="btn btn-outline-dark btn-block">.btn-outline-dark</button>
     <button class="btn btn-outline-extradark btn-block">.btn-outline-extradark</button>
+    <button class="btn btn-outline-sunset btn-block">.btn-outline-sunset</button>
+    <button class="btn btn-outline-accent btn-block">.btn-outline-accent</button>
+    <button class="btn btn-outline-join btn-block">.btn-outline-join</button>
+    <button class="btn btn-outline-donate btn-block">.btn-outline-donate</button>
     <a href="#" class="btn btn-outline-primary btn-block">Link as button</a>
   </div>
 
-  <div class="col-md-4">
-    <h4>Secondary palette</h4>
-    <button class="btn btn-accent btn-block">.btn-accent</button>
-    <button class="btn btn-join btn-block">.btn-join</button>
-    <button class="btn btn-donate btn-block">.btn-donate</button>
-  </div>
-
 </div>
 
 ```
@@ -52,9 +53,6 @@ input[type=button],
 button {
   &:not(.btn) {
     @extend .btn;
-
-    text-transform: uppercase;
-    font-weight: bold;
   }
 }
 
@@ -62,17 +60,9 @@ input[type=reset] {
   &:not(.btn) {
     @extend .btn;
     @extend .btn-danger;
-
-    text-transform: uppercase;
-    font-weight: bold;
   }
 }
 
-.btn:not(.btn-sm) {
-  text-transform: uppercase;
-  font-weight: bold;
-}
-
 @include media-breakpoint-down(sm) {
   .btn {
     font-size: .8rem;

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

@@ -2,82 +2,69 @@
 
 # Scripts:Core/Iframe Deferrer
 
-@todo: document this
+Use the <code>data-defer-src</code> attribute on iframes to defer/lazy load adding a
+helper loading class.
 
 Usage:
 ```
 <iframe data-defer-src="<target url>"></iframe>
-<img data-defer-src="<target url>" />
+<iframe data-defer-src="<target url>" data-defer-dispose />
 ```
 
 ```html_example
-<div class="embed-responsive embed-responsive-16by9">
-  <iframe class="embed-responsive-item" data-defer-src="https://player.vimeo.com/video/291108273" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-</div>
-
 <div>
-  <img data-defer-src="https://picsum.photos/1920/1080" class="img-fluid" />
+  <p>Native <code>loading="lazy"</code>, not widely supported on iframes.</p>
+  <div class="mb-4 embed-responsive embed-responsive-16by9">
+    <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/291108273" loading="lazy" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+  </div>
+
+  <p>Using <code>data-defer-src</code>.</p>
+  <div class="mb-4 embed-responsive embed-responsive-16by9">
+    <iframe class="embed-responsive-item" data-defer-src="https://player.vimeo.com/video/291108273" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+  </div>
+
+  <p>Combining with <code>data-defer-dispose</code> to free up resources when iframe goes out of the screen.</p>
+  <div class="embed-responsive embed-responsive-16by9">
+    <iframe class="embed-responsive-item" data-defer-dispose data-defer-src="https://player.vimeo.com/video/291108273" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+  </div>
 </div>
 ```
 
 */
 
-import Screen from '../../utils/js/screen.service';
-
 import './data-defer-src.scss';
 
-(($) => {
-  const $defers = $('[data-defer-src]');
-
-  $defers.each((index, el) => {
-    const $defer = $(el);
+(() => {
+  const elements = document.querySelectorAll('[data-defer-src]');
 
-    if (Screen.elementInViewport(el)) {
-      const thisUrl = $defer.attr('data-defer-src');
-      $defer
-        .removeAttr('data-defer-src')
-        .attr('src', thisUrl);
-    } else {
-      // Defer iframe load if the iframe is below the loading point's fold
+  elements.forEach((el) => {
+    let isVisible = false;
+    const source = el.dataset.deferSrc;
 
-      const url = $defer.attr('src');
-      const isWrapped = $defer.parent().hasClass('js-defer-loader');
-      const isImage = ($defer[0].nodeName === 'IMG');
+    el.classList.add('js-defer-is-loading');
 
-      // Adds the preloader if the parent class isn't .js-defer-loader.
-      if (!isWrapped && !isImage) {
-        $defer.wrap('<div class="js-defer-loader"></div>');
+    // Remove class on load.
+    el.addEventListener('load', () => {
+      if (el.hasAttribute('src')) {
+        el.classList.remove('js-defer-is-loading');
       }
+    });
 
-      $defer
-        .addClass('js-defer-is-loading') // .hide() doesn't play well with google maps.
-        .attr('data-defer-src', url)
-        .removeAttr('src');
-
-      const checkAndLoadSrc = () => {
-        if (el.hasAttribute('data-defer-src')) {
-          if (Screen.elementInViewport(el)) {
-            // Detach ASAP
-            $(window).off('scroll', checkAndLoadSrc);
-
-            if (isWrapped) {
-              $defer.unwrap();
-            }
-
-            const thisUrl = $defer.attr('data-defer-src');
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (!isVisible && entry.intersectionRatio > 0) {
+          isVisible = true;
+          el.src = source;
+        }
 
-            $defer
-              .removeAttr('data-defer-src')
-              .attr('src', thisUrl)
-              .on('load', () => {
-                $defer.removeClass('js-defer-is-loading');
-              });
-          }
+        if (el.hasAttribute('data-defer-dispose') && isVisible && entry.intersectionRatio === 0) {
+          isVisible = false;
+          el.removeAttribute('src');
+          el.classList.add('js-defer-is-loading');
         }
-      };
+      });
+    });
 
-      // Watch for iframe to scrolg into view, load the frame when it does
-      $(window).on('scroll', checkAndLoadSrc);
-    }
+    observer.observe(el);
   });
-})(window.jQuery);
+})();

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

@@ -1,21 +1,7 @@
-@import '../../utils/scss/loader';
+iframe[data-defer-src] {
+  transition: opacity 250ms linear;
 
-// $encoded-spinner: str-replace(url("data:image/svg+xml;<svg width='39px' height='39px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-rolling' style='background: none;'><circle cx='50' cy='50' fill='none' stroke='fff' stroke-width='10' r='35' stroke-dasharray='164.93361431346415 56.97787143782138' transform='rotate(30 50 50)'><animateTransform attributeName='transform' type='rotate' calcMode='linear' values='0 50 50;360 50 50' keyTimes='0;1' dur='2s' begin='0s' repeatCount='indefinite'></animateTransform></circle></svg>"), '#', '%23');
-
-.js-defer-loader {
-  background: rgba(0, 0, 0, .3);
-  // background-image: #{$encoded-spinner};
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 100;
-  border: 1px solid rgba($foe-offwhite, .25);
-}
-
-.js-defer-is-loading {
-  opacity: 0 !important;
+  &.js-defer-is-loading {
+    opacity: 0 !important;
+  }
 }

package/src/components/tools/data-scroll-to.js

@@ -15,6 +15,7 @@ Usage:
 
 */
 
+import screenService from '../../utils/js/screen.service';
 
 // Enables smooth scrolling between anchors
 (($) => {
@@ -55,11 +56,17 @@ Usage:
     $target = $target.length ? $target : $(`[name="${hash.substr(1)}"]`);
 
     if ($target.length) {
-      // Calculate headers
-      const headerHeight = ($('.foe-header').length) ? $('.foe-header').height() : 0;
-      const navHeight = ($('.foe-secondary-nav').length) ? $('.foe-secondary-nav').height() : 0;
-      const paddingFromTop = 20;
-      let finalScrollPosition = ($target.offset().top - (headerHeight + navHeight) - paddingFromTop);
+      // Header when scrolled is always compressed, unless if the page is at the very start
+      // if we grab the height at the start of the document, it will be bigger than what
+      // it will be when the header is compressed.
+
+      // Grab the value from our scss variables
+      const headerHeight = screenService.getHeaderHeight();
+
+      // See if the target specifies a scroll padding, useful for elements without an internal padding
+      const extraPadding = parseInt($target.attr('data-scroll-to-padding') || 20, 10);
+
+      let finalScrollPosition = ($target.offset().top - (headerHeight + extraPadding));
 
       // Compensate admin bars if user is logged in
       if ($('body').hasClass('user-logged-in')) {

package/src/fonts.js

@@ -20,7 +20,7 @@ Our type system is comprised of two fonts:
 To use them on your CSS please import the webfonts through Google Fonts
 
 ```
-<link id="fonts" rel="stylesheet" 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" />
+<link id="fonts" rel="stylesheet" crossorigin="anonymous" 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" />
 ```
 
 @TODO: Document Fontawesome
@@ -130,6 +130,7 @@ 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);
 

package/src/utils/js/screen.service.js

@@ -40,6 +40,8 @@ export default {
     return Math.max(document.documentElement.clientHeight, window.innerHeight);
   },
 
+  // @todo: legacy function, replace with intersection observer
+  // after assessing how many things rely on this utility.
   elementInViewport: function elementInViewport(el) {
     const $ = window.jQuery;
     const { top } = $(el).offset();
@@ -69,4 +71,14 @@ export default {
 
     return breakpoints[breakpointIndex].size;
   },
+
+  getHeaderHeight: function getHeaderHeight() {
+    const $ = window.jQuery;
+    const breakpoint = this.getCurrentBreakpoint();
+
+    if ($('.foe-header').length) {
+      return parseInt(scss[`foe-header-height-${breakpoint}`], 10);
+    }
+    return 0;
+  },
 };

package/src/utils/scss/exporter.scss

@@ -13,4 +13,8 @@
   @each $screen, $size in $container-max-widths {
     container-#{$screen}: $size;
   }
+
+  @each $screen, $size in $foe-header-heights {
+    foe-header-height-#{$screen}: $size;
+  }
 }

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

@@ -13,6 +13,7 @@ $foe-light:           #7ae1bd !default;
 $foe-secondary:         $foe-light !default;
 $foe-dark:            #3b867f !default;
 $foe-extradark:       #232f4a !default;
+$foe-sunset:          #ea5c5c !default;
 
 $foe-white:           #f3f3f7 !default;
 $foe-gray:            #b1b8c0 !default;
@@ -200,6 +201,7 @@ $theme-colors: map-merge(
     "accent":     $foe-accent,
     "dark":       $foe-dark,
     "extradark":  $foe-extradark,
+    "sunset":     $foe-sunset,
     "donate":     $foe-donate,
     "join":       $foe-join,
     "offwhite":   $foe-offwhite,
@@ -423,7 +425,8 @@ $font-size-sm:                ($font-size-base * .7);
 
 $font-weight-light:           300;
 $font-weight-normal:          400;
-$font-weight-bold:            700;
+$font-weight-bold:            600;
+$font-weight-heavy:           700;
 
 $font-weight-base:            $font-weight-normal;
 $line-height-base:            1.5;
@@ -557,7 +560,7 @@ $btn-line-height-lg:          $input-btn-line-height-lg;
 
 $btn-border-width:            $input-btn-border-width;
 
-$btn-font-weight:             $font-weight-normal;
+$btn-font-weight:             $font-weight-bold;
 $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
 $btn-focus-width:             $input-btn-focus-width;
 $btn-focus-box-shadow:        $input-btn-focus-box-shadow;
@@ -1141,6 +1144,18 @@ $foe-nav-logo-height-medium: $foe-nav-height-medium*3/5;
 $foe-nav-logo-height-large:  $foe-nav-height-large*3/5;
 $foe-nav-logo-height-large-scrolled: $foe-nav-height-large-scrolled*3/5; // Hence can be the same size of navbar when scrolled
 
+// Manually add in all header variants based on bootstrap-named breakpoints.
+// Likely prone to change in the Bootstrap 5+ refactor.
+
+// @TODO / @REFACTOR / @BS5
+$foe-header-heights: (
+  xs: $foe-nav-height-small,
+  sm: $foe-nav-height-small,
+  md: $foe-nav-height-medium,
+  lg: $foe-nav-height-large-scrolled,
+  xl: $foe-nav-height-large-scrolled,
+  xxl: $foe-nav-height-large-scrolled
+);
 
 // CTA button
 $foe-nav-cta-height-small: 35px;