diff options
| -rw-r--r-- | vnext/src/components/Header.js | 67 | ||||
| -rw-r--r-- | vnext/src/index.js | 67 |
2 files changed, 71 insertions, 63 deletions
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 (<header ref={this.header}>{this.props.children}</header>); + } +}
\ 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 ( <Router> <React.Fragment> - <header className={this.state.headerClassName}> + <Header> <div id="header_wrapper"> {user.uid > 0 ? <div id="ctitle"> @@ -130,7 +71,7 @@ class App extends React.Component { </ul> </nav> </div> - </header> + </Header> <div id="wrapper"> <section id="content"> <Switch> |