83 lines
2.0 KiB
JavaScript
83 lines
2.0 KiB
JavaScript
// interaction
|
|
|
|
const primaryNav = document.querySelector('nav')
|
|
const menuItem = document.querySelector('#menuItem')
|
|
const content = document.querySelectorAll('.content')
|
|
|
|
// TODO: (create voice class per button)
|
|
let menuVoices = []
|
|
|
|
const subMenu = (activePage) => {
|
|
let menu = document.querySelector(`\#${activePage} \.subMenu`)
|
|
if (menu) {
|
|
return menu
|
|
} else {
|
|
return null
|
|
}
|
|
}
|
|
|
|
const showContent = (section) => {
|
|
for (let sect of content) {
|
|
if (c.dataset.link == sect.id) {
|
|
sect.className = 'content visible'
|
|
} else if (!c.dataset.link) {
|
|
sect.className = 'content'
|
|
} else {
|
|
sect.className = 'content'
|
|
}
|
|
}
|
|
}
|
|
|
|
for (let c of primaryNav.children) {
|
|
// TODO: (create voice class per button)
|
|
menuVoices[c.dataset.link] = new Synth(audioEngine)
|
|
menuVoices[c.dataset.link].gain.connect(masterGain)
|
|
|
|
c.addEventListener('click', () => {
|
|
menuVoices[c.dataset.link].mod()
|
|
|
|
for (let _c of primaryNav.children) {
|
|
if (c === _c && c.dataset.link != '~') {
|
|
c.className = 'active'
|
|
|
|
if (subMenu(c.dataset.link)) {
|
|
for (let s of subMenu(c.dataset.link).children) {
|
|
s.addEventListener('click', () => {
|
|
console.log(`clicked : ${s.dataset.link}`)
|
|
})
|
|
}
|
|
}
|
|
} else {
|
|
_c.className = ''
|
|
}
|
|
}
|
|
|
|
for (let sect of content) {
|
|
if (c.dataset.link == sect.id) {
|
|
sect.className = 'content visible'
|
|
} else if (!c.dataset.link) {
|
|
sect.className = 'content'
|
|
} else {
|
|
sect.className = 'content'
|
|
}
|
|
}
|
|
})
|
|
|
|
c.addEventListener('mouseenter', () => {
|
|
menuItem.innerHTML = c.dataset.link
|
|
menuItem.className = 'active'
|
|
menuVoices[c.dataset.link].noteOn()
|
|
})
|
|
|
|
c.addEventListener('mouseout', () => {
|
|
menuItem.className = 'inactive'
|
|
menuVoices[c.dataset.link].noteOff()
|
|
})
|
|
|
|
menuItem.addEventListener('transitionend', () => {
|
|
if (menuItem.className == 'inactive') {
|
|
menuItem.innerHTML = ''
|
|
}
|
|
})
|
|
}
|