aw-front-helpers 2.4.3 → 2.5.1

package/Readme.md

@@ -6,12 +6,13 @@ A library of functionalities for common tasks in Javascript / Sass.
 ## Table of contents
 ### Javascripts
   - **bootstraper** [See the documentation](https://gitlab.com/awstudio/front-helpers/tree/master/bootstraper/Readme.md)
-    - maps | Allow the initialization of the Bootstraper Google Map
-    - youtube | Allow the initialization of the Bootstraper Youtube Iframe
+    - Maps | Allow the initialization of the Bootstraper Google Map
+    - Youtube | Allow the initialization of the Bootstraper Youtube Iframe
   - **classes** [See the documentation](https://gitlab.com/awstudio/front-helpers/tree/master/classes/Readme.md)
-    - formControl | A Javascript form validation class
-    - globalParallax | A Parallax animation library
-    - nearby | A librairy to animate element depending on the position of the mouse
+    - FormControl | A Javascript form validation class
+    - GParallax | A Parallax animation library
+    - Nearby | A librairy to animate element depending on the position of the mouse
+    - Sticky | A librairy to sticky an element on scroll
   - **utils** [See the documentation](https://gitlab.com/awstudio/front-helpers/tree/master/utils/Readme.md)
     - array
     - dom

package/bootstraper/Readme.md

@@ -2,14 +2,14 @@
 
 # Bootstraper
 ## maps
-- `import bootstraperMaps from 'aw-front-helpers/bootstraper/maps';` to import
-- `bootstraperMaps(googleKeyApi).then( initMap )` to initialize
-- you can specified libraries to load in second parameters `bootstraperMaps(googleKeyApi, [library, library]).then( initMap )` [Libraries](https://developers.google.com/maps/documentation/javascript/libraries)
+- `import { BootstraperMaps } from 'aw-front-helpers'
+- `bootstraperMaps.load('googleKeyApi', library[]).then( initMap )` to initialize
+- you can specified libraries to load in second parameters [Libraries](https://developers.google.com/maps/documentation/javascript/libraries)
   - drawing
   - geometry
   - places
   - visualization
 
 ## youtube
-- `import bootstraperYT from 'aw-front-helpers/bootstraper/youtube';` to import
-- `bootstraperYT().then( initPlayer )` to initialize
+- `import { BootstraperYoutube } from 'aw-front-helpers'
+- `BootstraperYoutube.load().then( initPlayer )` to initialize

package/bootstraper/index.js

@@ -1,2 +1,4 @@
-module.exports.bootstraperMaps = require('./maps').default;
-module.exports.bootstraperYoutube = require('./youtube').default;
+module.exports = {
+  bootstraperMaps: require('./maps').default,
+  bootstraperYoutube: require('./youtube').default
+}

package/bootstraper/maps.js

@@ -25,7 +25,7 @@ class bootstraperMaps {
   }
 
   _init() {
-    let tag = document.createElement('script'),
+    const tag = document.createElement('script'),
       firstScriptTag = document.getElementsByTagName('script')[0],
       libs = this._libraries ? `&libraries=${this._libraries.join(',')}` : ``;
     tag.src = `https://maps.googleapis.com/maps/api/js?key=${this._googleAPIKey}${libs}&callback=onMapsReady`;

package/bootstraper/youtube.js

@@ -25,7 +25,7 @@ class bootstraperYoutube {
   }
 
   _init() {
-    let tag = document.createElement('script'),
+    const tag = document.createElement('script'),
       firstScriptTag = document.getElementsByTagName('script')[0];
     tag.src = 'https://www.youtube.com/iframe_api';
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

package/classes/Readme.md

@@ -4,22 +4,28 @@
 ## formControl
 Based on HTML5 basic options for inputs (required, type...).
 
-- `import FormControl from 'aw-front-helpers/classes/formControl';` to import
-- `class MyClass extends FormControl` to extend the formControl class to your class
-- You must define `this._parentElementClass`: Defines a wrapper with an input and an error message
+- `import FormControl from 'aw-front-helpers';` to import
+- `new FormControl(this._el, {options})`;
 
 ## globalParallax
-- `import GParallax from 'aw-front-helpers/classes/globalParallax';` to import
+- `import GParallax from 'aw-front-helpers';` to import
 - `GParallax.start()` to instantiate
 - in your HTML element, you need define some atribute
   - `data-prllx-item` with option `data-speed` and `data-delta-start` (speed between 0 and 2): HTML element, moves vertically
   - `data-prllx-item-hz` with option `data-speed` and `data-delta-start` (speed between 0 and 2): HTML element, moves horizontally
   - `data-prllx-bg` with options `data-delta-start` and `data-delta-end`: defines a background-image to an element
 
-## modelsManager
-- `import ModelsManager from 'aw-front-helpers/classes/modelsManager';` to import
-- `class MyModule extends ModelsManager` to extend
-
 ## nearby
-- `import nearby from 'aw-front-helpers/classes/nearby';` to import
+- `import Nearby from 'aw-front-helpers';` to import
 - `new Nearby(this._el, {options})`;
+
+## sticky
+- `import Sticky from 'aw-front-helpers';` to import
+- `new Sticky({options})`;
+- need to define `[data-attributes]`
+  - `[data-sticker-wrapper]` sticky wrapper of the element
+  - `[data-sticker-element]` element you want stick in the wrapper
+- Options:
+  - `el`: specific for the querysSelector
+  - `breakpointDisabled` defined a disabled breakpoint
+  - `topHeightAdjustement` like to define an sticky overlap header

package/classes/formControl.js

@@ -1,10 +1,6 @@
-import {
-  gsap
-} from 'gsap/all';
+import { gsap } from 'gsap/all';
 import ScrollToPlugin from 'gsap/ScrollToPlugin';
 gsap.registerPlugin(ScrollToPlugin);
-import create from 'dom-create-element';
-import getClosest from '../utils/dom/getClosest';
 import regex_email from '../utils/regex/email';
 
 const defaultOptions = {
@@ -103,27 +99,26 @@ export default class FormControl {
   }
 
   setError(element, message = null) {
-    const parent = getClosest(element, this._options.selectorGroup);
-    if (parent) {
-      let error = parent.querySelector(`.${this._options.classErrorElement}`);
-      if (!error) {
-        error = create({
-          selector: 'ul',
-          styles: this._options.classErrorElement
-        });
-        parent.appendChild(error);
-      }
-      parent.classList.add(this._options.classIsError);
+    const parent = element.closest(this._options.selectorGroup);
+    if( parent === null ) return;
+    let error = parent.querySelector(`.${this._options.classErrorElement}`);
+    if (!error) {
+      error = Object.assign(
+        document.createElement('ul'), {
+        className: this._options.classErrorElement
+      });
+      parent.appendChild(error);
+    }
+    parent.classList.add(this._options.classIsError);
 
-      const previousErrors = [...error.querySelectorAll('li')];
-      for (let i = 0; i < previousErrors.length; i++) {
-        if (previousErrors[i].innerHTML === message) return;
-      }
-      if (message) {
-        const errorElement = document.createElement('li');
-        errorElement.innerHTML = message;
-        error.appendChild(errorElement);
-      }
+    const previousErrors = [...error.querySelectorAll('li')];
+    for (let i = 0; i < previousErrors.length; i++) {
+      if (previousErrors[i].innerHTML === message) return;
+    }
+    if (message) {
+      const errorElement = document.createElement('li');
+      errorElement.innerHTML = message;
+      error.appendChild(errorElement);
     }
   }
 
@@ -160,7 +155,8 @@ export default class FormControl {
   /** @private */
   _removeError(el = null) {
     if (el) {
-      const group = getClosest(el, this._options.selectorGroup);
+      const group = el.closest( this._options.selectorGroup );
+      if( group === null ) return;
       group.classList.remove(this._options.classIsError);
       const currentErrors = [...group.querySelectorAll(`.${this._options.classErrorElement}`)];
       currentErrors.forEach(error => {
@@ -181,7 +177,7 @@ export default class FormControl {
 
   /** @private */
   _checkError(el) {
-    const group = getClosest(el, this._options.selectorGroup);
+    const group = el.closest(this._options.selectorGroup);
     if (group === null) return false;
     if (el.getAttribute('disabled') !== null) return false;
 

package/classes/globalParallax.js

@@ -1,6 +1,5 @@
 import Symbol from 'es6-symbol';
 import EventEmitter from 'events';
-import raf from 'raf';
 
 // singleton
 let singleton = Symbol();
@@ -16,7 +15,6 @@ class GParallax extends EventEmitter {
       throw 'Global Parallax: Cannot construct singleton';
     }
     super();
-    this._raf = null;
   }
 
   static getInstance() {
@@ -69,7 +67,7 @@ class GParallax extends EventEmitter {
 
   _onScroll() {
     this._vars.scrollY = window.pageYOffset;
-    this._raf = raf(this._update);
+    window.requestAnimationFrame(this._update);
   }
 
   _update() {

package/classes/index.js

@@ -1,4 +1,5 @@
 module.exports.GParallax = require('./globalParallax').default;
 module.exports.Nearby = require('./nearby').default;
 module.exports.FormControl = require('./formControl').default;
-module.exports.ModelsManager = require('./modelsManager').default;
+module.exports.ModelsManager = require('./modelsManager').default;
+module.exports.Sticky = require('./sticky').default;

package/classes/nearby.js

@@ -29,7 +29,7 @@ const getMousePos = (e) => {
   return { x: posx, y: posy }
 };
 
-class Nearby {
+export default class Nearby {
   constructor(el, options) {
     this.DOM = { el: el };
     this.options = options;
@@ -65,6 +65,4 @@ class Nearby {
 
     window.addEventListener('mousemove', this.mousemoveFn);
   }
-}
-
-export default Nearby;
+}

package/classes/sticky.js

@@ -0,0 +1,156 @@
+import debounce from "debounce";
+import EventEmitter from 'events';
+
+export default class Sticky extends EventEmitter {
+  //________________________________________________________ constructor
+  // -
+  constructor(options = {}) {
+    super();
+    this._options = {
+      el: window.document,
+      breakpointDisabled: null,
+      topHeightAdjustement: 0,
+      ...options
+    };
+
+    this._isDisabled = false;
+    this._isSticky = false;
+    this._isEndSticky = false;
+    this._onResize = debounce(this._onResize, 200);
+
+    this._createBound();
+    this._grabDom();
+    this._addEvents();
+    this._onResize();
+  }
+
+  //________________________________________________________ public
+  // -
+  get options() {
+    return this._options;
+  }
+
+  set breakpointDisabled( breakpoint ) {
+    this._options.breakpointDisabled = breakpoint;
+    this.update();
+  }
+
+  set topHeightAdjustement( height ) {
+    this._options.topHeightAdjustement = height;
+    this.update();
+  }
+
+  update() {
+    this._onResize();
+  }
+
+  destroy() {
+    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;
+  }
+
+  //________________________________________________________ events
+  // -
+  _onScrollHandler() {
+    if (this._isDisabled) return;
+    this._vars.scrollY = window.pageYOffset;
+    requestAnimationFrame(this._onScroll)
+  }
+
+  _onScroll() {
+    if (this._isDisabled) return;
+    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 stickyEndFilter = stickyBottomWrapperPage && stickyBottomElement;
+    if (this._cache.wrapperHeight < this._cache.containerHeight) {
+      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.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");
+    }
+    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");
+    } 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");
+    }
+  }
+
+  _onResize() {
+    if (this._options.breakpointDisabled && window.innerWidth < this._options.breakpointDisabled) {
+      if (!this._isDisabled) {
+        this._isDisabled = true;
+        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');
+      }
+      return;
+    }
+    if (this._isDisabled) {
+      this._isDisabled = false;
+      this.emit('enable');
+    }
+
+    this._isSticky = false;
+    this._isEndSticky = false;
+    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,
+        height: window.innerHeight || document.documentElement.clientHeight,
+      };
+      this._cache = {
+        windowHeight: window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName("body")[0],
+        containerTop: boudingContainer.top + this._vars.scrollY,
+        containerHeight: boudingContainer.height,
+        containerWidth: boudingContainer.width,
+        wrapperTop: boudingWrapper.top + this._vars.scrollY,
+        wrapperHeight: boudingWrapper.height,
+      };
+      this._onScrollHandler();
+    });
+  }
+  //________________________________________________________ private
+  // -
+  _createBound() {
+    ["_onScroll", "_onScrollHandler", "_onResize"].forEach((fn) => (this[fn] = this[fn].bind(this)));
+  }
+
+  _grabDom() {
+    this._dom = {};
+    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);
+    });
+  }
+}

package/index.js

@@ -1,7 +1,7 @@
-module.exports.GParallax = require('./classes/globalParallax').default;
-module.exports.Nearby = require('./classes/nearby').default;
-module.exports.FormControl = require('./classes/formControl').default;
-module.exports.ModelsManager = require('./classes/modelsManager').default;
-module.exports.utils = require('./utils');
-module.exports.bootstraperMaps = require('./bootstraper/maps').default;
-module.exports.bootstraperYoutube = require('./bootstraper/youtube').default;
+export const GParallax = require('./classes/globalParallax').default;
+export const Nearby = require('./classes/nearby').default;
+export const FormControl = require('./classes/formControl').default;
+export const Sticky = require('./classes/sticky').default;
+export const BootstraperMaps = require('./bootstraper/maps').default;
+export const BootstraperYoutube = require('./bootstraper/youtube').default;
+export const utils = require('./utils');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-front-helpers",
-  "version": "2.4.3",
+  "version": "2.5.1",
   "description": "Assets helpers for projects",
   "author": "Yoann Le Poupon",
   "license": "ISC",
@@ -10,10 +10,8 @@
     "url": "git@gitlab.com:awstudio/front-helpers.git"
   },
   "dependencies": {
-    "dom-create-element": "^1.0.2",
     "es6-symbol": "^3.1.3",
     "exif-js": "^2.3.0",
-    "gsap": "^3.5.1",
-    "raf": "^3.4.1"
+    "gsap": "^3.10.4"
   }
 }

package/stylesheets/_medias.scss

@@ -2,7 +2,8 @@
 $breakpoint-phablet: 480px !default;
 $breakpoint-tablet: 768px  !default;
 $breakpoint-desktop: 1024px  !default;
-$breakpoint-desktop-xl: 1440px !default;
+$breakpoint-desktop-xl: 1280px !default;
+$breakpoint-desktop-xxl: 1440px !default;
 $breakpoint-burger: 1100px !default;
 
 // ------------------------------------------------------------
@@ -19,6 +20,7 @@ $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})';
 
@@ -30,5 +32,6 @@ $burger-disable:  '#{$media-query} (min-width: #{$breakpoint-burger})';
 @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

@@ -4,7 +4,7 @@ $color-main: #000 !default;
 
 $wrapper-max: 1500px !default;
 $wrapper-width-sm: 95% !default;
-$wrapper-width-md: 90% !default;
+$wrapper-width-md: 95% !default;
 $wrapper-width-lg: 90% !default;
 
 $vertical-spacing-mobile: 50px !default;
@@ -22,11 +22,9 @@ $vertical-spacing-desktop: 80px !default;
   margin-right: auto;
   width: $wrapper-width-sm;
   max-width: $wrapper-max;
-
   @include desktop {
     width: $wrapper-width-md;
   }
-
   @include desktop-xl {
     width: $wrapper-width-lg;
   }
@@ -128,19 +126,12 @@ $vertical-spacing-desktop: 80px !default;
   -webkit-font-smoothing: inherit;
   -moz-osx-font-smoothing: inherit;
   -webkit-appearance: none;
-
   &:not(input) {
     user-select: none;
   }
-
   &:hover {
     text-decoration: none;
   }
-
-  &::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-  }
 }
 
 // -------------------------
@@ -213,8 +204,8 @@ $vertical-spacing-desktop: 80px !default;
   object-fit: cover;
 }
 
-@mixin loader($color: $color-main, $scale: 1) {
-  &::after {
+@mixin loader($color: $color-main, $scale: 1, $position: after) {
+  &::#{$position} {
     content: '';
     position: absolute;
     left: 50%;
@@ -234,7 +225,6 @@ $vertical-spacing-desktop: 80px !default;
   0% {
     transform: translateX(-50%) translateY(-50%) rotate(0deg);
   }
-
   100% {
     transform: translateX(-50%) translateY(-50%) rotate(360deg);
   }

package/stylesheets/_sticky.scss

@@ -0,0 +1,15 @@
+[data-sticker-wrapper] {
+  position: relative;
+}
+[data-sticker-element] {
+  &.is-sticky {
+    position: fixed;
+    z-index: 3;
+  }
+
+  &.is-sticky-end {
+    position: absolute;
+    bottom: 0;
+    top: auto;
+  }
+}

package/stylesheets/_variables.scss

@@ -42,6 +42,7 @@ $breakpoint-phablet: 480px !default;
 $breakpoint-tablet: 768px !default;
 $breakpoint-desktop: 1024px !default;
 $breakpoint-desktop-xl: 1280px !default;
+$breakpoint-desktop-xxl: 1440px !default;
 
 $wrapper-max: 1440px !default;
 

package/utils/Readme.md

@@ -1,7 +1,4 @@
 ![Logo](https://www.awstudio.fr/files/logo_5bf827234607f.png)
 
 # Utils
-`import utils from 'aw-front-helpers/utils';` to import
-
-## dom
-- `utils.dom.getClosest(element, selector)` to get a parent element
+`import utils from 'aw-front-helpers/utils';` to import

package/utils/dom/getClosest.js

@@ -1,5 +1,6 @@
 /**
  * Get the closest matching element up the DOM tree.
+ * @deprecated since version 2.5.0
  * @private
  * @param  {Element} elem     Starting element
  * @param  {String}  selector Selector to match against