embla-carousel - npm Package Compare versions

Comparing version 2.3.5 to 2.4.0

lib/components/dragBehaviour.d.ts

@@ -8,3 +8,3 @@ import { Animation } from './animation';
 import { Pointer } from './pointer';
-import { Scroller } from './scroller';
+import { Scroll } from './scroll';
 import { Vector1D } from './vector1d';
@@ -19,3 +19,3 @@ declare type Params = {
     animation: Animation;
-    scroll: Scroller;
+    scroll: Scroll;
     mover: Mover;
@@ -22,0 +22,0 @@ index: Counter;

lib/components/engine.d.ts

 import { Animation } from './animation';
 import { Counter } from './counter';
 import { DragBehaviour } from './dragBehaviour';
-import { EdgeGuard } from './edgeGuard';
-import { EdgeLooper } from './edgeLooper';
 import { EventDispatcher } from './eventDispatcher';
-import { InfiniteShifter } from './infiniteShifter';
 import { Mover } from './mover';
 import { Options } from './options';
-import { Scroller } from './scroller';
+import { Scroll } from './scroll';
+import { ScrollBounds } from './scrollBounds';
+import { ScrollLooper } from './scrollLooper';
+import { SlideLooper } from './slideLooper';
 import { Translate } from './translate';
@@ -15,4 +15,4 @@ import { Vector1D } from './vector1d';
     animation: Animation;
-    edgeGuard: EdgeGuard;
-    edgeLooper: EdgeLooper;
+    scrollBounds: ScrollBounds;
+    scrollLooper: ScrollLooper;
     index: Counter;
@@ -23,7 +23,7 @@ indexPrevious: Counter;
     pointer: DragBehaviour;
-    shifter: InfiniteShifter;
+    slideLooper: SlideLooper;
     target: Vector1D;
     translate: Translate;
-    scroll: Scroller;
+    scroll: Scroll;
 };
 export declare function Engine(root: HTMLElement, container: HTMLElement, slides: HTMLElement[], options: Options, events: EventDispatcher): Engine;

lib/index.js

@@ -94,3 +94,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 5);
+/******/ 	return __webpack_require__(__webpack_require__.s = 6);
 /******/ })
@@ -197,38 +197,2 @@ /************************************************************************/
 
-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) {
@@ -277,3 +241,3 @@ return node.getBoundingClientRect().width;
 /***/ }),
-/* 3 */
+/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -288,20 +252,15 @@
 
-function EventStore() {
-  var state = {
-    listeners: []
-  };
+var vector1d_1 = __webpack_require__(0);
 
-  function add(node, type, handler) {
-    var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-    node.addEventListener(type, handler, options);
-    state.listeners.push(function () {
-      return node.removeEventListener(type, handler, options);
-    });
-    return self;
+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 removeAll() {
-    state.listeners.filter(function (remove) {
-      return remove();
-    });
+  function set(v) {
+    var d = normalize(v.get());
+    if (d !== 0) direction.setNumber(d);
     return self;
@@ -311,4 +270,4 @@ }
   var self = {
-    add: add,
-    removeAll: removeAll
+    get: get,
+    set: set
   };
@@ -318,6 +277,6 @@ return Object.freeze(self);
 
-exports.EventStore = EventStore;
+exports.Direction = Direction;
 
 /***/ }),
-/* 4 */
+/* 3 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -387,8 +346,109 @@
 /***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+function Counter(params) {
+  var start = params.start,
+      limit = params.limit,
+      loop = params.loop;
+  var min = limit.min,
+      max = limit.max;
+  var type = loop ? 'loop' : 'constrain';
+  var state = {
+    value: withinLimit(start)
+  };
+
+  function get() {
+    return state.value;
+  }
+
+  function set(n) {
+    state.value = withinLimit(n);
+    return self;
+  }
+
+  function withinLimit(n) {
+    return limit[type](n);
+  }
+
+  function add(n) {
+    if (n !== 0) {
+      var one = n / Math.abs(n);
+      set(get() + one);
+      return add(n + one * -1);
+    }
+
+    return self;
+  }
+
+  function clone() {
+    var s = get();
+    return Counter({
+      start: s,
+      limit: limit,
+      loop: loop
+    });
+  }
+
+  var self = {
+    add: add,
+    clone: clone,
+    get: get,
+    max: max,
+    min: min,
+    set: set
+  };
+  return Object.freeze(self);
+}
+
+exports.Counter = Counter;
+
+/***/ }),
 /* 5 */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__(6);
+"use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+function EventStore() {
+  var state = {
+    listeners: []
+  };
+
+  function add(node, type, handler) {
+    var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    node.addEventListener(type, handler, options);
+    state.listeners.push(function () {
+      return node.removeEventListener(type, handler, options);
+    });
+    return self;
+  }
+
+  function removeAll() {
+    state.listeners.filter(function (remove) {
+      return remove();
+    });
+    return self;
+  }
+
+  var self = {
+    add: add,
+    removeAll: removeAll
+  };
+  return Object.freeze(self);
+}
+
+exports.EventStore = EventStore;
+
 /***/ }),
