From 5b2aca45927c64f53e59077869afca3ae618c980 Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Fri, 7 Jun 2019 22:36:00 -0600 Subject: [PATCH] Add fade out for messages; Remove unused utility --- src/js/utilities.js | 34 ++++++++-------------------------- src/scss/_elements.scss | 19 +++++++++++++++++++ 2 files changed, 27 insertions(+), 26 deletions(-) diff --git a/src/js/utilities.js b/src/js/utilities.js index 02e9185..0c02534 100644 --- a/src/js/utilities.js +++ b/src/js/utilities.js @@ -136,31 +136,6 @@ export function getHomonymnNumber(word) { return 0; } -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', - definition: word, - details: word + (index > 0 ? '\n\nRef: {{' + words[index - 1] + '}}' : ''), - wordId: getNextId(), - }, false); - }); - console.log('done'); -} - export function addMessage(messageText, time = 5000, extraClass = false) { const messagingSection = document.getElementById('messagingSection'); const element = document.createElement('div'); @@ -174,7 +149,7 @@ export function addMessage(messageText, time = 5000, extraClass = false) { const closeButton = element.querySelector('.close-button'); const closeMessage = () => { closeButton.removeEventListener('click', closeMessage); - messagingSection.removeChild(element); + fadeOutElement(element); }; closeButton.addEventListener('click', closeMessage); @@ -183,6 +158,13 @@ export function addMessage(messageText, time = 5000, extraClass = false) { } } +export function fadeOutElement(element) { + element.classList.add('fadeout'); + setTimeout(() => { + element.parentElement.removeChild(element); + }, 300); +} + export function hideAllModals() { const permanentModals = ['#searchModal', '#settingsModal', '#editModal']; const hideModals = document.querySelectorAll(permanentModals.join(',')), diff --git a/src/scss/_elements.scss b/src/scss/_elements.scss index 43a23ce..222c657 100644 --- a/src/scss/_elements.scss +++ b/src/scss/_elements.scss @@ -212,6 +212,25 @@ span .tag { } } +.fadeout { + overflow: hidden; + animation-name: shut; + animation-duration: 0.3s; + animation-timing-function: linear; + animation-iteration-count: 1; + animation-fill-mode: both; +} +@keyframes shut { + 0% { + opacity: 1; + max-height: 200px; + } + 100% { + opacity: 0; + max-height: 0px; + } +} + .pagination { position: relative; text-align: center;