work.suroh.tk/assets/js/interaction.js

108 lines
2.7 KiB
JavaScript
Raw Normal View History

2019-12-02 12:22:45 +00:00
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
2019-12-02 12:22:45 +00:00
masterGain.gain.value = 0.9
masterGain.connect(audioEngine.destination)
const audioToggle = () => {
audioEl.classList.toggle('active')
2019-12-02 12:22:45 +00:00
if (audioEngine.state == 'suspended') {
audioEngine.resume()
audioAllowed = true
2019-12-02 12:22:45 +00:00
} else {
audioEngine.suspend()
audioAllowed = false
2019-12-02 12:22:45 +00:00
}
}
const audioEnable = () => {
if (audioEngine.state == 'suspended' && audioAllowed) {
audioEngine.resume()
}
}
audioEl.addEventListener('click', audioToggle)
2019-12-02 12:22:45 +00:00
// NAVIGATION
let primaryNav = document.querySelectorAll('nav#primary>span')
2019-12-02 12:22:45 +00:00
let subNav = document.querySelector('nav#sub')
let menuItem = document.querySelector('#menuItem')
let menuVoices = []
for (let n of primaryNav) {
// remove shitty firefox span spacing
2019-12-02 12:22:45 +00:00
n.nextSibling.parentNode.removeChild(n.nextSibling)
// create synthVoices per navItem
2019-12-02 12:22:45 +00:00
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
2019-12-02 12:22:45 +00:00
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
2019-12-02 12:22:45 +00:00
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')
2019-12-02 12:22:45 +00:00
toTop.addEventListener('click', (e) => {
window.scrollTo(0,0)
})
2019-12-02 12:22:45 +00:00
window.addEventListener('scroll', (e) => {
let scrollY = window.scrollY
if (scrollY > 50) {
toTop.classList.add('active')
} else {
toTop.classList.remove('active')
}
})