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 (
{this.props.children}
); + } +} \ 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 ( -
+
{user.uid > 0 ?
@@ -130,7 +71,7 @@ class App extends React.Component {
-
+
-- cgit v1.2.3