work.suroh.tk/js/interaction.js

130 lines
2.9 KiB
JavaScript
Raw Normal View History

2019-03-15 14:53:48 +00:00
// interaction
const primaryNav = document.querySelector('nav')
const menuItem = document.querySelector('#menuItem')
// TODO: (create voice class per button)
let menuVoices = []
let activePage
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
}
}
}
2019-03-15 14:53:48 +00:00
// --> PRIMARY NAVIGATION
//
2019-03-15 14:53:48 +00:00
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)
2019-03-15 14:53:48 +00:00
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)
2019-03-15 14:53:48 +00:00
})
c.addEventListener('mouseenter', () => {
if (c.dataset.link == '~') {
menuItem.textContent = '\u003C\u007E'
} else {
menuItem.textContent = c.dataset.link
}
2019-03-15 14:53:48 +00:00
menuItem.className = 'active'
menuVoices[c.dataset.link].noteOn()
2019-03-15 14:53:48 +00:00
})
c.addEventListener('mouseout', () => {
menuItem.className = 'inactive'
menuVoices[c.dataset.link].noteOff()
2019-03-15 14:53:48 +00:00
})
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}`)
})
}
}