Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 03:26:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Clean up JavaScript code and make it more reliable

Browse source 
Update version
This commit is contained in:
Michał Gdula 2023-03-30 15:51:06 +00:00
parent 95a116ef50
commit c2e42e7179
14 changed files with 446 additions and 365 deletions
Download patch file Download diff file Expand all files Collapse all files

71
gallery/static/js/popup.js
View file

@ -1,42 +1,47 @@
function popUpShow(title, body, actions='<button class="btn-block" onclick="popupDissmiss()">Close</button>', content='') {
// Stop scrolling
document.querySelector("html").style.overflow = "hidden";
function popUpShow(titleText, subtitleText, bodyContent=null, userActions=null) {
// Get popup elements
let popup = document.querySelector('.pop-up');
let popupContent = document.querySelector('.pop-up-content');
let popupActions = document.querySelector('.pop-up-controlls');
// Set popup content
popupContent.innerHTML = `<h3>${title}</h3><p>${body}</p>${content}`;
let popupSelector = document.querySelector('.pop-up');
let headerSelector = document.querySelector('.pop-up-header');
let actionsSelector = document.querySelector('.pop-up-controlls');
// Clear popup elements
headerSelector.innerHTML = '';
actionsSelector.innerHTML = '';
// Set popup header and subtitle
let titleElement = document.createElement('h2');
titleElement.innerHTML = titleText;
headerSelector.appendChild(titleElement);
let subtitleElement = document.createElement('p');
subtitleElement.innerHTML = subtitleText;
headerSelector.appendChild(subtitleElement);
if (bodyContent) {
headerSelector.appendChild(bodyContent);
}
// Set buttons that will be displayed
popupActions.innerHTML = actions;
if (userActions) {
// for each user action, add the element
for (let i = 0; i < userActions.length; i++) {
let action = userActions[i];
actionsSelector.appendChild(action);
}
} else {
actionsSelector.innerHTML = '<button class="btn-block" onclick="popupDissmiss()">Close</button>';
}
// Show popup
popup.style.display = 'block';
setTimeout(function() {
popup.classList.add('active')
}, 10);
// Stop scrolling and show popup
document.querySelector("html").style.overflow = "hidden";
popupSelector.style.display = 'block';
setTimeout(function() { popupSelector.classList.add('active') }, 5); // 2ms delay to allow for css transition >:C
}
function popupDissmiss() {
// un-Stop scrolling
let popupSelector = document.querySelector('.pop-up');
document.querySelector("html").style.overflow = "auto";
let popup = document.querySelector('.pop-up');
popup.classList.remove('active');
setTimeout(function() {
popup.style.display = 'none';
}, 200);
popupSelector.classList.remove('active');
setTimeout(function() { popupSelector.style.display = 'none'; }, 200);
}
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
if (document.querySelector('.pop-up').classList.contains('active')) {
popupDissmiss();
}
}
});