embla-carousel - npm Package Compare versions

Comparing version 2.1.12 to 2.1.13

lib/components/dragBehaviour.d.ts

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

lib/components/engine.d.ts

@@ -10,4 +10,4 @@ import { Animation } from './animation';
 import { Options } from './options';
+import { Scroller } from './scroller';
 import { Translate } from './translate';
-import { Traveller } from './traveller';
 import { Vector1D } from './vector1d';
@@ -26,4 +26,4 @@ export declare type Engine = {
     translate: Translate;
-    travel: Traveller;
+    scroll: Scroller;
 };
 export declare function Engine(root: HTMLElement, container: HTMLElement, slides: HTMLElement[], options: Options, events: EventDispatcher): Engine;

lib/index.js

@@ -414,3 +414,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
     active: false,
-    lastWindowWidth: 0
+    windowWidth: 0
   };
@@ -451,3 +451,3 @@
     var isFirstInit = !state.active;
-    state.lastWindowWidth = window.innerWidth;
+    state.windowWidth = window.innerWidth;
     storeElements();
@@ -567,6 +567,6 @@
   function resize() {
-    var windowWidth = window.innerWidth;
+    var newWindowWidth = window.innerWidth;
 
-    if (windowWidth !== state.lastWindowWidth) {
-      state.lastWindowWidth = windowWidth;
+    if (newWindowWidth !== state.windowWidth) {
+      state.windowWidth = newWindowWidth;
       reActivate();
@@ -600,3 +600,3 @@ events.dispatch('resize');
     slider.mover.useDefaultMass().useDefaultSpeed();
-    slider.travel.toNext();
+    slider.scroll.toNext();
   }
@@ -606,3 +606,3 @@
     slider.mover.useDefaultMass().useDefaultSpeed();
-    slider.travel.toPrevious();
+    slider.scroll.toPrevious();
   }
@@ -612,3 +612,3 @@
     slider.mover.useDefaultMass().useDefaultSpeed();
-    slider.travel.toIndex(index);
+    slider.scroll.toIndex(index);
   }
@@ -689,9 +689,9 @@
 
-var snapPosition_1 = __webpack_require__(18);
+var scroller_1 = __webpack_require__(18);
 
-var targetFinder_1 = __webpack_require__(19);
+var snapPosition_1 = __webpack_require__(19);
 
-var translate_1 = __webpack_require__(20);
+var targetFinder_1 = __webpack_require__(20);
 
-var traveller_1 = __webpack_require__(21);
+var translate_1 = __webpack_require__(21);
 
@@ -798,3 +798,3 @@ var utils_1 = __webpack_require__(2);
   });
-  var travel = traveller_1.Traveller({
+  var scroll = scroller_1.Scroller({
     animation: animation,
@@ -829,5 +829,5 @@ events: events,
     pointer: pointer_1.Pointer(chunkSize),
+    scroll: scroll,
     snapSizes: snapSizes,
-    target: target,
-    travel: travel
+    target: target
   }); // Slider
@@ -855,2 +855,3 @@
     pointer: pointer,
+    scroll: scroll,
     shifter: infiniteShifter_1.InfiniteShifter({
@@ -864,4 +865,3 @@ contentSize: contentSize,
     target: target,
-    translate: translate_1.Translate(container),
-    travel: travel
+    translate: translate_1.Translate(container)
   };
@@ -1152,3 +1152,3 @@ return Object.freeze(slider);
   function seekTargetBy(force) {
-    var travel = params.travel,
+    var scroll = params.scroll,
         snapSizes = params.snapSizes,
@@ -1164,5 +1164,5 @@ index = params.index;
       var next = index.clone().add(indexDiff);
-      travel.toIndex(next.get());
+      scroll.toIndex(next.get());
     } else {
-      travel.toDistance(force);
+      scroll.toDistance(force);
     }
@@ -1647,2 +1647,80 @@ }
 
+function Scroller(params) {
+  var index = params.index,
+      findTarget = params.findTarget,
+      animation = params.animation;
+
+  function scrollTo(next) {
+    var indexPrevious = params.indexPrevious,
+        events = params.events,
+        target = params.target;
+    var distanceDiff = next.distance;
+    var indexDiff = next.index !== index.get();
+
+    if (distanceDiff) {
+      animation.start();
+      target.addNumber(distanceDiff);
+    }
+
+    if (indexDiff) {
+      indexPrevious.set(index.get());
+      index.set(next.index);
+      events.dispatch('select');
+    }
+
+    return self;
+  }
+
+  function toDistance(force) {
+    var next = findTarget.byDistance(force);
+    scrollTo(next);
+    return self;
+  }
+
+  function findIndex(target, direction) {
+    var next = findTarget.byIndex(target.get(), direction);
+    scrollTo(next);
+    return self;
+  }
+
+  function toIndex(target) {
+    var next = index.clone().set(target);
+    findIndex(next, 0);
+    return self;
+  }
+
+  function toNext() {
+    var next = index.clone().add(1);
+    findIndex(next, -1);
+    return self;
+  }
+
+  function toPrevious() {
+    var next = index.clone().add(-1);
+    findIndex(next, 1);
+    return self;
+  }
+
+  var self = {
+    toDistance: toDistance,
+    toIndex: toIndex,
+    toNext: toNext,
+    toPrevious: toPrevious
+  };
+  return Object.freeze(self);
+}
+
+exports.Scroller = Scroller;
+
+/***/ }),
+/* 19 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 var limit_1 = __webpack_require__(4);
@@ -1711,3 +1789,3 @@
 /***/ }),
