112 lines
3.9 KiB
JavaScript
112 lines
3.9 KiB
JavaScript
import { renderEditForm } from '../render/words';
|
|
import { confirmEditWord, cancelEditWord, confirmDeleteWord, submitWordForm } from '../wordManagement';
|
|
import { goToNextPage, goToPreviousPage, goToPage } from '../pagination';
|
|
import { setupMaximizeButtons } from './buttons';
|
|
import { setupIPAFields } from '.';
|
|
|
|
export 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', submitWordForm);
|
|
|
|
setupIPAFields();
|
|
setupMaximizeButtons();
|
|
}
|
|
|
|
export function setupWordOptionButtons() {
|
|
const wordOptionButtons = document.getElementsByClassName('word-option-button');
|
|
const showWordOptions = function() {
|
|
this.parentElement.querySelector('.word-option-list').style.display = '';
|
|
}
|
|
const hideWordOptions = function(e) {
|
|
if (!e.target.classList.contains('word-option-button')) {
|
|
const allWordOptions = document.querySelectorAll('.word-option-list');
|
|
Array.from(allWordOptions).forEach(wordOptionList => {
|
|
wordOptionList.style.display = 'none';
|
|
});
|
|
}
|
|
}
|
|
|
|
Array.from(wordOptionButtons).forEach(button => {
|
|
button.removeEventListener('click', showWordOptions);
|
|
button.addEventListener('click', showWordOptions);
|
|
});
|
|
|
|
document.removeEventListener('click', hideWordOptions);
|
|
document.addEventListener('click', hideWordOptions);
|
|
|
|
}
|
|
|
|
export function setupWordOptionSelections() {
|
|
const wordOptions = document.getElementsByClassName('word-option');
|
|
Array.from(wordOptions).forEach(option => {
|
|
switch (option.innerText) {
|
|
case 'Edit': {
|
|
option.removeEventListener('click', renderEditForm);
|
|
option.addEventListener('click', renderEditForm);
|
|
break;
|
|
}
|
|
case 'Delete': {
|
|
option.removeEventListener('click', confirmDeleteWord);
|
|
option.addEventListener('click', confirmDeleteWord);
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
export function setupWordEditFormButtons() {
|
|
const saveChangesButtons = document.getElementsByClassName('edit-save-changes'),
|
|
cancelChangesButtons = document.getElementsByClassName('edit-cancel');
|
|
Array.from(saveChangesButtons).forEach(button => {
|
|
button.removeEventListener('click', confirmEditWord);
|
|
button.addEventListener('click', confirmEditWord);
|
|
});
|
|
Array.from(cancelChangesButtons).forEach(button => {
|
|
button.removeEventListener('click', cancelEditWord);
|
|
button.addEventListener('click', cancelEditWord);
|
|
});
|
|
|
|
setupIPAFields();
|
|
setupMaximizeButtons();
|
|
}
|
|
|
|
export function setupMobileWordFormButton() {
|
|
const mobileButton = document.getElementById('mobileWordFormShow'),
|
|
wordForm = document.getElementById('wordForm');
|
|
|
|
mobileButton.addEventListener('click', () => {
|
|
if (mobileButton.innerText === '+') {
|
|
wordForm.style.display = 'block';
|
|
mobileButton.innerHTML = '×︎';
|
|
} else {
|
|
wordForm.style.display = '';
|
|
mobileButton.innerHTML = '+';
|
|
}
|
|
});
|
|
}
|
|
|
|
export function setupPagination() {
|
|
const nextButtons = document.getElementsByClassName('next-button'),
|
|
prevButtons = document.getElementsByClassName('prev-button'),
|
|
pageSelectors = document.getElementsByClassName('page-selector');
|
|
|
|
Array.from(nextButtons).forEach(nextButton => {
|
|
nextButton.removeEventListener('click', goToNextPage);
|
|
nextButton.addEventListener('click', goToNextPage);
|
|
});
|
|
Array.from(prevButtons).forEach(prevButton => {
|
|
prevButton.removeEventListener('click', goToPreviousPage);
|
|
prevButton.addEventListener('click', goToPreviousPage);
|
|
});
|
|
|
|
Array.from(pageSelectors).forEach(pageSelector => {
|
|
pageSelector.removeEventListener('change', goToPage);
|
|
pageSelector.addEventListener('change', goToPage);
|
|
});
|
|
} |