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

feature: color swap on search

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier 2021-04-02 10:41:18 +02:00
parent b9e12293eb
commit f202e6f75e
3 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/scripts/menu-search-control.js
View File

@ -1,7 +1,28 @@
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const searchField = document.querySelector('.menu-search'); const MenuTabs = Array.from(document.querySelectorAll(".jsMenuTab"));
console.log(searchField); MenuTabs.forEach(menuTab => {
const leform = searchField.querySelector('form'); const menuHeader = menuTab.querySelector('.jsMenuHeader');
console.log(leform); const menuArrow = menuTab.querySelector('.jsMenuArrow')
const menuSub = menuTab.querySelector('.jsMenuSub');
const menuOption = menuTab.querySelector('.jsMenuOption');
const menuAdmin = menuTab.querySelector('.jsMenuAdmin');
menuHeader.addEventListener('click', e => {
menuArrow.classList.toggle('transform-up');
menuSub.classList.toggle('hidden');
});
menuOption.addEventListener('click', e => {
menuAdmin.classList.toggle('hidden');
e.stopPropagation();
});
});
const searchForm = document.querySelector('.menu-search');
searchForm.addEventListener('formChange', () => {
if(document.querySelector('.menu-search input').value != "") {
searchForm.style.backgroundColor = "red"; //- Put overriden color here
} else {
searchForm.style.backgroundColor = "blue"; //- Put default color here
}
})
}); });

19
src/scripts/navigate-event.js
View File

@ -1,22 +1,3 @@
const MenuTabs = Array.from(document.querySelectorAll(".jsMenuTab"));
MenuTabs.forEach(menuTab => {
const menuHeader = menuTab.querySelector('.jsMenuHeader');
const menuArrow = menuTab.querySelector('.jsMenuArrow')
const menuSub = menuTab.querySelector('.jsMenuSub');
const menuOption = menuTab.querySelector('.jsMenuOption');
const menuAdmin = menuTab.querySelector('.jsMenuAdmin');
menuHeader.addEventListener('click', e => {
menuArrow.classList.toggle('transform-up');
menuSub.classList.toggle('hidden');
});
menuOption.addEventListener('click', e => {
menuAdmin.classList.toggle('hidden');
e.stopPropagation();
});
});
// auxiliary function closes the user profile menu // auxiliary function closes the user profile menu
function closeUserControls() { function closeUserControls() {
let userControls = Array.from(document.querySelectorAll(".user-controls")); let userControls = Array.from(document.querySelectorAll(".user-controls"));

2
src/views/partials/widgets/hubl-menu-empty.pug
View File

@ -1,4 +1,4 @@
if componentSet.has('circles') || componentSet.has('projects') || componentSet.has('profileDirectory') if componentSet.has('circles') || componentSet.has('projects') || componentSet.has('profileDirectory') || componentSet.has('chat')
solid-widget(name='hubl-menu-empty') solid-widget(name='hubl-menu-empty')
template template
p.segment.full.empty.whitespace-normal(style='display:block!important; color:#D0D4DA') p.segment.full.empty.whitespace-normal(style='display:block!important; color:#D0D4DA')