embla-carousel - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

lib/components/dragBehaviour.d.ts

@@ -27,3 +27,2 @@ import { Animation } from './animation';
     isDown: () => boolean;
-    onClick: (evt: Event) => void;
     down: (evt: Event) => void;
@@ -30,0 +29,0 @@ move: (evt: Event) => void;

lib/components/limit.d.ts

 declare type Params = {
-    low: number;
-    high: number;
+    min: number;
+    max: number;
 };
 export declare type Limit = {
-    low: number;
-    high: number;
+    min: number;
+    max: number;
     loop: (n: number) => number;
     constrain: (n: number) => number;
-    reached: {
-        low: (n: number) => boolean;
-        high: (n: number) => boolean;
-        any: (n: number) => boolean;
-    };
+    reachedAny: (n: number) => boolean;
+    reachedMax: (n: number) => boolean;
+    reachedMin: (n: number) => boolean;
 };
 export declare function Limit(params: Params): Limit;
 export {};

lib/components/pointer.d.ts

@@ -7,3 +7,2 @@ import { ChunkSize } from './chunkSize';
     direction: Direction;
-    isDown: () => boolean;
     down: (evt: Event) => number;
@@ -10,0 +9,0 @@ move: (evt: Event) => number;

lib/components/targetFinder.d.ts

 import { Counter } from './counter';
+import { Limit } from './limit';
 import { Vector1D } from './vector1d';
@@ -9,2 +10,5 @@ declare type Params = {
     slideSizes: number[];
+    slidePositions: number[];
+    span: number;
+    limit: Limit;
 };
@@ -11,0 +15,0 @@ export declare type Target = {

lib/components/traveller.d.ts

@@ -8,3 +8,3 @@ import { Animation } from './animation';
     animation: Animation;
-    moverTarget: Vector1D;
+    target: Vector1D;
     index: Counter;
@@ -11,0 +11,0 @@ findTarget: TargetFinder;

lib/index.js

@@ -163,7 +163,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
     var m = magnitude();
-
-    if (m !== 0) {
-      divide(m);
-    }
-
+    if (m !== 0) divide(m);
     return self;
@@ -173,6 +169,3 @@ }
   function limit(n) {
-    if (magnitude() > n) {
-      normalize().multiply(n);
-    }
-
+    if (magnitude() > n) normalize().multiply(n);
     return self;
@@ -244,2 +237,3 @@ }
   var direction = vector1d_1.Vector1D(normalize(value));
+  var get = direction.get;
 
@@ -253,3 +247,3 @@ function normalize(n) {
 
-    if (d && d !== direction.get()) {
+    if (d && d !== get()) {
       direction.setNumber(d);
@@ -262,3 +256,3 @@ }
   var self = {
-    get: direction.get,
+    get: get,
     set: set
@@ -577,4 +571,4 @@ };
   var speedLimit = limit_1.Limit({
-    low: 5,
-    high: 20
+    min: 5,
+    max: 20
   }); // Index
@@ -584,4 +578,4 @@
     limit: limit_1.Limit({
-      low: 0,
-      high: slides.length - 1
+      min: 0,
+      max: slides.length - 1
     }),
@@ -614,7 +608,7 @@ loop: loop,
   });
-  var highLimit = alignSizes[0];
-  var lowLimit = -contentSize + alignSizes[0] + (loop ? chunkSize.measure(1) : slideSizes[index.max]);
+  var maxLimit = alignSizes[0];
+  var minLimit = -contentSize + alignSizes[0] + (loop ? chunkSize.measure(1) : slideSizes[index.max]);
   var limit = limit_1.Limit({
-    high: highLimit,
-    low: lowLimit
+    max: maxLimit,
+    min: minLimit
   }); // Draw
@@ -666,8 +660,11 @@
       index: index,
+      limit: limit,
       location: location,
       loop: loop,
-      slideSizes: slideSizes
+      slidePositions: slidePositions,
+      slideSizes: slideSizes,
+      span: contentSize
     }),
     index: index,
-    moverTarget: target
+    target: target
   }); // Pointer
