- Description
- Details
- Stats
- Edit
diff --git a/src/index.js b/src/index.js
index ada9b3c..3eae96c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,11 +2,13 @@ import './main.scss';
import { DEFAULT_DICTIONARY } from './constants';
import setupListeners from './js/setupListeners';
+import { renderAll } from './js/render';
function initialize() {
console.log('initializing');
window.currentDictionary = JSON.parse(JSON.stringify(DEFAULT_DICTIONARY));
setupListeners();
+ renderAll();
}
window.onload = (function (oldLoad) {
diff --git a/src/js/displayToggles.js b/src/js/displayToggles.js
index 0beaf1d..13fe8d4 100644
--- a/src/js/displayToggles.js
+++ b/src/js/displayToggles.js
@@ -1,5 +1,4 @@
-import md from 'snarkdown';
-import {removeTags} from '../helpers';
+import { renderDescription, renderDetails, renderStats } from './render';
export function showSection(sectionName) {
switch (sectionName) {
@@ -12,153 +11,18 @@ export function showSection(sectionName) {
function showDescription() {
const detailsPanel = document.getElementById('detailsPanel');
detailsPanel.style.display = 'block';
- const {description} = window.currentDictionary;
- const descriptionHTML = md(removeTags(description));
- detailsPanel.innerHTML = descriptionHTML;
+ renderDescription();
}
function showDetails() {
const detailsPanel = document.getElementById('detailsPanel');
detailsPanel.style.display = 'block';
- const {partsOfSpeech, alphabeticalOrder} = window.currentDictionary;
- const {phonology, 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, phonotactics} = 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, exceptions} = 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 exceptionsHTML = exceptions.trim().length > 0 ? 'Exceptions:
' + md(removeTags(exceptions)) + '
' : '';
- const phonotacticsHTML = `Phonotactics
-
-
${onsetHTML}
-
${nucleusHTML}
-
${codaHTML}
-
- ${exceptionsHTML}`;
-
- const orthographyHTML = 'Orthography
Notes:
' + md(removeTags(orthography.notes)) + '
';
- const grammarHTML = 'Grammar
Notes:
' + md(removeTags(grammar.notes)) + '
';
-
- detailsPanel.innerHTML = generalHTML + phonologyHTML + phonotacticsHTML + orthographyHTML + grammarHTML;
+ renderDetails();
}
function showStats() {
const detailsPanel = document.getElementById('detailsPanel');
detailsPanel.style.display = 'block';
- 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;
+ renderStats();
}
-
-function getWordsStats() {
- const {words, partsOfSpeech} = window.currentDictionary;
- const {caseSensitive} = window.currentDictionary.settings;
-
- const wordStats = {
- numberOfWords: [
- {
- name: 'Total',
- value: words.length,
- },
- ],
- wordLength: {
- shortest: 0,
- longest: 0,
- average: 0,
- },
- letterDistribution: [
- /* {
- letter: '',
- number: 0,
- percentage: 0.00,
- } */
- ],
- totalLetters: 0,
- };
-
- partsOfSpeech.forEach(partOfSpeech => {
- const wordsWithPartOfSpeech = words.filter(word => word.partOfSpeech === partOfSpeech);
- wordStats.numberOfWords.push({
- name: partOfSpeech,
- value: wordsWithPartOfSpeech.length,
- });
- });
-
- wordStats.numberOfWords.push({
- name: 'Unclassified',
- value: words.filter(word => !partsOfSpeech.includes(word.partOfSpeech)).length,
- });
-
- let totalLetters = 0;
- const numberOfLetters = {};
-
- words.forEach(word => {
- const shortestWord = wordStats.wordLength.shortest;
- const longestWord = wordStats.wordLength.longest;
- const wordLetters = word.name.split('');
- const lettersInWord = wordLetters.length;
-
- totalLetters += lettersInWord;
-
- if (shortestWord === 0 || lettersInWord < shortestWord) {
- wordStats.wordLength.shortest = lettersInWord;
- }
-
- if (longestWord === 0 || lettersInWord > longestWord) {
- wordStats.wordLength.longest = lettersInWord;
- }
-
- wordLetters.forEach(letter => {
- const letterToUse = caseSensitive ? letter : letter.toLowerCase();
- if (!numberOfLetters.hasOwnProperty(letterToUse)) {
- numberOfLetters[letterToUse] = 1;
- } else {
- numberOfLetters[letterToUse]++;
- }
- });
- });
-
- wordStats.totalLetters = totalLetters;
- wordStats.wordLength.average = words.length > 0 ? totalLetters / words.length : 0;
-
- for (const letter in numberOfLetters) {
- if (numberOfLetters.hasOwnProperty(letter)) {
- const number = numberOfLetters[letter];
- wordStats.letterDistribution.push({
- letter,
- number,
- percentage: number / totalLetters,
- });
- }
- }
-
- wordStats.letterDistribution.sort((a, b) => {
- if (a.percentage === b.percentage) return 0;
- return (a.percentage > b.percentage) ? -1 : 1;
- });
-
- return wordStats;
-}
\ No newline at end of file
diff --git a/src/js/render.js b/src/js/render.js
new file mode 100644
index 0000000..f2be93c
--- /dev/null
+++ b/src/js/render.js
@@ -0,0 +1,104 @@
+import md from 'snarkdown';
+import { removeTags } from '../helpers';
+import { getWordsStats } from './utilities';
+import { showSection } from './displayToggles';
+
+export function renderAll() {
+ renderDictionaryDetails();
+ renderWords();
+}
+
+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);
+ document.getElementById('dictionaryName').innerHTML = dictionaryName;
+}
+
+export function renderDescription() {
+ const descriptionHTML = md(removeTags(window.currentDictionary.description));
+
+ detailsPanel.innerHTML = descriptionHTML;
+}
+
+export function renderDetails() {
+ const { partsOfSpeech, alphabeticalOrder } = window.currentDictionary;
+ const { phonology, 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, phonotactics } = 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, exceptions } = 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 exceptionsHTML = exceptions.trim().length > 0 ? 'Exceptions:
' + md(removeTags(exceptions)) + '
' : '';
+ const phonotacticsHTML = `Phonotactics
+
+
${onsetHTML}
+
${nucleusHTML}
+
${codaHTML}
+
+ ${exceptionsHTML}`;
+
+ const orthographyHTML = 'Orthography
Notes:
' + md(removeTags(orthography.notes)) + '
';
+ const grammarHTML = 'Grammar
Notes:
' + 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 renderWords() {
+ const { words } = window.currentDictionary;
+ let wordsHTML = '';
+ words.forEach(word => {
+ wordsHTML += `
+
+ ${removeTags(word.name)}
+ ${removeTags(word.pronunciation)}
+ ${removeTags(word.partOfSpeech)}
+
+
+ - ${removeTags(word.simpleDefinition)}
+ -
+ ${md(removeTags(word.longDefinition))}
+
+
+ `;
+ });
+
+ document.getElementById('entries').innerHTML = wordsHTML;
+}
\ No newline at end of file
diff --git a/src/js/utilities.js b/src/js/utilities.js
new file mode 100644
index 0000000..6e17171
--- /dev/null
+++ b/src/js/utilities.js
@@ -0,0 +1,91 @@
+const { currentDictionary } = window;
+
+export function getWordsStats() {
+ const {words, partsOfSpeech} = currentDictionary;
+ const {caseSensitive} = currentDictionary.settings;
+
+ const wordStats = {
+ numberOfWords: [
+ {
+ name: 'Total',
+ value: words.length,
+ },
+ ],
+ wordLength: {
+ shortest: 0,
+ longest: 0,
+ average: 0,
+ },
+ letterDistribution: [
+ /* {
+ letter: '',
+ number: 0,
+ percentage: 0.00,
+ } */
+ ],
+ totalLetters: 0,
+ };
+
+ partsOfSpeech.forEach(partOfSpeech => {
+ const wordsWithPartOfSpeech = words.filter(word => word.partOfSpeech === partOfSpeech);
+ wordStats.numberOfWords.push({
+ name: partOfSpeech,
+ value: wordsWithPartOfSpeech.length,
+ });
+ });
+
+ wordStats.numberOfWords.push({
+ name: 'Unclassified',
+ value: words.filter(word => !partsOfSpeech.includes(word.partOfSpeech)).length,
+ });
+
+ let totalLetters = 0;
+ const numberOfLetters = {};
+
+ words.forEach(word => {
+ const shortestWord = wordStats.wordLength.shortest;
+ const longestWord = wordStats.wordLength.longest;
+ const wordLetters = word.name.split('');
+ const lettersInWord = wordLetters.length;
+
+ totalLetters += lettersInWord;
+
+ if (shortestWord === 0 || lettersInWord < shortestWord) {
+ wordStats.wordLength.shortest = lettersInWord;
+ }
+
+ if (longestWord === 0 || lettersInWord > longestWord) {
+ wordStats.wordLength.longest = lettersInWord;
+ }
+
+ wordLetters.forEach(letter => {
+ const letterToUse = caseSensitive ? letter : letter.toLowerCase();
+ if (!numberOfLetters.hasOwnProperty(letterToUse)) {
+ numberOfLetters[letterToUse] = 1;
+ } else {
+ numberOfLetters[letterToUse]++;
+ }
+ });
+ });
+
+ wordStats.totalLetters = totalLetters;
+ wordStats.wordLength.average = words.length > 0 ? totalLetters / words.length : 0;
+
+ for (const letter in numberOfLetters) {
+ if (numberOfLetters.hasOwnProperty(letter)) {
+ const number = numberOfLetters[letter];
+ wordStats.letterDistribution.push({
+ letter,
+ number,
+ percentage: number / totalLetters,
+ });
+ }
+ }
+
+ wordStats.letterDistribution.sort((a, b) => {
+ if (a.percentage === b.percentage) return 0;
+ return (a.percentage > b.percentage) ? -1 : 1;
+ });
+
+ return wordStats;
+}