const App = {
|
state: 'home',
|
currentCategoryId: 'recyclable',
|
recognition: null,
|
isRecording: false,
|
longPressTimer: null,
|
longPressDelay: 300,
|
|
els: {},
|
|
async init() {
|
this.cacheElements();
|
await I18n.load('zh');
|
await DataStore.load();
|
I18n.applyToDOM();
|
this.initLangDropdown();
|
this.renderTabs();
|
this.selectCategory('recyclable');
|
this.bindEvents();
|
this.initVoice();
|
this.showWelcomeIfNeeded();
|
history.replaceState({ view: 'home' }, '');
|
},
|
|
cacheElements() {
|
this.els.searchInput = document.getElementById('search-input');
|
this.els.btnQuery = document.getElementById('btn-query');
|
this.els.btnVoice = document.getElementById('btn-voice');
|
this.els.btnHome = document.getElementById('btn-home');
|
this.els.btnLang = document.getElementById('btn-lang');
|
this.els.langMenu = document.getElementById('lang-menu');
|
this.els.langDropdown = document.getElementById('lang-dropdown');
|
this.els.tabs = document.getElementById('tabs');
|
this.els.tabDetail = document.getElementById('tab-detail');
|
this.els.tabDesc = document.getElementById('tab-desc');
|
this.els.btnStandard = document.getElementById('btn-standard');
|
this.els.itemList = document.getElementById('item-list');
|
this.els.browseView = document.getElementById('browse-view');
|
this.els.searchView = document.getElementById('search-view');
|
this.els.searchResults = document.getElementById('search-results');
|
this.els.welcomeModal = document.getElementById('welcome-modal');
|
this.els.btnWelcomeConfirm = document.getElementById('btn-welcome-confirm');
|
this.els.standardModal = document.getElementById('standard-modal');
|
this.els.standardModalCard = document.getElementById('standard-modal-card');
|
this.els.btnStandardClose = document.getElementById('btn-standard-close');
|
this.els.standardTitle = document.getElementById('standard-title');
|
this.els.standardBody = document.getElementById('standard-body');
|
this.els.itemModal = document.getElementById('item-modal');
|
this.els.itemModalCard = document.getElementById('item-modal-card');
|
this.els.itemModalSuggest = document.getElementById('item-modal-suggest');
|
this.els.itemModalName = document.getElementById('item-modal-name');
|
this.els.itemModalIcon = document.getElementById('item-modal-icon');
|
this.els.itemModalLine1 = document.getElementById('item-modal-line1');
|
this.els.itemModalLine2 = document.getElementById('item-modal-line2');
|
this.els.itemModalTips = document.getElementById('item-modal-tips');
|
this.els.btnItemClose = document.getElementById('btn-item-close');
|
this.els.noResults = document.getElementById('no-results');
|
},
|
|
initLangDropdown() {
|
const current = I18n.languages.find(l => l.code === I18n.currentLang);
|
this.els.btnLang.textContent = I18n.t(current.labelKey);
|
const onLangSelect = async (code) => {
|
await I18n.load(code);
|
I18n.applyToDOM();
|
this.els.btnLang.textContent = I18n.t(I18n.languages.find(l => l.code === code).labelKey);
|
I18n.renderLangMenu(this.els.langMenu, onLangSelect);
|
this.els.langMenu.classList.add('hidden');
|
this.renderTabs();
|
this.selectCategory(this.currentCategoryId);
|
if (this.state === 'searchFuzzy') {
|
const q = this.els.searchInput.value.trim();
|
if (q) this.search(q, false);
|
}
|
};
|
I18n.renderLangMenu(this.els.langMenu, onLangSelect);
|
},
|
|
bindEvents() {
|
this.els.btnQuery.addEventListener('click', () => {
|
const q = this.els.searchInput.value.trim();
|
if (q) this.search(q);
|
});
|
this.els.searchInput.addEventListener('keydown', (e) => {
|
if (e.key === 'Enter') {
|
const q = this.els.searchInput.value.trim();
|
if (q) this.search(q);
|
}
|
});
|
this.els.btnHome.addEventListener('click', () => this.goHome());
|
this.els.btnLang.addEventListener('click', (e) => {
|
e.stopPropagation();
|
this.els.langMenu.classList.toggle('hidden');
|
});
|
document.addEventListener('click', () => {
|
this.els.langMenu.classList.add('hidden');
|
});
|
this.els.btnStandard.addEventListener('click', () => this.openStandardModal());
|
this.els.btnStandardClose.addEventListener('click', () => this.closeStandardModal());
|
this.els.standardModal.addEventListener('click', (e) => {
|
if (e.target === this.els.standardModal) this.closeStandardModal();
|
});
|
this.els.btnItemClose.addEventListener('click', () => this.closeItemModal());
|
this.els.itemModal.addEventListener('click', (e) => {
|
if (e.target === this.els.itemModal) this.closeItemModal();
|
});
|
this.els.btnWelcomeConfirm.addEventListener('click', () => {
|
Storage.dismissWelcome();
|
this.els.welcomeModal.classList.add('hidden');
|
});
|
window.addEventListener('popstate', (e) => {
|
if (!e.state || e.state.view === 'home') {
|
this.goHome(false);
|
}
|
});
|
},
|
|
showWelcomeIfNeeded() {
|
if (!Storage.isWelcomeDismissed()) {
|
this.els.welcomeModal.classList.remove('hidden');
|
}
|
},
|
|
renderTabs() {
|
this.els.tabs.innerHTML = '';
|
DataStore.categories.forEach(cat => {
|
const tab = document.createElement('div');
|
tab.className = 'tab';
|
tab.dataset.categoryId = cat.id;
|
tab.innerHTML =
|
'<span class="tab-color-bar" style="background-color:' + cat.color + '"></span>' +
|
'<img src="' + (cat.iconInactive || cat.icon) + '" alt="" class="tab-icon" width="210" height="210">';
|
tab.addEventListener('click', () => {
|
if (this.state === 'searchFuzzy') return;
|
this.selectCategory(cat.id);
|
});
|
this.els.tabs.appendChild(tab);
|
});
|
},
|
|
updateTabStates(categoryId) {
|
this.els.tabs.querySelectorAll('.tab').forEach(tab => {
|
const cat = DataStore.getCategory(tab.dataset.categoryId);
|
if (!cat) return;
|
const isActive = tab.dataset.categoryId === categoryId;
|
tab.classList.toggle('active', isActive);
|
tab.style.backgroundColor = isActive ? cat.color : '';
|
const iconEl = tab.querySelector('.tab-icon');
|
if (iconEl) {
|
iconEl.src = isActive ? cat.icon : (cat.iconInactive || cat.icon);
|
}
|
});
|
},
|
|
selectCategory(categoryId) {
|
this.currentCategoryId = categoryId;
|
const cat = DataStore.getCategory(categoryId);
|
if (!cat) return;
|
|
this.updateTabStates(categoryId);
|
this.els.tabDetail.style.backgroundColor = cat.color;
|
this.els.tabDesc.textContent = I18n.t(cat.descKey);
|
this.renderItemList(DataStore.getItemsByCategory(categoryId), this.els.itemList, false);
|
},
|
|
renderItemList(items, container, isSearch) {
|
container.innerHTML = '';
|
container.classList.toggle('item-list-browse', !isSearch);
|
container.classList.toggle('item-list-search-wrap', isSearch);
|
items.forEach((item, index) => {
|
const row = document.createElement('div');
|
if (isSearch) {
|
row.className = 'list-item list-item-search' + (index % 2 === 0 ? ' list-item-even' : ' list-item-odd');
|
const cat = DataStore.getCategory(item.categoryId);
|
row.innerHTML =
|
'<span class="item-name">' + DataStore.getLocalizedName(item) + '</span>' +
|
'<span class="item-category ' + DataStore.getCategoryColorClass(item.categoryId) + '">' +
|
I18n.t(cat.nameKey) + '</span>';
|
} else {
|
row.className = 'list-item' + (index % 2 === 0 ? ' list-item-even' : ' list-item-odd');
|
row.textContent = DataStore.getLocalizedName(item);
|
}
|
row.addEventListener('click', () => this.openItemModal(item));
|
container.appendChild(row);
|
});
|
},
|
|
openStandardModal() {
|
const cat = DataStore.getCategory(this.currentCategoryId);
|
if (!cat) return;
|
this.els.standardModalCard.style.backgroundColor = cat.color;
|
this.els.standardTitle.textContent = I18n.t(cat.nameKey) + ' - ' + I18n.t('btn.standard');
|
this.els.standardBody.textContent = I18n.t(cat.standardKey);
|
this.els.standardModal.classList.remove('hidden');
|
},
|
|
closeStandardModal() {
|
this.els.standardModal.classList.add('hidden');
|
},
|
|
openItemModal(item) {
|
const cat = DataStore.getCategory(item.categoryId);
|
if (!cat) return;
|
const tpl = cat.disposalTemplate;
|
|
this.els.itemModalName.textContent = DataStore.getLocalizedName(item);
|
this.els.itemModalCard.style.backgroundColor = cat.color;
|
this.els.itemModalIcon.src = cat.icon;
|
this.els.itemModalLine1.textContent = I18n.t(tpl.line1Key);
|
this.els.itemModalLine2.textContent = I18n.t(tpl.line2Key);
|
|
this.els.itemModalTips.innerHTML = '';
|
tpl.tipsKeys.forEach((key, i) => {
|
const li = document.createElement('li');
|
li.textContent = (i + 1) + '. ' + I18n.t(key);
|
this.els.itemModalTips.appendChild(li);
|
});
|
|
this.els.itemModal.classList.remove('hidden');
|
},
|
|
closeItemModal() {
|
this.els.itemModal.classList.add('hidden');
|
},
|
|
search(query, pushHistory) {
|
if (pushHistory === undefined) pushHistory = true;
|
const q = query.trim().toLowerCase();
|
if (!q) return;
|
|
this.els.noResults.classList.add('hidden');
|
const allItems = DataStore.getAllItemsLocalized();
|
const exact = allItems.filter(i => i.localName.toLowerCase() === q);
|
|
if (exact.length === 1) {
|
this.state = 'searchExact';
|
this.els.btnHome.classList.add('hidden');
|
this.openItemModal(exact[0]);
|
return;
|
}
|
|
const fuzzy = allItems.filter(i => i.localName.toLowerCase().includes(q));
|
|
if (fuzzy.length === 0) {
|
this.els.browseView.classList.remove('hidden');
|
this.els.searchView.classList.add('hidden');
|
this.els.btnHome.classList.add('hidden');
|
this.els.noResults.classList.remove('hidden');
|
this.state = 'home';
|
return;
|
}
|
|
this.state = 'searchFuzzy';
|
this.els.browseView.classList.add('hidden');
|
this.els.searchView.classList.remove('hidden');
|
this.els.btnHome.classList.remove('hidden');
|
this.renderItemList(fuzzy, this.els.searchResults, true);
|
|
if (pushHistory) {
|
if (this.state === 'searchFuzzy') {
|
history.replaceState({ view: 'search' }, '');
|
} else {
|
history.pushState({ view: 'search' }, '');
|
}
|
}
|
},
|
|
goHome(fromHistory) {
|
if (fromHistory === undefined) fromHistory = true;
|
this.state = 'home';
|
this.els.searchInput.value = '';
|
this.els.browseView.classList.remove('hidden');
|
this.els.searchView.classList.add('hidden');
|
this.els.btnHome.classList.add('hidden');
|
this.els.noResults.classList.add('hidden');
|
this.closeItemModal();
|
this.closeStandardModal();
|
this.selectCategory('recyclable');
|
if (fromHistory && history.state && history.state.view === 'search') {
|
history.back();
|
}
|
},
|
|
initVoice() {
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
if (!SpeechRecognition) {
|
this.els.btnVoice.classList.add('hidden');
|
return;
|
}
|
|
this.recognition = new SpeechRecognition();
|
this.recognition.lang = I18n.getLocale();
|
this.recognition.interimResults = false;
|
this.recognition.maxAlternatives = 1;
|
|
this.recognition.onresult = (event) => {
|
const transcript = event.results[0][0].transcript;
|
this.els.searchInput.value = transcript;
|
this.search(transcript);
|
};
|
|
this.recognition.onerror = () => {
|
this.stopRecording();
|
};
|
|
this.recognition.onend = () => {
|
this.stopRecording();
|
};
|
|
const startRecording = (e) => {
|
e.preventDefault();
|
this.longPressTimer = setTimeout(() => {
|
this.startRecording();
|
}, this.longPressDelay);
|
};
|
|
const cancelLongPress = () => {
|
if (this.longPressTimer) {
|
clearTimeout(this.longPressTimer);
|
this.longPressTimer = null;
|
}
|
if (this.isRecording) {
|
this.recognition.stop();
|
}
|
};
|
|
this.els.btnVoice.addEventListener('mousedown', startRecording);
|
this.els.btnVoice.addEventListener('mouseup', cancelLongPress);
|
this.els.btnVoice.addEventListener('mouseleave', cancelLongPress);
|
this.els.btnVoice.addEventListener('touchstart', startRecording, { passive: false });
|
this.els.btnVoice.addEventListener('touchend', cancelLongPress);
|
this.els.btnVoice.addEventListener('touchcancel', cancelLongPress);
|
},
|
|
startRecording() {
|
if (this.isRecording) return;
|
this.isRecording = true;
|
this.recognition.lang = I18n.getLocale();
|
this.els.btnVoice.classList.add('recording');
|
try {
|
this.recognition.start();
|
} catch {
|
this.stopRecording();
|
}
|
},
|
|
stopRecording() {
|
this.isRecording = false;
|
this.els.btnVoice.classList.remove('recording');
|
}
|
};
|
|
document.addEventListener('DOMContentLoaded', () => App.init());
|
