aw-front-helpers 2.5.10 → 2.5.12

package/classes/nearby.js

@@ -12,21 +12,26 @@
 /**
  * Distance between two points P1 (x1,y1) and P2 (x2,y2).
  */
-const distancePoints = (x1, y1, x2, y2) => Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
+const distancePoints = (x1, y1, x2, y2) =>
+  Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
 
 // from http://www.quirksmode.org/js/events_properties.html#position
 const getMousePos = (e) => {
-  var posx = 0, posy = 0;
+  var posx = 0,
+    posy = 0;
   if (!e) var e = window.event;
   if (e.pageX || e.pageY) {
     posx = e.pageX;
     posy = e.pageY;
+  } else if (e.clientX || e.clientY) {
+    posx =
+      e.clientX +
+      document.body.scrollLeft +
+      document.documentElement.scrollLeft;
+    posy =
+      e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
   }
-  else if (e.clientX || e.clientY) {
-    posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
-    posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
-  }
-  return { x: posx, y: posy }
+  return { x: posx, y: posy };
 };
 
 export default class Nearby {
@@ -36,33 +41,44 @@ export default class Nearby {
     this.init();
   }
   init() {
-    this.mousemoveFn = (ev) => requestAnimationFrame(() => {
-      const mousepos = getMousePos(ev);
-      const docScrolls = { left: document.body.scrollLeft + document.documentElement.scrollLeft, top: document.body.scrollTop + document.documentElement.scrollTop };
-      const elRect = this.DOM.el.getBoundingClientRect();
-      const elCoords = {
-        x1: elRect.left + docScrolls.left, x2: elRect.width + elRect.left + docScrolls.left,
-        y1: elRect.top + docScrolls.top, y2: elRect.height + elRect.top + docScrolls.top
-      };
-      const closestPoint = { x: mousepos.x, y: mousepos.y };
+    this.mousemoveFn = (ev) =>
+      requestAnimationFrame(() => {
+        const mousepos = getMousePos(ev);
+        const docScrolls = {
+          left: document.body.scrollLeft + document.documentElement.scrollLeft,
+          top: document.body.scrollTop + document.documentElement.scrollTop,
+        };
+        const elRect = this.DOM.el.getBoundingClientRect();
+        const elCoords = {
+          x1: elRect.left + docScrolls.left,
+          x2: elRect.width + elRect.left + docScrolls.left,
+          y1: elRect.top + docScrolls.top,
+          y2: elRect.height + elRect.top + docScrolls.top,
+        };
+        const closestPoint = { x: mousepos.x, y: mousepos.y };
 
-      if (mousepos.x < elCoords.x1) {
-        closestPoint.x = elCoords.x1;
-      }
-      else if (mousepos.x > elCoords.x2) {
-        closestPoint.x = elCoords.x2;
-      }
-      if (mousepos.y < elCoords.y1) {
-        closestPoint.y = elCoords.y1;
-      }
-      else if (mousepos.y > elCoords.y2) {
-        closestPoint.y = elCoords.y2;
-      }
-      if (this.options.onProgress) {
-        this.options.onProgress(distancePoints(mousepos.x, mousepos.y, closestPoint.x, closestPoint.y))
-      }
-    });
+        if (mousepos.x < elCoords.x1) {
+          closestPoint.x = elCoords.x1;
+        } else if (mousepos.x > elCoords.x2) {
+          closestPoint.x = elCoords.x2;
+        }
+        if (mousepos.y < elCoords.y1) {
+          closestPoint.y = elCoords.y1;
+        } else if (mousepos.y > elCoords.y2) {
+          closestPoint.y = elCoords.y2;
+        }
+        if (this.options.onProgress) {
+          this.options.onProgress(
+            distancePoints(
+              mousepos.x,
+              mousepos.y,
+              closestPoint.x,
+              closestPoint.y
+            )
+          );
+        }
+      });
 
     window.addEventListener('mousemove', this.mousemoveFn);
   }
-}
+}

package/classes/sticky.js

