diff options
Diffstat (limited to 'ext/mixed/js/scroll.js')
| -rw-r--r-- | ext/mixed/js/scroll.js | 100 | 
1 files changed, 100 insertions, 0 deletions
| diff --git a/ext/mixed/js/scroll.js b/ext/mixed/js/scroll.js new file mode 100644 index 00000000..824fd92b --- /dev/null +++ b/ext/mixed/js/scroll.js @@ -0,0 +1,100 @@ +/* + * Copyright (C) 2019  Alex Yatskov <alex@foosoft.net> + * Author: Alex Yatskov <alex@foosoft.net> + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program.  If not, see <http://www.gnu.org/licenses/>. + */ + + +class WindowScroll { +    constructor() { +        this.animationRequestId = null; +        this.animationStartTime = 0; +        this.animationStartX = 0; +        this.animationStartY = 0; +        this.animationEndTime = 0; +        this.animationEndX = 0; +        this.animationEndY = 0; +        this.requestAnimationFrameCallback = (t) => this.onAnimationFrame(t); +    } + +    toY(y) { +        this.to(this.x, y); +    } + +    toX(x) { +        this.to(x, this.y); +    } + +    to(x, y) { +        this.stop(); +        window.scroll(x, y); +    } + +    animate(x, y, time) { +        this.animationStartX = this.x; +        this.animationStartY = this.y; +        this.animationStartTime = window.performance.now(); +        this.animationEndX = x; +        this.animationEndY = y; +        this.animationEndTime = this.animationStartTime + time; +        this.animationRequestId = window.requestAnimationFrame(this.requestAnimationFrameCallback); +    } + +    stop() { +        if (this.animationRequestId === null) { +            return; +        } + +        window.cancelAnimationFrame(this.animationRequestId); +        this.animationRequestId = null; +    } + +    onAnimationFrame(time) { +        if (time >= this.animationEndTime) { +            window.scroll(this.animationEndX, this.animationEndY); +            this.animationRequestId = null; +            return; +        } + +        const t = WindowScroll.easeInOutCubic((time - this.animationStartTime) / (this.animationEndTime - this.animationStartTime)); +        window.scroll( +            WindowScroll.lerp(this.animationStartX, this.animationEndX, t), +            WindowScroll.lerp(this.animationStartY, this.animationEndY, t) +        ); + +        this.animationRequestId = window.requestAnimationFrame(this.requestAnimationFrameCallback); +    } + +    get x() { +        return window.scrollX || window.pageXOffset; +    } + +    get y() { +        return window.scrollY || window.pageYOffset; +    } + +    static easeInOutCubic(t) { +        if (t < 0.5) { +            return (4.0 * t * t * t); +        } else { +            t = 1.0 - t; +            return 1.0 - (4.0 * t * t * t); +        } +    } + +    static lerp(start, end, percent) { +        return (end - start) * percent + start; +    } +} |