Style edit form and make cancel button re-render

index.html

@@ -89,21 +89,22 @@
         </article>
       </section>
 
+      <section class="pagination"></section>
+
       <section id="entries">
         <article class="entry">
           <header>
-            <h4 class="word">Word</h4>
-            <span class="pronunciation">Pronunciation</span>
-            <span class="part-of-speech">Part of Speech</span>
+            <h4 class="word">Loading Words</h4>
+            <span class="pronunciation"></span>
+            <span class="part-of-speech"></span>
           </header>
           <dl>
-            <dt class="definition">Definition</dt>
-            <dd class="details">
-              <p><em>Markdown</em> <strong>details</strong></p>
-            </dd>
+            <dt class="definition">Please Wait...</dt>
           </dl>
         </article>
       </section>
+      
+      <section class="pagination"></section>
     </section>
   </main>
 
@@ -197,13 +198,13 @@
       </section>
 
       <section id="editSettingsTab" style="display:none;">
-        <label>Allow Duplicate Words
-          <input type="checkbox" id="editAllowDuplicates"><br>
-          <small>Checking this box will allow any number of the exact same spelling of a word to be added</small>
+        <label>Prevent Duplicate Words
+          <input type="checkbox" id="editPreventDuplicates"><br>
+          <small>Checking this box will prevent the creation of words with the exact same spelling.</small>
         </label>
         <label>Words are Case-Sensitive
           <input type="checkbox" id="editCaseSensitive"><br>
-          <small>Checking this box will allow any words spelled the same but with different capitalization to be added.</small>
+          <small>Checking this box will allow the creation of words with the exact same spelling if their capitalization is different.</small>
         </label>
         <label>Sort by Definition
           <input type="checkbox" id="editSortByDefinition"><br>

src/constants.js

@@ -48,4 +48,6 @@ export const DEFAULT_DICTIONARY = {
   },
   lastUpdated: null,
   createdOn: 0,
-};
+};
+
+export const DEFAULT_PAGE_SIZE = 50;

src/index.js

@@ -4,12 +4,15 @@ import { DEFAULT_DICTIONARY } from './constants';
 import setupListeners from './js/setupListeners';
 import { renderAll } from './js/render';
 import { cloneObject } from './helpers';
