2019-09-07 21:54:44 +02:00
|
|
|
import html from 'choo/html';
|
|
|
|
|
|
2019-09-10 20:41:06 +02:00
|
|
|
import headerImage from '../../dev/images/header.png';
|
|
|
|
|
|
2019-09-16 20:09:44 +02:00
|
|
|
import { I18n } from '../i18n';
|
2019-09-07 21:54:44 +02:00
|
|
|
import { homeView } from './home';
|
2019-09-09 05:56:36 +02:00
|
|
|
import { loginView } from './login';
|
2019-09-07 21:54:44 +02:00
|
|
|
import { searchView } from './search';
|
|
|
|
|
|
|
|
|
|
export const viewManager = (state, emit) => {
|
2019-09-16 20:32:53 +02:00
|
|
|
const i18n = new I18n(state); // Global I18n class passed to all views
|
2019-09-07 21:54:44 +02:00
|
|
|
// 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: {
|
2019-09-16 20:32:53 +02:00
|
|
|
htmlContent = homeView(state, emit, i18n);
|
2019-09-07 21:54:44 +02:00
|
|
|
break;
|
|
|
|
|
}
|
2019-09-08 22:04:26 +02:00
|
|
|
case 'login': {
|
2019-09-16 20:32:53 +02:00
|
|
|
htmlContent = loginView(state, emit, i18n);
|
2019-09-08 22:04:26 +02:00
|
|
|
break;
|
|
|
|
|
}
|
2019-09-07 21:54:44 +02:00
|
|
|
case 'search': {
|
2019-09-16 20:32:53 +02:00
|
|
|
htmlContent = searchView(state, emit, i18n);
|
2019-09-07 21:54:44 +02:00
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Create a wrapper for view content that includes global header/footer
|
|
|
|
|
let view = html`<body>
|
|
|
|
|
<header>
|
|
|
|
|
<nav>
|
|
|
|
|
<div class="brand">
|
2019-09-08 21:44:01 +02:00
|
|
|
<a href="/">
|
2019-09-10 20:41:06 +02:00
|
|
|
<span><img src=${headerImage} alt="Readlebee"></span>
|
2019-09-07 21:54:44 +02:00
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- responsive-->
|
|
|
|
|
<input id="navMenu" type="checkbox" class="show">
|
2019-09-12 07:44:31 +02:00
|
|
|
<label for="navMenu" class="burger pseudo button">${'\u2261'}</label>
|
2019-09-07 21:54:44 +02:00
|
|
|
|
|
|
|
|
<div class="menu">
|
|
|
|
|
<label style="display: inline-block;">
|
2019-09-16 20:09:44 +02:00
|
|
|
<input type="text" name="search"
|
|
|
|
|
placeholder=${i18n.__('global.searchbar_placeholder')}
|
|
|
|
|
onchange=${e => {
|
|
|
|
|
emit('pushState', '/search?for=' + encodeURIComponent(e.target.value.trim()));
|
|
|
|
|
}}
|
|
|
|
|
>
|
2019-09-07 21:54:44 +02:00
|
|
|
</label>
|
2019-09-16 20:09:44 +02:00
|
|
|
<a href="/login" class="pseudo button">${i18n.__('global.menu_login')}</a>
|
|
|
|
|
<a href="/logout" class="pseudo button">${i18n.__('global.menu_logout')}</a>
|
2019-09-07 21:54:44 +02:00
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<main class="container">
|
|
|
|
|
${htmlContent}
|
|
|
|
|
</main>
|
2019-09-08 22:04:26 +02:00
|
|
|
|
|
|
|
|
<footer>
|
|
|
|
|
<nav>
|
|
|
|
|
<div class="links">
|
2019-09-16 20:09:44 +02:00
|
|
|
<a href="https://gitlab.com/Alamantus/Readlebee" class="pseudo button">
|
|
|
|
|
${i18n.__('global.footer_repo')}
|
|
|
|
|
</a>
|
|
|
|
|
<a href="https://gitter.im/Readlebee/community" class="pseudo button">
|
|
|
|
|
${i18n.__('global.footer_chat')}
|
|
|
|
|
</a>
|
2019-09-08 22:04:26 +02:00
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
</footer>
|
2019-09-07 21:54:44 +02:00
|
|
|
</body>`;
|
|
|
|
|
|
|
|
|
|
return view;
|
|
|
|
|
}
|
