Create pagination and random word generator utility

This commit is contained in:
Robbie Antenesse 2019-05-06 16:28:51 -06:00
parent 80e9a06235
commit d178a91be3
10 changed files with 153 additions and 18 deletions

View File

@ -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>

View File

@ -49,3 +49,5 @@ export const DEFAULT_DICTIONARY = {
lastUpdated: null,
createdOn: 0,
};
export const DEFAULT_PAGE_SIZE = 50;

View File

@ -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) {

24
src/js/pagination.js Normal file
View File

@ -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);
}

View File

@ -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() {

View File

@ -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;
}

View File

@ -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);
});
}

View File

@ -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');
}

View File

@ -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();
}
}

View File

@ -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%;
}
}