diff --git a/src/js/dictionaryManagement.js b/src/js/dictionaryManagement.js
index c464d7e..176fc31 100644
--- a/src/js/dictionaryManagement.js
+++ b/src/js/dictionaryManagement.js
@@ -1,5 +1,6 @@
import papa from 'papaparse';
-import { renderDictionaryDetails, renderPartsOfSpeech, renderAll, renderTheme } from "./render";
+import { renderDictionaryDetails, renderPartsOfSpeech } from "./render/details";
+import { renderAll, renderTheme } from "./render";
import { removeTags, cloneObject, getTimestampInSeconds, download, slugify } from "../helpers";
import { LOCAL_STORAGE_KEY, DEFAULT_DICTIONARY } from "../constants";
import { addMessage, getNextId, hasToken } from "./utilities";
diff --git a/src/js/displayToggles.js b/src/js/displayToggles.js
index bf1d893..2f7081c 100644
--- a/src/js/displayToggles.js
+++ b/src/js/displayToggles.js
@@ -1,4 +1,4 @@
-import { renderDescription, renderDetails, renderStats } from './render';
+import { renderDescription, renderDetails, renderStats } from './render/details';
export function showSection(sectionName) {
switch (sectionName) {
diff --git a/src/js/hotkeys.js b/src/js/hotkeys.js
index f186926..bc74c54 100644
--- a/src/js/hotkeys.js
+++ b/src/js/hotkeys.js
@@ -1,6 +1,6 @@
import { confirmEditWord, submitWordForm } from "./wordManagement";
import { showSection, hideDetailsPanel } from "./displayToggles";
-import { renderInfoModal, renderMaximizedTextbox } from "./render";
+import { renderInfoModal, renderMaximizedTextbox } from "./render/modals";
import { showSearchModal, clearSearchText } from "./search";
import { saveAndCloseSettingsModal, openSettingsModal, saveSettings } from "./settings";
import { saveAndCloseEditModal, openEditModal } from "./dictionaryManagement";
diff --git a/src/js/pagination.js b/src/js/pagination.js
index 46e6083..553f906 100644
--- a/src/js/pagination.js
+++ b/src/js/pagination.js
@@ -1,5 +1,5 @@
import { DEFAULT_PAGE_SIZE } from '../constants';
-import { renderWords } from "./render";
+import { renderWords } from "./render/words";
export function getPaginationData(words) {
const numWords = words.length;
diff --git a/src/js/render.js b/src/js/render.js
deleted file mode 100644
index cab0567..0000000
--- a/src/js/render.js
+++ /dev/null
@@ -1,386 +0,0 @@
-import md from 'marked';
-import { removeTags, slugify } from '../helpers';
-import { getWordsStats, getHomonymnNumber, hasToken } from './utilities';
-import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search';
-import { showSection } from './displayToggles';
-import {
- setupSearchFilters,
- setupWordOptionButtons,
- setupPagination,
- setupWordOptionSelections,
- setupWordEditFormButtons,
- setupMaximizeModal,
- setupInfoModal,
- setupIPATable,
- setupIPAFields
-} from './setupListeners';
-import { getPaginationData } from './pagination';
-import { getOpenEditForms, translateOrthography, parseReferences } from './wordManagement';
-import { renderAd } from './ads';
-import ipaTableFile from './KeyboardFire/phondue/ipa-table.html';
-import { getPublicLink } from './account/utilities';
-
-export function renderAll() {
- renderTheme();
- renderDictionaryDetails();
- renderPartsOfSpeech();
- renderWords();
-}
-
-export function renderTheme() {
- const { theme } = window.currentDictionary.settings;
- document.body.id = theme + 'Theme';
-}
-
-export function renderDictionaryDetails() {
- renderName();
-
- const tabs = document.querySelectorAll('#detailsSection nav li');
- const shownTab = Array.from(tabs).find(tab => tab.classList.contains('active'));
- if (shownTab) {
- const tabName = shownTab.innerText.toLowerCase();
- showSection(tabName);
- }
-}
-
-export function renderName() {
- const dictionaryName = removeTags(window.currentDictionary.name) + ' ' + removeTags(window.currentDictionary.specification);
- const name = document.getElementById('dictionaryName');
- name.innerHTML = dictionaryName;
- const isPublic = hasToken() && window.currentDictionary.settings.isPublic;
- const shareLinkElement = document.getElementById('dictionaryShare');
-
- if (isPublic && !shareLinkElement) {
- const shareLink = document.createElement('a');
- shareLink.id = 'dictionaryShare';
- shareLink.classList.add('button');
- shareLink.style.float = 'right';
- shareLink.href = getPublicLink();
- shareLink.target = '_blank';
- shareLink.title = 'Public Link to Dictionary';
- shareLink.innerHTML = '➦';
- name.parentElement.insertBefore(shareLink, name);
- } else if (isPublic && shareLinkElement) {
- shareLinkElement.href = getPublicLink();
- } else if (!isPublic && shareLinkElement) {
- shareLinkElement.parentElement.removeChild(shareLinkElement);
- }
-}
-
-export function renderDescription() {
- const descriptionHTML = md(parseReferences(removeTags(window.currentDictionary.description)));
-
- document.getElementById('detailsPanel').innerHTML = '' + descriptionHTML + '
';
-}
-
-export function renderDetails() {
- const { partsOfSpeech, alphabeticalOrder } = window.currentDictionary;
- const { phonology, phonotactics, orthography, grammar } = window.currentDictionary.details;
- const partsOfSpeechHTML = `Parts of Speech
${partsOfSpeech.map(partOfSpeech => '' + partOfSpeech + '').join(' ')}`;
- const alphabeticalOrderHTML = `
Alphabetical Order
${
- (alphabeticalOrder.length > 0 ? alphabeticalOrder : ['English Alphabet']).map(letter => `${letter}`).join(' ')
- }`;
- const generalHTML = `
General
${partsOfSpeechHTML}${alphabeticalOrderHTML}`;
-
- const { consonants, vowels, blends } = phonology
- const consonantHTML = `Consonants
${consonants.map(letter => `${letter}`).join(' ')}
`;
- const vowelHTML = `Vowels
${vowels.map(letter => `${letter}`).join(' ')}
`;
- const blendHTML = blends.length > 0 ? `Polyphthongs / Blends
${blends.map(letter => `${letter}`).join(' ')}
` : '';
- const phonologyHTML = `Phonology
-
-
${consonantHTML}
-
${vowelHTML}
-
Onset
${onset.map(letter => `${letter}`).join(' ')}
`;
- const nucleusHTML = `Nucleus
${nucleus.map(letter => `${letter}`).join(' ')}
`;
- const codaHTML = `Coda
${coda.map(letter => `${letter}`).join(' ')}
`;
- const phonotacticsNotesHTML = phonotactics.notes.trim().length > 0 ? 'Notes
' + md(removeTags(phonotactics.notes)) + '
' : '';
- const phonotacticsHTML = onset.length + nucleus.length + coda.length + phonotacticsNotesHTML.length > 0
- ? `Phonotactics
-
-
${onsetHTML}
-
${nucleusHTML}
-
${codaHTML}
-
Translations
${translations.map(translation => {
- translation = translation.split('=').map(value => value.trim());
- if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') {
- return `${translation[0]}${translation[1]}`;
- }
- return false;
- }).filter(html => html !== false).join(' ')}
`;
- const orthographyNotesHTML = orthography.notes.trim().length > 0 ? 'Notes
' + md(removeTags(orthography.notes)) + '' : '';
- const orthographyHTML = translations.length > 0 && orthographyNotesHTML.length > 0
- ? `
Orthography
- ${translations.length > 0 ? translationsHTML : ''}
- ${orthographyNotesHTML}`
- : '';
- const grammarHTML = 'Grammar
' + md(removeTags(grammar.notes)) + '
';
-
- detailsPanel.innerHTML = generalHTML + phonologyHTML + phonotacticsHTML + orthographyHTML + grammarHTML;
-}
-
-export function renderStats() {
- const wordStats = getWordsStats();
- const numberOfWordsHTML = `Number of Words
${wordStats.numberOfWords.map(stat => `${stat.name}${stat.value}`).join(' ')}
`;
- const wordLengthHTML = `Word Length
Shortest${wordStats.wordLength.shortest}
- Longest${wordStats.wordLength.longest}
- Average${wordStats.wordLength.average}
`;
- const letterDistributionHTML = `Letter Distribution
${wordStats.letterDistribution.map(stat => `${stat.letter}${stat.percentage.toFixed(2)}`).join(' ')}
`;
- const totalLettersHTML = `${wordStats.totalLetters} Total Letters
`;
-
- detailsPanel.innerHTML = numberOfWordsHTML + wordLengthHTML + letterDistributionHTML + totalLettersHTML;
-}
-
-export function renderPartsOfSpeech(onlyOptions = false) {
- let optionsHTML = '',
- searchHTML = '';
- window.currentDictionary.partsOfSpeech.forEach(partOfSpeech => {
- partOfSpeech = removeTags(partOfSpeech);
- optionsHTML += ``;
- searchHTML += ``;
- });
- searchHTML += `Check All Uncheck All`;
-
- Array.from(document.getElementsByClassName('part-of-speech-select')).forEach(select => {
- const selectedValue = select.value;
- select.innerHTML = optionsHTML;
- select.value = selectedValue;
- });
- if (!onlyOptions) {
- document.getElementById('searchPartsOfSpeech').innerHTML = searchHTML;
- }
-
- setupSearchFilters();
-}
-
-export function renderWords() {
- let wordsHTML = '';
- let openEditForms = getOpenEditForms();
- let words = false;
- const isPublic = hasToken() && window.currentDictionary.settings.isPublic;
-
- if (window.currentDictionary.words.length === 0) {
- wordsHTML = `
-
-
- - Use the Word Form to create words or click the Help button below!
-
- `;
- } else {
- words = getMatchingSearchWords();
-
- if (words.length === 0) {
- wordsHTML = `
-
-
- - Edit your search or filter to show words.
-
- `;
- }
-
- if (openEditForms.length > 0) {
- // Clone the dom nodes
- openEditForms.forEach((wordFormId, index) => {
- openEditForms[index] = document.getElementById(wordFormId.toString()).cloneNode(true);
- });
- }
-
- // const { pageStart, pageEnd } = getPaginationData(words);
-
- // words.slice(pageStart, pageEnd).forEach(originalWord => {
- words.forEach((originalWord, displayIndex) => {
- const word = highlightSearchTerm({
- name: removeTags(originalWord.name),
- pronunciation: removeTags(originalWord.pronunciation),
- partOfSpeech: removeTags(originalWord.partOfSpeech),
- definition: removeTags(originalWord.definition),
- details: parseReferences(removeTags(originalWord.details)),
- wordId: originalWord.wordId,
- });
- const homonymnNumber = getHomonymnNumber(originalWord);
- const shareLink = window.currentDictionary.hasOwnProperty('externalID') ? getPublicLink() + '/' + word.wordId : '';
-
- wordsHTML += renderAd(displayIndex);
-
- let wordNameDisplay = translateOrthography(word.name);
-
- wordsHTML += `
-
- ${wordNameDisplay}${homonymnNumber > 0 ? ' ' + homonymnNumber.toString() + '' : ''}
- ${word.pronunciation}
- ${word.partOfSpeech}
- ${isPublic ? `➦` : ''}
- Options
-
-
-
- - ${word.definition}
- -
- ${md(word.details)}
-
-
- `;
- });
- }
-
- document.getElementById('entries').innerHTML = wordsHTML;
-
- if (openEditForms.length > 0) {
- // Clone the dom nodes
- openEditForms.forEach(editForm => {
- const entryElement = document.getElementById(editForm.id);
- entryElement.parentNode.replaceChild(editForm, entryElement);
- });
- setupWordEditFormButtons();
- }
-
- setupWordOptionButtons();
- setupWordOptionSelections();
-
- // Show Search Results
- const searchTerm = getSearchTerm();
- const filters = getSearchFilters();
- let resultsText = searchTerm !== '' || !filters.allPartsOfSpeechChecked ? (words ? words.length : 0).toString() + ' Results' : '';
- resultsText += !filters.allPartsOfSpeechChecked ? ' (Filtered)' : '';
- document.getElementById('searchResults').innerHTML = resultsText;
-
- // renderPagination(words);
-}
-
-export function renderPagination(filteredWords) {
- const paginationData = getPaginationData(filteredWords);
-
- if (paginationData.pages > 0) {
- let paginationHTML = (paginationData.currentPage > 0 ? '« Previous' : '')
- + ''
- + (paginationData.currentPage < paginationData.pages - 1 ? 'Next »' : '');
-
- Array.from(document.getElementsByClassName('pagination')).forEach(pagination => {
- pagination.innerHTML = paginationHTML;
- });
-
- setupPagination();
- }
-}
-
-export function renderEditForm(wordId = false) {
- wordId = typeof wordId.target === 'undefined' ? wordId : parseInt(this.id.replace('edit_', ''));
- const word = window.currentDictionary.words.find(w => w.wordId === wordId);
- if (word) {
- const ipaPronunciationField = `
- Field Help`;
- const plainPronunciationField = ``;
- const editForm = ``;
-
- document.getElementById(wordId.toString()).innerHTML = editForm;
- setupWordEditFormButtons();
- renderPartsOfSpeech(true);
- }
-}
-
-export function renderIPAHelp() {
- import('./KeyboardFire/phondue/usage.html').then(html => {
- renderInfoModal(html);
- });
-}
-
-export function renderIPATable(ipaTableButton) {
- ipaTableButton = typeof ipaTableButton.target === 'undefined' || ipaTableButton.target === '' ? ipaTableButton : ipaTableButton.target;
- const label = ipaTableButton.parentElement.innerText.replace(/(Field Help|IPA Chart)/g, '').trim();
- const textBox = ipaTableButton.parentElement.querySelector('input');
- const modalElement = document.createElement('section');
- modalElement.classList.add('modal', 'ipa-table-modal');
- modalElement.innerHTML = `
- `;
-
- document.body.appendChild(modalElement);
-
- setupIPAFields();
- setupIPATable(modalElement, textBox);
-}
-
-export function renderMaximizedTextbox(maximizeButton) {
- maximizeButton = typeof maximizeButton.target === 'undefined' || maximizeButton.target === '' ? maximizeButton : maximizeButton.target;
- const label = maximizeButton.parentElement.innerText.replace(/(\*|Maximize)/g, '').trim();
- const textBox = maximizeButton.parentElement.querySelector('textarea');
- const modalElement = document.createElement('section');
- modalElement.classList.add('modal', 'maximize-modal');
- modalElement.innerHTML = `
- `;
-
- document.body.appendChild(modalElement);
-
- setupMaximizeModal(modalElement, textBox);
-}
-
-export function renderInfoModal(content) {
- const modalElement = document.createElement('section');
- modalElement.classList.add('modal', 'info-modal');
- modalElement.innerHTML = `
- `;
-
- document.body.appendChild(modalElement);
-
- setupInfoModal(modalElement);
-}
diff --git a/src/js/render/details.js b/src/js/render/details.js
new file mode 100644
index 0000000..64c33ab
--- /dev/null
+++ b/src/js/render/details.js
@@ -0,0 +1,138 @@
+import md from 'marked';
+import { removeTags, slugify } from '../../helpers';
+import { getWordsStats, hasToken } from '../utilities';
+import { showSection } from '../displayToggles';
+import {
+ setupSearchFilters,
+} from '../setupListeners';
+import { parseReferences } from '../wordManagement';
+import { getPublicLink } from '../account/utilities';
+
+export function renderDictionaryDetails() {
+ renderName();
+
+ const tabs = document.querySelectorAll('#detailsSection nav li');
+ const shownTab = Array.from(tabs).find(tab => tab.classList.contains('active'));
+ if (shownTab) {
+ const tabName = shownTab.innerText.toLowerCase();
+ showSection(tabName);
+ }
+}
+
+export function renderName() {
+ const dictionaryName = removeTags(window.currentDictionary.name) + ' ' + removeTags(window.currentDictionary.specification);
+ const name = document.getElementById('dictionaryName');
+ name.innerHTML = dictionaryName;
+ const isPublic = hasToken() && window.currentDictionary.settings.isPublic;
+ const shareLinkElement = document.getElementById('dictionaryShare');
+
+ if (isPublic && !shareLinkElement) {
+ const shareLink = document.createElement('a');
+ shareLink.id = 'dictionaryShare';
+ shareLink.classList.add('button');
+ shareLink.style.float = 'right';
+ shareLink.href = getPublicLink();
+ shareLink.target = '_blank';
+ shareLink.title = 'Public Link to Dictionary';
+ shareLink.innerHTML = '➦';
+ name.parentElement.insertBefore(shareLink, name);
+ } else if (isPublic && shareLinkElement) {
+ shareLinkElement.href = getPublicLink();
+ } else if (!isPublic && shareLinkElement) {
+ shareLinkElement.parentElement.removeChild(shareLinkElement);
+ }
+}
+
+export function renderDescription() {
+ const descriptionHTML = md(parseReferences(removeTags(window.currentDictionary.description)));
+
+ document.getElementById('detailsPanel').innerHTML = '' + descriptionHTML + '
';
+}
+
+export function renderDetails() {
+ const { partsOfSpeech, alphabeticalOrder } = window.currentDictionary;
+ const { phonology, phonotactics, orthography, grammar } = window.currentDictionary.details;
+ const partsOfSpeechHTML = `Parts of Speech
${partsOfSpeech.map(partOfSpeech => '' + partOfSpeech + '').join(' ')}`;
+ const alphabeticalOrderHTML = `
Alphabetical Order
${
+ (alphabeticalOrder.length > 0 ? alphabeticalOrder : ['English Alphabet']).map(letter => `${letter}`).join(' ')
+ }`;
+ const generalHTML = `
General
${partsOfSpeechHTML}${alphabeticalOrderHTML}`;
+
+ const { consonants, vowels, blends } = phonology
+ const consonantHTML = `Consonants
${consonants.map(letter => `${letter}`).join(' ')}
`;
+ const vowelHTML = `Vowels
${vowels.map(letter => `${letter}`).join(' ')}
`;
+ const blendHTML = blends.length > 0 ? `Polyphthongs / Blends
${blends.map(letter => `${letter}`).join(' ')}
` : '';
+ const phonologyHTML = `Phonology
+
+
${consonantHTML}
+
${vowelHTML}
+
Onset
${onset.map(letter => `${letter}`).join(' ')}
`;
+ const nucleusHTML = `Nucleus
${nucleus.map(letter => `${letter}`).join(' ')}
`;
+ const codaHTML = `Coda
${coda.map(letter => `${letter}`).join(' ')}
`;
+ const phonotacticsNotesHTML = phonotactics.notes.trim().length > 0 ? 'Notes
' + md(removeTags(phonotactics.notes)) + '
' : '';
+ const phonotacticsHTML = onset.length + nucleus.length + coda.length + phonotacticsNotesHTML.length > 0
+ ? `Phonotactics
+
+
${onsetHTML}
+
${nucleusHTML}
+
${codaHTML}
+
Translations
${translations.map(translation => {
+ translation = translation.split('=').map(value => value.trim());
+ if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') {
+ return `${translation[0]}${translation[1]}`;
+ }
+ return false;
+ }).filter(html => html !== false).join(' ')}
`;
+ const orthographyNotesHTML = orthography.notes.trim().length > 0 ? 'Notes
' + md(removeTags(orthography.notes)) + '' : '';
+ const orthographyHTML = translations.length > 0 && orthographyNotesHTML.length > 0
+ ? `
Orthography
+ ${translations.length > 0 ? translationsHTML : ''}
+ ${orthographyNotesHTML}`
+ : '';
+ const grammarHTML = 'Grammar
' + md(removeTags(grammar.notes)) + '
';
+
+ detailsPanel.innerHTML = generalHTML + phonologyHTML + phonotacticsHTML + orthographyHTML + grammarHTML;
+}
+
+export function renderStats() {
+ const wordStats = getWordsStats();
+ const numberOfWordsHTML = `Number of Words
${wordStats.numberOfWords.map(stat => `${stat.name}${stat.value}`).join(' ')}
`;
+ const wordLengthHTML = `Word Length
Shortest${wordStats.wordLength.shortest}
+ Longest${wordStats.wordLength.longest}
+ Average${wordStats.wordLength.average}
`;
+ const letterDistributionHTML = `Letter Distribution
${wordStats.letterDistribution.map(stat => `${stat.letter}${stat.percentage.toFixed(2)}`).join(' ')}
`;
+ const totalLettersHTML = `${wordStats.totalLetters} Total Letters
`;
+
+ detailsPanel.innerHTML = numberOfWordsHTML + wordLengthHTML + letterDistributionHTML + totalLettersHTML;
+}
+
+export function renderPartsOfSpeech(onlyOptions = false) {
+ let optionsHTML = '',
+ searchHTML = '';
+ window.currentDictionary.partsOfSpeech.forEach(partOfSpeech => {
+ partOfSpeech = removeTags(partOfSpeech);
+ optionsHTML += ``;
+ searchHTML += ``;
+ });
+ searchHTML += `Check All Uncheck All`;
+
+ Array.from(document.getElementsByClassName('part-of-speech-select')).forEach(select => {
+ const selectedValue = select.value;
+ select.innerHTML = optionsHTML;
+ select.value = selectedValue;
+ });
+ if (!onlyOptions) {
+ document.getElementById('searchPartsOfSpeech').innerHTML = searchHTML;
+ }
+
+ setupSearchFilters();
+}
\ No newline at end of file
diff --git a/src/js/render/index.js b/src/js/render/index.js
new file mode 100644
index 0000000..d2c8c52
--- /dev/null
+++ b/src/js/render/index.js
@@ -0,0 +1,14 @@
+import { renderDictionaryDetails, renderPartsOfSpeech } from './details';
+import { renderWords } from './words';
+
+export function renderAll() {
+ renderTheme();
+ renderDictionaryDetails();
+ renderPartsOfSpeech();
+ renderWords();
+}
+
+export function renderTheme() {
+ const { theme } = window.currentDictionary.settings;
+ document.body.id = theme + 'Theme';
+}
diff --git a/src/js/render/modals.js b/src/js/render/modals.js
new file mode 100644
index 0000000..ea96bda
--- /dev/null
+++ b/src/js/render/modals.js
@@ -0,0 +1,74 @@
+import {
+ setupMaximizeModal,
+ setupInfoModal,
+ setupIPATable,
+ setupIPAFields
+} from '../setupListeners';
+import ipaTableFile from '../KeyboardFire/phondue/ipa-table.html';
+
+export function renderIPAHelp() {
+ import('../KeyboardFire/phondue/usage.html').then(html => {
+ renderInfoModal(html);
+ });
+}
+
+export function renderIPATable(ipaTableButton) {
+ ipaTableButton = typeof ipaTableButton.target === 'undefined' || ipaTableButton.target === '' ? ipaTableButton : ipaTableButton.target;
+ const label = ipaTableButton.parentElement.innerText.replace(/(Field Help|IPA Chart)/g, '').trim();
+ const textBox = ipaTableButton.parentElement.querySelector('input');
+ const modalElement = document.createElement('section');
+ modalElement.classList.add('modal', 'ipa-table-modal');
+ modalElement.innerHTML = `
+ `;
+
+ document.body.appendChild(modalElement);
+
+ setupIPAFields();
+ setupIPATable(modalElement, textBox);
+}
+
+export function renderMaximizedTextbox(maximizeButton) {
+ maximizeButton = typeof maximizeButton.target === 'undefined' || maximizeButton.target === '' ? maximizeButton : maximizeButton.target;
+ const label = maximizeButton.parentElement.innerText.replace(/(\*|Maximize)/g, '').trim();
+ const textBox = maximizeButton.parentElement.querySelector('textarea');
+ const modalElement = document.createElement('section');
+ modalElement.classList.add('modal', 'maximize-modal');
+ modalElement.innerHTML = `
+ `;
+
+ document.body.appendChild(modalElement);
+
+ setupMaximizeModal(modalElement, textBox);
+}
+
+export function renderInfoModal(content) {
+ const modalElement = document.createElement('section');
+ modalElement.classList.add('modal', 'info-modal');
+ modalElement.innerHTML = `
+ `;
+
+ document.body.appendChild(modalElement);
+
+ setupInfoModal(modalElement);
+}
diff --git a/src/js/render/words.js b/src/js/render/words.js
new file mode 100644
index 0000000..bb37206
--- /dev/null
+++ b/src/js/render/words.js
@@ -0,0 +1,172 @@
+import md from 'marked';
+import { removeTags } from '../../helpers';
+import { getHomonymnNumber, hasToken } from '../utilities';
+import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from '../search';
+import {
+ setupWordOptionButtons,
+ setupPagination,
+ setupWordOptionSelections,
+ setupWordEditFormButtons,
+} from '../setupListeners';
+import { getPaginationData } from '../pagination';
+import { getOpenEditForms, translateOrthography, parseReferences } from '../wordManagement';
+import { renderAd } from '../ads';
+import { getPublicLink } from '../account/utilities';
+import { renderPartsOfSpeech } from './details';
+
+export function renderWords() {
+ let wordsHTML = '';
+ let openEditForms = getOpenEditForms();
+ let words = false;
+ const isPublic = hasToken() && window.currentDictionary.settings.isPublic;
+
+ if (window.currentDictionary.words.length === 0) {
+ wordsHTML = `
+
+
+ - Use the Word Form to create words or click the Help button below!
+
+ `;
+ } else {
+ words = getMatchingSearchWords();
+
+ if (words.length === 0) {
+ wordsHTML = `
+
+
+ - Edit your search or filter to show words.
+
+ `;
+ }
+
+ if (openEditForms.length > 0) {
+ // Clone the dom nodes
+ openEditForms.forEach((wordFormId, index) => {
+ openEditForms[index] = document.getElementById(wordFormId.toString()).cloneNode(true);
+ });
+ }
+
+ // const { pageStart, pageEnd } = getPaginationData(words);
+
+ // words.slice(pageStart, pageEnd).forEach(originalWord => {
+ words.forEach((originalWord, displayIndex) => {
+ const word = highlightSearchTerm({
+ name: removeTags(originalWord.name),
+ pronunciation: removeTags(originalWord.pronunciation),
+ partOfSpeech: removeTags(originalWord.partOfSpeech),
+ definition: removeTags(originalWord.definition),
+ details: parseReferences(removeTags(originalWord.details)),
+ wordId: originalWord.wordId,
+ });
+ const homonymnNumber = getHomonymnNumber(originalWord);
+ const shareLink = window.currentDictionary.hasOwnProperty('externalID') ? getPublicLink() + '/' + word.wordId : '';
+
+ wordsHTML += renderAd(displayIndex);
+
+ let wordNameDisplay = translateOrthography(word.name);
+
+ wordsHTML += `
+
+ ${wordNameDisplay}${homonymnNumber > 0 ? ' ' + homonymnNumber.toString() + '' : ''}
+ ${word.pronunciation}
+ ${word.partOfSpeech}
+ ${isPublic ? `➦` : ''}
+ Options
+
+
+
+ - ${word.definition}
+ -
+ ${md(word.details)}
+
+
+ `;
+ });
+ }
+
+ document.getElementById('entries').innerHTML = wordsHTML;
+
+ if (openEditForms.length > 0) {
+ // Clone the dom nodes
+ openEditForms.forEach(editForm => {
+ const entryElement = document.getElementById(editForm.id);
+ entryElement.parentNode.replaceChild(editForm, entryElement);
+ });
+ setupWordEditFormButtons();
+ }
+
+ setupWordOptionButtons();
+ setupWordOptionSelections();
+
+ // Show Search Results
+ const searchTerm = getSearchTerm();
+ const filters = getSearchFilters();
+ let resultsText = searchTerm !== '' || !filters.allPartsOfSpeechChecked ? (words ? words.length : 0).toString() + ' Results' : '';
+ resultsText += !filters.allPartsOfSpeechChecked ? ' (Filtered)' : '';
+ document.getElementById('searchResults').innerHTML = resultsText;
+
+ // renderPagination(words);
+}
+
+export function renderPagination(filteredWords) {
+ const paginationData = getPaginationData(filteredWords);
+
+ if (paginationData.pages > 0) {
+ let paginationHTML = (paginationData.currentPage > 0 ? '« Previous' : '')
+ + ''
+ + (paginationData.currentPage < paginationData.pages - 1 ? 'Next »' : '');
+
+ Array.from(document.getElementsByClassName('pagination')).forEach(pagination => {
+ pagination.innerHTML = paginationHTML;
+ });
+
+ setupPagination();
+ }
+}
+
+export function renderEditForm(wordId = false) {
+ wordId = typeof wordId.target === 'undefined' ? wordId : parseInt(this.id.replace('edit_', ''));
+ const word = window.currentDictionary.words.find(w => w.wordId === wordId);
+ if (word) {
+ const ipaPronunciationField = `
+ Field Help`;
+ const plainPronunciationField = ``;
+ const editForm = ``;
+
+ document.getElementById(wordId.toString()).innerHTML = editForm;
+ setupWordEditFormButtons();
+ renderPartsOfSpeech(true);
+ }
+}
diff --git a/src/js/search.js b/src/js/search.js
index cecf2b9..a1834ef 100644
--- a/src/js/search.js
+++ b/src/js/search.js
@@ -1,6 +1,6 @@
import { cloneObject, getIndicesOf } from "../helpers";
import removeDiacritics from "./StackOverflow/removeDiacritics";
-import { renderWords } from "./render";
+import { renderWords } from "./render/words";
export function showSearchModal() {
document.getElementById('searchModal').style.display = 'block';
diff --git a/src/js/settings.js b/src/js/settings.js
index 5d14499..26c9bff 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -1,7 +1,7 @@
import { SETTINGS_KEY, DEFAULT_SETTINGS } from "../constants";
import { cloneObject, removeTags } from "../helpers";
import { usePhondueDigraphs } from "./KeyboardFire/phondue/ipaField";
-import { renderWords } from "./render";
+import { renderWords } from "./render/words";
import { addMessage, hasToken } from "./utilities";
import { enableHotKeys, disableHotKeys } from "./hotkeys";
diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js
index e4b8620..8c0f6a8 100644
--- a/src/js/setupListeners.js
+++ b/src/js/setupListeners.js
@@ -1,5 +1,6 @@
import {showSection, hideDetailsPanel} from './displayToggles';
-import { renderWords, renderEditForm, renderMaximizedTextbox, renderInfoModal, renderIPATable, renderIPAHelp } from './render';
+import { renderWords, renderEditForm } from './render/words';
+import { renderMaximizedTextbox, renderInfoModal, renderIPATable, renderIPAHelp } from './render/modals';
import { confirmEditWord, cancelEditWord, confirmDeleteWord, submitWordForm } from './wordManagement';
import { openEditModal, saveEditModal, saveAndCloseEditModal, exportDictionary, exportWords, importDictionary, importWords, confirmDeleteDictionary } from './dictionaryManagement';
import { goToNextPage, goToPreviousPage, goToPage } from './pagination';
diff --git a/src/js/wordManagement.js b/src/js/wordManagement.js
index a4131e6..5974149 100644
--- a/src/js/wordManagement.js
+++ b/src/js/wordManagement.js
@@ -1,4 +1,4 @@
-import { renderWords } from "./render";
+import { renderWords } from "./render/words";
import { wordExists, addMessage, getNextId, hasToken, getHomonymnIndexes } from "./utilities";
import removeDiacritics from "./StackOverflow/removeDiacritics";
import { removeTags, getTimestampInSeconds } from "../helpers";