@@ -398,2 +458,9 @@ /* 6 */
 
+module.exports = __webpack_require__(7);
+
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
 "use strict";
@@ -408,11 +475,11 @@
 
-var engine_1 = __webpack_require__(7);
+var engine_1 = __webpack_require__(8);
 
-var eventDispatcher_1 = __webpack_require__(22);
+var eventDispatcher_1 = __webpack_require__(23);
 
-var eventStore_1 = __webpack_require__(3);
+var eventStore_1 = __webpack_require__(5);
 
-var options_1 = __webpack_require__(23);
+var options_1 = __webpack_require__(24);
 
-var utils_1 = __webpack_require__(2);
+var utils_1 = __webpack_require__(1);
 
@@ -484,3 +551,3 @@ function EmblaCarousel(sliderRoot) {
       if (options.draggable) activateDragFeature();
-      if (options.loop) slider.shifter.shiftInfinite(slides);
+      if (options.loop) slider.slideLooper.loop(slides);
 
@@ -661,3 +728,3 @@ if (isFirstInit) {
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -672,34 +739,36 @@
 
-var alignSize_1 = __webpack_require__(8);
+var alignSize_1 = __webpack_require__(9);
 
-var animation_1 = __webpack_require__(9);
+var animation_1 = __webpack_require__(10);
 
-var chunkSize_1 = __webpack_require__(10);
+var chunkSize_1 = __webpack_require__(11);
 
-var counter_1 = __webpack_require__(11);
+var counter_1 = __webpack_require__(4);
 
 var dragBehaviour_1 = __webpack_require__(12);
 
-var edgeGuard_1 = __webpack_require__(13);
+var limit_1 = __webpack_require__(3);
 
-var edgeLooper_1 = __webpack_require__(14);
+var mover_1 = __webpack_require__(13);
 
-var infiniteShifter_1 = __webpack_require__(15);
+var pointer_1 = __webpack_require__(14);
 
-var limit_1 = __webpack_require__(4);
+var scroll_1 = __webpack_require__(15);
 
-var mover_1 = __webpack_require__(16);
+var scrollBounds_1 = __webpack_require__(16);
 
-var pointer_1 = __webpack_require__(17);
+var scrollContain_1 = __webpack_require__(17);
 
-var scroller_1 = __webpack_require__(18);
+var scrollLooper_1 = __webpack_require__(18);
 
-var snapPosition_1 = __webpack_require__(19);
+var scrollSnap_1 = __webpack_require__(19);
 
-var targetFinder_1 = __webpack_require__(20);
+var scrollTarget_1 = __webpack_require__(20);
 
-var translate_1 = __webpack_require__(21);
+var slideLooper_1 = __webpack_require__(21);
 
-var utils_1 = __webpack_require__(2);
+var translate_1 = __webpack_require__(22);
 
+var utils_1 = __webpack_require__(1);
+
 var vector1d_1 = __webpack_require__(0);
@@ -715,22 +784,8 @@
       slidesToScroll = options.slidesToScroll,
-      containScroll = options.containScroll; // Index
+      containScroll = options.containScroll; // Measurements
 
-  var indexMin = 0;
-  var indexMax = Math.ceil(slides.length / slidesToScroll) - 1;
-  var indexes = Object.keys(slides).map(Number);
-  var indexGroups = utils_1.groupNumbers(indexes, slidesToScroll);
-  var indexSpan = limit_1.Limit({
-    min: indexMin,
-    max: indexMax
-  });
-  var index = counter_1.Counter({
-    limit: indexSpan,
-    start: startIndex,
-    loop: loop
-  });
-  var indexPrevious = index.clone(); // Measurements
-
   var containerSize = utils_1.rectWidth(container);
   var chunkSize = chunkSize_1.ChunkSize(containerSize);
   var viewSize = chunkSize.root;
+  var slideIndexes = Object.keys(slides).map(Number);
   var slideSizes = slides.map(utils_1.rectWidth).map(chunkSize.measure);
@@ -743,3 +798,3 @@ var groupedSizes = utils_1.groupNumbers(slideSizes, slidesToScroll);
   });
-  var contentSize = snapSizes.reduce(function (a, s) {
+  var contentSize = slideSizes.reduce(function (a, s) {
     return a + s;
@@ -751,15 +806,38 @@ });
   });
+  var snap = scrollSnap_1.ScrollSnap({
+    snapSizes: snapSizes,
+    alignSize: alignSize,
+    loop: loop
+  });
+  var defaultSnaps = snapSizes.map(snap.measure);
   var contain = !loop && containScroll;
