aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-14 17:24:30 -0500
committerGitHub <noreply@github.com>2020-11-14 17:24:30 -0500
commit34c6d4210a3e638482c13d0f0129489e254900de (patch)
tree2758d1c964d80107c91828aa95ac8de1c31d1156
parentaf16643f3588d27b65bac591fdb21e2180723675 (diff)
Scroll refactor (#1031)
* Use private members * Reorganize
-rw-r--r--ext/mixed/js/scroll.js75
1 files changed, 38 insertions, 37 deletions
diff --git a/ext/mixed/js/scroll.js b/ext/mixed/js/scroll.js
index 840fdb9c..1cad87ef 100644
--- a/ext/mixed/js/scroll.js
+++ b/ext/mixed/js/scroll.js
@@ -15,17 +15,24 @@
* along with this program. If not, see <https://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 = this.onAnimationFrame.bind(this);
+ this._animationRequestId = null;
+ this._animationStartTime = 0;
+ this._animationStartX = 0;
+ this._animationStartY = 0;
+ this._animationEndTime = 0;
+ this._animationEndX = 0;
+ this._animationEndY = 0;
+ this._requestAnimationFrameCallback = this._onAnimationFrame.bind(this);
+ }
+
+ get x() {
+ return window.scrollX || window.pageXOffset;
+ }
+
+ get y() {
+ return window.scrollY || window.pageYOffset;
}
toY(y) {
@@ -42,49 +49,43 @@ class WindowScroll {
}
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);
+ 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) {
+ if (this._animationRequestId === null) {
return;
}
- window.cancelAnimationFrame(this.animationRequestId);
- this.animationRequestId = null;
+ window.cancelAnimationFrame(this._animationRequestId);
+ this._animationRequestId = null;
}
- onAnimationFrame(time) {
- if (time >= this.animationEndTime) {
- window.scroll(this.animationEndX, this.animationEndY);
- this.animationRequestId = null;
+ // Private
+
+ _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));
+ const t = this._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._lerp(this._animationStartX, this._animationEndX, t),
+ this._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;
+ this._animationRequestId = window.requestAnimationFrame(this._requestAnimationFrameCallback);
}
- static easeInOutCubic(t) {
+ _easeInOutCubic(t) {
if (t < 0.5) {
return (4.0 * t * t * t);
} else {
@@ -93,7 +94,7 @@ class WindowScroll {
}
}
- static lerp(start, end, percent) {
+ _lerp(start, end, percent) {
return (end - start) * percent + start;
}
}