embla-carousel - npm Package Compare versions

Comparing version 1.0.9 to 2.0.0

lib/components/mover.d.ts

@@ -17,4 +17,6 @@ import { Direction } from './direction';
     useDefaultSpeed: () => Mover;
+    useMass: (newMass: number) => Mover;
+    useDefaultMass: () => Mover;
 };
 export declare function Mover(params: Params): Mover;
 export {};

lib/index.d.ts

 import { Callback as EmblaCallback, Event as EmblaEvent } from './components/eventDispatcher';
 import { UserOptions } from './components/options';
+declare type ScrollSnap = {
+    slideNodes: HTMLElement[];
+    slideIndexes: number[];
+};
 export declare type EmblaCarousel = {
-    next: () => void;
-    previous: () => void;
-    goTo: (index: number) => void;
+    scrollSnapList: () => ScrollSnap[];
+    scrollNext: () => void;
+    scrollPrev: () => void;
+    scrollTo: (index: number) => void;
     destroy: () => void;
     containerNode: () => HTMLElement;
     slideNodes: () => HTMLElement[];
-    selectedIndex: () => number;
-    previousIndex: () => number;
-    groupedIndexes: () => number[][];
+    selectedScrollSnap: () => number;
+    previousScrollSnap: () => number;
     canScrollNext: () => boolean;
-    canScrollPrevious: () => boolean;
+    canScrollPrev: () => boolean;
     on: (evt: EmblaEvent, cb: EmblaCallback) => void;
@@ -16,0 +20,0 @@ off: (evt: EmblaEvent, cb: EmblaCallback) => void;

lib/index.js

@@ -403,3 +403,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-      _extends(slider, engine);
+      var newSlider = _extends(slider, engine);
 
@@ -464,3 +464,3 @@ eventStore.add(window, 'resize', debouncedResize);
       sliderRoot.scrollLeft = 0;
-      goTo(selectedGroup);
+      scrollTo(selectedGroup);
     };
@@ -517,59 +517,68 @@
 
