@creative-web-solution/front-library 6.2.13 → 6.2.15

package/CHANGELOG.md

@@ -1,9 +1,21 @@
 # CHANGELOG
 
+
+## 6.2.15
+
+* DragSlider: Make GSAP optional
+
+
+## 6.2.14
+
+* Remove Modernizr
+
+
 ## 6.2.13
 
 * Autocomplete: Add method ajax call option
 
+
 ## 6.2.12
 
 * Fix import name

package/DOM/matrix.js

@@ -1,4 +1,5 @@
 import { prop } from '@creative-web-solution/front-library/DOM/Styles';
+import { transformPropertyName } from '../Tools/PrefixedProperties';
 
 /**
  * @typedef {Object} matrix_Object
@@ -47,11 +48,7 @@ import { prop } from '@creative-web-solution/front-library/DOM/Styles';
 export function getMatrix( $elem ) {
     let matrixString, c, matrix;
 
-    if ( !Modernizr || Modernizr.prefixed ) {
-        throw 'Missing dependency: Modernizr.prefixed';
-    }
-
-    matrixString = prop( $elem, Modernizr.prefixed( 'transform' ) );
+    matrixString = prop( $elem, transformPropertyName );
     c = matrixString.split( /\s*[(),]\s*/ ).slice( 1, -1 );
 
     if ( c.length === 6 ) {

package/Modules/DragSlider.js

@@ -5,7 +5,48 @@ import { gesture, gestureOff }    from '@creative-web-solution/front-library/Eve
 import { prop }                   from '@creative-web-solution/front-library/DOM/Styles';
 import { aClass, rClass, tClass } from '@creative-web-solution/front-library/DOM/Class';
 import { on, off }                from '@creative-web-solution/front-library/Events/EventsManager';
+import { extend }                 from '@creative-web-solution/front-library/Helpers/extend';
 
+const IS_TOUCH_DEVICE = !window.matchMedia('(hover:hover)').matches;
+
+const defaultOptions = {
+    swipeTresholdMin: 40,
+    swipeTresholdSize: 0.5,
+    lockedClass: 'is-locked',
+    _animReset: function($list) {
+        gsap.set( $list, {
+            "x": 0,
+            "y": 0,
+            "z": 0
+        } );
+    },
+    _animClear: function($list) {
+        gsap.set( $list, {
+            "clearProps": "all"
+        } );
+    },
+    _animKill: function($list) {
+        gsap.killTweensOf( $list );
+    },
+    _animMoveItem: function($list, x, onUpdate) {
+        gsap.to( $list, {
+            "duration": 0.3,
+            "x":        x,
+            "y":        0,
+            "z":        0,
+            "onUpdate": function() {
+                onUpdate(gsap.getProperty( this.targets()[ 0 ], 'x' ));
+            }
+        } );
+    },
+    _setCoordinates: function($list, x) {
+        gsap.set( $list, {
+            "x": x,
+            "y": 0,
+            "z": 0
+        } );
+    }
+}
 
 /**
  * DragSlider
@@ -30,7 +71,7 @@ import { on, off }                from '@creative-web-solution/front-library/Eve
  * @param {Number} [options.swipeTresholdMin=40] - in px
  * @param {Number} [options.swipeTresholdSize=0.5] - in % (0.5 = 50% of the size of one item)
  */
-export function DragSlider( $slider, options ) {
+export function DragSlider( $slider, userOptions ) {
     let itemMap, itemArray, listDelta, viewportInfo,
         $items, $list, $viewport, startDragCoords, deltaMove,
         currentSnapItem, firstItem,
@@ -44,9 +85,7 @@ export function DragSlider( $slider, options ) {
 
     isDraggingActive         = false;
 
-    options.swipeTresholdMin  = options.swipeTresholdMin || 40;
-    options.swipeTresholdSize = options.swipeTresholdSize || 0.5;
-    options.lockedClass       = options.lockedClass || 'is-locked';
+    const options = extend( defaultOptions, userOptions );
 
     itemArray = [];
 
@@ -78,12 +117,9 @@ export function DragSlider( $slider, options ) {
 
         if ( !isDraggingActive ) {
             isDragging = false;
-            gsap.killTweensOf( $list );
-            gsap.set( $list, {
-                "x": 0,
-                "y": 0,
-                "z": 0
-            } );
+
+            options._animKill( $list );
+            options._animReset( $list );
         }
 
         tClass( $slider, options.lockedClass, !isDraggingActive );
@@ -147,22 +183,16 @@ export function DragSlider( $slider, options ) {
             "isAtEnd":     IS_SNAP_TO_END
         } );
 
-        gsap.to( $list, {
-            "duration": 0.3,
-            "x":        finalX,
-            "y":        0,
-            "z":        0,
-            "onUpdate": function() {
-                deltaMove.x = gsap.getProperty( this.targets()[ 0 ], 'x' );
-
-                options.onSnapUpdate?.( {
-                    "item":        snapItem,
-                    "xPos":        deltaMove.x,
-                    "moveMaxSize": listDelta,
-                    "isAtStart":   IS_SNAP_TO_START,
-                    "isAtEnd":     IS_SNAP_TO_END
-                } );
-            }
+        options._animMoveItem( $list, finalX, (newX) => {
+            deltaMove.x = newX;
+
+            options.onSnapUpdate?.( {
+                "item":        snapItem,
+                "xPos":        deltaMove.x,
+                "moveMaxSize": listDelta,
+                "isAtStart":   IS_SNAP_TO_START,
+                "isAtEnd":     IS_SNAP_TO_END
+            } );
         } );
 
         currentSnapItem = snapItem;
@@ -293,7 +323,7 @@ export function DragSlider( $slider, options ) {
 
         isDragging = true;
 
-        gsap.killTweensOf( $list );
+        options._animKill( $list );
 
         startDragCoords = coords;
         listDelta       = viewportInfo.width - $list.scrollWidth;
@@ -306,8 +336,8 @@ export function DragSlider( $slider, options ) {
                     return false;
                 }
 
-                return !Modernizr.touchdevice ||
-                        Modernizr.touchdevice && Math.abs( deltaMove.deltaY ) < Math.abs( deltaMove.deltaX );
+                return !IS_TOUCH_DEVICE ||
+                        IS_TOUCH_DEVICE && Math.abs( deltaMove.deltaY ) < Math.abs( deltaMove.deltaX );
             }
         } );
 
@@ -336,11 +366,7 @@ export function DragSlider( $slider, options ) {
             deltaMove.newX = listDelta;
         }
 
-        gsap.set( $list, {
-            "x": deltaMove.newX,
-            "y": 0,
-            "z": 0
-        } );
+        options._setCoordinates($list, deltaMove.newX);
 
         options.onDrag?.( {
             "item":        currentSnapItem,
@@ -449,23 +475,17 @@ export function DragSlider( $slider, options ) {
             "isAtEnd":     deltaMove.x === listDelta
         } );
 
-        gsap.to( $list, {
-            "duration": 0.3,
-            "x":        -1 * ITEM.info.left + siteOffset,
-            "y":        0,
-            "z":        0,
-            "onUpdate": function() {
-                deltaMove.x = gsap.getProperty( this.targets()[ 0 ], 'x' );
-
-                options.onSnapUpdate?.( {
-                    "item":        ITEM,
-                    "xPos":        deltaMove.x,
-                    "moveMaxSize": listDelta,
-                    "isAtStart":   deltaMove.x === 0,
-                    "isAtEnd":     deltaMove.x === listDelta
-                } );
-            }
-        } );
+        options._animMoveItem($list, -1 * ITEM.info.left + siteOffset, (x) => {
+            deltaMove.x = x;
+
+            options.onSnapUpdate?.( {
+                "item":        ITEM,
+                "xPos":        deltaMove.x,
+                "moveMaxSize": listDelta,
+                "isAtStart":   deltaMove.x === 0,
+                "isAtEnd":     deltaMove.x === listDelta
+            } );
+        })
     };
 
 
@@ -566,12 +586,8 @@ export function DragSlider( $slider, options ) {
             "callback":   onMouseleave
         } );
 
-
-        gsap.killTweensOf( $list );
-
-        gsap.set( $list, {
-            "clearProps": "all"
-        } );
+        options._animKill( $list );
+        options._animClear( $list );
 
         rClass( $viewport, options.dragClass );
 

package/Modules/Popin.js

@@ -9,8 +9,7 @@ import { template } from '@creative-web-solution/front-library/Modules/template'
 
 let $body = document.body;
 
-const CLICK_EVENT_NAME =
-    window.Modernizr && window.Modernizr.touchdevice ? 'touchend' : 'click';
+const CLICK_EVENT_NAME = window.matchMedia('(hover:hover)').matches ? 'click' : 'touchend';
 
 const FOCUSABLE_ELEMENTS = 'a, button, input, select, textarea';
 

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 6.2.13
+@version: 6.2.15
 
 
 ## Use

package/package.json

@@ -2,7 +2,7 @@
   "name": "@creative-web-solution/front-library",
   "title": "Frontend library",
   "description": "Frontend functions and modules",
-  "version": "6.2.13",
+  "version": "6.2.15",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],