From ee30fe53b289a2d470e7ad228c8281296138919c Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Mon, 8 Jul 2019 15:49:46 -0600 Subject: [PATCH] Split render.js out into separate files --- src/js/dictionaryManagement.js | 3 +- src/js/displayToggles.js | 2 +- src/js/hotkeys.js | 2 +- src/js/pagination.js | 2 +- src/js/render.js | 386 --------------------------------- src/js/render/details.js | 138 ++++++++++++ src/js/render/index.js | 14 ++ src/js/render/modals.js | 74 +++++++ src/js/render/words.js | 172 +++++++++++++++ src/js/search.js | 2 +- src/js/settings.js | 2 +- src/js/setupListeners.js | 3 +- src/js/wordManagement.js | 2 +- 13 files changed, 408 insertions(+), 394 deletions(-) delete mode 100644 src/js/render.js create mode 100644 src/js/render/details.js create mode 100644 src/js/render/index.js create mode 100644 src/js/render/modals.js create mode 100644 src/js/render/words.js 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}
-
- ${blendHTML}`; - - const { onset, nucleus, coda } = phonotactics; - const onsetHTML = `

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}
-
- ${phonotacticsNotesHTML}` - : ''; - - const { translations } = orthography; - const translationsHTML = `

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 = `
-
-

No Words Created

-
-
-
Use the Word Form to create words or click the Help button below!
-
-
`; - } else { - words = getMatchingSearchWords(); - - if (words.length === 0) { - wordsHTML = `
-
-

No Search Results

-
-
-
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 = `
- - - - - -
- Save Changes - Cancel Edit -
`; - - 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 = `
-
- ×︎ -
-
- ${ipaTableFile} -
- -
`; - - 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 = `
-
- ×︎ -

${label}

-
- -
- -
`; - - document.body.appendChild(modalElement); - - setupMaximizeModal(modalElement, textBox); -} - -export function renderInfoModal(content) { - const modalElement = document.createElement('section'); - modalElement.classList.add('modal', 'info-modal'); - modalElement.innerHTML = `
-
- ×︎ -
-
- ${content} -
-
-
`; - - 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}
+
+ ${blendHTML}`; + + const { onset, nucleus, coda } = phonotactics; + const onsetHTML = `

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}
+
+ ${phonotacticsNotesHTML}` + : ''; + + const { translations } = orthography; + const translationsHTML = `

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 = `
+
+ ×︎ +
+
+ ${ipaTableFile} +
+ +
`; + + 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 = `
+
+ ×︎ +

${label}

+
+ +
+ +
`; + + document.body.appendChild(modalElement); + + setupMaximizeModal(modalElement, textBox); +} + +export function renderInfoModal(content) { + const modalElement = document.createElement('section'); + modalElement.classList.add('modal', 'info-modal'); + modalElement.innerHTML = `
+
+ ×︎ +
+
+ ${content} +
+
+
`; + + 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 = `
+
+

No Words Created

+
+
+
Use the Word Form to create words or click the Help button below!
+
+
`; + } else { + words = getMatchingSearchWords(); + + if (words.length === 0) { + wordsHTML = `
+
+

No Search Results

+
+
+
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 = `
+ + + + + +
+ Save Changes + Cancel Edit +
`; + + 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";