Add New search reset after generation.
Keeps the generated artifact view intact but provides a footer New search button that stops audio, resets state, scrolls to top, and focuses the search input.
This commit is contained in:
@@ -571,6 +571,8 @@
|
||||
margin-top: calc(var(--spacing-unit) * 6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: calc(var(--spacing-unit) * 1.5);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.player-section {
|
||||
@@ -1133,6 +1135,7 @@
|
||||
|
||||
<div class="footer">
|
||||
<button id="faqBtnFooter" class="faq-link" type="button">FAQ</button>
|
||||
<button id="newSearchBtn" class="faq-link" type="button">New search</button>
|
||||
</div>
|
||||
|
||||
<div id="faqModalBackdrop" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="faqTitle">
|
||||
|
||||
+31
@@ -70,6 +70,7 @@ class MotifApp {
|
||||
// FAQ modal
|
||||
private faqBtn!: HTMLButtonElement;
|
||||
private faqBtnFooter: HTMLButtonElement | null = null;
|
||||
private newSearchBtn: HTMLButtonElement | null = null;
|
||||
private faqBackdrop!: HTMLElement;
|
||||
private faqCloseBtn!: HTMLButtonElement;
|
||||
|
||||
@@ -152,6 +153,7 @@ class MotifApp {
|
||||
// FAQ modal
|
||||
this.faqBtn = document.getElementById('faqBtn') as HTMLButtonElement;
|
||||
this.faqBtnFooter = document.getElementById('faqBtnFooter') as HTMLButtonElement | null;
|
||||
this.newSearchBtn = document.getElementById('newSearchBtn') as HTMLButtonElement | null;
|
||||
this.faqBackdrop = document.getElementById('faqModalBackdrop')!;
|
||||
this.faqCloseBtn = document.getElementById('faqCloseBtn') as HTMLButtonElement;
|
||||
}
|
||||
@@ -199,6 +201,7 @@ class MotifApp {
|
||||
// FAQ
|
||||
this.faqBtn.addEventListener('click', () => this.openFaq());
|
||||
this.faqBtnFooter?.addEventListener('click', () => this.openFaq());
|
||||
this.newSearchBtn?.addEventListener('click', () => this.resetToNewSearch());
|
||||
this.faqCloseBtn.addEventListener('click', () => this.closeFaq());
|
||||
this.faqBackdrop.addEventListener('click', (e) => {
|
||||
if (e.target === this.faqBackdrop) this.closeFaq();
|
||||
@@ -218,6 +221,34 @@ class MotifApp {
|
||||
this.faqBackdrop.classList.remove('open');
|
||||
}
|
||||
|
||||
private resetToNewSearch(): void {
|
||||
// Stop all audio and return to the search workbench.
|
||||
this.stopPreview();
|
||||
this.handleMotifStop();
|
||||
this.hasGenerated = false;
|
||||
this.isMotifPlaying = false;
|
||||
this.motifResumeProgress = 0;
|
||||
this.currentMIDI = null;
|
||||
|
||||
this.setState('idle');
|
||||
this.updateStatus('Ready. Enter a song name to search for MIDI files.');
|
||||
|
||||
try {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
// Focus search field for immediate next query
|
||||
window.setTimeout(() => {
|
||||
try {
|
||||
this.songInput.focus();
|
||||
this.songInput.select();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, 150);
|
||||
}
|
||||
|
||||
private isIOSLike(): boolean {
|
||||
const ua = navigator.userAgent || '';
|
||||
const iOS = /iPad|iPhone|iPod/.test(ua);
|
||||
|
||||
Reference in New Issue
Block a user