refactor: DOM form gadgets now dedicated methods

source/dom/button.js

@@ -0,0 +1,76 @@
+import { addTooltip } from './text'
+import { VERSION } from '../version'
+import {formattedDate} from '../models/info'
+
+export const setButton = (buttonName, callback ) => {
+	const element = document.getElementById(buttonName)
+	// check to see that the button hasn't got the display:none!
+	if (element)
+	{
+		element.addEventListener("click", (event) => {
+			callback && callback({element})
+		})
+		return element
+	}
+
+	return false
+}
+
+export const showReloadButton = () => {
+
+}
+
+export const createInstallButton = (manifestData) => {
+	// show install button or update button???
+	// reveal update button?
+	const tip = `Click to install ${manifestData.short_name} V-${VERSION.replaceAll(".","-")}<br>Date:${formattedDate}`
+	const button = document.createElement('button')
+	button.id = "button-install"
+	button.classList.add("install-app")
+	button.setAttribute("aria-label", tip )
+	button.style.setProperty("--logo",`url(${ manifestData.icons[0].src })`)
+	button.innerHTML = "Install"
+
+	addTooltip(button)
+	return button
+}
+
+////////////////////////////////////////////////////////////////////
+// TODO: This is rubbish, what was I thinking?
+////////////////////////////////////////////////////////////////////
+export const showUpdateButton = (domElement, action) => {
+	// reveal update button?
+	const button = doc.createElement('button')
+	button.id = "button-update"
+	button.setAttribute("aria-label", `Update to new version` )
+	button.classList.add("update-available")
+	button.innerHTML = "Update"
+
+	// on button press...
+	button.addEventListener('click', ()=>action() )
+	domElement.appendChild(button)
+}
+
+////////////////////////////////////////////////////////////////////
+// a simple midi buttnon with states
+// just set the state with the return
+////////////////////////////////////////////////////////////////////
+export const setupMIDIButton = (buttonMIDI, callback) => {
+
+	let midiEnabled = false
+
+	const onStartRequested = async (event) => {
+		event.preventDefault()
+		callback && callback()
+		midiEnabled = true
+		//buttonMIDI.removeEventListener('mousedown', onStartRequested)
+		return false
+	}
+
+	buttonMIDI.addEventListener('mousedown', onStartRequested, { once: true })
+
+	return {
+		setText:text=>buttonMIDI.innerHTML = text,
+		setLabel:text=>buttonMIDI.setAttribute("aria-label",text)
+	}
+}

source/dom/select.js

@@ -0,0 +1,67 @@
+import {updateTempo} from './ui'
+
+export const connectSelect = async (element,callback) => {
+	const select = typeof element === "string" ? document.getElementById(element) : element
+
+	if (!select){
+		throw Error("No element found with that spec")
+	}
+	select.addEventListener( 'change', event=>{
+		//const selection = select.options.selectedIndex
+		// const option = select.childNodes[selection]
+		const option = select.options[select.selectedIndex || select.options.selectedIndex] 
+		callback && callback (option)
+		return true
+	})
+}
+
+export const connectPaletteSelector = (callback) => connectSelect('select-palette', callback )
+export const connectReverbSelector = (callback) => connectSelect('select-impulse', callback )
+
+export const connectTempoControls = (callback) => {
+	connectSelect('select-tempo', (option)=>{
+		const tempo = parseInt( option.innerHTML )
+		updateTempo(tempo)
+		callback && callback (tempo)
+	} )
+}
+import {loadImpulseJSON, DIRS, REVERB_PATHS} from '../audio/effects/reverb'
+
+const path = './assets/audio/acoustics/'	
+
+// Connect the options comand to the JSON files
+export const connectReverbControls = (callback) => {
+
+	const ID = 'select-impulse'
+	const dirs = DIRS// REVERB_PATHS
+	// inject
+	const options = document.getElementById( ID )	
+	// TODO: dir should flip depending on the item prefix
+	if (options)
+	{				
+		const createOptionValues = (items, directory) => items.map( item => {
+			item = item.trim()
+			const filePath = item
+			const fileName = item.substring( item.lastIndexOf("/") + 1 )
+			const name = fileName.substring(0, fileName.lastIndexOf('.'))
+			//const option = `<option value="verb">reverbing</option>` 
+			const option = `<option value="${filePath}">${name}</option>` 
+			return option
+		}).join('\n')
+
+		const maapped = dirs.map( async (dir) => {
+			const json = await loadImpulseJSON(dir)
+			const option = createOptionValues( json, dir)
+			return `<optgroup>${dir}</optgroup>${option}`
+		})
+
+		Promise.all(maapped).then( optionData => {
+			options.innerHTML = optionData.join('')
+		})
+
+	}else{
+		console.error("Injecting impulse FAILED to ", {options, impulseList})
+	}
+
+	connectSelect( ID, (option)=> callback && callback(option) )
+}

source/dom/toggle.js

@@ -0,0 +1,25 @@
+import {setButton} from './button'
+
+////////////////////////////////////////////////////////////////////
+// this allows checkbox use where the variable is changed
+////////////////////////////////////////////////////////////////////
+export const setToggle = (toggleName, callback, value ) => {
+
+	const element = setButton( toggleName, ()=>{
+		value = !value
+		// add classes to any associated wrapped label
+		if (element.parentNode.nodeName === "LABEL")
+		{
+			element.parentNode.classList.toggle("checked", value )
+		}
+		callback(value)
+	})
+	// preset the button
+	if (value)
+	{
+		// goto parent and add checked classes?
+		element.setAttribute('checked', value)
+		element.parentNode.classList.toggle("checked", value )
+	}
+	return element
+}