diff options
| author | Alex Yatskov <alex@foosoft.net> | 2019-10-05 10:14:07 -0700 | 
|---|---|---|
| committer | Alex Yatskov <alex@foosoft.net> | 2019-10-05 10:14:07 -0700 | 
| commit | 7f5f3951f057b84864f7f37825804f9049ddab10 (patch) | |
| tree | 1a724bbd4d8cf2b053f3e2b99b46ba41008508b8 /ext/mixed/js/scroll.js | |
| parent | f4b6527ed6ed1f0f4f5a63b94766b20f3b90e6ec (diff) | |
| parent | 46ab36180f486a19332c538401b4db12ffe1bda1 (diff) | |
Merge branch 'master' into testing
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; +    } +} |