-/* 19 */
+/* 20 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1843,3 +1921,3 @@
 /***/ }),
-/* 20 */
+/* 21 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1893,80 +1971,2 @@
 /***/ }),
-/* 21 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-function Traveller(params) {
-  var index = params.index,
-      findTarget = params.findTarget,
-      animation = params.animation;
-
-  function travelTo(next) {
-    var indexPrevious = params.indexPrevious,
-        events = params.events,
-        target = params.target;
-    var distanceDiff = next.distance;
-    var indexDiff = next.index !== index.get();
-
-    if (distanceDiff) {
-      animation.start();
-      target.addNumber(distanceDiff);
-    }
-
-    if (indexDiff) {
-      indexPrevious.set(index.get());
-      index.set(next.index);
-      events.dispatch('select');
-    }
-
-    return self;
-  }
-
-  function toDistance(force) {
-    var next = findTarget.byDistance(force);
-    travelTo(next);
-    return self;
-  }
-
-  function findIndex(target, direction) {
-    var next = findTarget.byIndex(target.get(), direction);
-    travelTo(next);
-    return self;
-  }
-
-  function toIndex(target) {
-    var next = index.clone().set(target);
-    findIndex(next, 0);
-    return self;
-  }
-
-  function toNext() {
-    var next = index.clone().add(1);
-    findIndex(next, -1);
-    return self;
-  }
-
-  function toPrevious() {
-    var next = index.clone().add(-1);
-    findIndex(next, 1);
-    return self;
-  }
-
-  var self = {
-    toDistance: toDistance,
-    toIndex: toIndex,
-    toNext: toNext,
-    toPrevious: toPrevious
-  };
-  return Object.freeze(self);
-}
-
-exports.Traveller = Traveller;
-
-/***/ }),
 /* 22 */
