embla-carousel - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

lib/components/infiniteShifter.d.ts

 import { ChunkSize } from './chunkSize';
 import { Vector1D } from './vector1d';
 declare type Params = {
-    items: HTMLElement[];
+    alignSizes: number[];
     chunkSize: ChunkSize;
-    itemSizes: number[];
-    alignSizes: number[];
+    contentSize: number;
+    slides: HTMLElement[];
+    slideSizes: number[];
 };
@@ -9,0 +10,0 @@ export declare type InfiniteShifter = {

lib/components/options.d.ts

@@ -9,2 +9,3 @@ import { Alignments } from './alignSize';
     draggingClass: string;
+    groupSlides: number;
     loop: boolean;
@@ -15,14 +16,2 @@ selectedClass: string;
 };
-export declare type UserOptions = {
-    align?: Alignments;
-    containerSelector?: string;
-    dragFree?: boolean;
-    draggable?: boolean;
-    draggableClass?: string;
-    draggingClass?: string;
-    loop?: boolean;
-    selectedClass?: string;
-    speed?: number;
-    startIndex?: number;
-};
 export declare const defaultOptions: Readonly<{
@@ -35,2 +24,3 @@ align: string;
     draggingClass: string;
+    groupSlides: number;
     loop: boolean;
@@ -41,1 +31,2 @@ selectedClass: string;
 }>;
+export declare type UserOptions = Partial<Options>;

lib/components/targetFinder.d.ts

@@ -5,2 +5,3 @@ import { Counter } from './counter';
 declare type Params = {
+    diffSizes: number[];
     dragFree: boolean;
@@ -10,4 +11,4 @@ location: Vector1D;
     loop: boolean;
-    slideSizes: number[];
-    slidePositions: number[];
+    groupSizes: number[];
+    groupPositions: number[];
     span: number;
@@ -22,3 +23,3 @@ limit: Limit;
 export declare type TargetFinder = {
-    byIndex: (target: number) => Target;
+    byIndex: (target: number, direction: number) => Target;
     byDistance: (from: number, distance: number) => Target;
@@ -25,0 +26,0 @@ };

lib/components/utils.d.ts

@@ -5,1 +5,2 @@ export declare function rectWidth(node: HTMLElement): number;
 export declare function debounce(callback: () => void, time: number): () => void;
+export declare function groupNumbers(array: number[], size: number): number[][];

lib/index.js

@@ -202,2 +202,38 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
+var vector1d_1 = __webpack_require__(0);
+
+function Direction(value) {
+  var direction = vector1d_1.Vector1D(normalize(value));
+  var get = direction.get;
+
+  function normalize(n) {
+    return n === 0 ? 0 : n / Math.abs(n);
+  }
+
+  function set(v) {
+    var d = normalize(v.get());
+    if (d !== 0) direction.setNumber(d);
+    return self;
+  }
+
+  var self = {
+    get: get,
+    set: set
+  };
+  return Object.freeze(self);
+}
+
+exports.Direction = Direction;
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 function rectWidth(node) {
@@ -233,37 +269,13 @@ return node.getBoundingClientRect().width;
 
-/***/ }),
-/* 2 */
-/***/ (function(module, exports, __webpack_require__) {
+function groupNumbers(array, size) {
+  var groups = [];
 
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var vector1d_1 = __webpack_require__(0);
-
-function Direction(value) {
-  var direction = vector1d_1.Vector1D(normalize(value));
-  var get = direction.get;
-
-  function normalize(n) {
-    return n === 0 ? 0 : n / Math.abs(n);
+  for (var i = 0; i < array.length; i += size) {
+    groups.push(array.slice(i, i + size));
   }
 
-  function set(v) {
-    var d = normalize(v.get());
-    if (d !== 0) direction.setNumber(d);
-    return self;
-  }
-
-  var self = {
-    get: get,
-    set: set
-  };
-  return Object.freeze(self);
+  return groups;
 }
 
-exports.Direction = Direction;
+exports.groupNumbers = groupNumbers;
 
@@ -339,3 +351,3 @@ /***/ }),
 
-var utils_1 = __webpack_require__(1);
+var utils_1 = __webpack_require__(2);
 
@@ -433,3 +445,6 @@ function EmblaCarousel(sliderRoot) {
     var className = options.selectedClass;
-    nodes[slider.index.get()].classList.add(className);
+    var indexGroups = utils_1.groupNumbers(Object.keys(nodes).map(Number), options.groupSlides);
+    indexGroups[slider.index.get()].forEach(function (i) {
+      return nodes[i].classList.add(className);
+    });
     return function () {
@@ -442,3 +457,5 @@ var selectedIndex = slider.index.get();
       });
-      nodes[selectedIndex].classList.add(className);
+      indexGroups[selectedIndex].forEach(function (i) {
+        return nodes[i].classList.add(className);
+      });
     };
@@ -580,3 +597,3 @@ }
 
