aw-front-helpers 2.5.10 → 2.5.11

package/Readme.md

@@ -1,6 +1,13 @@
-![Logo](https://www.awstudio.fr/files/logo_5bf827234607f.png)
+<div align="center">
+
+# AW Studio - AW Front Helpers
+
+[![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)
+
+[![NODE version](https://img.shields.io/node/v/aw-front-starter)](https://gitlab.com/awstudio/aw-front-starter) 
+
+</div>
 
-# Front helpers
 A library of functionalities for common tasks in Javascript / Sass.
 
 ## Table of contents
@@ -22,10 +29,8 @@ A library of functionalities for common tasks in Javascript / Sass.
     - regex
     - helpers
 
-### stylesheets
-Using [Sass](http://sass-lang.com/)
-
-[See the documentation](https://gitlab.com/awstudio/front-helpers/tree/master/stylesheets/Readme.md)
+### Stylesheets
+Using [Sass](http://sass-lang.com/) - [See the documentation](https://gitlab.com/awstudio/front-helpers/tree/master/stylesheets/Readme.md)
 
   - functions | General mixins
   - medias | Media queries variables and mixins

package/bootstraper/Readme.md

@@ -1,15 +1,28 @@
-![Logo](https://www.awstudio.fr/files/logo_5bf827234607f.png)
+<div align="center">
+
+# AW Front Helpers - Bootstraper
+
+[![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>
+
+## Google Maps
+
+```js
+import { BootstraperMaps } from 'aw-front-helpers';
+
+BootstraperMaps.load('{googleKeyApi}', library[]).then( initMap ).catch(console.error);
+```
 
-# Bootstraper
-## maps
-- `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 { BootstraperYoutube } from 'aw-front-helpers'
-- `BootstraperYoutube.load().then( initPlayer )` to initialize
+## Youtube
+```js
+import { BootstraperYoutube } from 'aw-front-helpers';
+
+BootstraperYoutube.load().then( initPlayer ).catch(console.error);
+```

package/classes/Readme.md

@@ -1,27 +1,49 @@
-![Logo](https://www.awstudio.fr/files/logo_5bf827234607f.png)
+<div align="center">
+
+# AW Front Helpers - Classes
+
+[![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>
 
-# classes
 ## formControl
 Based on HTML5 basic options for inputs (required, type...).
 
-- `import FormControl from 'aw-front-helpers';` to import
-- `new FormControl(this._el, {options})`;
+```js
+import { FormControl } from 'aw-front-helpers';
+
+new FormControl(this._el, {options})
+```
 
 ## globalParallax
-- `import GParallax from 'aw-front-helpers';` to import
-- `GParallax.start()` to instantiate
+
+```js
+import { GParallax } from 'aw-front-helpers';
+
+GParallax.start();
+```
+
 - 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
 
 ## nearby
-- `import Nearby from 'aw-front-helpers';` to import
-- `new Nearby(this._el, {options})`;
+
+```js
+import { Nearby } from 'aw-front-helpers';
+
+new Nearby(this._el, {options});
+```
 
 ## sticky
-- `import Sticky from 'aw-front-helpers';` to import
-- `new Sticky({options})`;
+
+```js
+import { Sticky } from 'aw-front-helpers';
+
+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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-front-helpers",
-  "version": "2.5.10",
+  "version": "2.5.11",
   "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,6 +1,11 @@
-![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
@@ -16,6 +21,7 @@
 - $breakpoint-desktop
 - $breakpoint-desktop-header
 - $breakpoint-desktop-xl
+- $breakpoint-desktop-xxl
 
 **Mixins**
 - mobile
@@ -26,6 +32,7 @@
 - desktop-header
 - desktop
 - desktop-xl
+- desktop-xxl
 
 ## mixins.scss
 **Variables:**
@@ -48,11 +55,10 @@
 - resetList
 - resetBtn
 - size
-- centerBlock
 - absolute
 - fixed
 - hidden
 - visible
-- unselectable
-- clearfix
 - imageCover
+- loader
+- hideAccess

package/stylesheets/_mixins.scss

@@ -150,12 +150,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,19 +178,6 @@ $vertical-spacing-desktop: 80px !default;
   visibility: visible;
 }
 
-@mixin unselectable {
-  cursor: default;
-  user-select: none;
-}
-
-@mixin clearfix {
-  &::after {
-    clear: both;
-    content: "";
-    display: table;
-  }
-}
-
 @mixin imageCover {
   @include absolute;
   width: 100%;
@@ -231,18 +212,22 @@ $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;
-  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;
+  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;
   }
 }

package/utils/Readme.md

@@ -1,4 +1,9 @@
-![Logo](https://www.awstudio.fr/files/logo_5bf827234607f.png)
+<div align="center">
 
-# Utils
-`import utils from 'aw-front-helpers/utils';` to import
+# AW Front Helpers - Utils
+
+[![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>
+
+`import { utils } from 'aw-front-helpers/utils';`