@@ -1973,0 +1973,0 @@ /***/ (function(module, exports, __webpack_require__) {

package.json

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

README.md

@@ -249,3 +249,3 @@ <br />
 
-Embla exposes a set of methods upon setup that can be used to control the carousel externally. Example usage looks like this:
+Embla exposes API methods that can be used to control the carousel externally. Example usage:
 
@@ -261,40 +261,94 @@ ```javascript
 
-...and the methods are:
+##### `containerNode()`
 
-**`containerNode()`**  
-Returns the current container element node.
+<p>Returns the current container element node.</p>
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-containernode-fq9xw"><code>embla.containerNode()</code></a>
+</sup>
 
-**`slideNodes()`**  
-Returns the slides as an array of element nodes.
+##### `slideNodes()`
 
-**`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.
+<p>Returns the slides as an array of element nodes.</p>
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-slidenodes-dsesp"><code>embla.slideNodes()</code></a>
+</sup>
 
-**`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.
+##### `scrollNext()`
 
-**`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.
+<p>Scrolls to next snap point if possible. If <code>loop: false</code> and the carousel is on the last snap point this method will do nothing.</p>
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-scrollnext-scrollprev-hutpm"><code>embla.scrollNext()</code></a>
+</sup>
 
-**`canScrollPrev()`**  
-Returns if it's possible to scroll to a previous snap point. Note that if `loop: true` this will always return `true`.
+##### `scrollPrev()`
 
-**`canScrollNext()`**  
-Returns if it's possible to scroll to a next snap point. Note that if `loop: true` this will always return `true`.
+<p>Scrolls to previous snap point if possible. If <code>loop: false</code> and the carousel is on the first snap point this method will do nothing.</p>
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-scrollnext-scrollprev-hutpm"><code>embla.scrollPrev()</code></a>
+</sup>
 
-**`selectedScrollSnap()`**  
-Returns the index of the selected snap point. Each snap point scrolls more than one slide if `slidesToScroll > 1`. Zero-based.
+##### `scrollTo(index)`
 
-**`previousScrollSnap()`**  
-Returns the index of the previous snap point. Each snap point scrolls more than one slide if `slidesToScroll > 1`. Zero-based.
+<p>Scrolls to the snap point that matches the passed index. If <code>loop: true</code> the carousel will seek the closest way to the target.</p>
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-scrollto-3igby"><code>embla.scrollTo()</code></a>
+</sup>
 
-**`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.
+##### `canScrollPrev()`
 
-**`changeOptions(options)`**  
-Applies passed options by doing all the necessary calculations and reinitialising the carousel from scratch.
+<p>Returns if it's possible to scroll to a previous snap point. If <code>loop: true</code> this will always return <code>true</code>.</p>
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-canscrollprev-canscrollnext-4wt5z"><code>embla.canScrollPrev()</code></a>
+</sup>
 
-**`on(event, callback)`**  
-Subscribes to a custom Embla event by firing the passed callback. Below is a list of events you can subscribe to:
+##### `canScrollNext()`
 
+<p>Returns if it's possible to scroll to a next snap point. If <code>loop: true</code> this will always return <code>true</code>.</p>
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-canscrollprev-canscrollnext-4wt5z"><code>embla.canScrollNext()</code></a>
+</sup>
+
+##### `selectedScrollSnap()`
+
+<p>Returns the index of the selected snap point. Each snap point scrolls more than one slide if <code>slidesToScroll > 1</code>. Zero-based.</p>
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-selectedscrollsnap-previousscrollsnap-04ux1"><code>embla.selectedScrollSnap()</code></a>
+</sup>
+
+##### `previousScrollSnap()`
+
+<p>Returns the index of the previous snap point. Each snap point scrolls more than one slide if <code>slidesToScroll > 1</code>. Zero-based.</p>
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-selectedscrollsnap-previousscrollsnap-04ux1"><code>embla.previousScrollSnap()</code></a>
+</sup>
+
+##### `scrollSnapList()`
+
+<p>Returns an array of all scroll snap points, each containing slide numbers and slide nodes.</p>
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-scrollsnaplist-9bnsk"><code>embla.scrollSnapList()</code></a>
+</sup>
+
+##### `changeOptions(options)`
+
+<p>Applies passed options by doing all the necessary calculations and initialising the carousel from scratch.</p>
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-changeoptions-mybvm"><code>embla.changeOptions()</code></a>
+</sup>
+
+##### `on(event, callback)`
+
+<p>Subscribes to a custom Embla event by firing the passed callback. Below is a list of events you can subscribe to:</p>
+
 - **`init`** - When the carousel has been initialised for the first time.
@@ -307,8 +361,23 @@ - **`destroy`** - When the carousel has been destroyed.
 
-**`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.
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-on-off-pjgmk"><code>embla.on()</code></a>
+</sup>
 
-**`destroy()`**  
-Removes all styles applied to DOM nodes and kills all event listeners for this Embla instance.
+##### `off(event, callback)`
 
+<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>
+
+##### `destroy()`
+
+<p>Removes all styles applied to DOM nodes and kills all event listeners for this Embla instance.</p>
+<sup>
+  ✨ <strong>Demo</strong> - 
+  <a href="https://codesandbox.io/s/embla-carousel-destroy-t4ly1"><code>embla.destroy()</code></a>
+</sup>
+
 ## Browser Support
@@ -331,4 +400,3 @@
 
-- **`I just want to support it`**: Thank you! Give it a **star** maybe ⭐?
-- **`I want to spread the word`**: You're a star! Why not **twitter** or similar 📣?
+- **`I like it`**: Thank you! Give it a **star** maybe ⭐?
 - **`I want to get my hands dirty`**: Awesome! Read the [contribution guidelines](https://github.com/davidcetinkaya/embla-carousel/blob/master/CONTRIBUTING.md) first 📋.
@@ -335,0 +403,0 @@

No alert changes

Improved metrics

Total package byte prevSize

76767

increased by2.68%

Number of lines in readme file

409

increased by19.94%

No dependency changes