embla-carousel - npm Package Compare versions

Comparing version 2.6.12 to 2.7.0

lib/components/engine.d.ts

@@ -8,2 +8,3 @@ import { Animation } from './animation';
 import { ScrollBounds } from './scrollBounds';
+import { ScrollBy } from './scrollBy';
 import { ScrollLooper } from './scrollLooper';
@@ -29,3 +30,4 @@ import { ScrollProgress } from './scrollProgress';
     scrollTo: ScrollTo;
+    scrollBy: ScrollBy;
 };
 export declare function Engine(root: HTMLElement, container: HTMLElement, slides: HTMLElement[], options: Options, events: EventDispatcher): Engine;

lib/components/scrollLimit.d.ts

@@ -1,5 +0,3 @@
-import { ChunkSize } from './chunkSize';
 import { Limit } from './limit';
 declare type Params = {
-    chunkSize: ChunkSize;
     contentSize: number;
@@ -6,0 +4,0 @@ loop: boolean;

lib/components/scrollLooper.d.ts

@@ -0,7 +1,9 @@
+import { ChunkSize } from './chunkSize';
 import { Limit } from './limit';
 import { Vector1D } from './vector1d';
 declare type Params = {
+    chunkSize: ChunkSize;
+    contentSize: number;
     limit: Limit;
     location: Vector1D;
-    contentSize: number;
     vectors: Vector1D[];
@@ -8,0 +10,0 @@ };

lib/components/scrollTarget.d.ts

@@ -7,3 +7,2 @@ import { Alignments } from './alignSize';
     align: Alignments;
-    dragFree: boolean;
     index: Counter;
@@ -23,5 +22,5 @@ loop: boolean;
     byIndex: (target: number, direction: number) => Target;
-    byDistance: (force: number) => Target;
+    byDistance: (force: number, snap: boolean) => Target;
 };
 export declare function ScrollTarget(params: Params): ScrollTarget;
 export {};

lib/components/scrollTo.d.ts

@@ -15,3 +15,3 @@ import { Animation } from './animation';
 export declare type ScrollTo = {
-    distance: (n: number) => void;
+    distance: (n: number, snap: boolean) => void;
     index: (n: number, direction: number) => void;
@@ -18,0 +18,0 @@ };

lib/index.d.ts

@@ -17,2 +17,3 @@ import { Callback as EmblaCallback, Event as EmblaEvent } from './components/eventDispatcher';
     previousScrollSnap: () => number;
+    scrollBy: (progress: number) => void;
     scrollNext: () => void;
@@ -19,0 +20,0 @@ scrollPrev: () => void;

lib/index.js

@@ -196,64 +196,2 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-function rectWidth(node) {
-  return node.getBoundingClientRect().width;
-}
-
-exports.rectWidth = rectWidth;
-
-function map(value, iStart, iStop, oStart, oStop) {
-  return oStart + (oStop - oStart) * ((value - iStart) / (iStop - iStart));
-}
-
-exports.map = map;
-
-function arrayFromCollection(nodeList) {
-  return Array.prototype.slice.call(nodeList);
-}
-
-exports.arrayFromCollection = arrayFromCollection;
-
-function debounce(callback, time) {
-  var timeout = {
-    id: 0
-  };
-  return function () {
-    window.clearTimeout(timeout.id);
-    timeout.id = window.setTimeout(callback, time) || 0;
-  };
-}
-
-exports.debounce = debounce;
-
-function groupNumbers(array, size) {
-  var groups = [];
-
-  for (var i = 0; i < array.length; i += size) {
-    groups.push(array.slice(i, i + size));
-  }
-
-  return groups;
-}
-
-exports.groupNumbers = groupNumbers;
-
-function roundToDecimals(decimalPoints) {
-  var pow = Math.pow(10, decimalPoints);
-  return function (n) {
-    return Math.round(n * pow) / pow;
-  };
-}
-
-exports.roundToDecimals = roundToDecimals;
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 function Limit(params) {
@@ -263,4 +201,4 @@ var min = params.min,
   var loopLimits = {
-    max: min,
-    min: max
+    min: max,
+    max: min
   };
@@ -315,2 +253,64 @@ var constrainLimits = {
 /***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+function rectWidth(node) {
+  return node.getBoundingClientRect().width;
+}
+
+exports.rectWidth = rectWidth;
+
+function map(value, iStart, iStop, oStart, oStop) {
+  return oStart + (oStop - oStart) * ((value - iStart) / (iStop - iStart));
+}
+
+exports.map = map;
+
+function arrayFromCollection(nodeList) {
+  return Array.prototype.slice.call(nodeList);
+}
+
+exports.arrayFromCollection = arrayFromCollection;
+
+function debounce(callback, time) {
+  var timeout = {
+    id: 0
+  };
+  return function () {
+    window.clearTimeout(timeout.id);
+    timeout.id = window.setTimeout(callback, time) || 0;
+  };
+}
+
+exports.debounce = debounce;
+
+function groupNumbers(array, size) {
+  var groups = [];
+
+  for (var i = 0; i < array.length; i += size) {
+    groups.push(array.slice(i, i + size));
+  }
+
+  return groups;
+}
+
+exports.groupNumbers = groupNumbers;
+
+function roundToDecimals(decimalPoints) {
+  var pow = Math.pow(10, decimalPoints);
+  return function (n) {
+    return Math.round(n * pow) / pow;
+  };
+}
+
+exports.roundToDecimals = roundToDecimals;
+
+/***/ }),
 /* 3 */
