python-gallery/onlylegs/static/js/popup.js

function popupShow(titleText, subtitleText, bodyContent=null, userActions=null) {
    // Get popup elements
    const popupSelector = document.querySelector('.pop-up');
    const headerSelector = document.querySelector('.pop-up-header');
    const actionsSelector = document.querySelector('.pop-up-controlls');

    // Clear popup elements
    headerSelector.innerHTML = '';
    actionsSelector.innerHTML = '';

    // Set popup header and subtitle
    if (titleText) {
        let titleElement = document.createElement('h2');
            titleElement.innerHTML = titleText;
            headerSelector.appendChild(titleElement);
    }

    if (subtitleText) {
        let subtitleElement = document.createElement('p');
            subtitleElement.innerHTML = subtitleText;
            headerSelector.appendChild(subtitleElement);
    }

    if (bodyContent) { headerSelector.appendChild(bodyContent) }

    // Set buttons that will be displayed
    if (userActions) {
        userActions.forEach((action) => {
            actionsSelector.appendChild(action);
        });
    } else {
        let closeButton = document.createElement('button');
            closeButton.classList.add('btn-block');
            closeButton.classList.add('transparent');
            closeButton.innerHTML = 'Yeet!';
            closeButton.onclick = popupDismiss;
        actionsSelector.appendChild(closeButton);
    }

    // Stop scrolling and show popup
    document.querySelector("html").style.overflow = "hidden";
    popupSelector.style.display = 'block';

    // 5ms delay to allow for css transition >:C
    setTimeout(() => { popupSelector.classList.add('active') }, 5);
}

function popupDismiss() {
    const popupSelector = document.querySelector('.pop-up');
    document.querySelector("html").style.overflow = "auto";
    popupSelector.classList.remove('active');
    setTimeout(() => { popupSelector.style.display = 'none'; }, 200);
}

const popupCancelButton = document.createElement('button');
      popupCancelButton.classList.add('btn-block');
      popupCancelButton.classList.add('transparent');
      popupCancelButton.innerHTML = 'nuuuuuuuu';
      popupCancelButton.onclick = popupDismiss;