embla-carousel - npm Package Compare versions

Comparing version 0.6.4 to 0.7.0

lib/components/dragBehaviour.d.ts

@@ -27,5 +27,2 @@ import { Animation } from './animation';
     isDown: () => boolean;
-    down: (evt: Event) => void;
-    move: (evt: Event) => void;
-    up: () => void;
     removeAllEvents: () => void;
@@ -32,0 +29,0 @@ addActivationEvents: () => void;

lib/components/engine.d.ts

@@ -18,2 +18,4 @@ import { Animation } from './animation';
     index: Counter;
+    indexPrevious: Counter;
+    indexGroups: number[][];
     mover: Mover;
@@ -20,0 +22,0 @@ pointer: DragBehaviour;

lib/components/traveller.d.ts

@@ -10,2 +10,3 @@ import { Animation } from './animation';
     index: Counter;
+    indexPrevious: Counter;
     findTarget: TargetFinder;
@@ -12,0 +13,0 @@ events: EventDispatcher;

lib/index.d.ts

 import { Callback as EmblaCallback, Event as EmblaEvent } from './components/eventDispatcher';
 import { UserOptions } from './components/options';
-declare type EmblaCarousel = {
+export declare type EmblaCarousel = {
     next: () => void;
@@ -8,5 +8,7 @@ previous: () => void;
     destroy: () => void;
-    getContainer: () => HTMLElement;
-    getSlides: () => HTMLElement[];
-    getSelectedIndex: () => number;
+    containerNode: () => HTMLElement;
+    slideNodes: () => HTMLElement[];
+    selectedIndex: () => number;
+    previousIndex: () => number;
+    groupedIndexes: () => number[][];
     on: (evt: EmblaEvent, cb: EmblaCallback) => void;
@@ -18,1 +20,2 @@ off: (evt: EmblaEvent, cb: EmblaCallback) => void;
 export default EmblaCarousel;
+export { UserOptions };

lib/index.js

@@ -353,7 +353,2 @@ (function webpackUniversalModuleDefinition(root, factory) {
   var userOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var slider = {};
-  var elements = {};
-
-  var options = _extends({}, options_1.defaultOptions, userOptions);
-
   var state = {
@@ -363,2 +358,5 @@ active: false,
   };
+
+  var options = _extends({}, options_1.defaultOptions, userOptions);
+
   var events = eventDispatcher_1.EventDispatcher();
@@ -368,2 +366,4 @@ var eventStore = eventStore_1.EventStore();
   var changeOptions = reActivate;
+  var slider = {};
+  var elements = {};
   var on = events.on,
@@ -374,5 +374,3 @@ off = events.off;
   function storeElements() {
-    var root = sliderRoot;
-
-    if (!root) {
+    if (!sliderRoot) {
       throw new Error('No root element provided 😢');
@@ -382,3 +380,3 @@ }
     var selector = options.containerSelector;
-    var container = root.querySelector(selector);
+    var container = sliderRoot.querySelector(selector);
 
@@ -389,3 +387,3 @@ if (!container) {
 
-    elements.root = root;
+    elements.root = sliderRoot;
     elements.container = container;
@@ -399,4 +397,4 @@ elements.slides = utils_1.arrayFromCollection(container.children);
     var firstInit = !state.active;
+    state.lastWindowWidth = window.innerWidth;
     storeElements();
-    state.lastWindowWidth = window.innerWidth;
 
@@ -415,18 +413,14 @@ if (elements.slides.length > 0) {
       eventStore.add(window, 'resize', debouncedResize);
-      slides.forEach(function (s, i) {
-        return eventStore.add(s, 'focus', slideFocus(i), true);
-      });
+      slides.forEach(slideFocus);
       slider.translate.to(slider.mover.location);
 
       if (options.draggable) {
-        var draggable = options.draggableClass;
         var dragging = options.draggingClass;
-        var className = root.classList;
         slider.pointer.addActivationEvents();
-        className.add(draggable);
+        root.classList.add(options.draggableClass);
         events.on('dragStart', function () {
-          return className.add(dragging);
+          return root.classList.add(dragging);
         });
         events.on('dragEnd', function () {
-          return className.remove(dragging);
+          return root.classList.remove(dragging);
         });
@@ -440,3 +434,4 @@ }
       if (firstInit) {
-        events.on('select', addClassToSelected(slides));
+        events.on('select', toggleSelectedClass);
+        toggleSelectedClass();
         setTimeout(function () {
@@ -449,26 +444,27 @@ return events.dispatch('init');
 
-  function addClassToSelected(nodes) {
-    var className = options.selectedClass;
-    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);
+  function toggleSelectedClass() {
+    var slides = elements.slides;
+    var index = slider.index,
+        indexPrevious = slider.indexPrevious,
+        indexGroups = slider.indexGroups;
+    var selected = options.selectedClass;
+    var previousGroup = indexGroups[indexPrevious.get()];
+    var currentGroup = indexGroups[index.get()];
+    previousGroup.forEach(function (i) {
+      return slides[i].classList.remove(selected);
     });
-    return function () {
-      var selectedIndex = slider.index.get();
-      nodes.filter(function (n) {
-        return n.classList.contains(className);
-      }).forEach(function (n) {
-        return n.classList.remove(className);
-      });
-      indexGroups[selectedIndex].forEach(function (i) {
-        return nodes[i].classList.add(className);
-      });
-    };
+    currentGroup.forEach(function (i) {
+      return slides[i].classList.add(selected);
+    });
   }
 
-  function slideFocus(index) {
-    return function () {
+  function slideFocus(slide, index) {
+    var focus = function focus() {
       sliderRoot.scrollLeft = 0;
-      goTo(index);
+      var groupIndex = Math.floor(index / options.groupSlides);
+      var selectedGroup = index ? groupIndex : index;
+      goTo(selectedGroup);
     };
+
+    eventStore.add(slide, 'focus', focus, true);
   }
@@ -536,11 +532,19 @@
 
-  function getSelectedIndex() {
+  function selectedIndex() {
     return slider.index.get();
   }
 
-  function getContainer() {
+  function previousIndex() {
+    return slider.indexPrevious.get();
+  }
+
+  function groupedIndexes() {
+    return slider.indexGroups;
+  }
+
+  function containerNode() {
     return elements.container;
   }
 
-  function getSlides() {
+  function slideNodes() {
     return elements.slides;
@@ -551,11 +555,13 @@ }
     changeOptions: changeOptions,
+    containerNode: containerNode,
     destroy: destroy,
-    getContainer: getContainer,
-    getSelectedIndex: getSelectedIndex,
-    getSlides: getSlides,
     goTo: goTo,
+    groupedIndexes: groupedIndexes,
     next: next,
     off: off,
     on: on,
-    previous: previous
+    previous: previous,
+    previousIndex: previousIndex,
+    selectedIndex: selectedIndex,
+    slideNodes: slideNodes
   };
@@ -565,3 +571,4 @@ return Object.freeze(self);
 
-exports.EmblaCarousel = EmblaCarousel; // @ts-ignore
+exports.EmblaCarousel = EmblaCarousel;
+exports["default"] = EmblaCarousel; // @ts-ignore
 
@@ -620,9 +627,7 @@ module.exports = EmblaCarousel;
       dragFree = options.dragFree,
-      groupSlides = options.groupSlides;
-  var speedLimit = limit_1.Limit({
-    min: 5,
-    max: 20
-  }); // Index
+      groupSlides = options.groupSlides; // Index
 
   var indexMax = Math.ceil(slides.length / groupSlides) - 1;
+  var indexes = Object.keys(slides).map(Number);
+  var indexGroups = utils_1.groupNumbers(indexes, groupSlides);
   var index = counter_1.Counter({
@@ -635,3 +640,4 @@ limit: limit_1.Limit({
     start: startIndex
-  }); // Measurements
+  });
+  var indexPrevious = index.clone(); // Measurements
 
@@ -680,6 +686,3 @@ var rootSize = utils_1.rectWidth(container);
     if (!pointer.isDown()) {
-      if (!loop) {
-        slider.edgeGuard.constrain(target);
-      }
-
+      if (!loop) slider.edgeGuard.constrain(target);
       slider.mover.seek(target).update();
@@ -713,3 +716,3 @@
     maxForce: chunkSize.root * 2,
-    speed: speedLimit.constrain(speed)
+    speed: speed
   });
@@ -732,2 +735,3 @@ var travel = traveller_1.Traveller({
     index: index,
+    indexPrevious: indexPrevious,
     target: target
@@ -767,2 +771,4 @@ }); // Pointer
     index: index,
+    indexGroups: indexGroups,
+    indexPrevious: indexPrevious,
     mover: mover,
@@ -781,3 +787,3 @@ pointer: pointer,
   };
-  return slider;
+  return Object.freeze(slider);
 }
@@ -1098,7 +1104,4 @@
     direction: direction,
-    down: down,
     isDown: isDown,
-    move: move,
-    removeAllEvents: removeAllEvents,
-    up: up
+    removeAllEvents: removeAllEvents
   };
@@ -1803,7 +1806,7 @@ return Object.freeze(self);
   function travelTo(next) {
-    var events = params.events,
+    var indexPrevious = params.indexPrevious,
+        events = params.events,
         target = params.target;
-    var nextIndex = next.index;
     var distanceDiff = next.distance;
-    var indexDiff = nextIndex !== index.get();
+    var indexDiff = next.index !== index.get();
 
@@ -1816,3 +1819,4 @@ if (distanceDiff) {
     if (indexDiff) {
-      index.set(nextIndex);
+      indexPrevious.set(index.get());
+      index.set(next.index);
       events.dispatch('select');
@@ -1819,0 +1823,0 @@ }

package.json

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

README.md

@@ -153,22 +153,28 @@ # Embla Carousel · ![GitHub](https://img.shields.io/github/license/davidcetinkaya/embla-carousel.svg?color=blue) ![npm](https://img.shields.io/npm/v/embla-carousel.svg) ![Travis (.org) branch](https://img.shields.io/travis/davidcetinkaya/embla-carousel/master.svg) ![prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)
 
-**`getContainer()`**  
-Gets the current container element node.
+**`containerNode()`**  
+Returns the current container element node.
 
-**`getSlides()`**  
-Gets the slides as an array of element nodes.
+**`slideNodes()`**  
+Returns the slides as an array of element nodes.
 
-**`getSelectedIndex()`**  
-Gets the current selected slide index. First slide starts at index 0.
+**`selectedIndex()`**  
+Returns the current selected index. Each index contains multiple slides if `groupSlides` options is set to more than `1`. If `groupCells` is set to `1` each slide has its own index. Zero-based.
 
+**`previousIndex()`**  
+Returns the previous selected index. Each index contains multiple slides if `groupSlides` options is set to more than `1`. If `groupCells` is set to `1` each slide has its own index. Zero-based.
+
+**`groupedIndexes()`**  
+Returns an array of all slide indexes grouped into arrays according to the `groupSlides` option, i.e. if the total number of slides is `4` and `groupSlides` is set to `2`, it will return `[[0, 1], [2, 3]]`.
+
 **`next()`**  
-Goes to next item. If loop is disabled and the carousel is on the last slide this method will do nothing.
+Moves to next item. If `loop` option is set to `false` and the carousel is on the last slide this method will do nothing.
 
 **`previous()`**  
-Goes to previous item. If loop is disabled and the carousel is on the first slide this method will do nothing.
+Moves to previous item. If `loop` option is set to `false` and the carousel is on the first slide this method will do nothing.
 
 **`goTo(index: number)`**
-Goes to item that matches passed index. If loop is enabled the carousel will seek the closest way to passed index.
+Moves to item that matches passed index. If `loop` option is set to `true` the carousel will seek the closest way to the passed index.
 
 **`changeOptions(options: options)`**  
-Applies passed options by doing all the necessary calculations and reinitializing the carousel from scratch.
+Applies passed options by doing all the necessary calculations and reinitialising the carousel from scratch.
 
@@ -178,3 +184,3 @@ **`on(event: string, callback: function)`**
 
-- **`init`** - Triggers after the carousel has been initialized for the first time.
+- **`init`** - Triggers after the carousel has been initialised for the first time.
 - **`destroy`** - Triggers after the carousel has been destroyed.
@@ -181,0 +187,0 @@ - **`select`** - Triggers when a new target slide has been selected.

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

65041

increased by1.74%

Lines of code

1906

increased by0.32%

Number of lines in readme file

198

increased by3.13%

No dependency changes