Alamantus/Lexiconga
1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-06-19 23:56:39 +02:00
Code Issues Releases Activity

Finish converting the rest of the click listeners

Browse source
This commit is contained in:
Robbie Antenesse 2024-06-23 19:46:39 -06:00
parent 04f2970ccf
commit 68b97e2267
7 changed files with 67 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/js/render/modals.js
View file

@ -30,7 +30,7 @@ export function renderIPATable(ipaTableButton) {
document.body.appendChild(modalElement); document.body.appendChild(modalElement);
setupIPAFields(); setupIPAFields(modalElement);
setupIPATable(modalElement, textBox); setupIPATable(modalElement, textBox);
} }

14
src/js/render/words.js
View file

@ -3,16 +3,14 @@ import { removeTags } from '../../helpers';
import { getHomonymnNumber, hasToken } from '../utilities'; import { getHomonymnNumber, hasToken } from '../utilities';
import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from '../search'; import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from '../search';
import { import {
setupWordOptionButtons,
// setupPagination, // setupPagination,
setupWordOptionSelections,
setupWordEditFormButtons,
} from '../setupListeners/words'; } from '../setupListeners/words';
// import { getPaginationData } from '../pagination'; // import { getPaginationData } from '../pagination';
import { getOpenEditForms, translateOrthography, parseReferences, getWordReferenceMarkdown } from '../wordManagement'; import { getOpenEditForms, translateOrthography, parseReferences, getWordReferenceMarkdown } from '../wordManagement';
import { getPublicLink } from '../account/utilities'; import { getPublicLink } from '../account/utilities';
import { renderPartsOfSpeech } from './details'; import { renderPartsOfSpeech } from './details';
import { renderTemplateSelectOptions } from './settings'; import { renderTemplateSelectOptions } from './settings';
import { setupIPAFields } from '../setupListeners';
export function renderWord(savedWord, isPublic) { export function renderWord(savedWord, isPublic) {
const word = highlightSearchTerm({ const word = highlightSearchTerm({
@ -43,8 +41,8 @@ export function renderWord(savedWord, isPublic) {
${isPublic ? `<a class="small button share-link" href="${shareLink}" target="_blank" title="Public Link to Word">&#10150;</a>` : ''} ${isPublic ? `<a class="small button share-link" href="${shareLink}" target="_blank" title="Public Link to Word">&#10150;</a>` : ''}
<span class="small button word-option-button">Options</span> <span class="small button word-option-button">Options</span>
<div class="word-option-list" style="display:none;"> <div class="word-option-list" style="display:none;">
<div class="word-option" id="edit_${word.wordId}">Edit</div> <div class="word-option word-option-edit" id="edit_${word.wordId}">Edit</div>
<div class="word-option" id="delete_${word.wordId}">Delete</div> <div class="word-option word-option-delete" id="delete_${word.wordId}">Delete</div>
</div> </div>
</header> </header>
<dl> <dl>
@ -116,13 +114,10 @@ export function renderWords() {
openEditForms.forEach(editForm => { openEditForms.forEach(editForm => {
const entryElement = document.getElementById(editForm.id); const entryElement = document.getElementById(editForm.id);
entryElement.parentNode.replaceChild(editForm, entryElement); entryElement.parentNode.replaceChild(editForm, entryElement);
setupIPAFields(editForm);
}); });
setupWordEditFormButtons();
} }
setupWordOptionButtons();
setupWordOptionSelections();
// Show Search Results // Show Search Results
const searchTerm = getSearchTerm(); const searchTerm = getSearchTerm();
const filters = getSearchFilters(); const filters = getSearchFilters();
@ -206,7 +201,6 @@ export function renderEditForm(wordId = false) {
</form>`; </form>`;
document.getElementById(wordId.toString()).innerHTML = editForm; document.getElementById(wordId.toString()).innerHTML = editForm;
setupWordEditFormButtons();
renderPartsOfSpeech(true); renderPartsOfSpeech(true);
renderTemplateSelectOptions(); renderTemplateSelectOptions();
} }

14
src/js/setupListeners/buttons.js
View file

@ -47,14 +47,8 @@ export function handleMaximizeButtonClicks(when) {
when('.maximize-button', renderMaximizedTextbox); when('.maximize-button', renderMaximizedTextbox);
} }
export function setupInfoButtons() { export function handleInfoButtonClicks(when) {
document.getElementById('helpInfoButton').addEventListener('click', () => { when('#helpInfoButton', () => renderInfoModal(helpFile));
renderInfoModal(helpFile); when('#termsInfoButton', () => renderInfoModal(termsFile));
}); when('#privacyInfoButton', () => renderInfoModal(privacyFile));
document.getElementById('termsInfoButton').addEventListener('click', () => {
renderInfoModal(termsFile);
});
document.getElementById('privacyInfoButton').addEventListener('click', () => {
renderInfoModal(privacyFile);
});
} }

6
src/js/setupListeners/details.js
View file

@ -20,7 +20,8 @@ export function handleDetailClicks(when) {
when('#deleteDictionaryButton', confirmDeleteDictionary); when('#deleteDictionaryButton', confirmDeleteDictionary);
} }
function handleClickTab(tabElement) { function handleClickTab(event) {
const tabElement = event.target;
const section = tabElement.innerText.toLowerCase(); const section = tabElement.innerText.toLowerCase();
if (section === 'edit') { if (section === 'edit') {
openEditModal(); openEditModal();
@ -37,7 +38,8 @@ function handleClickTab(tabElement) {
} }
} }
function handleClickEditFormTab(tabElement) { function handleClickEditFormTab(event) {
const tabElement = event.target;
document.querySelectorAll('#editModal nav li').forEach(t => { document.querySelectorAll('#editModal nav li').forEach(t => {
t.classList.remove('active'); t.classList.remove('active');
document.getElementById('edit' + t.innerText + 'Tab').style.display = 'none'; document.getElementById('edit' + t.innerText + 'Tab').style.display = 'none';

21
src/js/setupListeners/index.js
View file

@ -2,9 +2,9 @@ import { usePhondueDigraphs } from '../KeyboardFire/phondue/ipaField';
import { enableHotKeys } from '../hotkeys'; import { enableHotKeys } from '../hotkeys';
import { dismiss } from '../announcements'; import { dismiss } from '../announcements';
import { handleDetailClicks, setupEditFormInteractions } from './details'; import { handleDetailClicks, setupEditFormInteractions } from './details';
import { setupWordForm, setupMobileWordFormButton } from './words'; import { setupWordForm, handleWordFormClicks, handleWordOptionClicks, handleWordEditFormButtonClicks } from './words';
import { setupInfoButtons, handleIPAButtonClicks, handleMaximizeButtonClicks } from './buttons'; import { setupInfoButtons, handleIPAButtonClicks, handleMaximizeButtonClicks, handleInfoButtonClicks, handleHeaderButtonClicks } from './buttons';
import { handleTemplateFormClicks, setupTemplateChangeEvents, setupTemplateSelectOptions } from './settings'; import { setupTemplateChangeEvents, setupTemplateSelectOptions } from './settings';
import { setupSearchBarEvents } from './search'; import { setupSearchBarEvents } from './search';
export default function setupListeners() { export default function setupListeners() {
@ -13,9 +13,8 @@ export default function setupListeners() {
setupEditFormInteractions(); setupEditFormInteractions();
setupTemplateChangeEvents(); setupTemplateChangeEvents();
setupSearchBarEvents(); setupSearchBarEvents();
setupWordForm(); setupWordForm();
setupMobileWordFormButton();
setupInfoButtons(); setupInfoButtons();
setupTemplateSelectOptions(); setupTemplateSelectOptions();
if (window.settings.useHotkeys) { if (window.settings.useHotkeys) {
@ -26,15 +25,19 @@ export default function setupListeners() {
function handleClickEvents(event) { function handleClickEvents(event) {
const when = (selector, cb) => { const when = (selector, cb) => {
if (event.target.matches(selector)) { if (event.target.matches(selector)) {
cb(event.target); cb(event);
} }
}; };
handleClickAccouncementClose(when); handleClickAccouncementClose(when);
handleHeaderButtonClicks(when);
handleDetailClicks(when); handleDetailClicks(when);
handleTemplateFormClicks(when); handleWordFormClicks(when);
handleWordOptionClicks(when);
handleWordEditFormButtonClicks(when);
handleIPAButtonClicks(when); handleIPAButtonClicks(when);
handleMaximizeButtonClicks(when); handleMaximizeButtonClicks(when);
handleInfoButtonClicks(when);
} }
/** /**
@ -42,8 +45,8 @@ function handleClickEvents(event) {
* @param {Function} when Passed from setupListeners, which listens to clicks on document.body * @param {Function} when Passed from setupListeners, which listens to clicks on document.body
*/ */
function handleClickAccouncementClose(when) { function handleClickAccouncementClose(when) {
when('.announcement .close-button', closeElement => { when('.announcement .close-button', event => {
dismiss(closeElement.parentElement); dismiss(event.target.parentElement);
}); });
} }

113
src/js/setupListeners/words.js
View file

@ -3,88 +3,30 @@ import { confirmEditWord, cancelEditWord, confirmDeleteWord, expandAdvancedForm,
// import { goToNextPage, goToPreviousPage, goToPage } from '../pagination'; // import { goToNextPage, goToPreviousPage, goToPage } from '../pagination';
import { setupIPAFields } from '.'; import { setupIPAFields } from '.';
const wordForm = document.getElementById('wordForm');
const mobileButton = document.getElementById('mobileWordFormShow');
/**
* Identify selector strings and handlers
* @param {Function} when Passed from setupListeners, which listens to clicks on document.body
*/
export function handleWordFormClicks(when) {
when('#expandAdvancedForm', expandAdvancedForm);
when('#addWordButton', submitWordForm);
when('#mobileWordFormShow', mobileToggleWordForm);
}
export function setupWordForm() { export function setupWordForm() {
const wordForm = document.getElementById('wordForm'),
expandAdvancedFormButton = document.getElementById('expandAdvancedForm'),
addWordButton = document.getElementById('addWordButton');
wordForm.addEventListener('submit', event => { wordForm.addEventListener('submit', event => {
// Allow semantic form and prevent it from getting submitted // Allow semantic form and prevent it from getting submitted
event.preventDefault(); event.preventDefault();
return false; return false;
}); });
expandAdvancedFormButton.addEventListener('click', expandAdvancedForm);
addWordButton.addEventListener('click', submitWordForm);
setupIPAFields(); setupIPAFields(wordForm);
} }
export function setupWordOptionButtons() { function mobileToggleWordForm() {
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 expandAdvancedFormButtons = document.getElementsByClassName('expand-advanced-form'),
saveChangesButtons = document.getElementsByClassName('edit-save-changes'),
cancelChangesButtons = document.getElementsByClassName('edit-cancel');
Array.from(expandAdvancedFormButtons).forEach(button => {
button.removeEventListener('click', expandAdvancedForm);
button.addEventListener('click', expandAdvancedForm);
});
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();
}
export function setupMobileWordFormButton() {
const mobileButton = document.getElementById('mobileWordFormShow'),
wordForm = document.getElementById('wordForm');
mobileButton.addEventListener('click', () => {
if (mobileButton.innerText === '+') { if (mobileButton.innerText === '+') {
wordForm.style.display = 'block'; wordForm.style.display = 'block';
mobileButton.innerHTML = '&times;&#xFE0E;'; mobileButton.innerHTML = '&times;&#xFE0E;';
@ -92,7 +34,32 @@ export function setupMobileWordFormButton() {
wordForm.style.display = ''; wordForm.style.display = '';
mobileButton.innerHTML = '+'; mobileButton.innerHTML = '+';
} }
}
function showWordOptions(event) {
event.target.parentElement.querySelector('.word-option-list').style.display = '';
}
function hideWordOptions(event) {
if (!event.target.classList.contains('word-option-button')) {
const allWordOptions = document.querySelectorAll('.word-option-list');
Array.from(allWordOptions).forEach(wordOptionList => {
wordOptionList.style.display = 'none';
}); });
}
}
export function handleWordOptionClicks(when) {
when('.word-option-button', showWordOptions);
when('*', hideWordOptions);
when('.word-option-edit', renderEditForm);
when('.word-option-delete', confirmDeleteWord);
}
export function handleWordEditFormButtonClicks(when) {
when('.expand-advanced-form', expandAdvancedForm);
when('.edit-save-changes', confirmEditWord);
when('.edit-cancel', cancelEditWord);
} }
// export function setupPagination() { // export function setupPagination() {

3
src/js/wordManagement.js
View file

@ -3,7 +3,6 @@ import { wordExists, addMessage, getNextId, hasToken, getHomonymnIndexes } from
import removeDiacritics from "./StackOverflow/removeDiacritics"; import removeDiacritics from "./StackOverflow/removeDiacritics";
import { removeTags, getTimestampInSeconds } from "../helpers"; import { removeTags, getTimestampInSeconds } from "../helpers";
import { saveDictionary } from "./dictionaryManagement"; import { saveDictionary } from "./dictionaryManagement";
import { setupWordOptionButtons, setupWordOptionSelections } from "./setupListeners/words";
import { wordMatchesSearch } from "./search"; import { wordMatchesSearch } from "./search";
export function validateWord(word, wordId = false) { export function validateWord(word, wordId = false) {
@ -295,8 +294,6 @@ export function updateWord(word, wordId) {
} else { } else {
console.log('matches search, updating in place'); console.log('matches search, updating in place');
document.getElementById(wordId.toString()).outerHTML = renderWord(window.currentDictionary.words[wordIndex], isPublic); document.getElementById(wordId.toString()).outerHTML = renderWord(window.currentDictionary.words[wordIndex], isPublic);
setupWordOptionButtons();
setupWordOptionSelections();
} }
} }