@@ -388,5 +388,5 @@ /***/ (function(module, exports, __webpack_require__) {
     if (n !== 0) {
-      var one = n / Math.abs(n);
-      set(get() + one);
-      return add(n + one * -1);
+      var sign = n / Math.abs(n);
+      set(get() + sign);
+      return add(n + sign * -1);
     }
@@ -482,9 +482,9 @@
 
-var eventDispatcher_1 = __webpack_require__(25);
+var eventDispatcher_1 = __webpack_require__(26);
 
 var eventStore_1 = __webpack_require__(5);
 
-var options_1 = __webpack_require__(26);
+var options_1 = __webpack_require__(27);
 
-var utils_1 = __webpack_require__(1);
+var utils_1 = __webpack_require__(2);
 
@@ -678,2 +678,8 @@ function EmblaCarousel(sliderRoot) {
 
+  function scrollBy(progress) {
+    var distance = slider.scrollBy.distance(progress);
+    slider.mover.useDefaultMass().useDefaultSpeed();
+    slider.scrollTo.distance(distance, false);
+  }
+
   function scrollTo(index) {
@@ -728,2 +734,3 @@ slider.mover.useDefaultMass().useDefaultSpeed();
     previousScrollSnap: previousScrollSnap,
+    scrollBy: scrollBy,
     scrollNext: scrollNext,
@@ -766,3 +773,3 @@ scrollPrev: scrollPrev,
 
-var limit_1 = __webpack_require__(2);
+var limit_1 = __webpack_require__(1);
 
@@ -775,22 +782,24 @@ var mover_1 = __webpack_require__(13);
 
-var scrollContain_1 = __webpack_require__(16);
+var scrollBy_1 = __webpack_require__(16);
 
-var scrollLimit_1 = __webpack_require__(17);
+var scrollContain_1 = __webpack_require__(17);
 
-var scrollLooper_1 = __webpack_require__(18);
+var scrollLimit_1 = __webpack_require__(18);
 
-var scrollProgress_1 = __webpack_require__(19);
+var scrollLooper_1 = __webpack_require__(19);
 
-var scrollSnap_1 = __webpack_require__(20);
+var scrollProgress_1 = __webpack_require__(20);
 
-var scrollTarget_1 = __webpack_require__(21);
+var scrollSnap_1 = __webpack_require__(21);
 
-var scrollTo_1 = __webpack_require__(22);
+var scrollTarget_1 = __webpack_require__(22);
 
-var slideLooper_1 = __webpack_require__(23);
+var scrollTo_1 = __webpack_require__(23);
 
-var translate_1 = __webpack_require__(24);
+var slideLooper_1 = __webpack_require__(24);
 
-var utils_1 = __webpack_require__(1);
+var translate_1 = __webpack_require__(25);
 
+var utils_1 = __webpack_require__(2);
+
 var vector1d_1 = __webpack_require__(0);
@@ -861,3 +870,2 @@
     loop: loop,
-    chunkSize: chunkSize,
     contentSize: contentSize
@@ -911,3 +919,2 @@ });
       contentSize: contentSize,
-      dragFree: dragFree,
       index: index,
@@ -953,3 +960,9 @@ limit: limit,
     }),
+    scrollBy: scrollBy_1.ScrollBy({
+      limit: limit,
+      location: location,
+      loop: loop
+    }),
     scrollLooper: scrollLooper_1.ScrollLooper({
+      chunkSize: chunkSize,
       contentSize: contentSize,
@@ -1204,3 +1217,3 @@ limit: limit,
     } else {
-      scrollTo.distance(force);
+      scrollTo.distance(force, !dragFree);
     }
@@ -1303,3 +1316,3 @@ }
 
