autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sub-menus can be closed and opened + divider added

Browse Source
This commit is contained in:
Gaelle Morin
2018-12-03 19:49:32 +01:00
parent 291822bbeb
commit 0837257b1d
5 changed files with 52 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/scripts/hd-app.js
View File

@ -1,14 +1,14 @@
document.addEventListener("DOMContentLoaded", function(event) {
document.addEventListener("DOMContentLoaded", function (event) {
// Constants declaration
const navBar = document.querySelector("#navbar");
const searchBar = document.querySelector("#search-bar");
const searchView = document.querySelector("#search-view");
const searchInput = searchBar.querySelector("#search-input");
const btnToggle = document.querySelector("#button-toggle");
const navBar = document.querySelector("#navbar");
const searchBar = document.querySelector("#search-bar");
const searchView = document.querySelector("#search-view");
const searchInput = searchBar.querySelector("#search-input");
const btnToggle = document.querySelector("#button-toggle");
// Shortcuts
window.addEventListener("keydown", function(e) {
window.addEventListener("keydown", function (e) {
// CTRL + K triggers the search feature
if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
e.preventDefault();
@ -34,7 +34,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
navBar.classList.remove("search-mode");
searchView.classList.remove("search-mode");
}
function emptySearchBar(e) {
searchInput.value = '';
openSearchBar();
@ -55,7 +55,9 @@ document.addEventListener("DOMContentLoaded", function(event) {
e.stopPropagation();
});
window.addEventListener('click', e=>{
window.addEventListener('click', e => {
navBar.classList.remove('open');
});
});

23
src/scripts/index.js
View File

@ -1,6 +1,7 @@
document.addEventListener('DOMContentLoaded', function(event) {
document.addEventListener('DOMContentLoaded', function (event) {
const navBar = document.querySelector('#navbar');
const btnToggle = document.querySelector('#button-toggle');
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
if (!navBar || !btnToggle) return;
btnToggle.addEventListener('click', e => {
@ -13,11 +14,11 @@ document.addEventListener('DOMContentLoaded', function(event) {
});
function resize() {
setTimeout(()=>
Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
if(!elm.offsetParent) return;
elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
}));
setTimeout(() =>
Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
if (!elm.offsetParent) return;
elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
}));
}
window.addEventListener('resize', resize);
window.addEventListener('navigate', resize);
@ -25,4 +26,14 @@ document.addEventListener('DOMContentLoaded', function(event) {
document.addEventListener('load', resize);
document.addEventListener('WebComponentsReady', resize);
resize();
// Toggle sub-menus
menuWrappers.forEach(menuWrapper => {
const menu = menuWrapper.querySelector('.menu');
menu.addEventListener('click', e => {
console.log(menuWrapper);
menuWrapper.classList.toggle('is-closed');
});
});
});