aw-front-helpers 2.5.11 → 2.5.13

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.11",
+  "version": "2.5.13",
   "description": "Assets helpers for projects",
   "author": "Yoann Le Poupon",
   "license": "ISC",
@@ -14,4 +14,4 @@
     "exif-js": "^2.3.0",
     "gsap": "^3.12.3"
   }
-}
+}

package/stylesheets/Readme.md

@@ -7,15 +7,20 @@
 </div>
 
 ## functions.scss
+
 **Variables**
+
 - px-base
 
 **Functions**
+
 - rem
 - em
 
 ## medias.scss
+
 **Variables**
+
 - $breakpoint-phablet
 - $breakpoint-tablet
 - $breakpoint-desktop
@@ -24,6 +29,7 @@
 - $breakpoint-desktop-xxl
 
 **Mixins**
+
 - mobile
 - phablet
 - tablet
@@ -35,7 +41,9 @@
 - desktop-xxl
 
 ## mixins.scss
+
 **Variables:**
+
 - $wrapper-max
 - $wrapper-width-sm
 - $wrapper-width-md
@@ -45,6 +53,7 @@
 - $vertical-spacing-desktop
 
 **Mixins**
+
 - wrapper
 - vertical-spacing
   - vertical-spacing-top

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;
   }
 }
 
@@ -115,7 +114,7 @@ $vertical-spacing-desktop: 80px !default;
   width: auto;
   overflow: visible;
   background: transparent;
-  color: inherit;
+  color: currentColor;
   font: inherit;
   line-height: normal;
   text-align: center;
@@ -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);
   }
 
@@ -185,6 +184,14 @@ $vertical-spacing-desktop: 80px !default;
   object-fit: cover;
 }
 
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: '';
+    display: table;
+  }
+}
+
 @mixin loader($color: $color-main, $scale: 1, $position: after) {
   &::#{$position} {
     content: '';
@@ -192,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);
@@ -202,15 +209,6 @@ $vertical-spacing-desktop: 80px !default;
   }
 }
 
-@keyframes loaderAnimation {
-  0% {
-    transform: translateX(-50%) translateY(-50%) rotate(0deg);
-  }
-  100% {
-    transform: translateX(-50%) translateY(-50%) rotate(360deg);
-  }
-}
-
 @mixin hideAccess {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
@@ -230,4 +228,13 @@ $vertical-spacing-desktop: 80px !default;
     width: auto !important;
     white-space: normal !important;
   }
-}
+}
+
+@keyframes loaderAnimation {
+  0% {
+    transform: translateX(-50%) translateY(-50%) rotate(0deg);
+  }
+  100% {
+    transform: translateX(-50%) translateY(-50%) rotate(360deg);
+  }
+}

package/stylesheets/_reset.scss

@@ -1,19 +1,88 @@
 $px-base: 16 !default;
 $color-link: black !default;
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video, hr {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video,
+hr {
   margin: 0;
   padding: 0;
   border: 0;
@@ -23,13 +92,29 @@ time, mark, audio, video, hr {
 :after {
   box-sizing: border-box;
 }
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section, main, form legend {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+main,
+form legend {
   display: block;
 }
-blockquote, q { quotes: none; }
-blockquote:before, blockquote:after,
-q:before, q:after {
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
   content: '';
   content: none;
 }
@@ -49,25 +134,32 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
-video, svg {
+video,
+svg {
   max-width: 100%;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-size: rem($px-base);
 }
 
 a {
   text-decoration: none;
-  color: $color-link;
+  color: currentColor;
   &:focus,
   &:hover {
-    color: $color-link;
+    color: currentColor;
   }
 }
 
 .sprite {
-  &, svg {
+  &,
+  svg {
     display: inline-block;
     width: 100%;
     height: 100%;
@@ -82,4 +174,4 @@ a {
 .sf-dump {
   position: relative;
   z-index: 2;
-}
+}

package/stylesheets/_sticky.scss

@@ -12,4 +12,4 @@
     bottom: 0;
     top: auto;
   }
-}
+}