-  function next() {
-    slider.mover.useDefaultSpeed();
-    slider.travel.toNext();
+  function scrollSnapList() {
+    return slider.indexGroups.map(function (g) {
+      return {
+        slideIndexes: g,
+        slideNodes: g.map(function (i) {
+          return elements.slides[i];
+        })
+      };
+    });
   }
 
-  function previous() {
-    slider.mover.useDefaultSpeed();
-    slider.travel.toPrevious();
+  function canScrollPrev() {
+    var index = slider.index;
+    return !options.loop && index.get() !== index.min;
   }
 
-  function goTo(index) {
-    slider.mover.useDefaultSpeed();
-    slider.travel.toIndex(index);
+  function canScrollNext() {
+    var index = slider.index;
+    return !options.loop && index.get() !== index.max;
   }
 
-  function containerNode() {
-    return elements.container;
+  function scrollNext() {
+    slider.mover.useDefaultMass().useDefaultSpeed();
+    slider.travel.toNext();
   }
 
-  function slideNodes() {
-    return elements.slides;
+  function scrollPrev() {
+    slider.mover.useDefaultMass().useDefaultSpeed();
+    slider.travel.toPrevious();
   }
 
-  function selectedIndex() {
+  function scrollTo(index) {
+    slider.mover.useDefaultMass().useDefaultSpeed();
+    slider.travel.toIndex(index);
+  }
+
+  function selectedScrollSnap() {
     return slider.index.get();
   }
 
-  function previousIndex() {
+  function previousScrollSnap() {
     return slider.indexPrevious.get();
   }
 
-  function groupedIndexes() {
-    return slider.indexGroups;
+  function containerNode() {
+    return elements.container;
   }
 
-  function canScrollPrevious() {
-    return !options.loop && selectedIndex() !== slider.index.min;
+  function slideNodes() {
+    return elements.slides;
   }
 
-  function canScrollNext() {
-    return !options.loop && selectedIndex() !== slider.index.max;
-  }
-
   var self = {
     canScrollNext: canScrollNext,
-    canScrollPrevious: canScrollPrevious,
+    canScrollPrev: canScrollPrev,
     changeOptions: changeOptions,
     containerNode: containerNode,
     destroy: destroy,
-    goTo: goTo,
-    groupedIndexes: groupedIndexes,
-    next: next,
     off: off,
     on: on,
-    previous: previous,
-    previousIndex: previousIndex,
-    selectedIndex: selectedIndex,
+    previousScrollSnap: previousScrollSnap,
+    scrollNext: scrollNext,
+    scrollPrev: scrollPrev,
+    scrollSnapList: scrollSnapList,
+    scrollTo: scrollTo,
+    selectedScrollSnap: selectedScrollSnap,
     slideNodes: slideNodes
@@ -716,6 +725,5 @@ };
   var target = vector1d_1.Vector1D(startLocation);
-  var vectors = [location, target];
   var mover = mover_1.Mover({
     location: location,
-    mass: 1.5,
+    mass: 1,
     maxForce: chunkSize.root * 2,
@@ -772,3 +780,3 @@ speed: speed
       span: contentSize,
-      vectors: vectors
+      vectors: [location, target]
     }),
@@ -1010,7 +1018,8 @@ index: index,
   var startY = vector1d_1.Vector1D(0);
+  var dragStartLocation = vector1d_1.Vector1D(0);
   var activationEvents = eventStore_1.EventStore();
   var interactionEvents = eventStore_1.EventStore();
   var snapForceBoost = {
-    mouse: 2,
-    touch: 2.8
+    mouse: 2.5,
+    touch: 3.5
   };
@@ -1085,13 +1094,18 @@ var freeForceBoost = {
   function down(evt) {
-    var evtTarget = evt.target,
-        type = evt.type;
-    state.isMouse = !!type.match(/mouse/);
+    var node = evt.target;
+    var diffToTarget = target.get() - location.get();
+    var isMoving = Math.abs(diffToTarget) >= 2;
+    state.isMouse = !!evt.type.match(/mouse/);
     pointer.down(evt);
+    dragStartLocation.set(target);
     target.set(location);
-    state.preventClick = false;
+    mover.useDefaultMass();
     state.isDown = true;
-    mover.useSpeed(70);
+    mover.useSpeed(80).useDefaultMass();
     animation.start();
     addInteractionEvents();
     events.dispatch('dragStart');
+    if (isMoving) evt.preventDefault();
+    if (!isMoving) state.preventClick = false;
+    if (state.isMouse && !isFocusNode(node)) evt.preventDefault();
 
@@ -1101,4 +1115,2 @@ if (!state.isMouse) {
       startY.set(pointer.read(evt, 'y'));
-    } else if (!isFocusNode(evtTarget)) {
-      evt.preventDefault();
     }
@@ -1122,3 +1134,3 @@ }
       state.preventScroll = diffX > diffY;
-      if (!state.preventScroll) up();
+      if (!state.preventScroll && !state.preventClick) up();
     }
@@ -1132,5 +1144,4 @@ }
     var speed = movementSpeed();
-    var diffToTarget = Math.abs(target.get() - location.get());
-    var minDiffToTarget = 1;
-    var isMoving = diffToTarget <= minDiffToTarget;
+    var diffToTarget = target.get() - dragStartLocation.get();
+    var isMoving = Math.abs(diffToTarget) >= 0.5;
     if (isMoving) state.preventClick = true;
@@ -1202,3 +1213,3 @@ state.isMouse = false;
         v.setNumber(constraint);
-        mover.useSpeed(10);
+        mover.useSpeed(10).useMass(3);
         animation.start();
@@ -1467,3 +1478,4 @@ state.timeout = 0;
   var state = {
-    speed: speed
+    speed: speed,
+    mass: mass
   };
@@ -1479,3 +1491,3 @@
   function applyForce(force) {
-    force.divide(mass);
+    force.divide(state.mass);
     acceleration.add(force);
@@ -1513,2 +1525,12 @@ return self;
 
+  function useMass(desired) {
+    state.mass = desired;
+    return self;
+  }
+
+  function useDefaultMass() {
+    useMass(mass);
+    return self;
+  }
+
   var self = {
@@ -1520,3 +1542,5 @@ direction: direction,
     update: update,
+    useDefaultMass: useDefaultMass,
     useDefaultSpeed: useDefaultSpeed,
+    useMass: useMass,
     useSpeed: useSpeed
@@ -1523,0 +1547,0 @@ };

package.json

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

README.md

@@ -144,10 +144,10 @@ <br />
 
-**`align`** (string: start | center | end)  
-Align the slides relative to the carousel viewport.
+**`align`** (string)  
+Align the slides relative to the carousel viewport. Possible values are **'start'**, **'center'** and **'end'**.
 
-**`containerSelector`** (string: querySelectorString)  
+**`containerSelector`** (string)  
 The selector to use for the container that holds the slides. Embla will use all immediate children of this node as slides.
 
 **`slidesToScroll`** (number)  
-Scrolls past given number of slides whether scroll is triggered by **next()**, **previous** or **goTo()** methods as well as drag interactions.
+Scrolls past given number of slides whether scroll is triggered by **scrollNext()**, **scrollPrev()** or **scrollTo()** methods as well as drag interactions.
 
@@ -163,3 +163,3 @@ **`draggable`** (boolean)
 
-**`speed`** (number: 5 - 20)  
+**`speed`** (number)  
 Carousel speed when using buttons to navigate. A higher number will make transitions faster. Pointer events are not affected by this.
@@ -184,7 +184,7 @@
 ```javascript
-embla.next()
-embla.goTo(2)
+embla.scrollNext()
+embla.scrollTo(2)
 embla.changeOptions({ loop: true })
 embla.on('select', () => {
-  console.log(`Selected index is now ${embla.selectedIndex()}!`)
+  console.log(`Selected scroll is now ${embla.selectedScroll()}!`)
 })
@@ -201,30 +201,30 @@ ```
 
-**`next()`**  
-Moves to next item. If `loop: false` and the carousel is on the last slide this method will do nothing.
+**`scrollNext()`**  
+Scrolls to next snap point if possible. If `loop: false` and the carousel is on the last snap point this method will do nothing.
 
-**`previous()`**  
-Moves to previous item. If `loop: false` and the carousel is on the first slide this method will do nothing.
+**`scrollPrev()`**  
+Scrolls to previous snap point if possible. If `loop: false` and the carousel is on the first snap point this method will do nothing.
 
-**`goTo(index: number)`**  
-Moves to item that matches passed index. If `loop: true` the carousel will seek the closest way to the passed index.
+**`scrollTo(index)`**  
+Scrolls to the snap point that matches the passed index. If `loop: true` the carousel will seek the closest way to the target.
 
-**`selectedIndex()`**  
-Returns the current selected index. Each index contains multiple slides if `slidesToScroll > 1`. If `slidesToScroll: 1` each slide has its own index. Zero-based.
+**`canScrollPrev()`**  
+Returns if it's possible to scroll to a previous snap point. Note that if `loop: true` this will always return `true`.
 
-**`previousIndex()`**  
-Returns the previous selected index. Each index contains multiple slides if `slidesToScroll: > 1`. If `slidesToScroll: 1` each slide has its own index. Zero-based.
+**`canScrollNext()`**  
+Returns if it's possible to scroll to a next snap point. Note that if `loop: true` this will always return `true`.
 
-**`groupedIndexes()`**  
-Returns an array of all slide indexes grouped into arrays according to the `slidesToScroll` option, i.e. if the total number of slides is `4` and `slidesToScroll: 2`, it will return `[[0, 1], [2, 3]]`.
+**`selectedScrollSnap()`**  
+Returns the index of the selected snap point. Each snap point scrolls more than one slide if `slidesToScroll > 1`. Zero-based.
 
-**`canScrollPrevious()`**  
-Returns if it's possible to scroll to previous from here. Note that if `loop: true` this will always return `true`.
+**`previousScrollSnap()`**  
+Returns the index of the previous snap point. Each snap point scrolls more than one slide if `slidesToScroll > 1`. Zero-based.
 
-**`canScrollNext()`**  
-Returns if it's possible to scroll to next from here. Note that if `loop: true` this will always return `true`.
+**`scrollSnapList()`**  
+Returns an array of all scroll snap points, each containing slide numbers and slide nodes. If total slide count is `4` and `slidesToScroll: 2`, it means that every scroll snap point contains `2` slides because any scroll triggered by **scrollNext()** or **scrollPrev()** will scroll `2` slides at a time.
 
-**`changeOptions(options: options)`**  
+**`changeOptions(options)`**  
 Applies passed options by doing all the necessary calculations and reinitialising the carousel from scratch.
 
-**`on(event: string, callback: function)`**  
+**`on(event, callback)`**  
 Subscribes to a custom Embla event by firing the passed callback. Below is a list of events you can subscribe to:
@@ -239,3 +239,3 @@
 
-**`off(event: string, callback: function)`**  
+**`off(event, callback)`**  
 Ends subscription to a custom Embla event by removing the passed callback. This works for all events listed on the **on** method.
@@ -242,0 +242,0 @@

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

70267

increased by1.55%

Lines of code

1964

increased by1.45%

No dependency changes