Miscellaneous UI improvements

gtranter · Feb 17, 2023 · 1d31007 · 1d31007
1 parent 12480ee
commit 1d31007
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 9 deletions.
diff --git a/src/components/fourier-synth/fourier-synth.scss b/src/components/fourier-synth/fourier-synth.scss
@@ -76,23 +76,23 @@
 	}
 
 	.fundamental {
-		width: 64px;
-		padding-right: 24px;
+		width: 5em;
 	}
 
 	.harmonics {
-		width: 48px;
+		width: 4em;
 	}
 
 	.hz{
-		margin: 0 8px 0 -24px;
+		width: 1.2em;
 	}
 
 	.number {
-		width: 40px;
+		width: 2.5em;
 	}
 
 	.toggle {
+		cursor: pointer;
 		width: 32px;
 	}
 
@@ -140,6 +140,7 @@
 	.offset,
 	.gain,
 	.reset {
+		cursor: pointer;
 		margin-top: 8px;
 	}
 
@@ -159,6 +160,7 @@
 	}
 
 	.slider {
+		cursor: pointer;
 		flex-grow: 1;
 		flex-shrink: 1;
 		margin: 0 8px;
@@ -169,7 +171,7 @@
 	}
 
 	.field {
-		width: 40px;
+		width: 3em;
 		text-align: right;
 		appearance: textfield;
 
@@ -183,6 +185,7 @@
 	}
 
 	.clear {
+		cursor: pointer;
 		min-width: 20px;
 		max-width: 20px;
 		padding-left: 0;
@@ -199,7 +202,11 @@
 	}
 
 	.gain .field {
-		width: 56px;
+		width: 4em;
+	}
+
+	[disabled] {
+		cursor: default;
 	}
 
 	.graph {

diff --git a/src/components/fourier-synth/fourier-synth.tsx b/src/components/fourier-synth/fourier-synth.tsx
@@ -37,7 +37,7 @@ export class FourierSynth {
 	private _backgroundCanvas: HTMLCanvasElement;
 	private _backgroundRenderer: CanvasRenderingContext2D;
 	private _data: Record<string, FourierData> = {};
-	private _fieldFormatter = Intl.NumberFormat(navigator.language, {minimumFractionDigits: 1, maximumFractionDigits: 1});
+	private _fieldFormatter = Intl.NumberFormat(navigator.language, { minimumFractionDigits: 1, maximumFractionDigits: 1 });
 	private _gainNode: GainNode;
 	private _gainFormatter = Intl.NumberFormat(navigator.language, {minimumFractionDigits: 2, maximumFractionDigits: 2});
 	private _isAutoAdjusting: boolean = false;
@@ -623,6 +623,18 @@ export class FourierSynth {
 		}
 	}
 
+	/**
+	 * Check if the key pressed is Enter or space, and trap the event if true.
+	 */
+	private _isToggleKey(event: KeyboardEvent): boolean {
+		if (event.key.match(/(^Enter| )$/)) {
+			event.preventDefault();
+			return true;
+		}
+
+		return false;
+	}
+
 	/**
 	 * Calculate and apply the ideal gain and DC offset for a waveform so that it does not extend outside the graph area.
 	 * This forces a second iteration to render the waveform, so performance in the browser is reduced by 50%.
@@ -849,6 +861,7 @@ export class FourierSynth {
 								step={1}
 								value={this.enableAudio ? 1 : 0}
 								onInput={event => this.enableAudio = (event.currentTarget as HTMLInputElement).value === '1'}
+								onKeyPress={(event) => this._isToggleKey(event) && (this.enableAudio = !this.enableAudio)}
 							></input>
 						</span>
 						{this.fundamentalLabel && <span class="feature-container">
@@ -860,7 +873,7 @@ export class FourierSynth {
 								value={this.fundamental}
 								onChange={event => this.fundamental = Number((event.currentTarget as HTMLInputElement).value)}
 							></input>
-							<span class="hz">Hz</span>
+							<input class="hz" type="text" value="Hz" readonly tabIndex={-1}></input>
 						</span>}
 						{this.harmonicsLabel && <span class="feature-container">
 							<label class="feature-label">{this.harmonicsLabel}</label>
@@ -895,6 +908,7 @@ export class FourierSynth {
 							<input class="field"
 								readonly
 								value={`${this._gainFormatter.format(20 * Math.log10(this.gain))}dB`}
+								tabindex={-1}
 							></input>
 							<button class="clear" disabled={this.autoAdjust} onClick={() => this.gain = this.GAIN_DEFAULT}>X</button>
 						</div>
@@ -912,6 +926,7 @@ export class FourierSynth {
 									step={1}
 									value={this.hideGraph ? 0 : 1}
 									onInput={event => this.hideGraph = (event.currentTarget as HTMLInputElement).value === '0'}
+									onKeyPress={(event) => this._isToggleKey(event) && (this.hideGraph = !this.hideGraph)}
 								></input>
 							</span>}
 							{!this.hideGraph && this.autoAdjustLabel && <span class="feature-container">
@@ -923,6 +938,7 @@ export class FourierSynth {
 										step={1}
 										value={this.autoAdjust ? 1 : 0}
 										onInput={event => this.autoAdjust = (event.currentTarget as HTMLInputElement).value === '1'}
+										onKeyPress={(event) => this._isToggleKey(event) && (this.autoAdjust = !this.autoAdjust)}
 									></input>
 								</span>
 							}
@@ -964,6 +980,7 @@ export class FourierSynth {
 										step={1}
 										value={this.hideOffset ? 0 : 1}
 										onInput={event => this.hideOffset = (event.currentTarget as HTMLInputElement).value === '0'}
+										onKeyPress={(event) => this._isToggleKey(event) && (this.hideOffset = !this.hideOffset)}
 									></input>
 								</span>}
 								{this.endpointsLabel && <span class="feature-container">
@@ -975,6 +992,7 @@ export class FourierSynth {
 										step={1}
 										value={this.hideEndpoints ? 0 : 1}
 										onInput={event => this.hideEndpoints = (event.currentTarget as HTMLInputElement).value === '0'}
+										onKeyPress={(event) => this._isToggleKey(event) && (this.hideEndpoints = !this.hideEndpoints)}
 									></input>
 								</span>}
 								{this.dividersLabel && <span class="feature-container">
@@ -986,6 +1004,7 @@ export class FourierSynth {
 										step={1}
 										value={this.hideDividers ? 0 : 1}
 										onInput={event => this.hideDividers = (event.currentTarget as HTMLInputElement).value === '0'}
+										onKeyPress={(event) => this._isToggleKey(event) && (this.hideDividers = !this.hideDividers)}
 									></input>
 								</span>}
 								{this.gridDotsLabel && <span class="feature-container">
@@ -997,6 +1016,7 @@ export class FourierSynth {
 										step={1}
 										value={this.hideGridDots ? 0 : 1}
 										onInput={event => this.hideGridDots = (event.currentTarget as HTMLInputElement).value === '0'}
+										onKeyPress={(event) => this._isToggleKey(event) && (this.hideGridDots = !this.hideGridDots)}
 									></input>
 								</span>}
 							</div>