embla-carousel - npm Package Compare versions

Comparing version 0.7.7 to 0.7.8

lib/components/dragBehaviour.d.ts

@@ -13,2 +13,4 @@ import { Animation } from './animation';
     target: Vector1D;
+    dragFree: boolean;
+    groupSizes: number[];
     pointer: Pointer;
@@ -15,0 +17,0 @@ location: Vector1D;

lib/index.js

@@ -390,3 +390,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
     var userOpt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var firstInit = !state.active;
+    var isFirstInit = !state.active;
     state.lastWindowWidth = window.innerWidth;
@@ -407,24 +407,10 @@ storeElements();
       eventStore.add(window, 'resize', debouncedResize);
-      slides.forEach(slideFocus);
+      slides.forEach(slideFocusEvent);
       slider.translate.to(slider.mover.location);
+      if (options.draggable) activateDragFeature();
+      if (options.loop) slider.shifter.shiftInfinite(slides);
 
-      if (options.draggable) {
-        var dragging = options.draggingClass;
-        slider.pointer.addActivationEvents();
-        root.classList.add(options.draggableClass);
-        events.on('dragStart', function () {
-          return root.classList.add(dragging);
-        });
-        events.on('dragEnd', function () {
-          return root.classList.remove(dragging);
-        });
-      }
-
-      if (options.loop) {
-        slider.shifter.shiftInfinite(slides);
-      }
-
-      if (firstInit) {
+      if (isFirstInit) {
         events.on('select', toggleSelectedClass);
-        toggleSelectedClass();
+        events.on('init', toggleSelectedClass);
         setTimeout(function () {
@@ -437,2 +423,16 @@ return events.dispatch('init');
 
+  function activateDragFeature() {
+    var root = elements.root.classList;
+    var draggingClass = options.draggingClass,
+        draggableClass = options.draggableClass;
+    slider.pointer.addActivationEvents();
+    events.on('dragStart', function () {
+      return root.add(draggingClass);
+    });
+    events.on('dragEnd', function () {
+      return root.remove(draggingClass);
+    });
+    root.add(draggableClass);
+  }
+
   function toggleSelectedClass() {
@@ -454,3 +454,3 @@ var slides = elements.slides;
 
-  function slideFocus(slide, index) {
+  function slideFocusEvent(slide, index) {
     var focus = function focus() {
@@ -728,4 +728,6 @@ var groupIndex = Math.floor(index / options.groupSlides);
     animation: animation,
+    dragFree: dragFree,
     element: root,
     events: events,
+    groupSizes: groupSizes,
     index: index,
@@ -973,2 +975,4 @@ limit: limit,
 
+var direction_1 = __webpack_require__(1);
+
 var eventStore_1 = __webpack_require__(3);
@@ -983,3 +987,5 @@
       events = params.events;
-  var locationAtDragStart = params.locationAtDragStart;
+  var locationAtDragStart = params.locationAtDragStart,
+      dragFree = params.dragFree,
+      animation = params.animation;
   var direction = pointer.direction;
@@ -991,2 +997,19 @@ var focusNodes = ['INPUT', 'SELECT', 'TEXTAREA'];
   var interactionEvents = eventStore_1.EventStore();
+  var snapForceBoost = {
+    mouse: 2,
+    touch: 2.8
+  };
+  var freeForceBoost = {
+    mouse: 4,
+    touch: 7
+  };
+  var snapSpeed = {
+    mouse: 12,
+    touch: 15
+  };
+  var freeSpeed = {
+    mouse: 6,
+    touch: 5
+  };
+  var dragForceThreshold = 5;
   var state = {
@@ -1023,6 +1046,28 @@ isDown: false,
 
+  function movementSpeed() {
+    var speed = dragFree ? freeSpeed : snapSpeed;
+    var type = state.isMouse ? 'mouse' : 'touch';
+    return speed[type];
+  }
+
+  function pointerForceBoost() {
+    var boost = dragFree ? freeForceBoost : snapForceBoost;
+    var type = state.isMouse ? 'mouse' : 'touch';
+    return boost[type];
+  }
+
+  function minAllowedForce(force) {
+    var groupSizes = params.groupSizes,
+        index = params.index;
+    var forceAbs = Math.abs(force);
+    var halfGroup = groupSizes[index.get()] / 2;
+    var aboveThreshold = forceAbs > dragForceThreshold;
+    var belowHalfGroup = forceAbs < halfGroup;
+    var forceToNext = halfGroup * direction_1.Direction(force).get();
+    return !dragFree && aboveThreshold && belowHalfGroup ? forceToNext : force;
+  }
+
   function down(evt) {
-    var animation = params.animation;
     var node = evt.target;
-    state.isMouse = evt.type === 'mousedown';
+    state.isMouse = !!evt.type.match(/mouse/);
     pointer.down(evt);
@@ -1067,4 +1112,5 @@ locationAtDragStart.set(location);
         mover = params.mover;
-    var force = pointer.up() * (state.isMouse ? 2 : 2.8);
-    var speed = state.isMouse ? 12 : 15;
+    var boostedForce = pointer.up() * pointerForceBoost();
+    var force = minAllowedForce(boostedForce);
+    var speed = movementSpeed();
     state.isMouse = false;
@@ -1559,4 +1605,2 @@ state.preventScroll = false;
 
-var direction_1 = __webpack_require__(1);
-
 function TargetFinder(params) {
@@ -1585,3 +1629,3 @@ var location = params.location,
 
-  function offsetToGroupPosition(target) {
+  function offsetToTargetGroup(target) {
     var distance = target.distance,
@@ -1596,3 +1640,3 @@ index = target.index;
 
-  function findTargetAt(targetDistance) {
+  function findTargetGroupAt(targetDistance) {
     var _params$limit = params.limit,
@@ -1620,15 +1664,2 @@ reachedMin = _params$limit.reachedMin,
 
-  function freeDistance(from, force) {
-    var targetDistance = location.get() + force;
-    var distance = location.get() + force - from;
-
-    var _findTargetAt = findTargetAt(targetDistance),
-        index = _findTargetAt.index;
-
-    return {
-      distance: distance,
-      index: index
-    };
-  }
-
   function minDistance(d1, d2) {
@@ -1675,36 +1706,27 @@ return Math.abs(d1) < Math.abs(d2) ? d1 : d2;
     var target = params.target,
-        dragFree = params.dragFree;
-    var forceAbs = Math.abs(force);
-    var halfGroup = params.groupSizes[params.index.get()] / 2;
-    var dragForceThreshold = 5;
-    var minForce = !dragFree && forceAbs > dragForceThreshold && forceAbs < halfGroup ? halfGroup * direction_1.Direction(force).get() : force;
-    var targetDistance = location.get() + minForce;
-    var _params$limit2 = params.limit,
-        reachedAny = _params$limit2.reachedAny,
-        reachedMax = _params$limit2.reachedMax;
+        dragFree = params.dragFree,
+        limit = params.limit,
+        index = params.index;
+    var reachedAny = limit.reachedAny,
+        reachedMax = limit.reachedMax;
+    var targetDistance = location.get() + force;
+    var freeDistance = targetDistance - from;
+    var targetGroup = findTargetGroupAt(targetDistance);
+    var reachedEdge = !loop && reachedAny(targetDistance);
 
-    if (!loop && reachedAny(targetDistance)) {
-      var _params$index = params.index,
-          min = _params$index.min,
-          max = _params$index.max;
-      var index = reachedMax(targetDistance) ? min : max;
-
-      var _freeDistance = freeDistance(from, force),
-          distance = _freeDistance.distance;
-
+    if (reachedEdge || dragFree) {
+      var min = index.min,
+          max = index.max;
+      var edgeIndex = reachedMax(targetDistance) ? min : max;
+      var targetIndex = reachedEdge ? edgeIndex : targetGroup.index;
       return {
-        distance: distance,
-        index: index
+        distance: freeDistance,
+        index: targetIndex
       };
     } else {
-      if (dragFree) return freeDistance(from, force);
-      var targetGroup = findTargetAt(targetDistance);
-      var offset = offsetToGroupPosition(targetGroup);
-
-      var _distance3 = targetDistance + offset - target.get();
-
-      var _index = targetGroup.index;
+      var offset = offsetToTargetGroup(targetGroup);
+      var snapDistance = targetDistance + offset - target.get();
       return {
-        distance: _distance3,
-        index: _index
+        distance: snapDistance,
+        index: targetGroup.index
       };
@@ -1711,0 +1733,0 @@ }

package.json

 {
   "name": "embla-carousel",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "author": "David Cetinkaya",
@@ -5,0 +5,0 @@ "private": false,

README.md

 <p align="center">
   <br>
   <a href="https://davidcetinkaya.github.io/embla-carousel/" target="_blank">
-    <img width="90" src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/embla-logo.svg" alt="Embla Carousel">
+    <img width="70" src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/embla-logo.svg" alt="Embla Carousel">
   </a>
@@ -169,6 +169,6 @@ </p>
 **`selectedIndex()`**  
-Returns the current selected index. Each index contains multiple slides if `groupSlides` options is set to more than `1`. If `groupCells` is set to `1` each slide has its own index. Zero-based.
+Returns the current selected index. Each index contains multiple slides if `groupSlides` options is set to more than `1`. If `groupSlides` is set to `1` each slide has its own index. Zero-based.
 
 **`previousIndex()`**  
-Returns the previous selected index. Each index contains multiple slides if `groupSlides` options is set to more than `1`. If `groupCells` is set to `1` each slide has its own index. Zero-based.
+Returns the previous selected index. Each index contains multiple slides if `groupSlides` options is set to more than `1`. If `groupSlides` is set to `1` each slide has its own index. Zero-based.
 
@@ -175,0 +175,0 @@ **`groupedIndexes()`**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66453

increased by1.02%

Lines of code

1925

increased by1.53%

No dependency changes