-  var snapPosition = snapPosition_1.SnapPosition({
+  var scrollContain = scrollContain_1.ScrollContain({
     alignSize: alignSize,
-    contain: contain,
     contentSize: contentSize,
-    index: index,
-    snapSizes: snapSizes,
+    slideIndexes: slideIndexes,
+    slidesToScroll: slidesToScroll,
     viewSize: viewSize
   });
-  var snapPositions = snapSizes.map(snapPosition.measure);
+  var containedSnaps = scrollContain.snaps(defaultSnaps);
+  var scrollSnaps = contain ? containedSnaps : defaultSnaps; // Index
+
+  var defaultIndexes = utils_1.groupNumbers(slideIndexes, slidesToScroll);
+  var containedIndexes = scrollContain.indexes(defaultSnaps);
+  var indexMin = 0;
+  var indexMax = scrollSnaps.length - 1;
+  var indexGroups = contain ? containedIndexes : defaultIndexes;
+  var indexSpan = limit_1.Limit({
+    min: indexMin,
+    max: indexMax
+  });
+  var index = counter_1.Counter({
+    limit: indexSpan,
+    start: startIndex,
+    loop: loop
+  });
+  var indexPrevious = index.clone(); // ScrollLimit
+
   var loopSize = -contentSize + chunkSize.measure(1);
-  var max = snapPositions[0];
-  var min = loop ? max + loopSize : snapPositions[index.max];
+  var max = scrollSnaps[0];
+  var min = loop ? max + loopSize : scrollSnaps[index.max];
   var limit = limit_1.Limit({
@@ -771,3 +849,3 @@ max: max,
   var direction = function direction() {
-    return pointer.isDown() ? pointer.direction.get() : slider.mover.direction.get();
+    return pointer.isDown() ? pointer.direction.get() : engine.mover.direction.get();
   }; // Draw
@@ -777,20 +855,20 @@
   var update = function update() {
-    slider.mover.seek(target).update();
+    engine.mover.seek(target).update();
 
     if (!pointer.isDown()) {
-      if (!loop) slider.edgeGuard.constrain(target);
-      if (slider.mover.settle(target)) slider.animation.stop();
+      if (!loop) engine.scrollBounds.constrain(target);
+      if (engine.mover.settle(target)) engine.animation.stop();
     }
 
     if (loop) {
-      slider.edgeLooper.loop(direction());
-      slider.shifter.shiftInfinite(slides);
+      engine.scrollLooper.loop(direction());
+      engine.slideLooper.loop(slides);
     }
 
-    if (slider.mover.location.get() !== target.get()) {
+    if (engine.mover.location.get() !== target.get()) {
       events.dispatch('scroll');
     }
 
-    slider.translate.to(slider.mover.location);
-    slider.animation.proceed();
+    engine.translate.to(engine.mover.location);
+    engine.animation.proceed();
   }; // Shared
@@ -800,3 +878,3 @@
   var animation = animation_1.Animation(update);
-  var startLocation = snapPositions[index.get()];
+  var startLocation = scrollSnaps[index.get()];
   var location = vector1d_1.Vector1D(startLocation);
@@ -809,6 +887,8 @@ var target = vector1d_1.Vector1D(startLocation);
   });
-  var scroll = scroller_1.Scroller({
+  var scroll = scroll_1.Scroll({
     animation: animation,
     events: events,
-    findTarget: targetFinder_1.TargetFinder({
+    index: index,
+    indexPrevious: indexPrevious,
+    scrollTarget: scrollTarget_1.ScrollTarget({
       align: align,
@@ -820,8 +900,6 @@ contentSize: contentSize,
       loop: loop,
-      snapPositions: snapPositions,
+      scrollSnaps: scrollSnaps,
       snapSizes: snapSizes,
       target: target
     }),
-    index: index,
-    indexPrevious: indexPrevious,
     target: target
@@ -846,5 +924,11 @@ }); // Pointer
 
-  var slider = {
+  var engine = {
     animation: animation,
-    edgeGuard: edgeGuard_1.EdgeGuard({
+    index: index,
+    indexGroups: indexGroups,
+    indexPrevious: indexPrevious,
+    mover: mover,
+    pointer: pointer,
+    scroll: scroll,
+    scrollBounds: scrollBounds_1.ScrollBounds({
       animation: animation,
@@ -856,3 +940,3 @@ limit: limit,
     }),
-    edgeLooper: edgeLooper_1.EdgeLooper({
+    scrollLooper: scrollLooper_1.ScrollLooper({
       contentSize: contentSize,
@@ -863,13 +947,7 @@ limit: limit,
     }),
-    index: index,
-    indexGroups: indexGroups,
-    indexPrevious: indexPrevious,
-    mover: mover,
-    pointer: pointer,
-    scroll: scroll,
-    shifter: infiniteShifter_1.InfiniteShifter({
+    slideLooper: slideLooper_1.SlideLooper({
       contentSize: contentSize,
       location: location,
+      scrollSnaps: scrollSnaps,
       slideSizes: slideSizes,
-      snapPositions: snapPositions,
       viewSize: viewSize
@@ -880,3 +958,3 @@ }),
   };
-  return Object.freeze(slider);
+  return Object.freeze(engine);
 }
@@ -887,3 +965,3 @@
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -932,3 +1010,3 @@
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -976,3 +1054,3 @@
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1006,69 +1084,2 @@
 /***/ }),
-/* 11 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-function Counter(params) {
-  var start = params.start,
-      limit = params.limit,
-      loop = params.loop;
-  var min = limit.min,
-      max = limit.max;
-  var type = loop ? 'loop' : 'constrain';
-  var state = {
-    value: withinLimit(start)
-  };
-
-  function get() {
-    return state.value;
-  }
-
-  function set(n) {
-    state.value = withinLimit(n);
-    return self;
-  }
-
-  function withinLimit(n) {
-    return limit[type](n);
-  }
-
-  function add(n) {
-    if (n !== 0) {
-      var one = n / Math.abs(n);
-      set(get() + one);
-      return add(n + one * -1);
-    }
-
-    return self;
-  }
-
-  function clone() {
-    var s = get();
-    return Counter({
-      start: s,
-      limit: limit,
-      loop: loop
-    });
-  }
-
-  var self = {
-    add: add,
-    clone: clone,
-    get: get,
-    max: max,
-    min: min,
-    set: set
-  };
-  return Object.freeze(self);
-}
-
-exports.Counter = Counter;
-
-/***/ }),
 /* 12 */
@@ -1084,5 +1095,5 @@ /***/ (function(module, exports, __webpack_require__) {
 
-var direction_1 = __webpack_require__(1);
+var direction_1 = __webpack_require__(2);
 
-var eventStore_1 = __webpack_require__(3);
+var eventStore_1 = __webpack_require__(5);
 
@@ -1195,3 +1206,3 @@ var vector1d_1 = __webpack_require__(0);
     target.set(location);
-    mover.useSpeed(80).useDefaultMass();
+    mover.useDefaultMass().useSpeed(80);
     animation.start();
@@ -1271,216 +1282,8 @@ addInteractionEvents();
 
-function EdgeGuard(params) {
-  var limit = params.limit,
-      location = params.location,
-      mover = params.mover,
-      animation = params.animation,
-      tolerance = params.tolerance;
-  var min = limit.min,
-      max = limit.max,
-      reachedMin = limit.reachedMin,
-      reachedMax = limit.reachedMax;
-  var state = {
-    timeout: 0
-  };
+var direction_1 = __webpack_require__(2);
 
-  function shouldConstrain(v) {
-    var l = location.get();
-    var constrainMin = reachedMin(l) && v.get() !== min;
-    var constrainMax = reachedMax(l) && v.get() !== max;
-    return constrainMin || constrainMax;
-  }
+var utils_1 = __webpack_require__(1);
 
-  function constrain(v) {
-    if (!state.timeout && shouldConstrain(v)) {
-      var constraint = limit.constrain(v.get());
-      state.timeout = window.setTimeout(function () {
-        v.setNumber(constraint);
-        mover.useSpeed(10).useMass(3);
-        animation.start();
-        state.timeout = 0;
-      }, tolerance);
-    }
-  }
-
-  var self = {
-    constrain: constrain
-  };
-  return Object.freeze(self);
-}
-
-exports.EdgeGuard = EdgeGuard;
-
-/***/ }),
-/* 14 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-function EdgeLooper(params) {
-  var limit = params.limit,
-      location = params.location,
-      contentSize = params.contentSize,
-      vectors = params.vectors;
-  var reachedMin = limit.reachedMin,
-      reachedMax = limit.reachedMax;
-
-  function shouldLoop(direction) {
-    var reachedLimit = direction === -1 ? reachedMin : reachedMax;
-    return direction !== 0 && reachedLimit(location.get());
-  }
-
-  function loop(direction) {
-    if (shouldLoop(direction)) {
-      var distance = contentSize * (direction * -1);
-      vectors.forEach(function (v) {
-        return v.addNumber(distance);
-      });
-    }
-  }
-
-  var self = {
-    loop: loop
-  };
-  return Object.freeze(self);
-}
-
-exports.EdgeLooper = EdgeLooper;
-
-/***/ }),
-/* 15 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 var vector1d_1 = __webpack_require__(0);
 
-function InfiniteShifter(params) {
-  var contentSize = params.contentSize,
-      viewSize = params.viewSize,
-      slideSizes = params.slideSizes,
-      snapPositions = params.snapPositions;
-  var ascItems = Object.keys(slideSizes).map(Number);
-  var descItems = ascItems.slice().reverse();
-  var shiftPoints = startPoints().concat(endPoints());
-
-  function subtractItemSizesOf(indexes, from) {
-    return indexes.reduce(function (a, i) {
-      var size = slideSizes[i];
-      return a - size;
-    }, from);
-  }
-
-  function shiftItemsIn(sizeOfGap, indexes) {
-    return indexes.reduce(function (a, i) {
-      var gapLeft = subtractItemSizesOf(a, sizeOfGap);
-      return gapLeft > 0 ? a.concat([i]) : a;
-    }, []);
-  }
-
-  function shiftStart(sizeOfGap, indexes, from) {
-    return indexes.reduce(function (a, i) {
-      var gapFilled = a + slideSizes[i];
-      return gapFilled < sizeOfGap ? gapFilled : a;
-    }, from);
-  }
-
-  function shiftPoint(indexes, from, direction) {
-    var slideCount = ascItems.length - 1;
-    return subtractItemSizesOf(indexes.map(function (i) {
-      return (i + direction) % slideCount;
-    }), from);
-  }
-
-  function shiftPointsFor(indexes, from, direction) {
-    var ascIndexes = indexes.slice().sort(function (a, b) {
-      return a - b;
-    });
-    return ascIndexes.map(function (i, j) {
-      var index = i;
-      var initial = contentSize * (!direction ? 0 : -1);
-      var offset = contentSize * (!direction ? 1 : 0);
-      var slidesInSpan = ascIndexes.slice(0, j);
-      var point = shiftPoint(slidesInSpan, from, direction);
-      var location = vector1d_1.Vector1D(-1);
-
-      var findTarget = function findTarget(loc) {
-        var target = vector1d_1.Vector1D(0);
-        var t = loc > point ? initial : offset;
-        return target.setNumber(t);
-      };
-
-      return {
-        point: point,
-        findTarget: findTarget,
-        location: location,
-        index: index
-      };
-    });
-  }
-
-  function startPoints() {
-    var gap = snapPositions[0] - 1;
-    var indexes = shiftItemsIn(gap, descItems);
-    var start = shiftStart(gap, indexes, 0);
-    return shiftPointsFor(indexes, start, 1);
-  }
-
-  function endPoints() {
-    var gap = viewSize - snapPositions[0] - 1;
-    var indexes = shiftItemsIn(gap, ascItems);
-    var start = shiftStart(contentSize, ascItems, -viewSize);
-    return shiftPointsFor(indexes, -start, 0);
-  }
-
-  function shiftInfinite(slides) {
-    var parentLocation = params.location;
-    shiftPoints.forEach(function (point) {
-      var findTarget = point.findTarget,
-          location = point.location,
-          index = point.index;
-      var target = findTarget(parentLocation.get());
-
-      if (target.get() !== location.get()) {
-        slides[index].style.left = "".concat(target.get(), "%");
-        location.set(target);
-      }
-    });
-  }
-
-  var self = {
-    shiftInfinite: shiftInfinite,
-    shiftPoints: shiftPoints
-  };
-  return Object.freeze(self);
-}
-
-exports.InfiniteShifter = InfiniteShifter;
-
-/***/ }),
-/* 16 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var direction_1 = __webpack_require__(1);
-
-var utils_1 = __webpack_require__(2);
-
-var vector1d_1 = __webpack_require__(0);
-
 function Mover(params) {
@@ -1565,3 +1368,3 @@ var location = params.location,
 /***/ }),
-/* 17 */
+/* 14 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1576,3 +1379,3 @@
 
-var direction_1 = __webpack_require__(1);
+var direction_1 = __webpack_require__(2);
 
@@ -1654,3 +1457,3 @@ var vector1d_1 = __webpack_require__(0);
 /***/ }),
-/* 18 */
+/* 15 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1665,5 +1468,5 @@
 
-function Scroller(params) {
+function Scroll(params) {
   var index = params.index,
-      findTarget = params.findTarget,
+      scrollTarget = params.scrollTarget,
       animation = params.animation;
@@ -1690,9 +1493,9 @@
 
-  function toDistance(force) {
-    var next = findTarget.byDistance(force);
+  function findIndex(target, direction) {
+    var next = scrollTarget.byIndex(target.get(), direction);
     scrollTo(next);
   }
 
-  function findIndex(target, direction) {
-    var next = findTarget.byIndex(target.get(), direction);
+  function toDistance(force) {
+    var next = scrollTarget.byDistance(force);
     scrollTo(next);
@@ -1725,6 +1528,6 @@ }
 
-exports.Scroller = Scroller;
+exports.Scroll = Scroll;
 
 /***/ }),
