125 lines
2.8 KiB
JavaScript
125 lines
2.8 KiB
JavaScript
// interaction
|
|
const primaryNav = document.querySelector('nav')
|
|
const menuItem = document.querySelector('#menuItem')
|
|
|
|
// TODO: (create voice class per button)
|
|
let menuVoices = []
|
|
|
|
const subContent = (active) => {
|
|
let parent = document.querySelector(`\#${active}`)
|
|
let menu = parent.querySelector(`\.subMenu`)
|
|
if (menu) {
|
|
return { menu: menu, parent: parent }
|
|
} else {
|
|
return null
|
|
}
|
|
}
|
|
|
|
const subMenuListeners = (active) => {
|
|
let sc = subContent(active)
|
|
if (sc.menu) {
|
|
console.log(`You are on ${active} w\/ a menu`)
|
|
for (let s of sc.menu.children) {
|
|
console.log(s)
|
|
s.addEventListener('click', () => {
|
|
showContent(s.dataset.link, sc.parent)
|
|
})
|
|
}
|
|
} else {
|
|
console.log(`${active} has no menu`)
|
|
}
|
|
}
|
|
|
|
const showContent = (section, parent = false) => {
|
|
console.log(`section: ${section}\nparent: ${parent ? true : false}`)
|
|
let query
|
|
if (parent) {
|
|
console.log(parent)
|
|
query = parent.querySelectorAll('.content')
|
|
className = `content page`
|
|
} else {
|
|
query = document.querySelectorAll(`.content`)
|
|
className = `content`
|
|
}
|
|
|
|
console.log(query)
|
|
|
|
for (let q of query) {
|
|
if (q.id == section) {
|
|
console.log(`active id : ${section}`)
|
|
subQ = q
|
|
q.className = `${className} visible`
|
|
} else {
|
|
console.log('hiding divs')
|
|
q.className = `${className}`
|
|
}
|
|
}
|
|
|
|
console.log(content)
|
|
}
|
|
|
|
const findContent = (domElement, id) => {
|
|
for (let sect of domElement) {
|
|
if (id == sect.id) {
|
|
return sect
|
|
} else {
|
|
return null
|
|
}
|
|
}
|
|
}
|
|
|
|
// --> PRIMARY NAVIGATION
|
|
//
|
|
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'
|
|
activePage = c.dataset.link
|
|
} else {
|
|
_c.className = ''
|
|
}
|
|
}
|
|
|
|
// SHOW CONTENT FUNCTION
|
|
showContent(c.dataset.link)
|
|
|
|
// subPage Render
|
|
subMenuListeners(c.dataset.link)
|
|
})
|
|
|
|
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 = ''
|
|
}
|
|
})
|
|
}
|
|
|
|
// --> SECONDARY NAVIGATION
|
|
//
|
|
if (activePage) {
|
|
console.log(activePage)
|
|
for (let s of subContent(activePage).menu.children) {
|
|
s.addEventListener('click', () => {
|
|
console.log(`sub menu click \: ${s.dataset.link}`)
|
|
})
|
|
}
|
|
}
|