aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-17 01:36:41 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:52 +0300
commit0c2239cd080a15c79b060435742b8891cd7d29ab (patch)
tree0642a5190177babc802ff8a5515c359c52b41d59
parente138b56f4719a3df9a287e42afe08bf616aa1d1d (diff)
Fix header
-rw-r--r--vnext/src/index.js156
-rw-r--r--vnext/src/views/index.html6
2 files changed, 116 insertions, 46 deletions
diff --git a/vnext/src/index.js b/vnext/src/index.js
index 9317c8b6..bf1d78ac 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -8,64 +8,127 @@ import Thread from './components/Thread';
import LoginButton from './components/LoginButton';
import Footer from './components/Footer';
+const elClassHidden = 'header--hidden'
+const elClassBackground = 'header--background';
+
class App extends React.Component {
constructor(props) {
super(props);
this.auth = this.auth.bind(this);
this.state = {
- visitor: { uid: 0 }
+ visitor: { uid: 0 },
+ headerClassName: ''
};
+ this.dHeight = 0;
+ this.wHeight = 0;
+ this.wScrollCurrent = 0;
+ this.wScrollBefore = 0;
+ this.wScrollDiff = 0;
+
+ 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(window.localStorage.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() {
return (
- <React.Fragment>
- <Router>
- <div className="wrapper">
- <header>
- <div id="header_wrapper">
- {this.state.visitor.uid > 0 ?
- <div id="ctitle">
- <a href={`/${this.state.visitor.uname}`}>
- <img src={`//i.juick.com/a/${this.state.visitor.uid}.png`} alt="" />{this.state.visitor.uname}
- </a>
- </div>
- :
- <div id="logo"><Link to="/">Juick</Link></div>
- }
- <div id="search">
- <form action="/">
- <input name="search" className="text"
- placeholder="Search..." />
- </form>
+ <Router>
+ <React.Fragment>
+ <header className={this.state.headerClassName}>
+ <div id="header_wrapper">
+ {this.state.visitor.uid > 0 ?
+ <div id="ctitle">
+ <a href={`/${this.state.visitor.uname}`}>
+ <img src={`//i.juick.com/a/${this.state.visitor.uid}.png`} alt="" />{this.state.visitor.uname}
+ </a>
</div>
- <nav id="global">
- <ul>
+ :
+ <div id="logo"><Link to="/">Juick</Link></div>
+ }
+ <div id="search">
+ <form action="/">
+ <input name="search" className="text"
+ placeholder="Search..." />
+ </form>
+ </div>
+ <nav id="global">
+ <ul>
+ {this.state.visitor.uid > 0 ?
+ <li><Link to={{ pathname: '/discussions' }}><Icon name="ei-comment" size="s" />Discuss</Link></li>
+ :
+ <li><Link to='/?media=1' rel="nofollow"><Icon name="ei-camera" size="s" />Photos</Link></li>
+ }
+ <li><Link to={{ pathname: '/' }} rel="nofollow"><Icon name="ei-search" size="s" />Discover</Link></li>
+ <li>
{this.state.visitor.uid > 0 ?
- <li><Link to={{ pathname: '/discussions' }}><Icon name="ei-comment" size="s" />Discuss</Link></li>
+ <Link to={{ pathname: '/post' }}><Icon name="ei-pencil" size="s" />Post</Link>
:
- <li><Link to='/?media=1' rel="nofollow"><Icon name="ei-camera" size="s" />Photos</Link></li>
+ <LoginButton title="Login" onAuth={this.auth.bind(this)} />
}
- <li><Link to={{ pathname: '/' }} rel="nofollow"><Icon name="ei-search" size="s" />Discover</Link></li>
- <li>
- {this.state.visitor.uid > 0 ?
- <Link to={{ pathname: '/post' }}><Icon name="ei-pencil" size="s" />Post</Link>
- :
- <LoginButton title="Login" onAuth={this.auth.bind(this)} />
- }
- </li>
- </ul>
- </nav>
- </div>
- </header>
- <Route exact path="/" render={(props) => <Discover visitor={this.state.visitor} {...props} />} />
- <Route exact path="/discussions" render={(props) => <Discussions visitor={this.state.visitor} {...props} />} />
- <Route exact path="/:user/:mid" render={(props) => <Thread visitor={this.state.visitor} {...props} />} />
- <Route exact path="/post" render={(props) => <Post visitor={this.state.visitor} {...props} />} />
+ </li>
+ </ul>
+ </nav>
+ </div>
+ </header>
+ <div id="wrapper">
+ <section id="content">
+ <Route exact path="/" render={(props) => <Discover visitor={this.state.visitor} {...props} />} />
+ <Route exact path="/discussions" render={(props) => <Discussions visitor={this.state.visitor} {...props} />} />
+ <Route exact path="/:user/:mid" render={(props) => <Thread visitor={this.state.visitor} {...props} />} />
+ <Route exact path="/post" render={(props) => <Post visitor={this.state.visitor} {...props} />} />
+ </section>
+ <aside id="column"></aside>
</div>
- </Router>
- <Footer />
- </React.Fragment>
+ <Footer />
+ </React.Fragment>
+ </Router>
)
}
auth(data) {
@@ -86,5 +149,10 @@ class App extends React.Component {
}
}
+let container = document.createElement('div');
+ReactDOM.render(<App />, container);
+let body = document.getElementById('wrapper').parentNode;
+body.replaceChild(container.getElementsByTagName('header')[0], body.querySelector('#header'));
+body.replaceChild(container.querySelector('#wrapper'), body.querySelector('#wrapper'));
+body.replaceChild(container.querySelector('#footer'), body.querySelector('#footer'));
-ReactDOM.render(<App />, document.getElementById('wrapper'));
diff --git a/vnext/src/views/index.html b/vnext/src/views/index.html
index 82a243dd..19dc6bfc 100644
--- a/vnext/src/views/index.html
+++ b/vnext/src/views/index.html
@@ -42,7 +42,9 @@
</script>
</head>
<body id="body">
-<div id="wrapper"></div>
-<script type="text/javascript" src="/Juick.js"></script>
+ <div id="header"></div>
+ <div id="wrapper"></div>
+ <div id="footer"></div>
+ <script type="text/javascript" src="/Juick.js"></script>
</body>
</html>