diff --git a/.eleventy.js b/.eleventy.js
index f7c8598..2d054fc 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,8 +1,14 @@
-const pluginWebc = require('@11ty/eleventy-plugin-webc')
-const markdownIt = require('markdown-it')
-const mdla = require('markdown-it-link-attributes')
+// node requires
const fs = require('fs')
+// webc plugin
+const pluginWebc = require('@11ty/eleventy-plugin-webc')
+
+// markdown plugin
+const markdownIt = require('markdown-it')
+const mdla = require('markdown-it-link-attributes')
+
+// ~> config start
module.exports = (config) => {
// webc
config.addPlugin(pluginWebc, {
diff --git a/_includes/base.webc b/_includes/base.webc
index 2accdca..f80f583 100644
--- a/_includes/base.webc
+++ b/_includes/base.webc
@@ -16,8 +16,6 @@
-
-
diff --git a/_includes/components/nav-link.webc b/_includes/components/nav-link.webc
index 0897631..d43d6a8 100644
--- a/_includes/components/nav-link.webc
+++ b/_includes/components/nav-link.webc
@@ -9,9 +9,7 @@ class NavLink extends HTMLElement {
span.nextSibling.remove()
}
this.nextSibling.remove()
-
}
-
}
customElements.define('nav-link', NavLink)
diff --git a/_includes/components/nav-primary.js b/_includes/components/nav-primary.js
new file mode 100644
index 0000000..58bc4dc
--- /dev/null
+++ b/_includes/components/nav-primary.js
@@ -0,0 +1,125 @@
+import { Synth } from '../../assets/js/synth.js'
+
+class NavPrimary extends HTMLElement {
+ categories = []
+ subs = []
+
+ audioEngine = null
+ masterGain = null
+
+ menuVoices = {}
+
+ connectedCallback() {
+ this.setupAudio()
+
+ this.categories = this.querySelectorAll('nav-link')
+ this.subs = this.querySelectorAll('ul')
+
+ this.activate()
+
+ window.addEventListener('popstate', () => {
+ this.activate()
+ })
+
+ this.categories.forEach(n => {
+ this.setupVoice(n)
+
+ n.addEventListener('click', () => {
+ const category = n.attributes.getNamedItem('category')
+ const link = n.attributes.getNamedItem('link')
+
+ if (link) {
+ history.pushState({}, '', link.value)
+ location.pathname = link.value
+ } else if (category) {
+ location.hash = category.value
+ }
+ })
+
+ n.addEventListener('mouseenter', () => {
+ const menuItem = this.querySelector('#menuItem h1')
+ menuItem.textContent = n.dataset.name
+
+ this.menuVoices[n.dataset.name].noteOn()
+
+ menuItem.classList.add('active')
+ })
+
+ n.addEventListener('mouseleave', () => {
+ const menuItem = this.querySelector('#menuItem h1')
+
+ this.menuVoices[n.dataset.name].noteOff()
+
+ menuItem.classList.remove('active')
+ })
+ })
+
+ const audioEl = this.querySelector('.audioToggle')
+ audioEl.addEventListener('click', () => this.toggleAudio())
+ }
+
+ activate() {
+ let active, toOpen
+
+
+ this.categories.forEach(c => {
+ const { value } = c.attributes.getNamedItem('category') || false
+
+ if (c.classList.contains('active')) {
+ c.classList.remove('active')
+ } else if (value == location.hash.replace('#', '')) {
+ c.classList.add('active')
+ }
+ })
+
+ this.subs.forEach(s => {
+ const { name } = s.dataset
+
+ if (name == location.hash.replace('#', '') || name == location.pathname) {
+ toOpen = s
+ } else if (s.classList.contains('active')){
+ active = s
+ }
+ })
+
+ if (active) {
+ active.addEventListener('transitionend', () => {
+ toOpen.classList.add('active')
+ }, { once: true })
+
+ active.classList.remove('active')
+ } else if (toOpen) {
+ toOpen.classList.add('active')
+ }
+ }
+
+ setupAudio() {
+ // AUDIO SETUP
+ this.audioEngine = new (window.AudioContext || window.webkitAudioContext)()
+ this.audioEngine.suspend()
+ this.masterGain = this.audioEngine.createGain()
+
+ this.masterGain.gain.value = 0.9
+ this.masterGain.connect(this.audioEngine.destination)
+ }
+
+ toggleAudio() {
+ const audioEl = this.querySelector('.audioToggle')
+
+ if (this.audioEngine.state == 'suspended') {
+ this.audioEngine.resume()
+ audioEl.classList.add('active')
+ } else {
+ this.audioEngine.suspend()
+ audioEl.classList.remove('active')
+ }
+ }
+
+ setupVoice(el) {
+ // create synthVoices per navItem
+ this.menuVoices[el.dataset.name] = new Synth(this.audioEngine)
+ this.menuVoices[el.dataset.name].gain.connect(this.masterGain)
+ }
+}
+
+customElements.define('nav-primary', NavPrimary)
diff --git a/_includes/components/nav-primary.webc b/_includes/components/nav-primary.webc
index 8b68c0c..c0e4cb7 100644
--- a/_includes/components/nav-primary.webc
+++ b/_includes/components/nav-primary.webc
@@ -1,5 +1,5 @@
-
+
@@ -21,76 +21,17 @@
top
-
+
diff --git a/_includes/page.webc b/_includes/page.webc
index 3eb352e..2867cae 100644
--- a/_includes/page.webc
+++ b/_includes/page.webc
@@ -3,14 +3,14 @@ layout: base.webc
---
-
-
-
+
+
+
-
+
-
-
-
+
+
+
diff --git a/assets/css/main.css b/assets/css/main.css
index cbd497b..4b81cdd 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -114,27 +114,6 @@ nav#toTop.active > span:hover {
cursor: pointer;
}
-h1#menuItem {
- position: absolute;
- line-height: inherit;
- bottom: -500px;
- margin: 0;
- padding: 0;
- font-size: 33vw;
- opacity: 0;
- transform: translateY(100px);
- transform-origin: bottom left;
- mix-blend-mode: difference;
- transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s;
-}
-
-h1#menuItem.active {
- mix-blend-mode: difference;
- opacity: 1 !important;
- transform: translateY(-600px) !important;
-}
-
-
/* --> MAINPAGE CONSTRUCTION <-- */
nav#sub > ul {
margin: 0;
diff --git a/assets/js/interaction.js b/assets/js/interaction.js
deleted file mode 100644
index cca1f0a..0000000
--- a/assets/js/interaction.js
+++ /dev/null
@@ -1,123 +0,0 @@
-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 = []
-
-// check if any primaryNav items are active
-const primaryActive = () => {
- let active = false
- for (let n of primaryNav) {
- if (n.classList.contains('active')) {
- active = true
- }
- }
- return active
-}
-
-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)
-
- // 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 (primaryActive()) {
- subNav.classList.add('active')
- } else {
- subNav.classList.remove('active')
- }
-
- for (let s of subNav.children) {
- if (s.id == n.dataset.link && primaryActive()) {
- s.classList.add('active')
- } else {
- s.classList.remove('active')
- }
- }
- })
-
- // mouseover on primary nav for big botom text
- n.addEventListener('mouseenter', () => {
- // unsuspend sound on mouseenter
- audioEnable()
-
- 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')
- }
-})
diff --git a/assets/js/script.js b/assets/js/script.js
deleted file mode 100644
index febe284..0000000
--- a/assets/js/script.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// importing scripts
-import '/assets/js/interaction.js'
-
-// 'page' load transitions
-const pageSection = document.querySelector('section.page')
-
-pageSection.addEventListener('load', (e) => {
- console.log('div loaded?')
- console.log(e.target)
- alert('ehllo')
-})
diff --git a/assets/js/synth.js b/assets/js/synth.js
index f634bb5..faa12db 100644
--- a/assets/js/synth.js
+++ b/assets/js/synth.js
@@ -60,5 +60,4 @@ export class Synth {
// release
this.modGain.gain.setTargetAtTime(0.8, this.audio.currentTime + 0.4, 0.5)
}
-
}