@@ -1,4 +1,4 @@
-import debounce from "debounce";
+import debounce from 'debounce';
 import EventEmitter from 'events';
 
 export default class Sticky extends EventEmitter {
@@ -10,7 +10,7 @@ export default class Sticky extends EventEmitter {
       el: window.document,
       breakpointDisabled: null,
       topHeightAdjustement: 0,
-      ...options
+      ...options,
     };
 
     this._isDisabled = false;
@@ -45,9 +45,9 @@ export default class Sticky extends EventEmitter {
   }
 
   destroy() {
-    window.removeEventListener("scroll", this._onScrollHandler);
-    window.removeEventListener("resize", this._onResize);
-    this._dom.el.classList.remove("is-sticky", "is-sticky-end");
+    window.removeEventListener('scroll', this._onScrollHandler);
+    window.removeEventListener('resize', this._onResize);
+    this._dom.el.classList.remove('is-sticky', 'is-sticky-end');
     this._dom.el.style.top = null;
     this._dom.el.style.width = null;
   }
@@ -56,65 +56,80 @@ export default class Sticky extends EventEmitter {
   // -
   _onScrollHandler() {
     if (this._isDisabled) return;
-    this._vars.scrollY = window.pageYOffset;
-    requestAnimationFrame(this._onScroll)
+    this._vars.scrollY = window.scrollY;
+    requestAnimationFrame(this._onScroll);
   }
 
   _onScroll() {
     if (this._isDisabled) return;
-    const positionSticky = this._cache.containerTop - this._vars.scrollY - this._options.topHeightAdjustement;
+    const positionSticky =
+      this._cache.containerTop -
+      this._vars.scrollY -
+      this._options.topHeightAdjustement;
     const stickyFilter = positionSticky < 0;
 
-    const stickyBottomWrapperPage = this._vars.scrollY + this._vars.height > this._cache.wrapperTop + this._cache.wrapperHeight;
-    const stickyBottomElement = this._vars.scrollY + this._options.topHeightAdjustement + this._cache.containerHeight > this._cache.wrapperTop + this._cache.wrapperHeight;
+    const stickyBottomWrapperPage =
+      this._vars.scrollY + this._vars.height >
+      this._cache.wrapperTop + this._cache.wrapperHeight;
+    const stickyBottomElement =
+      this._vars.scrollY +
+        this._options.topHeightAdjustement +
+        this._cache.containerHeight >
+      this._cache.wrapperTop + this._cache.wrapperHeight;
     const stickyEndFilter = stickyBottomWrapperPage && stickyBottomElement;
     if (this._cache.wrapperHeight < this._cache.containerHeight) {
-      this._dom.el.classList.remove("is-sticky", "is-sticky-end");
+      this._dom.el.classList.remove('is-sticky', 'is-sticky-end');
       return;
     }
 
     if (stickyFilter && !this._isSticky) {
       this._isSticky = true;
-      this._dom.el.classList.add("is-sticky");
+      this._dom.el.classList.add('is-sticky');
       this._dom.el.style.top = `${this._options.topHeightAdjustement}px`;
       this._dom.el.style.width = `${this._cache.containerWidth}px`;
     } else if (!stickyFilter && this._isSticky) {
       this._isSticky = false;
       this._dom.el.style.top = null;
       this._dom.el.style.width = null;
-      this._dom.el.classList.remove("is-sticky");
+      this._dom.el.classList.remove('is-sticky');
     }
     if (stickyEndFilter && !this._isEndSticky) {
       this._isEndSticky = true;
       this._dom.el.style.top = null;
       this._dom.el.style.width = null;
-      this._dom.el.classList.add("is-sticky-end");
+      this._dom.el.classList.add('is-sticky-end');
     } else if (!stickyEndFilter && this._isEndSticky) {
       this._isEndSticky = false;
       this._dom.el.style.top = `${this._options.topHeightAdjustement}px`;
       this._dom.el.style.width = `${this._cache.containerWidth}px`;
-      this._dom.el.classList.remove("is-sticky-end");
+      this._dom.el.classList.remove('is-sticky-end');
     }
   }
 
   _onResize() {
-    if (this._options.breakpointDisabled && window.innerWidth < this._options.breakpointDisabled) {
+    if (
+      this._options.breakpointDisabled &&
+      window.innerWidth < this._options.breakpointDisabled
+    ) {
       this._setDisabled();
       return;
     }
     this._isSticky = false;
     this._isEndSticky = false;
-    this._dom.el.classList.remove("is-sticky", "is-sticky-end");
+    this._dom.el.classList.remove('is-sticky', 'is-sticky-end');
     this._dom.el.style.width = null;
     setTimeout(() => {
       const boudingWrapper = this._dom.wrapper.getBoundingClientRect();
       const boudingContainer = this._dom.el.getBoundingClientRect();
       this._vars = {
-        scrollY: window.pageYOffset || document.documentElement.scrollTop,
+        scrollY: window.scrollY || document.documentElement.scrollTop,
         height: window.innerHeight || document.documentElement.clientHeight,
       };
       this._cache = {
-        windowHeight: window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName("body")[0],
+        windowHeight:
+          window.innerHeight ||
+          document.documentElement.clientHeight ||
+          document.getElementsByTagName('body')[0],
         containerTop: boudingContainer.top + this._vars.scrollY,
         containerHeight: boudingContainer.height,
         containerWidth: boudingContainer.width,
@@ -135,13 +150,15 @@ export default class Sticky extends EventEmitter {
   //________________________________________________________ private
   // -
   _createBound() {
-    ["_onScroll", "_onScrollHandler", "_onResize"].forEach((fn) => (this[fn] = this[fn].bind(this)));
+    ['_onScroll', '_onScrollHandler', '_onResize'].forEach(
+      (fn) => (this[fn] = this[fn].bind(this))
+    );
   }
 
   _setDisabled() {
     if (this._isDisabled) return;
     this._isDisabled = true;
-    this._dom.el.classList.remove("is-sticky", "is-sticky-end");
+    this._dom.el.classList.remove('is-sticky', 'is-sticky-end');
     this._dom.el.style.top = null;
     this._dom.el.style.width = null;
     this.emit('disable');
@@ -149,14 +166,16 @@ export default class Sticky extends EventEmitter {
 
   _grabDom() {
     this._dom = {};
-    this._dom.el = this._options.el.querySelector("[data-sticker-element]");
-    this._dom.wrapper = this._options.el.querySelector("[data-sticker-wrapper]");
+    this._dom.el = this._options.el.querySelector('[data-sticker-element]');
+    this._dom.wrapper = this._options.el.querySelector(
+      '[data-sticker-wrapper]'
+    );
   }
 
   _addEvents() {
     setTimeout(() => {
-      window.addEventListener("scroll", this._onScrollHandler);
-      window.addEventListener("resize", this._onResize);
+      window.addEventListener('scroll', this._onScrollHandler);
+      window.addEventListener('resize', this._onResize);
     });
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-front-helpers",
-  "version": "2.5.10",
+  "version": "2.5.12",
   "description": "Assets helpers for projects",
   "author": "Yoann Le Poupon",
   "license": "ISC",
@@ -12,6 +12,6 @@
   "dependencies": {
     "es6-symbol": "^3.1.3",
     "exif-js": "^2.3.0",
-    "gsap": "^3.12.1"
+    "gsap": "^3.12.3"
   }
 }

package/stylesheets/Readme.md

@@ -1,23 +1,35 @@
-![Logo](https://www.awstudio.fr/files/logo_5bf827234607f.png)
+<div align="center">
+
+# AW Front Helpers - Stylesheets
+
+[![Gitlab](https://img.shields.io/badge/Gitlab-aw--front--helpers-blue?style=for-the-badge&logo=gitlab&logoColor=white&labelColor=222261&color=white)](https://gitlab.com/awstudio/aw-front-helpers)
+
+</div>
 
-# Stylesheets
 ## functions.scss
+
 **Variables**
+
 - px-base
 
 **Functions**
+
 - rem
 - em
 
 ## medias.scss
+
 **Variables**
+
 - $breakpoint-phablet
 - $breakpoint-tablet
 - $breakpoint-desktop
 - $breakpoint-desktop-header
 - $breakpoint-desktop-xl
+- $breakpoint-desktop-xxl
 
 **Mixins**
+
 - mobile
 - phablet
 - tablet
@@ -26,9 +38,12 @@
 - desktop-header
 - desktop
 - desktop-xl
+- desktop-xxl
 
 ## mixins.scss
+
 **Variables:**
+
 - $wrapper-max
 - $wrapper-width-sm
 - $wrapper-width-md
@@ -38,6 +53,7 @@
 - $vertical-spacing-desktop
 
 **Mixins**
+
 - wrapper
 - vertical-spacing
   - vertical-spacing-top
@@ -48,11 +64,10 @@
 - resetList
 - resetBtn
 - size
-- centerBlock
 - absolute
 - fixed
 - hidden
 - visible
-- unselectable
-- clearfix
 - imageCover
+- loader
+- hideAccess

package/stylesheets/_functions.scss

@@ -4,9 +4,9 @@
 $px-base: 16 !default;
 
 @function rem($pxval) {
-  @return math.div($pxval, $px-base ) * 1rem;
+  @return math.div($pxval, $px-base) * 1rem;
 }
 
 @function em($pxval) {
-  @return math.div($pxval, $px-base ) * 1em;
-}
+  @return math.div($pxval, $px-base) * 1em;
+}

package/stylesheets/_medias.scss

@@ -1,7 +1,7 @@
 // VARIABLES
 $breakpoint-phablet: 480px !default;
-$breakpoint-tablet: 768px  !default;
-$breakpoint-desktop: 1024px  !default;
+$breakpoint-tablet: 768px !default;
+$breakpoint-desktop: 1024px !default;
 $breakpoint-desktop-xl: 1280px !default;
 $breakpoint-desktop-xxl: 1440px !default;
 $breakpoint-burger: 1100px !default;
@@ -13,25 +13,65 @@ $breakpoint-burger: 1100px !default;
 $media-query: 'only screen and';
 
 // Queries string
-$mobile:          '#{$media-query} (max-width: #{$breakpoint-tablet - 1})';
-$phablet:         '#{$media-query} (min-width: #{$breakpoint-phablet})';
-$tablet:          '#{$media-query} (min-width: #{$breakpoint-tablet})';
-$tablet-max :     '#{$media-query} (max-width: #{$breakpoint-desktop - 1})';
-$tablet-only:     '#{$media-query} (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1})';
-$desktop:         '#{$media-query} (min-width: #{$breakpoint-desktop})';
-$desktop-xl:      '#{$media-query} (min-width: #{$breakpoint-desktop-xl})';
-$desktop-xxl:     '#{$media-query} (min-width: #{$breakpoint-desktop-xxl})';
-$burger-enable:   '#{$media-query} (max-width: #{$breakpoint-burger - 1})';
-$burger-disable:  '#{$media-query} (min-width: #{$breakpoint-burger})';
+$mobile: '#{$media-query} (max-width: #{$breakpoint-tablet - 1})';
+$phablet: '#{$media-query} (min-width: #{$breakpoint-phablet})';
+$tablet: '#{$media-query} (min-width: #{$breakpoint-tablet})';
+$tablet-max: '#{$media-query} (max-width: #{$breakpoint-desktop - 1})';
+$tablet-only: '#{$media-query} (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1})';
+$desktop: '#{$media-query} (min-width: #{$breakpoint-desktop})';
+$desktop-xl: '#{$media-query} (min-width: #{$breakpoint-desktop-xl})';
+$desktop-xxl: '#{$media-query} (min-width: #{$breakpoint-desktop-xxl})';
+$burger-enable: '#{$media-query} (max-width: #{$breakpoint-burger - 1})';
+$burger-disable: '#{$media-query} (min-width: #{$breakpoint-burger})';
 
 // Mixins media queries
-@mixin mobile         { @media #{$mobile}         { @content; } }
-@mixin phablet        { @media #{$phablet}        { @content; } }
-@mixin tablet         { @media #{$tablet}         { @content; } }
-@mixin tablet-max     { @media #{$tablet-max}     { @content; } }
-@mixin tablet-only    { @media #{$tablet-only}    { @content; } }
-@mixin desktop        { @media #{$desktop}        { @content; } }
-@mixin desktop-xl     { @media #{$desktop-xl}     { @content; } }
-@mixin desktop-xxl    { @media #{$desktop-xxl}     { @content; } }
-@mixin burger-enable  { @media #{$burger-enable}  { @content; } }
-@mixin burger-disable { @media #{$burger-disable} { @content; } }
+@mixin mobile {
+  @media #{$mobile} {
+    @content;
+  }
+}
+@mixin phablet {
+  @media #{$phablet} {
+    @content;
+  }
+}
+@mixin tablet {
+  @media #{$tablet} {
+    @content;
+  }
+}
+@mixin tablet-max {
+  @media #{$tablet-max} {
+    @content;
+  }
+}
+@mixin tablet-only {
+  @media #{$tablet-only} {
+    @content;
+  }
+}
+@mixin desktop {
+  @media #{$desktop} {
+    @content;
+  }
+}
+@mixin desktop-xl {
+  @media #{$desktop-xl} {
+    @content;
+  }
+}
+@mixin desktop-xxl {
+  @media #{$desktop-xxl} {
+    @content;
+  }
+}
+@mixin burger-enable {
+  @media #{$burger-enable} {
+    @content;
+  }
+}
+@mixin burger-disable {
+  @media #{$burger-disable} {
+    @content;
+  }
+}

package/stylesheets/_mixins.scss

@@ -11,7 +11,6 @@ $vertical-spacing-mobile: 50px !default;
 $vertical-spacing-tablet: 60px !default;
 $vertical-spacing-desktop: 80px !default;
 
-
 // ------------------------------------------------------------
 // MIXINS
 // ------------------------------------------------------------
@@ -41,26 +40,26 @@ $vertical-spacing-desktop: 80px !default;
 }
 
 @mixin vertical-spacing-top($facteur: 1) {
-  margin-top: $vertical-spacing-mobile*$facteur;
+  margin-top: $vertical-spacing-mobile * $facteur;
 
   @include tablet {
-    margin-top: $vertical-spacing-tablet*$facteur;
+    margin-top: $vertical-spacing-tablet * $facteur;
   }
 
   @include desktop {
-    margin-top: $vertical-spacing-desktop*$facteur;
+    margin-top: $vertical-spacing-desktop * $facteur;
   }
 }
 
 @mixin vertical-spacing-bottom($facteur: 1) {
-  margin-bottom: $vertical-spacing-mobile*$facteur;
+  margin-bottom: $vertical-spacing-mobile * $facteur;
 
   @include tablet {
-    margin-bottom: $vertical-spacing-tablet*$facteur;
+    margin-bottom: $vertical-spacing-tablet * $facteur;
   }
 
   @include desktop {
-    margin-bottom: $vertical-spacing-desktop*$facteur;
+    margin-bottom: $vertical-spacing-desktop * $facteur;
   }
 }
 
@@ -70,26 +69,26 @@ $vertical-spacing-desktop: 80px !default;
 }
 
 @mixin vertical-spacing-inner-top($facteur: 1) {
-  padding-top: $vertical-spacing-mobile*$facteur;
+  padding-top: $vertical-spacing-mobile * $facteur;
 
   @include tablet {
-    padding-top: $vertical-spacing-tablet*$facteur;
+    padding-top: $vertical-spacing-tablet * $facteur;
   }
 
   @include desktop {
-    padding-top: $vertical-spacing-desktop*$facteur;
+    padding-top: $vertical-spacing-desktop * $facteur;
   }
 }
 
 @mixin vertical-spacing-inner-bottom($facteur: 1) {
-  padding-bottom: $vertical-spacing-mobile*$facteur;
+  padding-bottom: $vertical-spacing-mobile * $facteur;
 
   @include tablet {
-    padding-bottom: $vertical-spacing-tablet*$facteur;
+    padding-bottom: $vertical-spacing-tablet * $facteur;
   }
 
   @include desktop {
-    padding-bottom: $vertical-spacing-desktop*$facteur;
+    padding-bottom: $vertical-spacing-desktop * $facteur;
   }
 }
 
@@ -142,7 +141,7 @@ $vertical-spacing-desktop: 80px !default;
   $width: nth($value, 1);
   $height: $width;
 
-  @if length($value)>1 {
+  @if length($value) >1 {
     $height: nth($value, 2);
   }
 
@@ -150,12 +149,6 @@ $vertical-spacing-desktop: 80px !default;
   height: $height;
 }
 
-@mixin centerBlock {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 @mixin absolute {
   position: absolute;
   top: 0;
@@ -184,26 +177,21 @@ $vertical-spacing-desktop: 80px !default;
   visibility: visible;
 }
 
-@mixin unselectable {
-  cursor: default;
-  user-select: none;
+@mixin imageCover {
+  @include absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 @mixin clearfix {
   &::after {
     clear: both;
-    content: "";
+    content: '';
     display: table;
   }
 }
 
-@mixin imageCover {
-  @include absolute;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 @mixin loader($color: $color-main, $scale: 1, $position: after) {
   &::#{$position} {
     content: '';
@@ -211,7 +199,7 @@ $vertical-spacing-desktop: 80px !default;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
-    border: rem(3 * $scale) solid rgba($color, .1);
+    border: rem(3 * $scale) solid rgba($color, 0.1);
     border-top: rem(3 * $scale) solid rgba($color, 1);
     border-radius: 50%;
     width: rem(30 * $scale);
@@ -221,6 +209,27 @@ $vertical-spacing-desktop: 80px !default;
   }
 }
 
+@mixin hideAccess {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+  &.sr-focusable:focus {
+    clip: auto !important;
+    clip-path: none !important;
+    height: auto !important;
+    margin: auto !important;
+    overflow: visible !important;
+    width: auto !important;
+    white-space: normal !important;
+  }
+}
+
 @keyframes loaderAnimation {
   0% {
     transform: translateX(-50%) translateY(-50%) rotate(0deg);
@@ -229,20 +238,3 @@ $vertical-spacing-desktop: 80px !default;
     transform: translateX(-50%) translateY(-50%) rotate(360deg);
   }
 }
-
-@mixin hideAccess {
-  position: absolute !important;
-  clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
-  height: rem(1);
-  width: rem(1);
-  word-wrap: normal;
-
-  &.focusable:focus {
-    position: static !important;
-    clip: auto;
-    overflow: visible;
-    height: auto;
-    width: auto;
-  }
-}