Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
animated-scroll-to
Advanced tools
animated-scroll-to - npm Package Compare versions
Comparing version 2.0.9 to 2.0.10
| # Changelog | ||
| ### v2.0.9 | ||
| ### v2.0.9, 2.0.10 | ||
@@ -5,0 +5,0 @@ 25.06.2020. |
@@ -13,2 +13,38 @@ "use strict"; | ||
| }; | ||
| var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
| function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
| return new (P || (P = Promise))(function (resolve, reject) { | ||
| function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
| function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
| function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
| step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
| }); | ||
| }; | ||
| var __generator = (this && this.__generator) || function (thisArg, body) { | ||
| var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
| return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
| function verb(n) { return function (v) { return step([n, v]); }; } | ||
| function step(op) { | ||
| if (f) throw new TypeError("Generator is already executing."); | ||
| while (_) try { | ||
| if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
| if (y = 0, t) op = [op[0] & 2, t.value]; | ||
| switch (op[0]) { | ||
| case 0: case 1: t = op; break; | ||
| case 4: _.label++; return { value: op[1], done: false }; | ||
| case 5: _.label++; y = op[1]; op = [0]; continue; | ||
| case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
| default: | ||
| if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
| if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
| if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
| if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
| if (t[2]) _.ops.pop(); | ||
| _.trys.pop(); continue; | ||
| } | ||
| op = body.call(thisArg, _); | ||
| } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
| if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
| } | ||
| }; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
@@ -127,160 +163,157 @@ // --------- SCROLL INTERFACES | ||
| if (userOptions === void 0) { userOptions = {}; } | ||
| // Check for server rendering | ||
| if (!WINDOW_EXISTS) { | ||
| // @ts-ignore | ||
| // If it still gets called on server, return Promise for API consistency | ||
| return new Promise(function (resolve) { | ||
| resolve(false); // Returning false on server | ||
| }); | ||
| } | ||
| else if (!window.Promise) { | ||
| throw ('Browser doesn\'t support Promises, and animated-scroll-to depends on it, please provide a polyfill.'); | ||
| } | ||
| var x; | ||
| var y; | ||
| var scrollToElement; | ||
| var options = __assign(__assign({}, defaultOptions), userOptions); | ||
| var isWindow = options.elementToScroll === window; | ||
| var isElement = !!options.elementToScroll.nodeName; | ||
| if (!isWindow && !isElement) { | ||
| throw ('Element to scroll needs to be either window or DOM element.'); | ||
| } | ||
| var elementToScroll = isWindow ? | ||
| new ScrollWindow() : | ||
| new ScrollDomElement(options.elementToScroll); | ||
| if (numberOrCoordsOrElement instanceof Element) { | ||
| scrollToElement = numberOrCoordsOrElement; | ||
| // If "elementToScroll" is not a parent of "scrollToElement" | ||
| if (isElement && | ||
| (!options.elementToScroll.contains(scrollToElement) || | ||
| options.elementToScroll.isSameNode(scrollToElement))) { | ||
| throw ('options.elementToScroll has to be a parent of scrollToElement'); | ||
| } | ||
| x = elementToScroll.getHorizontalElementScrollOffset(scrollToElement, options.elementToScroll); | ||
| y = elementToScroll.getVerticalElementScrollOffset(scrollToElement, options.elementToScroll); | ||
| } | ||
| else if (typeof numberOrCoordsOrElement === 'number') { | ||
| x = elementToScroll.getHorizontalScroll(); | ||
| y = numberOrCoordsOrElement; | ||
| } | ||
| else if (Array.isArray(numberOrCoordsOrElement) && numberOrCoordsOrElement.length === 2) { | ||
| x = numberOrCoordsOrElement[0] === null ? elementToScroll.getHorizontalScroll() : numberOrCoordsOrElement[0]; | ||
| y = numberOrCoordsOrElement[1] === null ? elementToScroll.getVerticalScroll() : numberOrCoordsOrElement[1]; | ||
| } | ||
| else { | ||
| // ERROR | ||
| throw ('Wrong function signature. Check documentation.\n' + | ||
| 'Available method signatures are:\n' + | ||
| ' animateScrollTo(y:number, options)\n' + | ||
| ' animateScrollTo([x:number | null, y:number | null], options)\n' + | ||
| ' animateScrollTo(scrollToElement:Element, options)'); | ||
| } | ||
| // Add offsets | ||
| x += options.horizontalOffset; | ||
| y += options.verticalOffset; | ||
| // Horizontal scroll distance | ||
| var maxHorizontalScroll = elementToScroll.getMaxHorizontalScroll(); | ||
| var initialHorizontalScroll = elementToScroll.getHorizontalScroll(); | ||
| // If user specified scroll position is greater than maximum available scroll | ||
| if (x > maxHorizontalScroll) { | ||
| x = maxHorizontalScroll; | ||
| } | ||
| // Calculate distance to scroll | ||
| var horizontalDistanceToScroll = x - initialHorizontalScroll; | ||
| // Vertical scroll distance distance | ||
| var maxVerticalScroll = elementToScroll.getMaxVerticalScroll(); | ||
| var initialVerticalScroll = elementToScroll.getVerticalScroll(); | ||
| // If user specified scroll position is greater than maximum available scroll | ||
| if (y > maxVerticalScroll) { | ||
| y = maxVerticalScroll; | ||
| } | ||
| // Calculate distance to scroll | ||
| var verticalDistanceToScroll = y - initialVerticalScroll; | ||
| // Calculate duration of the scroll | ||
| var horizontalDuration = Math.abs(Math.round((horizontalDistanceToScroll / 1000) * options.speed)); | ||
| var verticalDuration = Math.abs(Math.round((verticalDistanceToScroll / 1000) * options.speed)); | ||
| var duration = horizontalDuration > verticalDuration ? horizontalDuration : verticalDuration; | ||
| // Set minimum and maximum duration | ||
| if (duration < options.minDuration) { | ||
| duration = options.minDuration; | ||
| } | ||
| else if (duration > options.maxDuration) { | ||
| duration = options.maxDuration; | ||
| } | ||
| // @ts-ignore | ||
| return new Promise(function (resolve, reject) { | ||
| // Scroll is already in place, nothing to do | ||
| if (horizontalDistanceToScroll === 0 && verticalDistanceToScroll === 0) { | ||
| // Resolve promise with a boolean hasScrolledToPosition set to true | ||
| resolve(true); | ||
| } | ||
| // Cancel existing animation if it is already running on the same element | ||
| activeAnimations.remove(options.elementToScroll, true); | ||
| // To cancel animation we have to store request animation frame ID | ||
| var requestID; | ||
| // Cancel animation handler | ||
| var cancelAnimation = function () { | ||
| removeListeners(); | ||
| cancelAnimationFrame(requestID); | ||
| // Resolve promise with a boolean hasScrolledToPosition set to false | ||
| resolve(false); | ||
| }; | ||
| // Registering animation so it can be canceled if function | ||
| // gets called again on the same element | ||
| activeAnimations.add(options.elementToScroll, cancelAnimation); | ||
| // Prevent user actions handler | ||
| var preventDefaultHandler = function (e) { return e.preventDefault(); }; | ||
| var handler = options.cancelOnUserAction ? | ||
| cancelAnimation : | ||
| preventDefaultHandler; | ||
| // If animation is not cancelable by the user, we can't use passive events | ||
| var eventOptions = options.cancelOnUserAction ? | ||
| { passive: true } : | ||
| { passive: false }; | ||
| var events = [ | ||
| 'wheel', | ||
| 'touchstart', | ||
| 'keydown', | ||
| 'mousedown', | ||
| ]; | ||
| // Function to remove listeners after animation is finished | ||
| var removeListeners = function () { | ||
| events.forEach(function (eventName) { | ||
| options.elementToScroll.removeEventListener(eventName, handler, eventOptions); | ||
| }); | ||
| }; | ||
| // Add listeners | ||
| events.forEach(function (eventName) { | ||
| options.elementToScroll.addEventListener(eventName, handler, eventOptions); | ||
| }); | ||
| // Animation | ||
| var startingTime = Date.now(); | ||
| var step = function () { | ||
| var timeDiff = Date.now() - startingTime; | ||
| var t = timeDiff / duration; | ||
| var horizontalScrollPosition = Math.round(initialHorizontalScroll + (horizontalDistanceToScroll * options.easing(t))); | ||
| var verticalScrollPosition = Math.round(initialVerticalScroll + (verticalDistanceToScroll * options.easing(t))); | ||
| if (timeDiff < duration && (horizontalScrollPosition !== x || verticalScrollPosition !== y)) { | ||
| // If scroll didn't reach desired position or time is not elapsed | ||
| // Scroll to a new position | ||
| elementToScroll.scrollTo(horizontalScrollPosition, verticalScrollPosition); | ||
| // And request a new step | ||
| requestID = requestAnimationFrame(step); | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| var x, y, scrollToElement, options, isWindow, isElement, elementToScroll, maxHorizontalScroll, initialHorizontalScroll, horizontalDistanceToScroll, maxVerticalScroll, initialVerticalScroll, verticalDistanceToScroll, horizontalDuration, verticalDuration, duration; | ||
| return __generator(this, function (_a) { | ||
| // Check for server rendering | ||
| if (!WINDOW_EXISTS) { | ||
| // @ts-ignore | ||
| // If it still gets called on server, return Promise for API consistency | ||
| return [2 /*return*/, new Promise(function (resolve) { | ||
| resolve(false); // Returning false on server | ||
| })]; | ||
| } | ||
| else if (!window.Promise) { | ||
| throw ('Browser doesn\'t support Promises, and animated-scroll-to depends on it, please provide a polyfill.'); | ||
| } | ||
| options = __assign(__assign({}, defaultOptions), userOptions); | ||
| isWindow = options.elementToScroll === window; | ||
| isElement = !!options.elementToScroll.nodeName; | ||
| if (!isWindow && !isElement) { | ||
| throw ('Element to scroll needs to be either window or DOM element.'); | ||
| } | ||
| elementToScroll = isWindow ? | ||
| new ScrollWindow() : | ||
| new ScrollDomElement(options.elementToScroll); | ||
| if (numberOrCoordsOrElement instanceof Element) { | ||
| scrollToElement = numberOrCoordsOrElement; | ||
| // If "elementToScroll" is not a parent of "scrollToElement" | ||
| if (isElement && | ||
| (!options.elementToScroll.contains(scrollToElement) || | ||
| options.elementToScroll.isSameNode(scrollToElement))) { | ||
| throw ('options.elementToScroll has to be a parent of scrollToElement'); | ||
| } | ||
| x = elementToScroll.getHorizontalElementScrollOffset(scrollToElement, options.elementToScroll); | ||
| y = elementToScroll.getVerticalElementScrollOffset(scrollToElement, options.elementToScroll); | ||
| } | ||
| else if (typeof numberOrCoordsOrElement === 'number') { | ||
| x = elementToScroll.getHorizontalScroll(); | ||
| y = numberOrCoordsOrElement; | ||
| } | ||
| else if (Array.isArray(numberOrCoordsOrElement) && numberOrCoordsOrElement.length === 2) { | ||
| x = numberOrCoordsOrElement[0] === null ? elementToScroll.getHorizontalScroll() : numberOrCoordsOrElement[0]; | ||
| y = numberOrCoordsOrElement[1] === null ? elementToScroll.getVerticalScroll() : numberOrCoordsOrElement[1]; | ||
| } | ||
| else { | ||
| // If the time elapsed or we reached the desired offset | ||
| // Set scroll to the desired offset (when rounding made it to be off a pixel or two) | ||
| // Clear animation frame to be sure | ||
| elementToScroll.scrollTo(x, y); | ||
| cancelAnimationFrame(requestID); | ||
| // Remove listeners | ||
| removeListeners(); | ||
| // Remove animation from the active animations coordinator | ||
| activeAnimations.remove(options.elementToScroll, false); | ||
| // Resolve promise with a boolean hasScrolledToPosition set to true | ||
| resolve(true); | ||
| // ERROR | ||
| throw ('Wrong function signature. Check documentation.\n' + | ||
| 'Available method signatures are:\n' + | ||
| ' animateScrollTo(y:number, options)\n' + | ||
| ' animateScrollTo([x:number | null, y:number | null], options)\n' + | ||
| ' animateScrollTo(scrollToElement:Element, options)'); | ||
| } | ||
| }; | ||
| // Start animating scroll | ||
| requestID = requestAnimationFrame(step); | ||
| // Add offsets | ||
| x += options.horizontalOffset; | ||
| y += options.verticalOffset; | ||
| maxHorizontalScroll = elementToScroll.getMaxHorizontalScroll(); | ||
| initialHorizontalScroll = elementToScroll.getHorizontalScroll(); | ||
| // If user specified scroll position is greater than maximum available scroll | ||
| if (x > maxHorizontalScroll) { | ||
| x = maxHorizontalScroll; | ||
| } | ||
| horizontalDistanceToScroll = x - initialHorizontalScroll; | ||
| maxVerticalScroll = elementToScroll.getMaxVerticalScroll(); | ||
| initialVerticalScroll = elementToScroll.getVerticalScroll(); | ||
| // If user specified scroll position is greater than maximum available scroll | ||
| if (y > maxVerticalScroll) { | ||
| y = maxVerticalScroll; | ||
| } | ||
| verticalDistanceToScroll = y - initialVerticalScroll; | ||
| horizontalDuration = Math.abs(Math.round((horizontalDistanceToScroll / 1000) * options.speed)); | ||
| verticalDuration = Math.abs(Math.round((verticalDistanceToScroll / 1000) * options.speed)); | ||
| duration = horizontalDuration > verticalDuration ? horizontalDuration : verticalDuration; | ||
| // Set minimum and maximum duration | ||
| if (duration < options.minDuration) { | ||
| duration = options.minDuration; | ||
| } | ||
| else if (duration > options.maxDuration) { | ||
| duration = options.maxDuration; | ||
| } | ||
| // @ts-ignore | ||
| return [2 /*return*/, new Promise(function (resolve, reject) { | ||
| // Scroll is already in place, nothing to do | ||
| if (horizontalDistanceToScroll === 0 && verticalDistanceToScroll === 0) { | ||
| // Resolve promise with a boolean hasScrolledToPosition set to true | ||
| resolve(true); | ||
| } | ||
| // Cancel existing animation if it is already running on the same element | ||
| activeAnimations.remove(options.elementToScroll, true); | ||
| // To cancel animation we have to store request animation frame ID | ||
| var requestID; | ||
| // Cancel animation handler | ||
| var cancelAnimation = function () { | ||
| removeListeners(); | ||
| cancelAnimationFrame(requestID); | ||
| // Resolve promise with a boolean hasScrolledToPosition set to false | ||
| resolve(false); | ||
| }; | ||
| // Registering animation so it can be canceled if function | ||
| // gets called again on the same element | ||
| activeAnimations.add(options.elementToScroll, cancelAnimation); | ||
| // Prevent user actions handler | ||
| var preventDefaultHandler = function (e) { return e.preventDefault(); }; | ||
| var handler = options.cancelOnUserAction ? | ||
| cancelAnimation : | ||
| preventDefaultHandler; | ||
| // If animation is not cancelable by the user, we can't use passive events | ||
| var eventOptions = options.cancelOnUserAction ? | ||
| { passive: true } : | ||
| { passive: false }; | ||
| var events = [ | ||
| 'wheel', | ||
| 'touchstart', | ||
| 'keydown', | ||
| 'mousedown', | ||
| ]; | ||
| // Function to remove listeners after animation is finished | ||
| var removeListeners = function () { | ||
| events.forEach(function (eventName) { | ||
| options.elementToScroll.removeEventListener(eventName, handler, eventOptions); | ||
| }); | ||
| }; | ||
| // Add listeners | ||
| events.forEach(function (eventName) { | ||
| options.elementToScroll.addEventListener(eventName, handler, eventOptions); | ||
| }); | ||
| // Animation | ||
| var startingTime = Date.now(); | ||
| var step = function () { | ||
| var timeDiff = Date.now() - startingTime; | ||
| var t = timeDiff / duration; | ||
| var horizontalScrollPosition = Math.round(initialHorizontalScroll + (horizontalDistanceToScroll * options.easing(t))); | ||
| var verticalScrollPosition = Math.round(initialVerticalScroll + (verticalDistanceToScroll * options.easing(t))); | ||
| if (timeDiff < duration && (horizontalScrollPosition !== x || verticalScrollPosition !== y)) { | ||
| // If scroll didn't reach desired position or time is not elapsed | ||
| // Scroll to a new position | ||
| elementToScroll.scrollTo(horizontalScrollPosition, verticalScrollPosition); | ||
| // And request a new step | ||
| requestID = requestAnimationFrame(step); | ||
| } | ||
| else { | ||
| // If the time elapsed or we reached the desired offset | ||
| // Set scroll to the desired offset (when rounding made it to be off a pixel or two) | ||
| // Clear animation frame to be sure | ||
| elementToScroll.scrollTo(x, y); | ||
| cancelAnimationFrame(requestID); | ||
| // Remove listeners | ||
| removeListeners(); | ||
| // Remove animation from the active animations coordinator | ||
| activeAnimations.remove(options.elementToScroll, false); | ||
| // Resolve promise with a boolean hasScrolledToPosition set to true | ||
| resolve(true); | ||
| } | ||
| }; | ||
| // Start animating scroll | ||
| requestID = requestAnimationFrame(step); | ||
| })]; | ||
| }); | ||
| }); | ||
@@ -287,0 +320,0 @@ } |
| { | ||
| "name": "animated-scroll-to", | ||
| "version": "2.0.9", | ||
| "version": "2.0.10", | ||
| "description": "Simple, plain JavaScript animated window scroll", | ||
@@ -5,0 +5,0 @@ "main": "./lib/animated-scroll-to.js", |
@@ -159,9 +159,9 @@ export type TCoords = [number | null, number | null]; | ||
| function animateScrollTo(y:number, userOptions?:IOptions): Promise<boolean>; | ||
| function animateScrollTo(coords:TCoords, userOptions?:IOptions): Promise<boolean>; | ||
| function animateScrollTo(scrollToElement: Element, userOptions?:IOptions): Promise<boolean>; | ||
| function animateScrollTo( | ||
| async function animateScrollTo(y:number, userOptions?:IOptions): Promise<boolean>; | ||
| async function animateScrollTo(coords:TCoords, userOptions?:IOptions): Promise<boolean>; | ||
| async function animateScrollTo(scrollToElement: Element, userOptions?:IOptions): Promise<boolean>; | ||
| async function animateScrollTo( | ||
| numberOrCoordsOrElement: number | TCoords | Element, | ||
| userOptions: IOptions = {} | ||
| ) { | ||
| ): Promise<boolean> { | ||
| // Check for server rendering | ||
@@ -168,0 +168,0 @@ if (!WINDOW_EXISTS) { |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by7.37%
60908
- Lines of code
- increased by5.04%
688
No dependency changes