-var utils_1 = __webpack_require__(1);
+var utils_1 = __webpack_require__(2);
 
@@ -1500,5 +1513,4 @@ var vector1d_1 = __webpack_require__(0);
   function shouldConstrain(v) {
-    var l = location.get();
-    var constrainMin = reachedMin(l) && v.get() !== min;
-    var constrainMax = reachedMax(l) && v.get() !== max;
+    var constrainMin = reachedMin(location.get()) && v.get() !== min;
+    var constrainMax = reachedMax(location.get()) && v.get() !== max;
     return constrainMin || constrainMax;
@@ -1538,6 +1550,47 @@ }
 
-var limit_1 = __webpack_require__(2);
+function ScrollBy(params) {
+  var loop = params.loop,
+      limit = params.limit,
+      location = params.location;
+  var min = limit.min,
+      max = limit.max,
+      reachedMin = limit.reachedMin,
+      reachedMax = limit.reachedMax;
+  var scrollLength = min - max;
 
-var utils_1 = __webpack_require__(1);
+  function withinBounds(n) {
+    var target = location.get() + n;
+    if (reachedMax(target)) return max - location.get();
+    if (reachedMin(target)) return min - location.get();
+    return n;
+  }
 
+  function distance(n) {
+    var progress = scrollLength * n;
+    return loop ? progress : withinBounds(progress);
+  }
+
+  var self = {
+    distance: distance
+  };
+  return Object.freeze(self);
+}
+
+exports.ScrollBy = ScrollBy;
+
+/***/ }),
+/* 17 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var limit_1 = __webpack_require__(1);
+
+var utils_1 = __webpack_require__(2);
+
 function ScrollContain(params) {
@@ -1564,6 +1617,6 @@ var alignSize = params.alignSize,
   function findDuplicates(scrollSnaps) {
-    var firstSnap = scrollSnaps[0];
-    var lastSnap = scrollSnaps[scrollSnaps.length - 1];
-    var min = scrollSnaps.lastIndexOf(firstSnap) + 1;
-    var max = scrollSnaps.indexOf(lastSnap);
+    var startSnap = scrollSnaps[0];
+    var endSnap = scrollSnaps[scrollSnaps.length - 1];
+    var min = scrollSnaps.lastIndexOf(startSnap) + 1;
+    var max = scrollSnaps.indexOf(endSnap);
     return limit_1.Limit({
@@ -1575,16 +1628,7 @@ min: min,
 
-  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 (!contentExceedsView) return [slideIndexes];
+    var containedSnaps = scrollSnaps.map(bounds.constrain);
 
-    var _findDuplicates = findDuplicates(containToView(scrollSnaps)),
+    var _findDuplicates = findDuplicates(containedSnaps),
         min = _findDuplicates.min,
@@ -1601,3 +1645,3 @@ max = _findDuplicates.max;
     if (!contentExceedsView) return [alignSize.measure(contentSize)];
-    var containedSnaps = containToView(scrollSnaps);
+    var containedSnaps = scrollSnaps.map(bounds.constrain);
 
@@ -1621,3 +1665,3 @@ var _findDuplicates2 = findDuplicates(containedSnaps),
 /***/ }),
-/* 17 */
+/* 18 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1632,9 +1676,7 @@
 
-var limit_1 = __webpack_require__(2);
+var limit_1 = __webpack_require__(1);
 
 function ScrollLimit(params) {
   var contentSize = params.contentSize,
-      chunkSize = params.chunkSize,
       loop = params.loop;
-  var loopSize = -contentSize + chunkSize.measure(1);
 
@@ -1644,7 +1686,7 @@ function measure(scrollSnaps) {
     var endSnap = scrollSnaps[scrollSnaps.length - 1];
+    var min = loop ? startSnap - contentSize : endSnap;
     var max = startSnap;
-    var min = loop ? max + loopSize : endSnap;
     return limit_1.Limit({
-      max: max,
-      min: min
+      min: min,
+      max: max
     });
@@ -1662,3 +1704,3 @@ }
 /***/ }),
-/* 18 */
+/* 19 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1673,10 +1715,20 @@
 
+var limit_1 = __webpack_require__(1);
+
 function ScrollLooper(params) {
   var limit = params.limit,
       location = params.location,
+      chunkSize = params.chunkSize,
       contentSize = params.contentSize,
       vectors = params.vectors;
-  var reachedMin = limit.reachedMin,
-      reachedMax = limit.reachedMax;
+  var min = limit.min + chunkSize.measure(0.1);
+  var max = limit.max + chunkSize.measure(0.1);
 
+  var _limit_1$Limit = limit_1.Limit({
+    min: min,
+    max: max
+  }),
+      reachedMin = _limit_1$Limit.reachedMin,
+      reachedMax = _limit_1$Limit.reachedMax;
+
   function shouldLoop(direction) {
@@ -1705,3 +1757,3 @@ var reachedLimit = direction === -1 ? reachedMin : reachedMax;
 /***/ }),
