ng-animate-scroll
Version:
Customizable angular module to animate scroll event to an element. Compatible with Angular 2.x onwards
121 lines • 11.6 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Injectable } from "@angular/core";
import * as i0 from "@angular/core";
export class NgAnimateScrollService {
constructor() { }
/**
* @desc scrollToItem Fn scrolls to an items by utilising the animated scroll fn (scrollTo)
* and calculating the height of the header to accurately find the item's position.
* @param {?} elementID
* @param {?=} duration
* @param {?=} container the container html native element (or its id), window will be used if not set
* @return {?}
*/
scrollToElement(elementID, duration = 750, container) {
/** @type {?} */
const item = document.getElementById(elementID);
if (item) {
/** @type {?} */
const itemPos = item.offsetTop;
if (container) {
if (typeof container === 'string') {
container = document.getElementById(container);
}
this.scrollTo(container, itemPos, duration, true);
}
else {
this.scrollTo(window.document, itemPos, duration);
}
}
else {
console.error(`Could not find element with the following ID: ${elementID}`);
}
}
/**
* @desc scrollTo Fn allows scrolling with animation.
* @private
* @param {?} element the 'element' that the scroll will happen on.
* @param {?} to is the location to scroll to.
* @param {?} duration is the length of the animation.
* @param {?=} isContainer
* @return {?}
*/
scrollTo(element, to, duration, isContainer = false) {
/** @type {?} */
const increment = 20;
/** @type {?} */
const that = this;
/** @type {?} */
let start;
/** @type {?} */
let remaining;
/** @type {?} */
let currentTime = 0;
/** @type {?} */
let animateScroll;
if (isContainer) {
// for custom container element
start = element.scrollTop;
}
else if (element.body.scrollTop > 0) {
// for chrome
start = element.body.scrollTop;
}
else if (element.documentElement.scrollTop > 0) {
// for firefox
start = element.documentElement.scrollTop;
}
else {
start = 0;
}
remaining = to - start;
animateScroll = (/**
* @return {?}
*/
() => {
currentTime += increment;
/** @type {?} */
const val = that.easeInOut(currentTime, start, remaining, duration);
if (isContainer) {
element.scroll(0, val);
}
else {
// to allow scroll function on different browsers both chrome and firefox
top.window.scroll(0, val);
}
if (currentTime < duration) {
setTimeout(animateScroll, increment);
}
});
animateScroll();
}
/**
* @desc easeInOut Fn creates the values necessary to create easeInOut animation.
* @private
* @param {?} currentTime is current time.
* @param {?} startTime is the starting time.
* @param {?} remainingTime is the time period in the value.
* @param {?} duration is the duration of the animation
* @return {?} a number value to scroll to.
*/
easeInOut(currentTime, startTime, remainingTime, duration) {
currentTime /= duration / 2;
if (currentTime < 1) {
return (remainingTime / 2) * currentTime * currentTime + startTime;
}
currentTime--;
return ((-remainingTime / 2) * (currentTime * (currentTime - 2) - 1) + startTime);
}
}
NgAnimateScrollService.decorators = [
{ type: Injectable, args: [{
providedIn: "root"
},] }
];
/** @nocollapse */
NgAnimateScrollService.ctorParameters = () => [];
/** @nocollapse */ NgAnimateScrollService.ngInjectableDef = i0.defineInjectable({ factory: function NgAnimateScrollService_Factory() { return new NgAnimateScrollService(); }, token: NgAnimateScrollService, providedIn: "root" });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctYW5pbWF0ZS1zY3JvbGwuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25nLWFuaW1hdGUtc2Nyb2xsLyIsInNvdXJjZXMiOlsibGliL25nLWFuaW1hdGUtc2Nyb2xsLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBSzNDLE1BQU0sT0FBTyxzQkFBc0I7SUFDakMsZ0JBQWUsQ0FBQzs7Ozs7Ozs7O0lBU2hCLGVBQWUsQ0FBQyxTQUFpQixFQUFFLFdBQW1CLEdBQUcsRUFBRSxTQUFVOztjQUM3RCxJQUFJLEdBQUcsUUFBUSxDQUFDLGNBQWMsQ0FBQyxTQUFTLENBQUM7UUFDL0MsSUFBSSxJQUFJLEVBQUU7O2tCQUNGLE9BQU8sR0FBRyxJQUFJLENBQUMsU0FBUztZQUM5QixJQUFJLFNBQVMsRUFBRTtnQkFDYixJQUFJLE9BQU8sU0FBUyxLQUFLLFFBQVEsRUFBRTtvQkFDakMsU0FBUyxHQUFHLFFBQVEsQ0FBQyxjQUFjLENBQUMsU0FBUyxDQUFDLENBQUM7aUJBQ2hEO2dCQUNELElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsSUFBSSxDQUFDLENBQUM7YUFDbkQ7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLENBQUMsQ0FBQzthQUNuRDtTQUNGO2FBQU07WUFDTCxPQUFPLENBQUMsS0FBSyxDQUNYLGlEQUFpRCxTQUFTLEVBQUUsQ0FDN0QsQ0FBQztTQUNIO0lBQ0gsQ0FBQzs7Ozs7Ozs7OztJQVFPLFFBQVEsQ0FBQyxPQUFPLEVBQUUsRUFBVSxFQUFFLFFBQVEsRUFBRSxjQUF1QixLQUFLOztjQUNwRSxTQUFTLEdBQUcsRUFBRTs7Y0FDbEIsSUFBSSxHQUFHLElBQUk7O1lBQ1QsS0FBSzs7WUFDUCxTQUFTOztZQUNULFdBQVcsR0FBRyxDQUFDOztZQUNmLGFBQWE7UUFFZixJQUFJLFdBQVcsRUFBRTtZQUNmLCtCQUErQjtZQUMvQixLQUFLLEdBQUcsT0FBTyxDQUFDLFNBQVMsQ0FBQztTQUMzQjthQUFNLElBQUksT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxFQUFFO1lBQ3JDLGFBQWE7WUFDYixLQUFLLEdBQUcsT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7U0FDaEM7YUFBTSxJQUFJLE9BQU8sQ0FBQyxlQUFlLENBQUMsU0FBUyxHQUFHLENBQUMsRUFBRTtZQUNoRCxjQUFjO1lBQ2QsS0FBSyxHQUFHLE9BQU8sQ0FBQyxlQUFlLENBQUMsU0FBUyxDQUFDO1NBQzNDO2FBQU07WUFDTCxLQUFLLEdBQUcsQ0FBQyxDQUFDO1NBQ1g7UUFFRCxTQUFTLEdBQUcsRUFBRSxHQUFHLEtBQUssQ0FBQztRQUV2QixhQUFhOzs7UUFBRyxHQUFHLEVBQUU7WUFDbkIsV0FBVyxJQUFJLFNBQVMsQ0FBQzs7a0JBQ25CLEdBQUcsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLFdBQVcsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLFFBQVEsQ0FBQztZQUNuRSxJQUFJLFdBQVcsRUFBRTtnQkFDZixPQUFPLENBQUMsTUFBTSxDQUFDLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQzthQUN4QjtpQkFBTTtnQkFDTCx5RUFBeUU7Z0JBQ3pFLEdBQUcsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQzthQUMzQjtZQUVELElBQUksV0FBVyxHQUFHLFFBQVEsRUFBRTtnQkFDMUIsVUFBVSxDQUFDLGFBQWEsRUFBRSxTQUFTLENBQUMsQ0FBQzthQUN0QztRQUNILENBQUMsQ0FBQSxDQUFDO1FBQ0YsYUFBYSxFQUFFLENBQUM7SUFDbEIsQ0FBQzs7Ozs7Ozs7OztJQVVPLFNBQVMsQ0FDZixXQUFtQixFQUNuQixTQUFpQixFQUNqQixhQUFxQixFQUNyQixRQUFnQjtRQUVoQixXQUFXLElBQUksUUFBUSxHQUFHLENBQUMsQ0FBQztRQUU1QixJQUFJLFdBQVcsR0FBRyxDQUFDLEVBQUU7WUFDbkIsT0FBTyxDQUFDLGFBQWEsR0FBRyxDQUFDLENBQUMsR0FBRyxXQUFXLEdBQUcsV0FBVyxHQUFHLFNBQVMsQ0FBQztTQUNwRTtRQUVELFdBQVcsRUFBRSxDQUFDO1FBQ2QsT0FBTyxDQUNMLENBQUMsQ0FBQyxhQUFhLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxXQUFXLEdBQUcsQ0FBQyxXQUFXLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsU0FBUyxDQUN6RSxDQUFDO0lBQ0osQ0FBQzs7O1lBdEdGLFVBQVUsU0FBQztnQkFDVixVQUFVLEVBQUUsTUFBTTthQUNuQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5ASW5qZWN0YWJsZSh7XG4gIHByb3ZpZGVkSW46IFwicm9vdFwiXG59KVxuZXhwb3J0IGNsYXNzIE5nQW5pbWF0ZVNjcm9sbFNlcnZpY2Uge1xuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgLyoqXG4gICAqIEBkZXNjIHNjcm9sbFRvSXRlbSBGbiBzY3JvbGxzIHRvIGFuIGl0ZW1zIGJ5IHV0aWxpc2luZyB0aGUgYW5pbWF0ZWQgc2Nyb2xsIGZuIChzY3JvbGxUbylcbiAgICogICAgICAgYW5kIGNhbGN1bGF0aW5nIHRoZSBoZWlnaHQgb2YgdGhlIGhlYWRlciB0byBhY2N1cmF0ZWx5IGZpbmQgdGhlIGl0ZW0ncyBwb3NpdGlvbi5cbiAgICogQHBhcmFtIGVsZW1lbnRJRDogZWxlbWVudCdzIElEIHRoYXQgd2lsbCBiZSBzY3JvbGxlZCB0by5cbiAgICogQHBhcmFtIGR1cmF0aW9uOiBkdXJhdGlvbiBpbiBtaWxsaXNlY29uZHMsIGRlZmF1bHQgaXMgNzUwLlxuICAgKiBAcGFyYW0gY29udGFpbmVyIHRoZSBjb250YWluZXIgaHRtbCBuYXRpdmUgZWxlbWVudCAob3IgaXRzIGlkKSwgd2luZG93IHdpbGwgYmUgdXNlZCBpZiBub3Qgc2V0XG4gICAqL1xuICBzY3JvbGxUb0VsZW1lbnQoZWxlbWVudElEOiBzdHJpbmcsIGR1cmF0aW9uOiBudW1iZXIgPSA3NTAsIGNvbnRhaW5lcj8pIHtcbiAgICBjb25zdCBpdGVtID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoZWxlbWVudElEKTsgLy8gdGhlIGVsZW1lbnRcbiAgICBpZiAoaXRlbSkge1xuICAgICAgY29uc3QgaXRlbVBvcyA9IGl0ZW0ub2Zmc2V0VG9wO1xuICAgICAgaWYgKGNvbnRhaW5lcikge1xuICAgICAgICBpZiAodHlwZW9mIGNvbnRhaW5lciA9PT0gJ3N0cmluZycpIHtcbiAgICAgICAgICBjb250YWluZXIgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChjb250YWluZXIpO1xuICAgICAgICB9XG4gICAgICAgIHRoaXMuc2Nyb2xsVG8oY29udGFpbmVyLCBpdGVtUG9zLCBkdXJhdGlvbiwgdHJ1ZSk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLnNjcm9sbFRvKHdpbmRvdy5kb2N1bWVudCwgaXRlbVBvcywgZHVyYXRpb24pO1xuICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICBjb25zb2xlLmVycm9yKFxuICAgICAgICBgQ291bGQgbm90IGZpbmQgZWxlbWVudCB3aXRoIHRoZSBmb2xsb3dpbmcgSUQ6ICR7ZWxlbWVudElEfWBcbiAgICAgICk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIEBkZXNjIHNjcm9sbFRvIEZuIGFsbG93cyBzY3JvbGxpbmcgd2l0aCBhbmltYXRpb24uXG4gICAqIEBwYXJhbSBlbGVtZW50IHRoZSAnZWxlbWVudCcgdGhhdCB0aGUgc2Nyb2xsIHdpbGwgaGFwcGVuIG9uLlxuICAgKiBAcGFyYW0gdG8gaXMgdGhlIGxvY2F0aW9uIHRvIHNjcm9sbCB0by5cbiAgICogQHBhcmFtIGR1cmF0aW9uIGlzIHRoZSBsZW5ndGggb2YgdGhlIGFuaW1hdGlvbi5cbiAgICovXG4gIHByaXZhdGUgc2Nyb2xsVG8oZWxlbWVudCwgdG86IG51bWJlciwgZHVyYXRpb24sIGlzQ29udGFpbmVyOiBib29sZWFuID0gZmFsc2UpIHtcbiAgICBjb25zdCBpbmNyZW1lbnQgPSAyMCxcbiAgICAgIHRoYXQgPSB0aGlzO1xuICAgIGxldCBzdGFydCxcbiAgICAgIHJlbWFpbmluZyxcbiAgICAgIGN1cnJlbnRUaW1lID0gMCxcbiAgICAgIGFuaW1hdGVTY3JvbGw7XG5cbiAgICBpZiAoaXNDb250YWluZXIpIHtcbiAgICAgIC8vIGZvciBjdXN0b20gY29udGFpbmVyIGVsZW1lbnRcbiAgICAgIHN0YXJ0ID0gZWxlbWVudC5zY3JvbGxUb3A7XG4gICAgfSBlbHNlIGlmIChlbGVtZW50LmJvZHkuc2Nyb2xsVG9wID4gMCkge1xuICAgICAgLy8gZm9yIGNocm9tZVxuICAgICAgc3RhcnQgPSBlbGVtZW50LmJvZHkuc2Nyb2xsVG9wO1xuICAgIH0gZWxzZSBpZiAoZWxlbWVudC5kb2N1bWVudEVsZW1lbnQuc2Nyb2xsVG9wID4gMCkge1xuICAgICAgLy8gZm9yIGZpcmVmb3hcbiAgICAgIHN0YXJ0ID0gZWxlbWVudC5kb2N1bWVudEVsZW1lbnQuc2Nyb2xsVG9wO1xuICAgIH0gZWxzZSB7XG4gICAgICBzdGFydCA9IDA7XG4gICAgfVxuXG4gICAgcmVtYWluaW5nID0gdG8gLSBzdGFydDtcblxuICAgIGFuaW1hdGVTY3JvbGwgPSAoKSA9PiB7XG4gICAgICBjdXJyZW50VGltZSArPSBpbmNyZW1lbnQ7XG4gICAgICBjb25zdCB2YWwgPSB0aGF0LmVhc2VJbk91dChjdXJyZW50VGltZSwgc3RhcnQsIHJlbWFpbmluZywgZHVyYXRpb24pO1xuICAgICAgaWYgKGlzQ29udGFpbmVyKSB7XG4gICAgICAgIGVsZW1lbnQuc2Nyb2xsKDAsIHZhbCk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICAvLyB0byBhbGxvdyBzY3JvbGwgZnVuY3Rpb24gb24gZGlmZmVyZW50IGJyb3dzZXJzIGJvdGggY2hyb21lIGFuZCBmaXJlZm94XG4gICAgICAgIHRvcC53aW5kb3cuc2Nyb2xsKDAsIHZhbCk7XG4gICAgICB9XG5cbiAgICAgIGlmIChjdXJyZW50VGltZSA8IGR1cmF0aW9uKSB7XG4gICAgICAgIHNldFRpbWVvdXQoYW5pbWF0ZVNjcm9sbCwgaW5jcmVtZW50KTtcbiAgICAgIH1cbiAgICB9O1xuICAgIGFuaW1hdGVTY3JvbGwoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBAZGVzYyBlYXNlSW5PdXQgRm4gY3JlYXRlcyB0aGUgdmFsdWVzIG5lY2Vzc2FyeSB0byBjcmVhdGUgZWFzZUluT3V0IGFuaW1hdGlvbi5cbiAgICogQHBhcmFtIGN1cnJlbnRUaW1lIGlzIGN1cnJlbnQgdGltZS5cbiAgICogQHBhcmFtIHN0YXJ0VGltZSBpcyB0aGUgc3RhcnRpbmcgdGltZS5cbiAgICogQHBhcmFtIHJlbWFpbmluZ1RpbWUgaXMgdGhlIHRpbWUgcGVyaW9kIGluIHRoZSB2YWx1ZS5cbiAgICogQHBhcmFtIGR1cmF0aW9uIGlzIHRoZSBkdXJhdGlvbiBvZiB0aGUgYW5pbWF0aW9uXG4gICAqIEByZXR1cm5zIGEgbnVtYmVyIHZhbHVlIHRvIHNjcm9sbCB0by5cbiAgICovXG4gIHByaXZhdGUgZWFzZUluT3V0KFxuICAgIGN1cnJlbnRUaW1lOiBudW1iZXIsXG4gICAgc3RhcnRUaW1lOiBudW1iZXIsXG4gICAgcmVtYWluaW5nVGltZTogbnVtYmVyLFxuICAgIGR1cmF0aW9uOiBudW1iZXJcbiAgKSB7XG4gICAgY3VycmVudFRpbWUgLz0gZHVyYXRpb24gLyAyO1xuXG4gICAgaWYgKGN1cnJlbnRUaW1lIDwgMSkge1xuICAgICAgcmV0dXJuIChyZW1haW5pbmdUaW1lIC8gMikgKiBjdXJyZW50VGltZSAqIGN1cnJlbnRUaW1lICsgc3RhcnRUaW1lO1xuICAgIH1cblxuICAgIGN1cnJlbnRUaW1lLS07XG4gICAgcmV0dXJuIChcbiAgICAgICgtcmVtYWluaW5nVGltZSAvIDIpICogKGN1cnJlbnRUaW1lICogKGN1cnJlbnRUaW1lIC0gMikgLSAxKSArIHN0YXJ0VGltZVxuICAgICk7XG4gIH1cbn1cbiJdfQ==