work.suroh.tk/js/interaction.js

// 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
    }
  }
}

// --> 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', () => {
    if (c.dataset.link == '~') {
      menuItem.textContent = '\u003C\u007E'
    } else {
      menuItem.textContent = 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}`)
    })
  }
}