Readlebee/app/views/manager.js

71 lines
1.9 KiB
JavaScript
Raw Normal View History

import html from 'choo/html';
import headerImage from '../../dev/images/header.png';
import { homeView } from './home';
2019-09-09 05:56:36 +02:00
import { loginView } from './login';
import { searchView } from './search';
export const viewManager = (state, emit) => {
// In viewManager all we are doing is checking the app's state
// and passing the state and emit to the relevant view.
let htmlContent = html`<div>loading</div>`;
switch (state.params.page) {
case 'home':
default: {
htmlContent = homeView(state, emit);
break;
}
2019-09-08 22:04:26 +02:00
case 'login': {
htmlContent = loginView(state, emit);
break;
}
case 'search': {
htmlContent = searchView(state, emit);
break;
}
}
// Create a wrapper for view content that includes global header/footer
let view = html`<body>
<header>
<nav>
<div class="brand">
<a href="/">
<span><img src=${headerImage} alt="Readlebee"></span>
</a>
</div>
<!-- responsive-->
<input id="navMenu" type="checkbox" class="show">
<label for="navMenu" class="burger pseudo button">&#8801;</label>
<div class="menu">
<label style="display: inline-block;">
<input type="text" name="search" placeholder="Search" onchange=${e => {
console.log(encodeURIComponent(e.target.value.trim()));
emit('pushState', '/search?for=' + encodeURIComponent(e.target.value.trim()));
}}>
</label>
<a href="/login" class="pseudo button">Log In</a>
<a href="/logout" class="pseudo button">Log Out</a>
</div>
</nav>
</header>
<main class="container">
${htmlContent}
</main>
2019-09-08 22:04:26 +02:00
<footer>
<nav>
<div class="links">
<a href="https://gitlab.com/Alamantus/Readlebee" class="pseudo button">Repo</a>
<a href="https://gitter.im/Readlebee/community" class="pseudo button">Chat</a>
2019-09-08 22:04:26 +02:00
</div>
</nav>
</footer>
</body>`;
return view;
}