fox-send/app/templates/userAccount/index.js

67 lines
1.4 KiB
JavaScript
Raw Normal View History

2018-07-31 18:09:18 +00:00
const html = require('choo/html');
2018-08-07 22:40:17 +00:00
module.exports = function(state, emit) {
const user = state.user;
const menu = user.loggedIn
? html`
<ul class="account_dropdown">
<li class="account_dropdown__text">
${user.email}
</li>
<li>
<a class="account_dropdown__link" onclick=${logout}>${state.translate(
'logOut'
)}</a>
</li>
</ul>`
: html`
2018-08-03 19:24:41 +00:00
<ul class="account_dropdown"
tabindex="-1"
>
<li>
2018-08-07 22:40:17 +00:00
<a class="account_dropdown__link" onclick=${login}>${state.translate(
'signInMenuOption'
)}</a>
2018-08-03 19:24:41 +00:00
</li>
</ul>
`;
2018-07-31 18:09:18 +00:00
return html`
<div class="account">
2018-08-07 22:40:17 +00:00
<div class="account__avatar">
<img
class="account__avatar"
src="${user.avatar}"
onclick=${avatarClick}
/>
</div>
${menu}
2018-07-31 18:09:18 +00:00
</div>`;
2018-08-03 19:24:41 +00:00
function avatarClick(event) {
2018-07-31 18:09:18 +00:00
event.preventDefault();
const dropdown = document.querySelector('.account_dropdown');
dropdown.classList.toggle('visible');
2018-08-03 19:24:41 +00:00
dropdown.focus();
}
2018-08-07 22:40:17 +00:00
function login(event) {
event.preventDefault();
emit('login');
}
function logout(event) {
event.preventDefault();
emit('logout');
}
2018-08-03 19:24:41 +00:00
//the onblur trick makes links unclickable wtf
/*
function hideMenu(event) {
event.stopPropagation();
const dropdown = document.querySelector('.account_dropdown');
dropdown.classList.remove('visible');
2018-07-31 18:09:18 +00:00
}
2018-08-03 19:24:41 +00:00
*/
2018-07-31 18:09:18 +00:00
};