90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import {Link} from './link.js';
|
|
|
|
var Header = React.createClass({
|
|
getInitialState: function() {
|
|
return {
|
|
title: "LBRY",
|
|
isScrolled: false
|
|
};
|
|
},
|
|
componentWillMount: function() {
|
|
new MutationObserver(function(mutations) {
|
|
this.setState({ title: mutations[0].target.textContent });
|
|
}.bind(this)).observe(
|
|
document.querySelector('title'),
|
|
{ subtree: true, characterData: true, childList: true }
|
|
);
|
|
},
|
|
componentDidMount: function() {
|
|
document.addEventListener('scroll', this.handleScroll);
|
|
},
|
|
componentWillUnmount: function() {
|
|
document.removeEventListener('scroll', this.handleScroll);
|
|
if (this.userTypingTimer)
|
|
{
|
|
clearTimeout(this.userTypingTimer);
|
|
}
|
|
},
|
|
handleScroll: function() {
|
|
this.setState({
|
|
isScrolled: document.body.scrollTop > 0
|
|
});
|
|
},
|
|
onQueryChange: function(event) {
|
|
|
|
if (this.userTypingTimer)
|
|
{
|
|
clearTimeout(this.userTypingTimer);
|
|
}
|
|
|
|
//@TODO: Switch to React.js timing
|
|
var searchTerm = event.target.value;
|
|
this.userTypingTimer = setTimeout(() => {
|
|
this.props.onSearch(searchTerm);
|
|
}, 800); // 800ms delay, tweak for faster/slower
|
|
|
|
},
|
|
render: function() {
|
|
return (
|
|
<header id="header" className={ (this.state.isScrolled ? 'header-scrolled' : 'header-unscrolled') + ' ' + (this.props.links ? 'header-with-subnav' : 'header-no-subnav') }>
|
|
<div className="header-top-bar">
|
|
<Link onClick={this.props.onOpenDrawer} icon="icon-bars" className="open-drawer-link" />
|
|
<h1>{ this.state.title }</h1>
|
|
<div className="header-search">
|
|
<input type="search" onChange={this.onQueryChange}
|
|
placeholder="Find movies, music, games, and more"/>
|
|
</div>
|
|
</div>
|
|
{
|
|
this.props.links ?
|
|
<SubHeader links={this.props.links} viewingPage={this.props.viewingPage} /> :
|
|
''
|
|
}
|
|
</header>
|
|
);
|
|
}
|
|
});
|
|
|
|
var SubHeader = React.createClass({
|
|
render: function() {
|
|
var links = [],
|
|
viewingUrl = '?' + this.props.viewingPage;
|
|
|
|
for (let link of Object.keys(this.props.links)) {
|
|
links.push(
|
|
<a href={link} key={link} className={ viewingUrl == link ? 'sub-header-selected' : 'sub-header-unselected' }>
|
|
{this.props.links[link]}
|
|
</a>
|
|
);
|
|
}
|
|
return (
|
|
<nav className="sub-header">
|
|
{links}
|
|
</nav>
|
|
);
|
|
}
|
|
});
|
|
|
|
export default Header;
|