-/* 19 */
+/* 16 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1739,54 +1542,216 @@
 
-var limit_1 = __webpack_require__(4);
+function ScrollBounds(params) {
+  var limit = params.limit,
+      location = params.location,
+      mover = params.mover,
+      animation = params.animation,
+      tolerance = params.tolerance;
+  var min = limit.min,
+      max = limit.max,
+      reachedMin = limit.reachedMin,
+      reachedMax = limit.reachedMax;
+  var state = {
+    timeout: 0
+  };
 
-function SnapPosition(params) {
+  function shouldConstrain(v) {
+    var l = location.get();
+    var constrainMin = reachedMin(l) && v.get() !== min;
+    var constrainMax = reachedMax(l) && v.get() !== max;
+    return constrainMin || constrainMax;
+  }
+
+  function constrain(v) {
+    if (!state.timeout && shouldConstrain(v)) {
+      var constraint = limit.constrain(v.get());
+      state.timeout = window.setTimeout(function () {
+        v.setNumber(constraint);
+        mover.useSpeed(10).useMass(3);
+        animation.start();
+        state.timeout = 0;
+      }, tolerance);
+    }
+  }
+
+  var self = {
+    constrain: constrain
+  };
+  return Object.freeze(self);
+}
+
+exports.ScrollBounds = ScrollBounds;
+
+/***/ }),
+/* 17 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var limit_1 = __webpack_require__(3);
+
+var utils_1 = __webpack_require__(1);
+
+function ScrollContain(params) {
   var alignSize = params.alignSize,
       contentSize = params.contentSize,
-      snapSizes = params.snapSizes,
       viewSize = params.viewSize;
-  var alignSizes = snapSizes.map(alignSize.measure);
+  var slideIndexes = params.slideIndexes,
+      slidesToScroll = params.slidesToScroll;
+  var indexGroups = utils_1.groupNumbers(slideIndexes, slidesToScroll);
   var contentFillsUpView = contentSize >= viewSize;
-  var betweenDistances = distancesBetweenSnaps();
-  var bounds = viewBounds();
+  var bounds = limit_1.Limit({
+    min: -contentSize + viewSize,
+    max: 0
+  });
 
-  function distancesBetweenSnaps() {
-    return snapSizes.map(function (size, i) {
-      var next = params.index.clone().set(i + 1);
-      return size + alignSizes[i] - alignSizes[next.get()];
-    });
+  function groupDuplicates(start, end) {
+    var duplicates = indexGroups.slice(start, end);
+    return duplicates.reduce(function (a, g) {
+      return a.concat(g);
+    }, []);
   }
 
-  function snapPositionFor(index) {
-    var sizes = betweenDistances.slice(0, index);
-    return sizes.reduce(function (a, d) {
-      return a - d;
-    }, alignSizes[0]);
-  }
-
-  function viewBounds() {
-    var indexMax = params.index.max;
-    var endGap = viewSize - snapSizes[indexMax];
-    var gapMinusAlign = endGap - alignSizes[indexMax];
-    var min = snapPositionFor(indexMax) + gapMinusAlign;
+  function findDuplicates(scrollSnaps) {
+    var firstSnap = scrollSnaps[0];
+    var lastSnap = scrollSnaps[scrollSnaps.length - 1];
+    var min = scrollSnaps.lastIndexOf(firstSnap) + 1;
+    var max = scrollSnaps.indexOf(lastSnap);
     return limit_1.Limit({
       min: min,
-      max: 0
+      max: max
     });
   }
 
-  function containToView(position) {
-    if (contentFillsUpView) {
-      var min = bounds.min,
-          max = bounds.max;
-      if (position < min) return min;
-      if (position > max) return max;
-      return position;
+  function containToView(scrollSnaps) {
+    var min = bounds.min,
+        max = bounds.max;
+    return scrollSnaps.map(function (scrollSnap) {
+      if (scrollSnap < min) return min;
+      if (scrollSnap > max) return max;
+      return scrollSnap;
+    });
+  }
+
+  function indexes(scrollSnaps) {
+    if (!contentFillsUpView) return [slideIndexes];
+
+    var _findDuplicates = findDuplicates(containToView(scrollSnaps)),
+        min = _findDuplicates.min,
+        max = _findDuplicates.max;
+
+    var start = groupDuplicates(0, min);
+    var middle = indexGroups.slice(min, max);
+    var end = groupDuplicates(max, scrollSnaps.length);
+    return [start].concat(middle.concat([end]));
+  }
+
+  function snaps(scrollSnaps) {
+    if (!contentFillsUpView) return [alignSize.measure(contentSize)];
+    var containedSnaps = containToView(scrollSnaps);
+
+    var _findDuplicates2 = findDuplicates(containedSnaps),
+        min = _findDuplicates2.min,
+        max = _findDuplicates2.max;
+
+    return containedSnaps.slice(min - 1, max + 1);
+  }
+
+  var self = {
+    indexes: indexes,
+    snaps: snaps
+  };
+  return Object.freeze(self);
+}
+
+exports.ScrollContain = ScrollContain;
+
+/***/ }),
+/* 18 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+function ScrollLooper(params) {
+  var limit = params.limit,
+      location = params.location,
+      contentSize = params.contentSize,
+      vectors = params.vectors;
+  var reachedMin = limit.reachedMin,
+      reachedMax = limit.reachedMax;
+
+  function shouldLoop(direction) {
+    var reachedLimit = direction === -1 ? reachedMin : reachedMax;
+    return direction !== 0 && reachedLimit(location.get());
+  }
+
+  function loop(direction) {
+    if (shouldLoop(direction)) {
+      var distance = contentSize * (direction * -1);
+      vectors.forEach(function (v) {
+        return v.addNumber(distance);
+      });
     }
+  }
 
-    return alignSize.measure(contentSize);
+  var self = {
+    loop: loop
+  };
+  return Object.freeze(self);
+}
+
+exports.ScrollLooper = ScrollLooper;
+
+/***/ }),
+/* 19 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var counter_1 = __webpack_require__(4);
+
+var limit_1 = __webpack_require__(3);
+
+function ScrollSnap(params) {
+  var snapSizes = params.snapSizes,
+      alignSize = params.alignSize,
+      loop = params.loop;
+  var counterLimit = limit_1.Limit({
+    min: 0,
+    max: snapSizes.length - 1
+  });
+  var counter = counter_1.Counter({
+    limit: counterLimit,
+    start: 0,
+    loop: loop
+  });
+  var alignSizes = snapSizes.map(alignSize.measure);
+  var betweenDistances = distancesBetweenSnaps();
+
+  function distancesBetweenSnaps() {
+    return snapSizes.map(function (size, i) {
+      var next = counter.clone().set(i + 1);
+      return size + alignSizes[i] - alignSizes[next.get()];
+    });
   }
 
   function measure(size, index) {
-    var position = snapPositionFor(index);
-    return params.contain ? containToView(position) : position;
+    var sizes = betweenDistances.slice(0, index);
+    return sizes.reduce(function (a, d) {
+      return a - d;
+    }, alignSizes[0]);
   }
@@ -1800,3 +1765,3 @@
 
-exports.SnapPosition = SnapPosition;
+exports.ScrollSnap = ScrollSnap;
 
@@ -1814,6 +1779,6 @@ /***/ }),
 
