ng-animate-scroll
Version:
Customizable angular module to animate scroll event to an element. Compatible with Angular 2.x onwards
173 lines • 14.4 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";
var NgAnimateScrollService = /** @class */ (function () {
function NgAnimateScrollService() {
}
/**
* @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: element's ID that will be scrolled to.
* @param duration: duration in milliseconds, default is 750.
* @param container the container html native element (or its id), window will be used if not set
*/
/**
* @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 {?}
*/
NgAnimateScrollService.prototype.scrollToElement = /**
* @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 {?}
*/
function (elementID, duration, container) {
if (duration === void 0) { duration = 750; }
/** @type {?} */
var item = document.getElementById(elementID);
if (item) {
/** @type {?} */
var 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.
* @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.
*/
/**
* @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 {?}
*/
NgAnimateScrollService.prototype.scrollTo = /**
* @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 {?}
*/
function (element, to, duration, isContainer) {
if (isContainer === void 0) { isContainer = false; }
/** @type {?} */
var increment = 20;
/** @type {?} */
var that = this;
/** @type {?} */
var start;
/** @type {?} */
var remaining;
/** @type {?} */
var currentTime = 0;
/** @type {?} */
var 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 {?}
*/
function () {
currentTime += increment;
/** @type {?} */
var 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.
* @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
* @returns a number value to scroll to.
*/
/**
* @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.
*/
NgAnimateScrollService.prototype.easeInOut = /**
* @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.
*/
function (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 = function () { return []; };
/** @nocollapse */ NgAnimateScrollService.ngInjectableDef = i0.defineInjectable({ factory: function NgAnimateScrollService_Factory() { return new NgAnimateScrollService(); }, token: NgAnimateScrollService, providedIn: "root" });
return NgAnimateScrollService;
}());
export { NgAnimateScrollService };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctYW5pbWF0ZS1zY3JvbGwuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25nLWFuaW1hdGUtc2Nyb2xsLyIsInNvdXJjZXMiOlsibGliL25nLWFuaW1hdGUtc2Nyb2xsLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBRTNDO0lBSUU7SUFBZSxDQUFDO0lBRWhCOzs7Ozs7T0FNRzs7Ozs7Ozs7O0lBQ0gsZ0RBQWU7Ozs7Ozs7O0lBQWYsVUFBZ0IsU0FBaUIsRUFBRSxRQUFzQixFQUFFLFNBQVU7UUFBbEMseUJBQUEsRUFBQSxjQUFzQjs7WUFDakQsSUFBSSxHQUFHLFFBQVEsQ0FBQyxjQUFjLENBQUMsU0FBUyxDQUFDO1FBQy9DLElBQUksSUFBSSxFQUFFOztnQkFDRixPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVM7WUFDOUIsSUFBSSxTQUFTLEVBQUU7Z0JBQ2IsSUFBSSxPQUFPLFNBQVMsS0FBSyxRQUFRLEVBQUU7b0JBQ2pDLFNBQVMsR0FBRyxRQUFRLENBQUMsY0FBYyxDQUFDLFNBQVMsQ0FBQyxDQUFDO2lCQUNoRDtnQkFDRCxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLElBQUksQ0FBQyxDQUFDO2FBQ25EO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxDQUFDLENBQUM7YUFDbkQ7U0FDRjthQUFNO1lBQ0wsT0FBTyxDQUFDLEtBQUssQ0FDWCxtREFBaUQsU0FBVyxDQUM3RCxDQUFDO1NBQ0g7SUFDSCxDQUFDO0lBRUQ7Ozs7O09BS0c7Ozs7Ozs7Ozs7SUFDSyx5Q0FBUTs7Ozs7Ozs7O0lBQWhCLFVBQWlCLE9BQU8sRUFBRSxFQUFVLEVBQUUsUUFBUSxFQUFFLFdBQTRCO1FBQTVCLDRCQUFBLEVBQUEsbUJBQTRCOztZQUNwRSxTQUFTLEdBQUcsRUFBRTs7WUFDbEIsSUFBSSxHQUFHLElBQUk7O1lBQ1QsS0FBSzs7WUFDUCxTQUFTOztZQUNULFdBQVcsR0FBRyxDQUFDOztZQUNmLGFBQWE7UUFFZixJQUFJLFdBQVcsRUFBRTtZQUNmLCtCQUErQjtZQUMvQixLQUFLLEdBQUcsT0FBTyxDQUFDLFNBQVMsQ0FBQztTQUMzQjthQUFNLElBQUksT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxFQUFFO1lBQ3JDLGFBQWE7WUFDYixLQUFLLEdBQUcsT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7U0FDaEM7YUFBTSxJQUFJLE9BQU8sQ0FBQyxlQUFlLENBQUMsU0FBUyxHQUFHLENBQUMsRUFBRTtZQUNoRCxjQUFjO1lBQ2QsS0FBSyxHQUFHLE9BQU8sQ0FBQyxlQUFlLENBQUMsU0FBUyxDQUFDO1NBQzNDO2FBQU07WUFDTCxLQUFLLEdBQUcsQ0FBQyxDQUFDO1NBQ1g7UUFFRCxTQUFTLEdBQUcsRUFBRSxHQUFHLEtBQUssQ0FBQztRQUV2QixhQUFhOzs7UUFBRztZQUNkLFdBQVcsSUFBSSxTQUFTLENBQUM7O2dCQUNuQixHQUFHLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxXQUFXLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxRQUFRLENBQUM7WUFDbkUsSUFBSSxXQUFXLEVBQUU7Z0JBQ2YsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7YUFDeEI7aUJBQU07Z0JBQ0wseUVBQXlFO2dCQUN6RSxHQUFHLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7YUFDM0I7WUFFRCxJQUFJLFdBQVcsR0FBRyxRQUFRLEVBQUU7Z0JBQzFCLFVBQVUsQ0FBQyxhQUFhLEVBQUUsU0FBUyxDQUFDLENBQUM7YUFDdEM7UUFDSCxDQUFDLENBQUEsQ0FBQztRQUNGLGFBQWEsRUFBRSxDQUFDO0lBQ2xCLENBQUM7SUFFRDs7Ozs7OztPQU9HOzs7Ozs7Ozs7O0lBQ0ssMENBQVM7Ozs7Ozs7OztJQUFqQixVQUNFLFdBQW1CLEVBQ25CLFNBQWlCLEVBQ2pCLGFBQXFCLEVBQ3JCLFFBQWdCO1FBRWhCLFdBQVcsSUFBSSxRQUFRLEdBQUcsQ0FBQyxDQUFDO1FBRTVCLElBQUksV0FBVyxHQUFHLENBQUMsRUFBRTtZQUNuQixPQUFPLENBQUMsYUFBYSxHQUFHLENBQUMsQ0FBQyxHQUFHLFdBQVcsR0FBRyxXQUFXLEdBQUcsU0FBUyxDQUFDO1NBQ3BFO1FBRUQsV0FBVyxFQUFFLENBQUM7UUFDZCxPQUFPLENBQ0wsQ0FBQyxDQUFDLGFBQWEsR0FBRyxDQUFDLENBQUMsR0FBRyxDQUFDLFdBQVcsR0FBRyxDQUFDLFdBQVcsR0FBRyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxTQUFTLENBQ3pFLENBQUM7SUFDSixDQUFDOztnQkF0R0YsVUFBVSxTQUFDO29CQUNWLFVBQVUsRUFBRSxNQUFNO2lCQUNuQjs7Ozs7aUNBSkQ7Q0F5R0MsQUF2R0QsSUF1R0M7U0FwR1ksc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogXCJyb290XCJcbn0pXG5leHBvcnQgY2xhc3MgTmdBbmltYXRlU2Nyb2xsU2VydmljZSB7XG4gIGNvbnN0cnVjdG9yKCkge31cblxuICAvKipcbiAgICogQGRlc2Mgc2Nyb2xsVG9JdGVtIEZuIHNjcm9sbHMgdG8gYW4gaXRlbXMgYnkgdXRpbGlzaW5nIHRoZSBhbmltYXRlZCBzY3JvbGwgZm4gKHNjcm9sbFRvKVxuICAgKiAgICAgICBhbmQgY2FsY3VsYXRpbmcgdGhlIGhlaWdodCBvZiB0aGUgaGVhZGVyIHRvIGFjY3VyYXRlbHkgZmluZCB0aGUgaXRlbSdzIHBvc2l0aW9uLlxuICAgKiBAcGFyYW0gZWxlbWVudElEOiBlbGVtZW50J3MgSUQgdGhhdCB3aWxsIGJlIHNjcm9sbGVkIHRvLlxuICAgKiBAcGFyYW0gZHVyYXRpb246IGR1cmF0aW9uIGluIG1pbGxpc2Vjb25kcywgZGVmYXVsdCBpcyA3NTAuXG4gICAqIEBwYXJhbSBjb250YWluZXIgdGhlIGNvbnRhaW5lciBodG1sIG5hdGl2ZSBlbGVtZW50IChvciBpdHMgaWQpLCB3aW5kb3cgd2lsbCBiZSB1c2VkIGlmIG5vdCBzZXRcbiAgICovXG4gIHNjcm9sbFRvRWxlbWVudChlbGVtZW50SUQ6IHN0cmluZywgZHVyYXRpb246IG51bWJlciA9IDc1MCwgY29udGFpbmVyPykge1xuICAgIGNvbnN0IGl0ZW0gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChlbGVtZW50SUQpOyAvLyB0aGUgZWxlbWVudFxuICAgIGlmIChpdGVtKSB7XG4gICAgICBjb25zdCBpdGVtUG9zID0gaXRlbS5vZmZzZXRUb3A7XG4gICAgICBpZiAoY29udGFpbmVyKSB7XG4gICAgICAgIGlmICh0eXBlb2YgY29udGFpbmVyID09PSAnc3RyaW5nJykge1xuICAgICAgICAgIGNvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGNvbnRhaW5lcik7XG4gICAgICAgIH1cbiAgICAgICAgdGhpcy5zY3JvbGxUbyhjb250YWluZXIsIGl0ZW1Qb3MsIGR1cmF0aW9uLCB0cnVlKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMuc2Nyb2xsVG8od2luZG93LmRvY3VtZW50LCBpdGVtUG9zLCBkdXJhdGlvbik7XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnNvbGUuZXJyb3IoXG4gICAgICAgIGBDb3VsZCBub3QgZmluZCBlbGVtZW50IHdpdGggdGhlIGZvbGxvd2luZyBJRDogJHtlbGVtZW50SUR9YFxuICAgICAgKTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogQGRlc2Mgc2Nyb2xsVG8gRm4gYWxsb3dzIHNjcm9sbGluZyB3aXRoIGFuaW1hdGlvbi5cbiAgICogQHBhcmFtIGVsZW1lbnQgdGhlICdlbGVtZW50JyB0aGF0IHRoZSBzY3JvbGwgd2lsbCBoYXBwZW4gb24uXG4gICAqIEBwYXJhbSB0byBpcyB0aGUgbG9jYXRpb24gdG8gc2Nyb2xsIHRvLlxuICAgKiBAcGFyYW0gZHVyYXRpb24gaXMgdGhlIGxlbmd0aCBvZiB0aGUgYW5pbWF0aW9uLlxuICAgKi9cbiAgcHJpdmF0ZSBzY3JvbGxUbyhlbGVtZW50LCB0bzogbnVtYmVyLCBkdXJhdGlvbiwgaXNDb250YWluZXI6IGJvb2xlYW4gPSBmYWxzZSkge1xuICAgIGNvbnN0IGluY3JlbWVudCA9IDIwLFxuICAgICAgdGhhdCA9IHRoaXM7XG4gICAgbGV0IHN0YXJ0LFxuICAgICAgcmVtYWluaW5nLFxuICAgICAgY3VycmVudFRpbWUgPSAwLFxuICAgICAgYW5pbWF0ZVNjcm9sbDtcblxuICAgIGlmIChpc0NvbnRhaW5lcikge1xuICAgICAgLy8gZm9yIGN1c3RvbSBjb250YWluZXIgZWxlbWVudFxuICAgICAgc3RhcnQgPSBlbGVtZW50LnNjcm9sbFRvcDtcbiAgICB9IGVsc2UgaWYgKGVsZW1lbnQuYm9keS5zY3JvbGxUb3AgPiAwKSB7XG4gICAgICAvLyBmb3IgY2hyb21lXG4gICAgICBzdGFydCA9IGVsZW1lbnQuYm9keS5zY3JvbGxUb3A7XG4gICAgfSBlbHNlIGlmIChlbGVtZW50LmRvY3VtZW50RWxlbWVudC5zY3JvbGxUb3AgPiAwKSB7XG4gICAgICAvLyBmb3IgZmlyZWZveFxuICAgICAgc3RhcnQgPSBlbGVtZW50LmRvY3VtZW50RWxlbWVudC5zY3JvbGxUb3A7XG4gICAgfSBlbHNlIHtcbiAgICAgIHN0YXJ0ID0gMDtcbiAgICB9XG5cbiAgICByZW1haW5pbmcgPSB0byAtIHN0YXJ0O1xuXG4gICAgYW5pbWF0ZVNjcm9sbCA9ICgpID0+IHtcbiAgICAgIGN1cnJlbnRUaW1lICs9IGluY3JlbWVudDtcbiAgICAgIGNvbnN0IHZhbCA9IHRoYXQuZWFzZUluT3V0KGN1cnJlbnRUaW1lLCBzdGFydCwgcmVtYWluaW5nLCBkdXJhdGlvbik7XG4gICAgICBpZiAoaXNDb250YWluZXIpIHtcbiAgICAgICAgZWxlbWVudC5zY3JvbGwoMCwgdmFsKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIC8vIHRvIGFsbG93IHNjcm9sbCBmdW5jdGlvbiBvbiBkaWZmZXJlbnQgYnJvd3NlcnMgYm90aCBjaHJvbWUgYW5kIGZpcmVmb3hcbiAgICAgICAgdG9wLndpbmRvdy5zY3JvbGwoMCwgdmFsKTtcbiAgICAgIH1cblxuICAgICAgaWYgKGN1cnJlbnRUaW1lIDwgZHVyYXRpb24pIHtcbiAgICAgICAgc2V0VGltZW91dChhbmltYXRlU2Nyb2xsLCBpbmNyZW1lbnQpO1xuICAgICAgfVxuICAgIH07XG4gICAgYW5pbWF0ZVNjcm9sbCgpO1xuICB9XG5cbiAgLyoqXG4gICAqIEBkZXNjIGVhc2VJbk91dCBGbiBjcmVhdGVzIHRoZSB2YWx1ZXMgbmVjZXNzYXJ5IHRvIGNyZWF0ZSBlYXNlSW5PdXQgYW5pbWF0aW9uLlxuICAgKiBAcGFyYW0gY3VycmVudFRpbWUgaXMgY3VycmVudCB0aW1lLlxuICAgKiBAcGFyYW0gc3RhcnRUaW1lIGlzIHRoZSBzdGFydGluZyB0aW1lLlxuICAgKiBAcGFyYW0gcmVtYWluaW5nVGltZSBpcyB0aGUgdGltZSBwZXJpb2QgaW4gdGhlIHZhbHVlLlxuICAgKiBAcGFyYW0gZHVyYXRpb24gaXMgdGhlIGR1cmF0aW9uIG9mIHRoZSBhbmltYXRpb25cbiAgICogQHJldHVybnMgYSBudW1iZXIgdmFsdWUgdG8gc2Nyb2xsIHRvLlxuICAgKi9cbiAgcHJpdmF0ZSBlYXNlSW5PdXQoXG4gICAgY3VycmVudFRpbWU6IG51bWJlcixcbiAgICBzdGFydFRpbWU6IG51bWJlcixcbiAgICByZW1haW5pbmdUaW1lOiBudW1iZXIsXG4gICAgZHVyYXRpb246IG51bWJlclxuICApIHtcbiAgICBjdXJyZW50VGltZSAvPSBkdXJhdGlvbiAvIDI7XG5cbiAgICBpZiAoY3VycmVudFRpbWUgPCAxKSB7XG4gICAgICByZXR1cm4gKHJlbWFpbmluZ1RpbWUgLyAyKSAqIGN1cnJlbnRUaW1lICogY3VycmVudFRpbWUgKyBzdGFydFRpbWU7XG4gICAgfVxuXG4gICAgY3VycmVudFRpbWUtLTtcbiAgICByZXR1cm4gKFxuICAgICAgKC1yZW1haW5pbmdUaW1lIC8gMikgKiAoY3VycmVudFRpbWUgKiAoY3VycmVudFRpbWUgLSAyKSAtIDEpICsgc3RhcnRUaW1lXG4gICAgKTtcbiAgfVxufVxuIl19