import {Synth} from '/assets/js/synth.js' // audio for events // AUDIO SETUP const audioEngine = new (window.AudioContext || window.webkitAudioContext)() audioEngine.suspend() const masterGain = audioEngine.createGain() const audioEl = document.querySelector('#audioToggle') let audioAllowed = true masterGain.gain.value = 0.9 masterGain.connect(audioEngine.destination) const audioToggle = () => { audioEl.classList.toggle('active') if (audioEngine.state == 'suspended') { audioEngine.resume() audioAllowed = true } else { audioEngine.suspend() audioAllowed = false } } const audioEnable = () => { if (audioEngine.state == 'suspended' && audioAllowed) { audioEngine.resume() } } audioEl.addEventListener('click', audioToggle) // NAVIGATION let primaryNav = document.querySelectorAll('nav#primary>span') let subNav = document.querySelector('nav#sub') let menuItem = document.querySelector('#menuItem') let menuVoices = [] for (let n of primaryNav) { // remove shitty firefox span spacing n.nextSibling.parentNode.removeChild(n.nextSibling) // create synthVoices per navItem menuVoices[n.dataset.link] = new Synth(audioEngine) menuVoices[n.dataset.link].gain.connect(masterGain) // unsuspend sound on mouseenter n.addEventListener('mouseenter', audioEnable) // primary navigation click events n.addEventListener('click', (e) => { for (let _n of primaryNav) { if (n === _n && n.dataset.link != '~') { n.classList.toggle('active') } else if (n.dataset.link == '~') { window.location.href = '/' } else { _n.classList.remove('active') } } // subnav is nav element if (!subNav.classList.contains('active')) { subNav.classList.add('active') } for (let s of subNav.children) { if (s.id == n.dataset.link) { s.classList.add('active') } else { s.classList.remove('active') } } }) // mouseover on primary nav for big botom text n.addEventListener('mouseenter', () => { if (n.dataset.link == '~') { menuItem.textContent = '\u003C\u007E' } else { menuItem.textContent = n.dataset.link } menuItem.className = 'active' menuVoices[n.dataset.link].noteOn() }) n.addEventListener('mouseout', () => { menuItem.className = 'inactive' menuVoices[n.dataset.link].noteOff() }) } // SCROLL TO TOP NAVIGATION const toTop = document.querySelector('nav#toTop') toTop.addEventListener('click', (e) => { window.scrollTo(0,0) }) window.addEventListener('scroll', (e) => { let scrollY = window.scrollY if (scrollY > 50) { toTop.classList.add('active') } else { toTop.classList.remove('active') } })