+import { generateRandomWords } from './js/utilities';
 
 function initialize() {
   console.log('initializing');
   window.currentDictionary = cloneObject(DEFAULT_DICTIONARY);
+  generateRandomWords(100);
   setupListeners();
   renderAll();
+  console.log('Rendered!');
 }
 
 window.onload = (function (oldLoad) {

src/js/dictionaryManagement.js

@@ -28,8 +28,9 @@ export function openEditModal() {
   document.getElementById('editOrthography').value = orthography.notes;
   document.getElementById('editGrammar').value = grammar.notes;
 
-  document.getElementById('editAllowDuplicates').checked = allowDuplicates;
+  document.getElementById('editPreventDuplicates').checked = !allowDuplicates;
   document.getElementById('editCaseSensitive').checked = caseSensitive;
+  if (allowDuplicates) document.getElementById('editCaseSensitive').disabled = true;
   document.getElementById('editSortByDefinition').checked = sortByDefinition;
   document.getElementById('editIsComplete').checked = isComplete;
   document.getElementById('editIsPublic').checked = isPublic;
@@ -54,7 +55,7 @@ export function save() {
   window.currentDictionary.details.orthography.notes = removeTags(document.getElementById('editOrthography').value.trim());
   window.currentDictionary.details.grammar.notes = removeTags(document.getElementById('editGrammar').value.trim());
 
-  window.currentDictionary.settings.allowDuplicates = document.getElementById('editAllowDuplicates').checked;
+  window.currentDictionary.settings.allowDuplicates = !document.getElementById('editPreventDuplicates').checked;
   window.currentDictionary.settings.caseSensitive = document.getElementById('editCaseSensitive').checked;
   window.currentDictionary.settings.sortByDefinition = document.getElementById('editSortByDefinition').checked;
   window.currentDictionary.settings.isComplete = document.getElementById('editIsComplete').checked;

src/js/pagination.js

@@ -0,0 +1,24 @@
+import { renderWords } from "./render";
+
+export function goToPage(page) {
+  if (typeof page.target !== 'undefined') {
+    page = page.target.value;
+  }
+  window.currentPage = parseFloat(page);
+
+  Array.from(document.getElementsByClassName('pagination')).forEach(pagination => {
+    console.log('setting loader');
+    pagination.innerHTML = `<span class="loader">Loading Page ${window.currentPage + 1}...</span>`;
+  });
+
+  setTimeout(renderWords, 1);
+  // renderWords();
+}
+
+export function goToNextPage() {
+  goToPage((window.hasOwnProperty('currentPage') ? window.currentPage : 0) + 1);
+}
+
+export function goToPreviousPage() {
+  goToPage((window.hasOwnProperty('currentPage') ? window.currentPage : 1) - 1);
+}

src/js/render.js

@@ -3,7 +3,8 @@ import { removeTags, slugify } from '../helpers';
 import { getWordsStats, wordExists } from './utilities';
 import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search';
 import { showSection } from './displayToggles';
-import { setupSearchFilters, setupWordOptionButtons } from './setupListeners';
+import { setupSearchFilters, setupWordOptionButtons, setupPagination, setupWordOptionSelections, setupEditFormButtons } from './setupListeners';
+import { DEFAULT_PAGE_SIZE } from '../constants';
 
 export function renderAll() {
   renderDictionaryDetails();
@@ -106,7 +107,13 @@ export function renderPartsOfSpeech() {
 export function renderWords() {
   const words = getMatchingSearchWords();
   let wordsHTML = '';
-  words.forEach(originalWord => {
+
+  const pageSize = window.localStorage.getItem('pageSize') ? parseInt(window.localStorage.getItem('pageSize')) : DEFAULT_PAGE_SIZE;
+  const currentPage = window.hasOwnProperty('currentPage') ? window.currentPage : 0;
+  const start = currentPage * pageSize;
+  const end = typeof words[start + pageSize] !== 'undefined' ? start + pageSize : words.length - 1;
+
+  words.slice(start, end).forEach(originalWord => {
     let detailsMarkdown = removeTags(originalWord.longDefinition);
     const references = detailsMarkdown.match(/\{\{.+?\}\}/g);
     if (references && Array.isArray(references)) {
@@ -149,6 +156,7 @@ export function renderWords() {
 
   document.getElementById('entries').innerHTML = wordsHTML;
   setupWordOptionButtons();
+  setupWordOptionSelections();
   
   // Show Search Results
   const searchTerm = getSearchTerm();
@@ -156,12 +164,37 @@ export function renderWords() {
   let resultsText = searchTerm !== '' || !filters.allPartsOfSpeechChecked ? words.length.toString() + ' Results' : '';
   resultsText += !filters.allPartsOfSpeechChecked ? ' (Filtered)' : '';
   document.getElementById('searchResults').innerHTML = resultsText;
+
+  renderPagination();
+}
+
+export function renderPagination() {
+  const numWords = window.currentDictionary.words.length;
+  const pageSize = window.localStorage.getItem('pageSize') ? parseInt(window.localStorage.getItem('pageSize')) : DEFAULT_PAGE_SIZE;
+  const pages = Math.floor(numWords / pageSize);
+  const currentPage = window.hasOwnProperty('currentPage') ? window.currentPage : 0;
+
+  if (pages > 0) {
+    let paginationHTML = (currentPage > 0 ? '<span class="button prev-button">&laquo; Previous</span>' : '')
+      + '<select class="page-selector">';
+    for (let i = 0; i < pages; i++) {
+      paginationHTML += `<option value="${i}"${currentPage === i ? ' selected' : ''}>Page ${i + 1}</option>`;
+    }
+    paginationHTML += '</select>'
+      + (currentPage < pages - 1 ? '<span class="button next-button">Next &raquo;</span>' : '');
+    
+    Array.from(document.getElementsByClassName('pagination')).forEach(pagination => {
+      pagination.innerHTML = paginationHTML;
+    });
+
+    setupPagination();
+  }
 }
 
 export function renderEditForm() {
   const wordId = parseInt(this.id.replace('edit_', ''));
   const word = window.currentDictionary.words.find(w => w.wordId === wordId);
-  if (wordToEdit) {
+  if (word) {
     const editForm = `<form id="editForm_${wordId}" class="edit-form">
       <label>Word<span class="red">*</span><br>
         <input id="wordName_${wordId}" value="${word.name}">
@@ -181,8 +214,11 @@ export function renderEditForm() {
         <textarea id="wordDetails_${wordId}" placeholder="Markdown formatting allowed">${word.longDefinition}</textarea>
       </label>
       <div id="wordErrorMessage_${wordId}"></div>
-      <a class="button" id="editWordButton_${wordId}">Save Changes</a>
-      <a class="button cancel-edit">Cancel Edit</a>
+      <a class="button edit-save-changes" id="editWordButton_${wordId}">Save Changes</a>
+      <a class="button edit-cancel">Cancel Edit</a>
     </form>`;
+
+    document.getElementById(wordId.toString()).innerHTML = editForm;
+    setupEditFormButtons();
   }
 }

src/js/search.js

@@ -28,7 +28,6 @@ export function getSearchFilters() {
 export function getMatchingSearchWords() {
   const searchTerm = getSearchTerm();
   const filters = getSearchFilters();
-  console.log('filters', filters);
   const matchingWords = window.currentDictionary.words.slice().filter(word => {
     if (!filters.allPartsOfSpeechChecked) {
       const partOfSpeech = word.partOfSpeech === '' ? 'Unclassified' : word.partOfSpeech;
@@ -47,11 +46,12 @@ export function getMatchingSearchWords() {
 
 export function highlightSearchTerm(word) {
   const searchTerm = getSearchTerm();
-  const markedUpWord = cloneObject(word);
   if (searchTerm) {
+    const markedUpWord = cloneObject(word);
     markedUpWord.name = markedUpWord.name.replace(new RegExp(searchTerm, 'g'), `<mark>${searchTerm}</mark>`);
     markedUpWord.simpleDefinition = markedUpWord.simpleDefinition.replace(new RegExp(searchTerm, 'g'), `<mark>${searchTerm}</mark>`);
     markedUpWord.longDefinition = markedUpWord.longDefinition.replace(new RegExp(searchTerm, 'g'), `<mark>${searchTerm}</mark>`);
+    return markedUpWord;
   }
-  return markedUpWord;
+  return word;
 }

src/js/setupListeners.js

@@ -4,6 +4,7 @@ import { validateWord, addWord } from './wordManagement';
 import { removeTags } from '../helpers';
 import { getNextId } from './utilities';
 import { openEditModal, save, saveAndClose } from './dictionaryManagement';
+import { goToNextPage, goToPreviousPage, goToPage } from './pagination';
 
 export default function setupListeners() {
   setupDetailsTabs();
@@ -35,6 +36,7 @@ function setupDetailsTabs() {
     });
   });
   setupEditFormTabs();
+  setupEditFormInteractions();
   setupEditFormButtons();
 }
 
@@ -52,6 +54,22 @@ function setupEditFormTabs() {
   });
 }
 
+function setupEditFormInteractions() {
+  const preventDuplicatesBox = document.getElementById('editPreventDuplicates');
+  preventDuplicatesBox.addEventListener('change', () => {
+    console.log('changed');
+    const caseSensitiveBox = document.getElementById('editCaseSensitive');
+    if (preventDuplicatesBox.checked) {
+      console.log('checked');
+      caseSensitiveBox.disabled = false;
+    } else {
+      console.log('unchecked');
+      caseSensitiveBox.disabled = true;
+      caseSensitiveBox.checked = false;
+    }
+  });
+}
+
 function setupEditFormButtons() {
   document.getElementById('editSave').addEventListener('click', () => save());
   document.getElementById('editSaveAndClose').addEventListener('click', () => saveAndClose());
@@ -154,3 +172,36 @@ export function setupWordOptionSelections() {
     }
   });
 }
+
+export function setupEditFormButtons() {
+  const saveChangesButtons = document.getElementsByClassName('edit-save-changes');
+  const cancelChangesButtons = document.getElementsByClassName('edit-cancel');
+  Array.from(saveChangesButtons).forEach(button => {
+    button.removeEventListener('click', renderEditForm);
+    button.addEventListener('click', renderEditForm);
+  });
+  Array.from(cancelChangesButtons).forEach(button => {
+    button.removeEventListener('click', renderWords);
+    button.addEventListener('click', renderWords);
+  });
+}
+
+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);
+  });
+}

src/js/utilities.js

@@ -1,4 +1,5 @@
 import { cloneObject } from '../helpers';
+import { addWord } from './wordManagement';
 
 export function getNextId() {
   const lastId = window.currentDictionary.words.reduce((highestId, word) => {
@@ -105,3 +106,28 @@ export function wordExists(word, returnId = false) {
   });
   return foundWord ? (returnId ? foundWord.wordId : true) : false;
 }
+
+export function generateRandomWords(numberOfWords) {
+  console.log('Generating', numberOfWords, 'words...');
+  const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
+  letters.forEach(letter => letters.push(letter.toUpperCase()));
+  const words = [];
+  while (words.length < numberOfWords) {
+    let word = '';
+    while (word === '' || words.includes(word)) {
+      word += letters[Math.floor(Math.random() * letters.length)];
+    }
+    words.push(word);
+  }
+  words.forEach((word, index) => {
+    addWord({
+      name: word,
+      pronunciation: '/' + word + '/',
+      partOfSpeech: Math.random() > 0.5 ? 'Noun' : 'Verb',
+      simpleDefinition: word,
+      longDefinition: word + (index > 0 ? '\n\nRef: {{' + words[index - 1] + '}}' : ''),
+      wordId: getNextId(),
+    }, false);
+  });
+  console.log('done');
+}

src/js/wordManagement.js

@@ -1,5 +1,6 @@
 import { renderWords } from "./render";
 import { wordExists } from "./utilities";
+import removeDiacritics from "./StackOverflow/removeDiacritics";
 
 export function validateWord(word, wordId = false) {
   const errorElementId = wordId === false ? 'wordErrorMessage' : 'wordErrorMessage_' + wordId,
@@ -25,15 +26,17 @@ export function validateWord(word, wordId = false) {
   return errorMessage === '';
 }
 
-export function addWord(word) {
+export function addWord(word, render = true) {
   const { sortByDefinition } = window.currentDictionary.settings;
   const sortBy = sortByDefinition ? 'simpleDefinition' : 'name';
 
   window.currentDictionary.words.push(word);
   window.currentDictionary.words.sort((wordA, wordB) => {
-    if (wordA[sortBy] === wordB[sortBy]) return 0;
-    return wordA[sortBy] > wordB[sortBy] ? 1 : -1;
+    if (removeDiacritics(wordA[sortBy]).toLowerCase() === removeDiacritics(wordB[sortBy]).toLowerCase()) return 0;
+    return removeDiacritics(wordA[sortBy]).toLowerCase() > removeDiacritics(wordB[sortBy]).toLowerCase() ? 1 : -1;
   });
 
-  renderWords();
+  if (render) {
+    renderWords();
+  }
 }

src/styles/_elements.scss

@@ -170,4 +170,27 @@ span .tag {
   div.three-quarter {
     width: 72%;
   }
-}
+}
+
+.pagination {
+  position: relative;
+  text-align: center;
+  margin: $general-padding 0;
+
+  .page-selector {
+    padding: 5px 10px;
+  }
+
+  .prev-button,
+  .next-button {
+    position: absolute;
+  }
+
+  .prev-button {
+    left: 2.5%;
+  }
+  
+  .next-button {
+    right: 2.5%;
+  }
+}

src/styles/_structure.scss

@@ -77,6 +77,11 @@
   overflow-y: auto;
 }
 
+.edit-form {
+  padding: $general-padding;
+  max-width: 500px;
+}
+
 #detailsSection {
   padding: 20px;
   background-color: $white;