@@ -784,8 +781,5 @@
 
-  function ifAnimation(active, cb) {
+  function ifAnimating(active, cb) {
     return function () {
-      if (active === !!state.animationFrame) {
-        cb();
-      }
-
+      if (active === !!state.animationFrame) cb();
       return self;
@@ -805,5 +799,5 @@ };
   var self = {
-    proceed: ifAnimation(true, start),
-    start: ifAnimation(false, start),
-    stop: ifAnimation(true, stop)
+    proceed: ifAnimating(true, start),
+    start: ifAnimating(false, start),
+    stop: ifAnimating(true, stop)
   };
@@ -859,2 +853,4 @@ return Object.freeze(self);
       loop = params.loop;
+  var min = limit.min,
+      max = limit.max;
   var type = loop ? 'loop' : 'constrain';
@@ -901,4 +897,4 @@ var state = {
     get: get,
-    max: limit.high,
-    min: limit.low,
+    max: max,
+    min: min,
     set: set
@@ -918,4 +914,2 @@ };
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 Object.defineProperty(exports, "__esModule", {
@@ -930,8 +924,5 @@ value: true
 function DragBehaviour(params) {
-  var self = {};
   var element = params.element,
       pointer = params.pointer,
       location = params.location,
-      limit = params.limit,
-      loop = params.loop,
       events = params.events;
@@ -945,2 +936,3 @@ var focusNodes = ['INPUT', 'SELECT', 'TEXTAREA'];
   var state = {
+    isDown: false,
     isMouse: false,
@@ -981,4 +973,5 @@ preventClick: false,
     dragStart.set(location);
+    state.preventClick = false;
+    state.isDown = true;
     animation.start();
-    state.preventClick = false;
     addInteractionEvents();
@@ -997,7 +990,9 @@ events.dispatch('dragStart');
     if (state.preventScroll || state.isMouse) {
-      evt.preventDefault();
+      var limit = params.limit,
+          loop = params.loop;
       var diff = pointer.move(evt);
-      var pastLimit = limit.reached.any(location.get());
-      var resist = !loop && pastLimit ? 2 : 1;
+      var reachedAnyLimit = limit.reachedAny(location.get());
+      var resist = !loop && reachedAnyLimit ? 2 : 1;
       location.addNumber(diff / resist);
+      evt.preventDefault();
     } else {
@@ -1009,6 +1004,3 @@ var X = pointer.read(evt, 'x').get();
       state.preventScroll = Math.abs(diffX) > Math.abs(diffY);
-
-      if (!state.preventScroll) {
-        up();
-      }
+      if (!state.preventScroll) up();
     }
@@ -1020,4 +1012,3 @@ }
         target = params.target,
-        mover = params.mover,
-        index = params.index;
+        mover = params.mover;
     var force = pointer.up() * (state.isMouse ? 2 : 3);
@@ -1027,2 +1018,3 @@ var speed = state.isMouse ? 12 : 15;
     state.preventScroll = false;
+    state.isDown = false;
     interactionEvents.removeAll();
@@ -1032,27 +1024,4 @@ events.dispatch('dragEnd');
     var minDiffToTarget = 1;
-
-    if (diffToTarget <= minDiffToTarget) {
-      return;
-    }
-
+    if (diffToTarget <= minDiffToTarget) return;
     state.preventClick = true;
-
-    if (!loop) {
-      var targetLocation = location.get() + force;
-      var pastLowLimit = limit.reached.low(targetLocation);
-      var pastHighLimit = limit.reached.high(targetLocation);
-
-      if (pastHighLimit || pastLowLimit) {
-        var nextIndex = pastHighLimit ? index.min : index.max;
-        target.setNumber(targetLocation);
-
-        if (nextIndex !== index.get()) {
-          index.set(nextIndex);
-          events.dispatch('select');
-        }
-
-        return;
-      }
-    }
-
     mover.useSpeed(speed);
@@ -1063,8 +1032,10 @@ travel.toDistance(dragStart.get(), force);
   function click(evt) {
-    if (state.preventClick) {
-      evt.preventDefault();
-    }
+    if (state.preventClick) evt.preventDefault();
   }
 
-  return _extends(self, {
+  function isDown() {
+    return state.isDown;
+  }
+
+  var self = {
     activate: addActivationEvents,
@@ -1075,8 +1046,8 @@ cancel: up,
     dragStartLocation: dragStart,
-    isDown: pointer.isDown,
+    isDown: isDown,
     move: move,
-    onClick: click,
     removeAllEvents: removeAllEvents,
     up: up
-  });
+  };
+  return Object.freeze(self);
 }
@@ -1219,29 +1190,29 @@
 function Limit(params) {
-  var low = params.low,
-      high = params.high;
+  var min = params.min,
+      max = params.max;
   var loopLimits = {
-    high: low,
-    low: high
+    max: min,
+    min: max
   };
   var constrainLimits = {
-    low: low,
-    high: high
+    min: min,
+    max: max
   };
 
-  function reachedLow(n) {
-    return n < low;
+  function reachedMin(n) {
+    return n < min;
   }
 
-  function reachedHigh(n) {
-    return n > high;
+  function reachedMax(n) {
+    return n > max;
   }
 
   function reachedAny(n) {
-    return reachedLow(n) || reachedHigh(n);
+    return reachedMin(n) || reachedMax(n);
   }
 
   function reachedWhich(n) {
-    var isLow = reachedLow(n) && 'low';
-    var isHigh = reachedHigh(n) && 'high';
-    return isLow || isHigh || '';
+    var isMin = reachedMin(n) && 'min';
+    var isMax = reachedMax(n) && 'max';
+    return isMin || isMax || '';
   }
@@ -1261,10 +1232,8 @@
     constrain: constrain,
-    high: high,
     loop: loop,
-    low: low,
-    reached: {
-      any: reachedAny,
-      high: reachedHigh,
-      low: reachedLow
-    }
+    max: max,
+    min: min,
+    reachedAny: reachedAny,
+    reachedMax: reachedMax,
+    reachedMin: reachedMin
   };
@@ -1341,7 +1310,9 @@ return Object.freeze(self);
 
-  function setSpeed(newSpeed) {
-    if (state.speed !== newSpeed) {
-      state.speed = newSpeed;
-    }
+  function useSpeed(desired) {
+    state.speed = desired;
+    return self;
+  }
 
+  function useDefaultSpeed() {
+    useSpeed(speed);
     return self;
@@ -1356,6 +1327,4 @@ }
     update: update,
-    useDefaultSpeed: function useDefaultSpeed() {
-      return setSpeed(speed);
-    },
-    useSpeed: setSpeed
+    useDefaultSpeed: useDefaultSpeed,
+    useSpeed: useSpeed
   };
@@ -1390,7 +1359,6 @@ return Object.freeze(self);
   var lastDrag = vector1d_1.Vector1D(0);
+  var pointValue = vector1d_1.Vector1D(0);
   var direction = direction_1.Direction(0);
-  var pointValue = vector1d_1.Vector1D(0);
   var trackInterval = 10;
   var pointer = {
-    isDown: false,
     isMouse: false,
@@ -1413,3 +1381,2 @@ trackPoints: [],
     lastDrag.set(point);
-    pointer.isDown = true;
     return size.measure(startDrag.get());
@@ -1442,3 +1409,2 @@ }
     })[0] || 0);
-    pointer.isDown = false;
     pointer.trackPoints = [];
@@ -1451,5 +1417,2 @@ return size.measure(lastDrag.get());
     down: down,
-    isDown: function isDown() {
-      return pointer.isDown;
-    },
     move: move,
@@ -1482,2 +1445,3 @@ read: read,
       slideSizes = params.slideSizes;
+  var lastInteractionIsDrag = false;
 
@@ -1523,10 +1487,27 @@ function findTarget(found, direction) {
     var index = params.index.clone();
+    var currentIndex = index.get();
     var targetIndex = index.set(target);
-    var isFound = indexFound(targetIndex.get());
+    var isFound = indexFound(targetIndex.get()); // TECH DEBT ---->
+    // This finds distance offset from the closest slide position.
+    // Works for both loop and not loop.
 
+    var slidePositions = params.slidePositions;
+    var distanceToSlide = 0;
+
+    if (lastInteractionIsDrag) {
+      var offset = loop && location.get() < slidePositions[slidePositions.length - 1] && currentIndex === 0 ? location.get() + params.span : location.get();
+      distanceToSlide = slidePositions[currentIndex] - offset;
+      lastInteractionIsDrag = false;
+    } // <---- TECH DEBT
+
+
     if (!loop || index.max <= 1) {
-      return findTarget(isFound, direction);
+      var t = findTarget(isFound, direction);
+      return {
+        distance: t.distance + distanceToSlide,
+        index: t.index
+      };
     } else {
-      var d1 = findTarget(isFound, -1).distance;
-      var d2 = findTarget(isFound, 1).distance;
+      var d1 = findTarget(isFound, -1).distance + distanceToSlide;
+      var d2 = findTarget(isFound, 1).distance + distanceToSlide;
       var distance = Math.abs(d1) > Math.abs(d2) ? d2 : d1;
@@ -1541,2 +1522,19 @@ return {
   function byDistance(from, distance) {
+    // TECH DEBT ---->
+    // Don't restrict to a specific slide position if drag will
+    // reach any end of the carousel.
+    if (!loop) {
+      var targetLocation = location.get() + distance;
+      var reachedMinLimit = params.limit.reachedMin(targetLocation);
+      var reachedMaxLimit = params.limit.reachedMax(targetLocation);
+
+      if (reachedMaxLimit || reachedMinLimit) {
+        var nextIndex = reachedMaxLimit ? params.index.min : params.index.max;
+        var next = freeScroll(from, distance);
+        next.index = nextIndex;
+        return next;
+      }
+    } // <---- TECH DEBT
+
+
     var index = params.index.get();
@@ -1551,4 +1549,61 @@ var slideSize = slideSizes[index];
     return findTarget(isFound, direction);
+  } // TECH DEBT ---->
+  // Not used yet. Upcoming freeScroll feature.
+  // Finds index by any given carousel location.
+
+
+  function findTargetIndexByLocation(desiredTarget, direction) {
+    var slidePositions = params.slidePositions;
+    var target = desiredTarget;
+
+    if (direction === 1) {
+      while (params.limit.reachedMax(target)) {
+        target -= params.span;
+      }
+    }
+
+    if (direction === -1) {
+      while (params.limit.reachedMin(target)) {
+        target += params.span;
+      }
+    }
+
+    var boundaries = [];
+    var startPos = slidePositions[0] + slideSizes[0] / 2;
+
+    var _loop = function _loop(i) {
+      ;
+
+      (function () {
+        boundaries.push({
+          high: startPos - slideSizes[i],
+          low: startPos
+        });
+        startPos = startPos - slideSizes[i];
+      })();
+    };
+
+    for (var i = 0; i < slidePositions.length; i += 1) {
+      _loop(i);
+    }
+
+    var targetIndex = boundaries.reduce(function (result, boundary, index) {
+      if (result) return result;
+      return target < boundary.low && target > boundary.high ? index : 0;
+    }, 0);
+    return targetIndex;
   }
 
+  function freeScroll(from, distance) {
+    lastInteractionIsDrag = true;
+    var desiredDiff = location.get() + distance - from;
+    var direction = direction_1.Direction(desiredDiff).get();
+    var i = findTargetIndexByLocation(location.get() + distance, direction);
+    return {
+      distance: location.get() + distance - from,
+      index: i
+    };
+  } // <---- TECH DEBT
+
+
   var self = {
@@ -1575,4 +1630,4 @@ byDistance: byDistance,
 function Translate(node) {
-  var state = {
-    translateType: 'x'
+  var translate = {
+    type: 'x'
   };
@@ -1593,3 +1648,3 @@ var translates = {
   function to(vector) {
-    var t = state.translateType;
+    var t = translate.type;
     var v = vector.get();
@@ -1600,7 +1655,4 @@ node.style.transform = translates[t](v);
 
-  function setType(type) {
-    if (state.translateType !== type) {
-      state.translateType = type;
-    }
-
+  function useType(type) {
+    translate.type = type;
     return self;
@@ -1612,6 +1664,6 @@ }
     use3d: function use3d() {
-      return setType('x3d');
+      return useType('x3d');
     },
     useDefault: function useDefault() {
-      return setType('x');
+      return useType('x');
     }
@@ -1640,11 +1692,21 @@ };
       findTarget = params.findTarget,
-      animation = params.animation,
-      moverTarget = params.moverTarget;
+      animation = params.animation;
 
   function travelTo(next) {
-    var events = params.events;
-    animation.start();
-    moverTarget.addNumber(next.distance);
-    index.set(next.index);
-    events.dispatch('select');
+    var events = params.events,
+        target = params.target;
+    var nextIndex = next.index;
+    var distanceDiff = next.distance;
+    var indexDiff = nextIndex !== index.get();
+
+    if (distanceDiff) {
+      animation.start();
+      target.addNumber(distanceDiff);
+    }
+
+    if (indexDiff) {
+      index.set(nextIndex);
+      events.dispatch('select');
+    }
+
     return self;
@@ -1655,9 +1717,5 @@ }
     var diff = index.get() - target.get();
-
-    if (diff) {
-      var d = direction || direction_1.Direction(diff).get();
-      var next = findTarget.byIndex(target.get(), d);
-      travelTo(next);
-    }
-
+    var d = direction || direction_1.Direction(diff).get();
+    var next = findTarget.byIndex(target.get(), d);
+    travelTo(next);
     return self;
@@ -1724,5 +1782,5 @@ }
     var l = location.get();
-    var alreadyLow = v.get() === limit.low;
-    var alreadyHigh = v.get() === limit.high;
-    return limit.reached.low(l) && !alreadyLow || limit.reached.high(l) && !alreadyHigh;
+    var alreadyMin = v.get() === limit.min;
+    var alreadyMax = v.get() === limit.max;
+    return limit.reachedMin(l) && !alreadyMin || limit.reachedMax(l) && !alreadyMax;
   }
@@ -1770,7 +1828,6 @@
   function shouldLoop(direction) {
-    var _limit$reached = limit.reached,
-        low = _limit$reached.low,
-        high = _limit$reached.high;
-    var limitReached = direction === -1 ? low : high;
-    return direction !== 0 && limitReached(location.get());
+    var reachedMin = limit.reachedMin,
+        reachedMax = limit.reachedMax;
+    var reachedLimit = direction === -1 ? reachedMin : reachedMax;
+    return direction !== 0 && reachedLimit(location.get());
   }
@@ -1777,0 +1834,0 @@

package.json

 {
   "name": "embla-carousel",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "author": "David Cetinkaya",
@@ -47,24 +47,24 @@ "private": false,
   "devDependencies": {
-    "@babel/core": "^7.4.0",
+    "@babel/core": "^7.4.4",
     "@babel/plugin-transform-object-assign": "^7.2.0",
-    "@babel/preset-env": "^7.4.2",
-    "@types/jest": "^24.0.0",
+    "@babel/preset-env": "^7.4.4",
+    "@types/jest": "^24.0.12",
     "@types/jest-diff": "^20.0.0",
-    "autoprefixer": "^9.5.0",
+    "autoprefixer": "^9.5.1",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.5",
     "clean-webpack-plugin": "^1.0.1",
-    "jest": "^24.6.0",
-    "node-sass": "^4.11.0",
+    "jest": "^24.7.1",
+    "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^6.1.2",
-    "prettier": "^1.16.4",
+    "prettier": "^1.17.0",
     "ts-jest": "^23.10.5",
-    "tslint": "^5.15.0",
+    "tslint": "^5.16.0",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.4.1",
-    "webpack": "^4.29.3",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.1.14"
+    "typescript": "^3.4.5",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.1",
+    "webpack-dev-server": "^3.3.1"
   }
 }

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

63068

increased by3.27%

Lines of code

1859

increased by2.82%

No dependency changes