-var utils_1 = __webpack_require__(1);
+var utils_1 = __webpack_require__(2);
 
@@ -595,3 +612,4 @@ var vector1d_1 = __webpack_require__(0);
       speed = options.speed,
-      dragFree = options.dragFree;
+      dragFree = options.dragFree,
+      groupSlides = options.groupSlides;
   var speedLimit = limit_1.Limit({
@@ -602,6 +620,7 @@ min: 5,
 
+  var indexMax = Math.ceil(slides.length / groupSlides) - 1;
   var index = counter_1.Counter({
     limit: limit_1.Limit({
-      min: 0,
-      max: slides.length - 1
+      max: indexMax,
+      min: 0
     }),
@@ -619,30 +638,35 @@ loop: loop,
   var slideSizes = slides.map(utils_1.rectWidth).map(chunkSize.measure);
-  var alignSizes = slideSizes.map(alignSize.measure);
-  var contentSize = slideSizes.reduce(function (a, s) {
+  var groupedSizes = utils_1.groupNumbers(slideSizes, groupSlides);
+  var groupSizes = groupedSizes.map(function (g) {
+    return g.reduce(function (a, s) {
+      return a + s;
+    });
+  });
+  var alignSizes = groupSizes.map(alignSize.measure);
+  var contentSize = groupSizes.reduce(function (a, s) {
     return a + s;
-  }, 0);
-  var diffDistances = slideSizes.map(function (size, current) {
-    var counter = index.clone();
-    var next = counter.set(current + 1).get();
-    return size + alignSizes[current] - alignSizes[next];
   });
-  var slidePositions = slides.map(function (s, i) {
-    var distances = diffDistances.slice(0, i);
-    return distances.reduce(function (a, d) {
+  var diffSizes = groupSizes.map(function (size, i) {
+    var next = index.clone().set(i + 1);
+    return size + alignSizes[i] - alignSizes[next.get()];
+  });
+  var groupPositions = groupSizes.map(function (s, i) {
+    var sizes = diffSizes.slice(0, i);
+    return sizes.reduce(function (a, d) {
       return a - d;
     }, alignSizes[0]);
   });
-  var lastSlideSize = slideSizes[index.max];
-  var endOffset = loop ? chunkSize.measure(1) : lastSlideSize;
-  var max = alignSizes[0];
-  var min = max + -contentSize + endOffset;
+  var loopSize = -contentSize + chunkSize.measure(1);
+  var max = groupPositions[0];
+  var min = loop ? max + loopSize : groupPositions[index.max];
   var limit = limit_1.Limit({
     max: max,
     min: min
-  }); // Draw
+  }); // Direction
 
   var direction = function direction() {
     return pointer.isDown() ? pointer.direction.get() : slider.mover.direction.get();
-  };
+  }; // Draw
 
+
   var update = function update() {
@@ -673,3 +697,3 @@ if (!pointer.isDown()) {
   var animation = animation_1.Animation(update);
-  var startLocation = slidePositions[index.get()];
+  var startLocation = groupPositions[index.get()];
   var locationAtDragStart = vector1d_1.Vector1D(startLocation);
@@ -689,3 +713,6 @@ var location = vector1d_1.Vector1D(startLocation);
     findTarget: targetFinder_1.TargetFinder({
+      diffSizes: diffSizes,
       dragFree: dragFree,
+      groupPositions: groupPositions,
+      groupSizes: groupSizes,
       index: index,
@@ -695,4 +722,2 @@ limit: limit,
       loop: loop,
-      slidePositions: slidePositions,
-      slideSizes: slideSizes,
       span: contentSize,
@@ -741,4 +766,5 @@ target: target
       chunkSize: chunkSize,
-      itemSizes: slideSizes,
-      items: slides
+      contentSize: contentSize,
+      slideSizes: slideSizes,
+      slides: slides
     }),
@@ -1087,20 +1113,12 @@ target: target,
 
-var utils_1 = __webpack_require__(1);
-
 var vector1d_1 = __webpack_require__(0);
 
 function InfiniteShifter(params) {
-  var items = params.items,
+  var slides = params.slides,
       chunkSize = params.chunkSize,
-      itemSizes = params.itemSizes,
+      slideSizes = params.slideSizes,
       alignSizes = params.alignSizes;
-  var sizesPercent = items.map(utils_1.rectWidth).map(chunkSize.measure);
-  var contentSize = itemSizes.reduce(function (a, s) {
-    return a + s;
-  }, 0);
   var viewSize = chunkSize.root;
-  var distance = sizesPercent.reduce(function (a, s) {
-    return a + s;
-  }, 0);
-  var ascItems = Object.keys(items).map(Number);
+  var distance = params.contentSize;
+  var ascItems = Object.keys(slides).map(Number);
   var descItems = ascItems.slice().reverse();
@@ -1111,3 +1129,3 @@ var shiftPoints = startPoints().concat(endPoints());
     return indexes.reduce(function (a, i) {
-      var size = itemSizes[i];
+      var size = slideSizes[i];
       return a - size;
@@ -1126,3 +1144,3 @@ }, from);
     return indexes.reduce(function (a, i) {
-      var gapFilled = a + itemSizes[i];
+      var gapFilled = a + slideSizes[i];
       return gapFilled < sizeOfGap ? gapFilled : a;
@@ -1133,3 +1151,3 @@ }, from);
   function shiftPoint(indexes, from, direction) {
-    var slideCount = items.length - 1;
+    var slideCount = slides.length - 1;
     return subtractItemSizesOf(indexes.map(function (i) {
@@ -1145,7 +1163,7 @@ return (i + direction) % slideCount;
     return ascIndexes.map(function (i, j) {
-      var node = items[i];
+      var node = slides[i];
       var initial = distance * (!direction ? 0 : -1);
       var offset = distance * (!direction ? 1 : 0);
-      var itemsInSpan = ascIndexes.slice(0, j);
-      var point = shiftPoint(itemsInSpan, from, direction);
+      var slidesInSpan = ascIndexes.slice(0, j);
+      var point = shiftPoint(slidesInSpan, from, direction);
       var location = vector1d_1.Vector1D(-1);
@@ -1177,3 +1195,3 @@
     var indexes = shiftItemsIn(gap, ascItems);
-    var start = shiftStart(contentSize, ascItems, -viewSize);
+    var start = shiftStart(distance, ascItems, -viewSize);
     return shiftPointsFor(indexes, -start, 0);
@@ -1279,5 +1297,5 @@ }
 
-var direction_1 = __webpack_require__(2);
+var direction_1 = __webpack_require__(1);
 
-var utils_1 = __webpack_require__(1);
+var utils_1 = __webpack_require__(2);
 
@@ -1365,3 +1383,3 @@ var vector1d_1 = __webpack_require__(0);
 
-var direction_1 = __webpack_require__(2);
+var direction_1 = __webpack_require__(1);
 
@@ -1453,3 +1471,3 @@ var vector1d_1 = __webpack_require__(0);
 
-var direction_1 = __webpack_require__(2);
+var direction_1 = __webpack_require__(1);
 
@@ -1459,3 +1477,3 @@ function TargetFinder(params) {
       loop = params.loop,
-      slidePositions = params.slidePositions,
+      groupPositions = params.groupPositions,
       span = params.span;
@@ -1465,6 +1483,6 @@ var slideBounds = getSlideBounds();
   function getSlideBounds() {
-    var slideSizes = params.slideSizes;
-    var startAt = slidePositions[0] + slideSizes[0] / 2;
-    return slideSizes.map(function (size, index) {
-      var sizes = slideSizes.slice(0, index);
+    var groupSizes = params.groupSizes;
+    var startAt = groupPositions[0] + groupSizes[0] / 2;
+    return groupSizes.map(function (size, index) {
+      var sizes = groupSizes.slice(0, index);
       var start = sizes.reduce(function (a, i) {
@@ -1484,7 +1502,7 @@ return a - i;
         index = target.index;
-    var lastSlide = slidePositions[params.index.max];
+    var lastSlide = groupPositions[params.index.max];
     var pastLastSlide = distance < lastSlide;
     var addOffset = loop && pastLastSlide && index === 0;
     var offset = addOffset ? distance + span : distance;
-    return slidePositions[index] - offset;
+    return groupPositions[index] - offset;
   }
@@ -1539,8 +1557,8 @@
 
-  function byIndex(index) {
+  function byIndex(index, direction) {
     var target = params.target.get();
     var counter = params.index.clone();
-    var slidePosition = slidePositions[index];
+    var slidePosition = groupPositions[index];
 
-    if (!loop || counter.max <= 1) {
+    if (!loop) {
       var distance = slidePosition - target;
@@ -1552,2 +1570,18 @@ return {
     } else {
+      if (direction === -1) {
+        var d = -params.diffSizes[counter.get()];
+        return {
+          distance: d,
+          index: index
+        };
+      }
+
+      if (direction === 1) {
+        var _d = params.diffSizes[counter.add(-1).get()];
+        return {
+          distance: _d,
+          index: index
+        };
+      }
+
       var d1 = slidePosition - target;
@@ -1698,4 +1732,4 @@ var d2 = span + slidePosition - target;
 
-  function findIndex(target) {
-    var next = findTarget.byIndex(target.get());
+  function toDistance(from, force) {
+    var next = findTarget.byDistance(from, force);
     travelTo(next);
@@ -1705,11 +1739,11 @@ return self;
 
-  function toIndex(target) {
-    var next = index.clone().set(target);
-    findIndex(next);
+  function findIndex(target, direction) {
+    var next = findTarget.byIndex(target.get(), direction);
+    travelTo(next);
     return self;
   }
 
-  function toDistance(from, force) {
-    var next = findTarget.byDistance(from, force);
-    travelTo(next);
+  function toIndex(target) {
+    var next = index.clone().set(target);
+    findIndex(next, 0);
     return self;
@@ -1720,3 +1754,3 @@ }
     var next = index.clone().add(1);
-    findIndex(next);
+    findIndex(next, -1);
     return self;
@@ -1727,3 +1761,3 @@ }
     var next = index.clone().add(-1);
-    findIndex(next);
+    findIndex(next, 1);
     return self;
@@ -1905,2 +1939,3 @@ }
   draggingClass: 'is-dragging',
+  groupSlides: 1,
   loop: false,
@@ -1907,0 +1942,0 @@ selectedClass: 'is-selected',

package.json

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

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

63603

increased by1.28%

Lines of code

1888

increased by1.23%

No dependency changes