From 1d54694dfc68a31e5f498a4c8f855b6d39456d63 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Mon, 25 Jun 2018 14:10:27 +0300
Subject: Header component
---
vnext/src/components/Header.js | 67 ++++++++++++++++++++++++++++++++++++++++++
vnext/src/index.js | 67 +++---------------------------------------
2 files changed, 71 insertions(+), 63 deletions(-)
create mode 100644 vnext/src/components/Header.js
diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
new file mode 100644
index 00000000..fd1c1705
--- /dev/null
+++ b/vnext/src/components/Header.js
@@ -0,0 +1,67 @@
+import React from 'react';
+
+const elClassHidden = 'header--hidden'
+const elClassBackground = 'header--background';
+
+export default class Header extends React.Component {
+ constructor(props) {
+ super(props);
+ this.dHeight = 0;
+ this.wHeight = 0;
+ this.wScrollCurrent = 0;
+ this.wScrollBefore = 0;
+ this.wScrollDiff = 0;
+ this.header = React.createRef()
+ }
+ componentDidMount() {
+ const header = this.header.current;
+ window.addEventListener('scroll', this.throttle(250, () => {
+ this.dHeight = document.body.offsetHeight;
+ this.wHeight = window.innerHeight;
+ this.wScrollCurrent = window.pageYOffset;
+ this.wScrollDiff = this.wScrollBefore - this.wScrollCurrent;
+
+ if (this.wScrollCurrent <= 0) {
+ // scrolled to the very top; element sticks to the top
+ header.classList.remove(elClassHidden)
+ header.classList.remove(elClassBackground)
+ } else if (this.wScrollDiff > 0 && header.classList.contains(elClassHidden)) {
+ // scrolled up; element slides in
+ header.classList.remove(elClassHidden)
+ header.classList.add(elClassBackground)
+ } else if (this.wScrollDiff < 0) {
+ // scrolled down
+ if (this.wScrollCurrent + this.wHeight >= this.dHeight && header.classList.contains(elClassHidden)) {
+ // scrolled to the very bottom; element slides in
+ header.classList.remove(elClassHidden)
+ header.classList.add(elClassBackground)
+ } else {
+ // scrolled down; element slides out
+ header.classList.add(elClassHidden)
+ }
+ }
+ this.wScrollBefore = this.wScrollCurrent;
+ }), { passive: true });
+ }
+ throttle(delay, fn) {
+ var last, deferTimer;
+ return function () {
+ var context = this, args = arguments, now = +new Date;
+ if (last && now < last + delay) {
+ clearTimeout(deferTimer);
+ deferTimer = setTimeout(
+ function () {
+ last = now;
+ fn.apply(context, args);
+ },
+ delay);
+ } else {
+ last = now;
+ fn.apply(context, args);
+ }
+ };
+ };
+ render() {
+ return ();
+ }
+}
\ No newline at end of file
diff --git a/vnext/src/index.js b/vnext/src/index.js
index 2caaf5bb..aeb5357f 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -13,9 +13,7 @@ import Thread from './components/Thread';
import LoginButton from './components/LoginButton';
import Footer from './components/Footer';
import Avatar from './components/Avatar';
-
-const elClassHidden = 'header--hidden'
-const elClassBackground = 'header--background';
+import Header from './components/Header';
class App extends React.Component {
constructor(props) {
@@ -29,75 +27,18 @@ class App extends React.Component {
visitor: {
uid: Number(window.localStorage.uid) || 0,
hash: window.localStorage.hash || params.hash || ''
- },
- headerClassName: ''
+ }
};
- this.dHeight = 0;
- this.wHeight = 0;
- this.wScrollCurrent = 0;
- this.wScrollBefore = 0;
- this.wScrollDiff = 0;
}
-
componentDidMount() {
- window.addEventListener('scroll', this.throttle(500, () => {
- this.dHeight = document.body.offsetHeight;
- this.wHeight = window.innerHeight;
- this.wScrollCurrent = window.pageYOffset;
- this.wScrollDiff = this.wScrollBefore - this.wScrollCurrent;
-
- if (this.wScrollCurrent <= 0) {
- // scrolled to the very top; element sticks to the top
- this.setState({
- headerClassName: ''
- })
- } else if (this.wScrollDiff > 0 && this.state.headerClassName.indexOf(elClassHidden) >= 0) {
- // scrolled up; element slides in
- this.setState({
- headerClassName: elClassBackground
- })
- } else if (this.wScrollDiff < 0) {
- // scrolled down
- if (this.wScrollCurrent + this.wHeight >= this.dHeight && this.state.headerClassName.indexOf(elClassHidden) >= 0) {
- // scrolled to the very bottom; element slides in
- this.setState({
- headerClassName: elClassBackground
- })
- } else {
- // scrolled down; element slides out
- this.setState({
- headerClassName: [elClassHidden, elClassBackground].join(' ')
- })
- }
- }
- this.wScrollBefore = this.wScrollCurrent;
- }));
this.auth(this.state.visitor.hash)
}
- throttle(delay, fn) {
- var last, deferTimer;
- return function () {
- var context = this, args = arguments, now = +new Date;
- if (last && now < last + delay) {
- clearTimeout(deferTimer);
- deferTimer = setTimeout(
- function () {
- last = now;
- fn.apply(context, args);
- },
- delay);
- } else {
- last = now;
- fn.apply(context, args);
- }
- };
- };
render() {
const user = this.state.visitor;
return (
-