Create pagination and random word generator utility

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>
 

src/constants.js

@@ -49,3 +49,5 @@ 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/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 } 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)) {
@@ -156,6 +163,31 @@ 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() {

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 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();
@@ -171,3 +172,23 @@ export function setupWordOptionSelections() {
     }
   });
 }
+
+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;
   });
 
+  if (render) {
     renderWords();
   }
+}

src/styles/_elements.scss

@@ -171,3 +171,26 @@ span .tag {
     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%;
+  }
+}