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; + } +} |