-/* 19 */
+/* 20 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1721,7 +1773,7 @@
       max = limit.max;
-  var scrollLimit = min - max;
+  var scrollLength = min - max;
 
   function get() {
     var currentLocation = location.get() - max;
-    return currentLocation / scrollLimit;
+    return currentLocation / scrollLength;
   }
@@ -1738,3 +1790,3 @@
 /***/ }),
-/* 20 */
+/* 21 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1751,3 +1803,3 @@
 
-var limit_1 = __webpack_require__(2);
+var limit_1 = __webpack_require__(1);
 
@@ -1758,11 +1810,2 @@ function ScrollSnap(params) {
       loop = params.loop;
-  var limit = limit_1.Limit({
-    min: 0,
-    max: snapSizes.length - 1
-  });
-  var counter = counter_1.Counter({
-    limit: limit,
-    start: 0,
-    loop: loop
-  });
   var alignSizes = snapSizes.map(alignSize.measure);
@@ -1772,2 +1815,11 @@ var distancesBetween = distancesBetweenScrollSnaps();
   function distancesBetweenScrollSnaps() {
+    var limit = limit_1.Limit({
+      min: 0,
+      max: snapSizes.length - 1
+    });
+    var counter = counter_1.Counter({
+      limit: limit,
+      start: 0,
+      loop: loop
+    });
     return snapSizes.map(function (size, index) {
@@ -1795,3 +1847,3 @@ var next = counter.clone().set(index + 1);
 /***/ }),
-/* 21 */
+/* 22 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1850,3 +1902,3 @@
     var foundIndex = snapBounds.reduce(function (a, b, i) {
-      return distance < b.start && distance > b.end ? i : a;
+      return distance <= b.start && distance > b.end ? i : a;
     }, 0);
@@ -1887,5 +1939,4 @@ return {
 
-  function byDistance(force) {
+  function byDistance(force, snap) {
     var target = params.target,
-        dragFree = params.dragFree,
         index = params.index;
@@ -1896,3 +1947,3 @@ var distance = target.get() + force;
 
-    if (reachedEdge || dragFree) {
+    if (reachedEdge || !snap) {
       var min = index.min,
@@ -1930,3 +1981,3 @@ max = index.max;
 /***/ }),
-/* 22 */
+/* 23 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1965,4 +2016,4 @@
 
-  function distance(n) {
-    var target = scrollTarget.byDistance(n);
+  function distance(n, snap) {
+    var target = scrollTarget.byDistance(n, snap);
     scrollTo(target);
@@ -1987,3 +2038,3 @@ }
 /***/ }),
-/* 23 */
+/* 24 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2103,3 +2154,3 @@
 /***/ }),
-/* 24 */
+/* 25 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2114,3 +2165,3 @@
 
-var utils_1 = __webpack_require__(1);
+var utils_1 = __webpack_require__(2);
 
@@ -2147,3 +2198,3 @@ function Translate(node) {
 /***/ }),
-/* 25 */
+/* 26 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2202,3 +2253,3 @@
 /***/ }),
