aw-front-helpers 2.5.0 → 2.5.2

package/Readme.md

@@ -12,6 +12,7 @@ A library of functionalities for common tasks in Javascript / Sass.
     - 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/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/index.js

@@ -1,4 +1,4 @@
 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.Sticky = require('./sticky').default;

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,6 +1,7 @@
 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.5.0",
+  "version": "2.5.2",
   "description": "Assets helpers for projects",
   "author": "Yoann Le Poupon",
   "license": "ISC",

package/stylesheets/_sticky.scss

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