-function TargetFinder(params) {
+function ScrollTarget(params) {
   var loop = params.loop,
       limit = params.limit,
-      snapPositions = params.snapPositions,
+      scrollSnaps = params.scrollSnaps,
       contentSize = params.contentSize;
@@ -1831,4 +1796,4 @@ var reachedMin = limit.reachedMin,
       var next = counter.set(i).add(align === 'end' ? 1 : 0);
-      var end = snapPositions[i] - snapSizes[next.get()] / 2;
-      var start = !i ? snapPositions[0] : bounds[i - 1].end;
+      var end = scrollSnaps[i] - snapSizes[next.get()] / 2;
+      var start = !i ? scrollSnaps[0] : bounds[i - 1].end;
       return bounds.concat([{
@@ -1844,6 +1809,6 @@ start: start,
         index = target.index;
-    var lastSnap = snapPositions[params.index.max];
+    var lastSnap = scrollSnaps[params.index.max];
     var addOffset = loop && distance < lastSnap && index === 0;
     var offset = addOffset ? distance + contentSize : distance;
-    return snapPositions[index] - offset;
+    return scrollSnaps[index] - offset;
   }
@@ -1875,3 +1840,3 @@
     var targetVector = params.target.get();
-    var distanceToSnap = snapPositions[index] - targetVector;
+    var distanceToSnap = scrollSnaps[index] - targetVector;
     var target = {
@@ -1936,3 +1901,3 @@ distance: distanceToSnap,
 
-exports.TargetFinder = TargetFinder;
+exports.ScrollTarget = ScrollTarget;
 
@@ -1950,2 +1915,117 @@ /***/ }),
 
+var vector1d_1 = __webpack_require__(0);
+
+function SlideLooper(params) {
+  var contentSize = params.contentSize,
+      viewSize = params.viewSize,
+      slideSizes = params.slideSizes,
+      scrollSnaps = params.scrollSnaps;
+  var ascItems = Object.keys(slideSizes).map(Number);
+  var descItems = ascItems.slice().reverse();
+  var loopPoints = startPoints().concat(endPoints());
+
+  function subtractItemSizesOf(indexes, from) {
+    return indexes.reduce(function (a, i) {
+      var size = slideSizes[i];
+      return a - size;
+    }, from);
+  }
+
+  function loopItemsIn(sizeOfGap, indexes) {
+    return indexes.reduce(function (a, i) {
+      var gapLeft = subtractItemSizesOf(a, sizeOfGap);
+      return gapLeft > 0 ? a.concat([i]) : a;
+    }, []);
+  }
+
+  function loopStart(sizeOfGap, indexes, from) {
+    return indexes.reduce(function (a, i) {
+      var gapFilled = a + slideSizes[i];
+      return gapFilled < sizeOfGap ? gapFilled : a;
+    }, from);
+  }
+
+  function loopPoint(indexes, from, direction) {
+    var slideCount = ascItems.length - 1;
+    return subtractItemSizesOf(indexes.map(function (i) {
+      return (i + direction) % slideCount;
+    }), from);
+  }
+
+  function loopPointsFor(indexes, from, direction) {
+    var ascIndexes = indexes.slice().sort(function (a, b) {
+      return a - b;
+    });
+    return ascIndexes.map(function (i, j) {
+      var index = i;
+      var initial = contentSize * (!direction ? 0 : -1);
+      var offset = contentSize * (!direction ? 1 : 0);
+      var slidesInSpan = ascIndexes.slice(0, j);
+      var point = loopPoint(slidesInSpan, from, direction);
+      var location = vector1d_1.Vector1D(-1);
+      var target = vector1d_1.Vector1D(0);
+
+      var findTarget = function findTarget(loc) {
+        var t = loc > point ? initial : offset;
+        return target.setNumber(0).setNumber(t);
+      };
+
+      return {
+        point: point,
+        findTarget: findTarget,
+        location: location,
+        index: index
+      };
+    });
+  }
+
+  function startPoints() {
+    var gap = scrollSnaps[0] - 1;
+    var indexes = loopItemsIn(gap, descItems);
+    var start = loopStart(gap, indexes, 0);
+    return loopPointsFor(indexes, start, 1);
+  }
+
+  function endPoints() {
+    var gap = viewSize - scrollSnaps[0] - 1;
+    var indexes = loopItemsIn(gap, ascItems);
+    var start = loopStart(contentSize, ascItems, -viewSize);
+    return loopPointsFor(indexes, -start, 0);
+  }
+
+  function loop(slides) {
+    var parentLocation = params.location;
+    loopPoints.forEach(function (loopTarget) {
+      var findTarget = loopTarget.findTarget,
+          location = loopTarget.location,
+          index = loopTarget.index;
+      var target = findTarget(parentLocation.get());
+
+      if (target.get() !== location.get()) {
+        slides[index].style.left = "".concat(target.get(), "%");
+        location.set(target);
+      }
+    });
+  }
+
+  var self = {
+    loop: loop,
+    loopPoints: loopPoints
+  };
+  return Object.freeze(self);
+}
+
+exports.SlideLooper = SlideLooper;
+
+/***/ }),
+/* 22 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 function Translate(node) {
@@ -1984,3 +2064,3 @@ var nodeStyle = node.style;
 /***/ }),
