Add fade out for messages; Remove unused utility
This commit is contained in:
parent
84a308693f
commit
eba7307328
|
@ -136,31 +136,6 @@ export function getHomonymnNumber(word) {
|
||||||
return 0;
|
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) {
|
export function addMessage(messageText, time = 5000, extraClass = false) {
|
||||||
const messagingSection = document.getElementById('messagingSection');
|
const messagingSection = document.getElementById('messagingSection');
|
||||||
const element = document.createElement('div');
|
const element = document.createElement('div');
|
||||||
|
@ -174,7 +149,7 @@ export function addMessage(messageText, time = 5000, extraClass = false) {
|
||||||
const closeButton = element.querySelector('.close-button');
|
const closeButton = element.querySelector('.close-button');
|
||||||
const closeMessage = () => {
|
const closeMessage = () => {
|
||||||
closeButton.removeEventListener('click', closeMessage);
|
closeButton.removeEventListener('click', closeMessage);
|
||||||
messagingSection.removeChild(element);
|
fadeOutElement(element);
|
||||||
};
|
};
|
||||||
closeButton.addEventListener('click', closeMessage);
|
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() {
|
export function hideAllModals() {
|
||||||
const permanentModals = ['#searchModal', '#settingsModal', '#editModal'];
|
const permanentModals = ['#searchModal', '#settingsModal', '#editModal'];
|
||||||
const hideModals = document.querySelectorAll(permanentModals.join(',')),
|
const hideModals = document.querySelectorAll(permanentModals.join(',')),
|
||||||
|
|
|
@ -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 {
|
.pagination {
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
Loading…
Reference in New Issue