2019-05-02 23:45:10 +02:00
|
|
|
import {showSection} from './displayToggles';
|
2019-05-03 21:59:52 +02:00
|
|
|
import { renderWords } from './render';
|
2019-05-04 00:10:41 +02:00
|
|
|
import { validateWord, addWord } from './wordManagement';
|
|
|
|
import { removeTags } from '../helpers';
|
|
|
|
import { getNextId } from './utilities';
|
2019-05-04 08:21:55 +02:00
|
|
|
import { openEditModal, save, saveAndClose } from './dictionaryManagement';
|
2019-05-02 23:45:10 +02:00
|
|
|
|
|
|
|
export default function setupListeners() {
|
|
|
|
setupDetailsTabs();
|
2019-05-03 21:59:52 +02:00
|
|
|
setupSearchBar();
|
2019-05-04 00:10:41 +02:00
|
|
|
setupWordForm();
|
2019-05-02 23:45:10 +02:00
|
|
|
}
|
|
|
|
|
2019-05-03 21:59:52 +02:00
|
|
|
function setupDetailsTabs() {
|
|
|
|
const tabs = document.querySelectorAll('#detailsSection nav li');
|
2019-05-02 23:45:10 +02:00
|
|
|
tabs.forEach(tab => {
|
|
|
|
tab.addEventListener('click', () => {
|
|
|
|
const section = tab.innerText.toLowerCase();
|
2019-05-04 05:52:19 +02:00
|
|
|
if (section === 'edit') {
|
|
|
|
openEditModal();
|
2019-05-02 23:45:10 +02:00
|
|
|
} else {
|
2019-05-04 05:52:19 +02:00
|
|
|
const isActive = tab.classList.contains('active');
|
|
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
|
|
if (isActive) {
|
|
|
|
document.getElementById('detailsPanel').style.display = 'none';
|
|
|
|
} else {
|
|
|
|
tab.classList.add('active');
|
|
|
|
showSection(section);
|
|
|
|
}
|
2019-05-02 23:45:10 +02:00
|
|
|
}
|
|
|
|
});
|
2019-05-04 05:52:19 +02:00
|
|
|
});
|
2019-05-04 07:58:49 +02:00
|
|
|
setupEditFormTabs();
|
|
|
|
setupEditFormButtons();
|
2019-05-04 05:52:19 +02:00
|
|
|
}
|
|
|
|
|
2019-05-04 07:58:49 +02:00
|
|
|
function setupEditFormTabs() {
|
|
|
|
const tabs = document.querySelectorAll('#editModal nav li');
|
|
|
|
tabs.forEach(tab => {
|
|
|
|
tab.addEventListener('click', () => {
|
|
|
|
tabs.forEach(t => {
|
|
|
|
t.classList.remove('active');
|
|
|
|
document.getElementById('edit' + t.innerText + 'Tab').style.display = 'none';
|
|
|
|
});
|
|
|
|
tab.classList.add('active');
|
|
|
|
document.getElementById('edit' + tab.innerText + 'Tab').style.display = '';
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function setupEditFormButtons() {
|
2019-05-04 08:21:55 +02:00
|
|
|
document.getElementById('editSave').addEventListener('click', () => save());
|
|
|
|
document.getElementById('editSaveAndClose').addEventListener('click', () => saveAndClose());
|
2019-05-03 21:59:52 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function setupSearchBar() {
|
|
|
|
const searchBox = document.getElementById('searchBox'),
|
|
|
|
clearSearchButton = document.getElementById('clearSearchButton'),
|
|
|
|
openSearchModal = document.getElementById('openSearchModal');
|
|
|
|
searchBox.addEventListener('change', () => {
|
|
|
|
renderWords();
|
|
|
|
});
|
|
|
|
searchBox.addEventListener('input', event => {
|
|
|
|
openSearchModal.value = event.target.value;
|
|
|
|
});
|
|
|
|
clearSearchButton.addEventListener('click', event => {
|
|
|
|
searchBox.value = '';
|
|
|
|
openSearchModal.value = '';
|
|
|
|
renderWords();
|
|
|
|
});
|
|
|
|
openSearchModal.addEventListener('click', () => {
|
|
|
|
document.getElementById('searchModal').style.display = 'block';
|
|
|
|
});
|
2019-05-04 00:10:41 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function setupWordForm() {
|
|
|
|
const wordForm = document.getElementById('wordForm'),
|
|
|
|
addWordButton = document.getElementById('addWordButton');
|
|
|
|
wordForm.addEventListener('submit', event => {
|
|
|
|
// Allow semantic form and prevent it from getting submitted
|
|
|
|
event.preventDefault();
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
addWordButton.addEventListener('click', () => {
|
|
|
|
const name = document.getElementById('wordName').value,
|
|
|
|
pronunciation = document.getElementById('wordPronunciation').value,
|
|
|
|
partOfSpeech = document.getElementById('wordPartOfSpeech').value,
|
|
|
|
definition = document.getElementById('wordDefinition').value,
|
|
|
|
details = document.getElementById('wordDetails').value;
|
|
|
|
|
|
|
|
const word = {
|
|
|
|
name: removeTags(name).trim(),
|
|
|
|
pronunciation: removeTags(pronunciation).trim(),
|
|
|
|
partOfSpeech: removeTags(partOfSpeech).trim(),
|
|
|
|
simpleDefinition: removeTags(definition).trim(),
|
|
|
|
longDefinition: removeTags(details).trim(),
|
|
|
|
wordId: getNextId(),
|
|
|
|
};
|
|
|
|
|
|
|
|
if (validateWord(word)) {
|
|
|
|
addWord(word);
|
|
|
|
}
|
|
|
|
});
|
2019-05-02 23:45:10 +02:00
|
|
|
}
|