aw-front-helpers 2.4.2 → 2.5.0

package/Readme.md

@@ -6,12 +6,12 @@ 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
   - **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/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/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/index.js

@@ -1,7 +1,6 @@
-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 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.2",
+  "version": "2.5.0",
   "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;
-  }
 }
 
 // -------------------------
@@ -207,13 +198,14 @@ $vertical-spacing-desktop: 80px !default;
 }
 
 @mixin imageCover {
+  @include absolute;
   width: 100%;
   height: 100%;
   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%;
@@ -233,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/_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