-/* 26 */
+/* 27 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2205,0 +2256,0 @@

package.json

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

README.md

@@ -837,3 +837,3 @@ <br />
 embla.on('select', () => {
-  console.log(`Selected snap index is ${embla.selectedScrollSnap()}!`)
+  console.log(`Selected snap index is ${embla.selectedScrollSnap()}.`)
 })
@@ -1607,29 +1607,139 @@ ```
 
-##### `on(event, callback)`
+##### `on`
 
-<p>Subscribes to a custom Embla event by firing the passed callback. Below is a list of events you can subscribe to:</p>
+<details>
+  <summary>
+    Subscribe to an Embla specific event with a callback.
+  </summary>
+  <hr>
+  <div>
+    This API method enables the use of event listeners by attaching them to any of the Embla specific 
+    <a href="#events">
+      <code>events</code>
+    </a>. For example, it's useful for changing styles whenever a new target snap point has been selected or when the carousel is scrolling. Use it together with the 
+    <a href="#off">
+      <code>off</code>
+    </a> method to remove added event listeners without destroying the carousel. However, when the
+    <a href="#destroy">
+      <code>destroy</code>
+    </a> method is invoked, any added event listeners will be destroyed.
+  </div>
+  <br>
+  <div>
+    <sup>
+      <strong>Parameters: </strong>
+      <code>event: <a href="#events">EmblaEvent</a></code>
+      <code>callback: function</code>
+    </sup>
+  </div>
+  <div>
+    <sup>
+      <strong>Return Type: </strong>
+      <code>undefined</code>
+    </sup>
+  </div>
+  <br>
+  <div>
+    <a href="https://codesandbox.io/s/embla-carousel-on-off-pjgmk">
+      <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" alt="CodeSandbox" />
+    </a>
+    &nbsp;
+    <a href="https://codesandbox.io/s/embla-carousel-on-off-pjgmk">
+      <code>CodeSandbox</code>
+    </a> 
+  </div>
+  <br>
+  <p>
+    <strong>Usage</strong>
+  </p>
+  
+```javascript
+const embla = EmblaCarousel(emblaNode, options)
 
-- **`init`** - When the carousel has been initialised for the first time.
-- **`destroy`** - When the carousel has been destroyed.
-- **`select`** - When a new target slide has been selected.
-- **`scroll`** - When carousel is scrolled.
-- **`resize`** - When window size changes.
-- **`dragStart`** - When carousel dragging begins.
-- **`dragEnd`** - When carousel dragging ends.
+const onInitCallback = () => {
+  console.log('The carousel has just been initialized.')
+}
 
-<sup>
-  ✨ <strong>Demo</strong> - 
-  <a href="https://codesandbox.io/s/embla-carousel-on-off-pjgmk"><code>embla.on()</code></a>
-</sup>
+embla.on('init', onInitCallback)
+```
 
-##### `off(event, callback)`
+<hr>    
+</details>
 
-<p>Ends subscription to a custom Embla event by removing the passed callback. This works for all events listed on the <code>on</code> method.</p>
-<sup>
-  ✨ <strong>Demo</strong> - 
-  <a href="https://codesandbox.io/s/embla-carousel-on-off-pjgmk"><code>embla.off()</code></a>
-</sup>
+##### `off`
 
+
+<details>
+  <summary>
+    Unsubscribe from an Embla specific event.
+  </summary>
+  <hr>
+  <div>
+    This API method enables the removal of event listeners attached to Embla specific
+    <a href="#events">
+      <code>events</code>
+    </a>. It's useful for removing added event listeners without destroying the carousel. Note that you don't have to remove event listeners added using the 
+    <a href="#on">
+      <code>on</code>
+    </a> method when invoking
+    <a href="#destroy">
+      <code>destroy</code>
+    </a>, because it will destroy all added event listeners for you.
+  </div>
+  <br>
+  <div>
+    <sup>
+      <strong>Parameters: </strong>
+      <code>event: <a href="#events">EmblaEvent</a></code>
+      <code>callback: function</code>
+    </sup>
+  </div>
+  <div>
+    <sup>
+      <strong>Return Type: </strong>
+      <code>undefined</code>
+    </sup>
+  </div>
+  <br>
+  <div>
+    <a href="https://codesandbox.io/s/embla-carousel-on-off-pjgmk">
+      <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" alt="CodeSandbox" />
+    </a>
+    &nbsp;
+    <a href="https://codesandbox.io/s/embla-carousel-on-off-pjgmk">
+      <code>CodeSandbox</code>
+    </a> 
+  </div>
+  <br>
+  <p>
+    <strong>Usage</strong>
+  </p>
+  
+```javascript
+const embla = EmblaCarousel(emblaNode, options)
+
+const logIndexToConsole = () => {
+  console.log(`Selected index has changed to ${embla.selectedScrollSnap()}.`)
+}
+
+const addLogIndexListener = () => embla.on('select', logIndexToConsole);
+const removeLogIndexListener = () => embla.off('select', logIndexToConsole);
+```
+
+<hr>    
+</details>
+
 ## Events
 
+Embla exposes custom events that can be hooked on to. Example usage:
+
+```javascript
+embla.on('select', () => {
+  console.log(`Selected snap index is ${embla.selectedScrollSnap()}.`)
+})
+embla.on('scroll', () => {
+  console.log(`Scroll progress is ${embla.scrollProgress()}.`)
+})
+```
+
 ##### `init`
@@ -1636,0 +1746,0 @@

No alert changes

Improved metrics

Total package byte prevSize

120895

increased by3.59%

Number of package files

31

increased by3.33%

Lines of code

2230

increased by2.43%

Number of lines in readme file

2055

increased by5.66%

No dependency changes