-/* 22 */
+/* 23 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1996,3 +2076,3 @@
 function EventDispatcher() {
-  var subscribers = {
+  var state = {
     destroy: [],
@@ -2008,3 +2088,3 @@ dragEnd: [],
   function dispatch(evt) {
-    var eventListeners = subscribers[evt];
+    var eventListeners = state[evt];
     eventListeners.forEach(function (e) {
@@ -2017,4 +2097,4 @@ return e();
   function on(evt, cb) {
-    var eventListeners = subscribers[evt];
-    subscribers[evt] = eventListeners.concat([cb]);
+    var eventListeners = state[evt];
+    state[evt] = eventListeners.concat([cb]);
     return self;
@@ -2024,4 +2104,4 @@ }
   function off(evt, cb) {
-    var eventListeners = subscribers[evt];
-    subscribers[evt] = eventListeners.filter(function (e) {
+    var eventListeners = state[evt];
+    state[evt] = eventListeners.filter(function (e) {
       return e !== cb;
@@ -2043,3 +2123,3 @@ });
 /***/ }),
-/* 23 */
+/* 24 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2046,0 +2126,0 @@

package.json

 {
   "name": "embla-carousel",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "author": "David Cetinkaya",
   "private": false,
-  "description": "An extensible low level carousel for the web, written in TypeScript",
+  "description": "Extensible low level carousels for the web",
   "keywords": [
@@ -8,0 +8,0 @@ "slider",

README.md

@@ -65,6 +65,2 @@ <br />
 
-```javascript
-import EmblaCarousel from 'embla-carousel'
-```
-
 ## QuickStart
@@ -110,2 +106,4 @@
 ```javascript
+import EmblaCarousel from 'embla-carousel'
+
 const emblaNode = document.querySelector('.embla')
@@ -118,3 +116,3 @@ const options = { loop: true }
 
-Configure Embla by passing an options object as the second argument. **Default** options values are:
+Configure Embla by passing an options object as the second argument. **Default** values are:
 
@@ -383,11 +381,21 @@ ```javascript
 
-- <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/ie-logo.svg" height="23" align="top" alt="Embla Carousel Internet Explorer support" /> &nbsp; **`IE`** - 11
+<p>
+  <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/ie-logo.svg" height="23" align="top" alt="Embla Carousel Internet Explorer support" /> &nbsp; **`IE`** - 11
+</p>
 
-- <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/edge-logo.svg" height="23" align="top" alt="Embla Carousel Internet Explorer support" /> &nbsp; **`Edge`** - Latest 2 versions
+<p>
+  <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/edge-logo.svg" height="23" align="top" alt="Embla Carousel Internet Explorer support" /> &nbsp; **`Edge`** - Latest 2 versions
+</p>
 
-- <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/chrome-logo.svg" height="23" align="top" alt="Embla Carousel Chrome support" /> &nbsp; **`Chrome`** - Latest 2 versions
+<p>
+  <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/chrome-logo.svg" height="23" align="top" alt="Embla Carousel Chrome support" /> &nbsp; **`Chrome`** - Latest 2 versions
+</p>
 
-- <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/firefox-logo.svg" height="23" align="top" alt="Embla Carousel Firefox support" /> &nbsp; **`Firefox`** - Latest 2 versions
+<p>
+  <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/firefox-logo.svg" height="23" align="top" alt="Embla Carousel Firefox support" /> &nbsp; **`Firefox`** - Latest 2 versions
+</p>
 
-- <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/safari-logo.svg" height="23" align="top" alt="Embla Carousel Safari support" /> &nbsp; **`Safari`** - Latest 2 versions
+<p>
+  <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/safari-logo.svg" height="23" align="top" alt="Embla Carousel Safari support" /> &nbsp; **`Safari`** - Latest 2 versions
+</p>
 
@@ -394,0 +402,0 @@ <br>

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

78815

increased by3.01%

Number of package files

28

increased by3.7%

Lines of code

2082

increased by3.63%

Number of lines in readme file

412

increased by1.98%

No dependency changes