JezK

Edit File: popup.php

<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- View file, its variables are local to the include scope, not true globals.
defined('ABSPATH') || die('Restricted Access');
?>
<div id="acym_fulldiv_<?php echo esc_attr($form->form_tag_name); ?>"
     class="acym__subscription__form__popup__overlay acym__subscription__form-erase"
     role="dialog"
     aria-modal="true"
     aria-label="<?php echo esc_attr(acym_translation('ACYM_SUBSCRIPTION')); ?>"
    <?php
    if (!$edition && isset($form->settings['display']['scroll']) && $form->settings['display']['scroll'] != 0) {
        echo 'style="display: none;"';
    }
    ?>>
	<div class="acym__subscription__form__popup">
		<button type="button" class="acym__subscription__form__popup__close acymicon-close" aria-label="<?php echo esc_attr(acym_translation('ACYM_CLOSE')); ?>"></button>
        <?php
        if ($edition) {
            echo '<form action="#" onsubmit="return false;" id="'.esc_attr($form->form_tag_name).'">';
        } else {
            $isButton = $form->settings['display']['display_action'] === 'yes';
            if ($isButton) {
                $cookieExpiration = '0';
            } else {
                $cookieExpiration = empty($form->settings['cookie']['cookie_expiration']) ? '1' : $form->settings['cookie']['cookie_expiration'];
            }
            echo '<form acym-data-id="'.esc_attr($form->id).'" 
						acym-data-cookie="'.intval($cookieExpiration).'" 
						action="'.esc_url($form->form_tag_action).'" 
						id="'.esc_attr($form->form_tag_name).'" 
						name="'.esc_attr($form->form_tag_name).'"
						aria-label="'.esc_attr(acym_translation('ACYM_SUBSCRIPTION')).'"
						enctype="multipart/form-data"
						onsubmit="return submitAcymForm(\'subscribe\',\''.esc_attr($form->form_tag_name).'\', \'acymSubmitSubForm\')">';
        }
        if (in_array($form->settings['style']['position'], ['image-top', 'image-left'])) {
            if (!empty($form->settings['message']['text']) && $form->settings['message']['position'] === 'before-image') {
                echo '<p id="acym__subscription__form__popup-text">'.nl2br(esc_html(acym_translation($form->settings['message']['text']))).'</p>';
            }
            include acym_getPartial('forms', 'image');
        }
        echo '<div class="acym__subscription__form__popup__fields-button">';
        include acym_getPartial('forms', 'fields');
        if (!empty($form->settings['message']['text']) && $form->settings['message']['position'] == 'before-button') {
            echo '<p id="acym__subscription__form__popup-text">'.nl2br(esc_html(acym_translation($form->settings['message']['text']))).'</p>';
        }
        include acym_getPartial('forms', 'button');
        echo '</div>';
        if (in_array($form->settings['style']['position'], ['image-bottom', 'image-right'])) {
            if (!empty($form->settings['message']['text']) && $form->settings['message']['position'] == 'before-image') {
                echo '<p id="acym__subscription__form__popup-text">'.nl2br(esc_html(acym_translation($form->settings['message']['text']))).'</p>';
            }
            include acym_getPartial('forms', 'image');
        }
        include acym_getPartial('forms', 'hidden_params');
        echo '</form>';
        ?>
	</div>
</div>
<?php
$popupPosition = $form->settings['display']['popup_position'] ?? 'center';
$positionMap = [
    'top_left' => 'top: 20px; left: 20px;',
    'top_center' => 'top: 20px; left: 50%; transform: translateX(-50%);',
    'top_right' => 'top: 20px; right: 20px;',
    'middle_left' => 'top: 50%; left: 20px; transform: translateY(-50%);',
    'middle_right' => 'top: 50%; right: 20px; transform: translateY(-50%);',
    'bottom_left' => 'bottom: 20px; left: 20px;',
    'bottom_center' => 'bottom: 20px; left: 50%; transform: translateX(-50%);',
    'bottom_right' => 'bottom: 20px; right: 20px;',
];
$positionCss = $positionMap[$popupPosition] ?? 'top: 50%; left: 50%; transform: translate(-50%, -50%);';
?>
<style>
	#acym_fulldiv_<?php echo esc_html($form->form_tag_name); ?>.acym__subscription__form__popup__overlay{
		display: <?php echo $edition ? 'inline' : 'none'; ?>;
	<?php if ($popupPosition === 'center') { ?>
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: rgba(200, 200, 200, .5);
	<?php } else { ?>
		position: static;
	<?php } ?> z-index: 999999;
	}

#acym_fulldiv_<?php echo esc_html($form->form_tag_name); ?> .acym__subscription__form__popup__close{
		position: absolute;
		top: 10px;
		right: 10px;
		font-weight: bold;
		font-size: 1rem;
		cursor: pointer;
		background: none;
		border: none;
		padding: 0;
		line-height: 1;
		color: inherit;
	}

#acym_fulldiv_<?php echo esc_html($form->form_tag_name); ?> .acym__subscription__form__popup{
		position: fixed;
	<?php echo esc_html($positionCss); ?> padding: <?php echo esc_html($form->settings['style']['padding']['height']); ?>px <?php echo esc_html($form->settings['style']['padding']['width']); ?>px;
		background-color: <?php echo esc_html($form->settings['style']['background_color']); ?>;
		color: <?php echo esc_html($form->settings['style']['text_color']); ?> !important;
		background-image: url("<?php echo esc_url($form->settings['style']['background_image']); ?>");
		background-size: <?php echo esc_html($form->settings['style']['background_size']); ?>;
		background-position: <?php echo esc_html(str_replace('_', ' ', $form->settings['style']['background_position'])); ?>;
		background-repeat: <?php echo esc_html($form->settings['style']['background_repeat']); ?>;
		border-radius: <?php echo intval($form->settings['style']['border_radius'] ?? 0); ?>px;
		box-shadow: <?php echo intval($form->settings['style']['shadow_x'] ?? 0); ?>px <?php echo intval($form->settings['style']['shadow_y'] ?? 0); ?>px <?php echo intval($form->settings['style']['shadow_blur'] ?? 0); ?>px<?php echo esc_html($form->settings['style']['shadow_color'] ?? 'rgba(0,0,0,0.2)'); ?>;
		z-index: 999999;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

<?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup .responseContainer{
		margin-bottom: 0 !important;
		padding: .4rem !important;
	}

<?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup <?php echo '#'.esc_html($form->form_tag_name); ?>{
		margin: 0;
	}

<?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup .acym__subscription__form__fields, <?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup .acym__subscription__form__button{
		display: block;
		width: 100%;
		margin: 1rem 0 !important;
	}

<?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup .acym__subscription__form__fields input:not([type="radio"]):not([type="checkbox"]), <?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup .acym__subscription__form__fields label{
		display: block;
	}

<?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup .acym__subscription__form__fields input[type="radio"], <?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup .acym__subscription__form__fields input[type="checkbox"]{
		margin-left: 5px;
	}

<?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup .acym__subscription__form__fields .acym__subscription__form__lists{
		display: block;
		width: 100%;
		margin: 1rem 10px !important;
	}

<?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup .acym__subscription__form__fields .acym__user__edit__email{
		margin: auto;
	}

<?php if (!empty($form->settings['message']['color'])) { ?>
	<?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>#acym__subscription__form__popup-text{
		color: <?php echo esc_html($form->settings['message']['color']); ?>;
	}

<?php } ?>

<?php if (in_array($form->settings['style']['position'], ['image-right', 'image-left'])) { ?>
	<?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup <?php echo '#'.esc_html($form->form_tag_name); ?>{
		display: flex;
		justify-content: center;
		align-items: center
	}

<?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup__fields-button, <?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__image{
		display: inline-block;
	}

<?php } ?>

</style>
<?php if (!$edition) { ?>
	<script type="text/javascript">
        const acymBackupFormTimeout<?php echo esc_html($form->form_tag_name); ?> = setTimeout(() => {
            acym_initPopupDisplay<?php echo esc_html($form->form_tag_name); ?>(true);
        }, 1000);

window.addEventListener('DOMContentLoaded', function () {
            clearTimeout(acymBackupFormTimeout<?php echo esc_html($form->form_tag_name); ?>);
            acym_initPopupDisplay<?php echo esc_html($form->form_tag_name); ?>();
        });

function acym_initPopupDisplay<?php echo esc_html($form->form_tag_name); ?>(addedDelayForBackup = false) {
            const acym_popupForm = document.querySelector('#acym_fulldiv_<?php echo esc_html($form->form_tag_name); ?>.acym__subscription__form__popup__overlay');

if (!acym_popupForm) {
                return;
            }

const isDisplayButton = <?php echo $isButton ? 'true' : 'false'; ?>;
            let acymLastFocusedElement = null;

function acymGetFocusableElements() {
                return acym_popupForm.querySelectorAll(
                    'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])'
                );
            }

function acymPopupKeydown(event) {
                if (event.key === 'Escape' || event.key === 'Esc') {
                    acym_closePopupform<?php echo esc_html($form->form_tag_name); ?>(acym_popupForm);
                    return;
                }

if (event.key !== 'Tab') {
                    return;
                }

const focusable = acymGetFocusableElements();
                if (focusable.length === 0) {
                    return;
                }

const first = focusable[0];
                const last = focusable[focusable.length - 1];

if (event.shiftKey && document.activeElement === first) {
                    event.preventDefault();
                    last.focus();
                } else if (!event.shiftKey && document.activeElement === last) {
                    event.preventDefault();
                    first.focus();
                }
            }

function acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>() {
                acymLastFocusedElement = document.activeElement;
                acym_popupForm.style.display = 'inline';
                acym_popupForm.addEventListener('keydown', acymPopupKeydown);

const focusable = acymGetFocusableElements();
                if (focusable.length > 0) {
                    focusable[0].focus();
                }
            }

function acym_closePopupform<?php echo esc_html($form->form_tag_name); ?>(element) {
                element.style.display = 'none';
                acym_popupForm.removeEventListener('keydown', acymPopupKeydown);

if (acymLastFocusedElement && typeof acymLastFocusedElement.focus === 'function') {
                    acymLastFocusedElement.focus();
                }

if (isDisplayButton) {
                    return;
                }

let expirationDate = new Date();
                expirationDate.setDate(expirationDate.getDate() + <?php echo empty($form->settings['cookie']['cookie_expiration']) ? 1
                    : intval($form->settings['cookie']['cookie_expiration']); ?>);
                document.cookie = 'acym_form_<?php echo esc_html($form->id); ?>=' + Date.now() + ';expires=' + expirationDate.toUTCString() + ';path=/';
            }

<?php if ($popupPosition === 'center') { ?>
            acym_popupForm.addEventListener('click', function (event) {
                if (event.target.closest('.acym__subscription__form__popup') === null) {
                    acym_closePopupform<?php echo esc_html($form->form_tag_name); ?>(this);
                }
            });
            <?php } ?>
            document.querySelector('#acym_fulldiv_<?php echo esc_html($form->form_tag_name); ?> .acym__subscription__form__popup__close')
                    .addEventListener('click', function (event) {
                        acym_closePopupform<?php echo esc_html($form->form_tag_name); ?>(event.target.closest('.acym__subscription__form__popup__overlay'));
                    });

if (isDisplayButton) {
                displayByButton();
            } else {
                displayByDelayAndScroll();
            }

function displayByButton() {
                const button = document.querySelector('#<?php echo esc_html($form->settings['display']['button']); ?>');

if (!button) {
                    console.error('Could not find the button with the ID <?php echo esc_html($form->settings['display']['button']); ?>');
                    return;
                }

button.addEventListener('click', function () {
                    acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>();
                });
            }

function displayByDelayAndScroll() {
                const delayDisplay = parseInt(<?php echo esc_html($form->settings['display']['delay']); ?>);
                const scrollPercentLimit = parseInt(<?php echo esc_html($form->settings['display']['scroll']); ?>);
                let windowSize;
                let browserHeight;
                let delayRemaining = false;

if (delayDisplay > 0) {
                    delayRemaining = true;
                }

let scrollRemaining = false;
                if (scrollPercentLimit > 0) {
                    scrollRemaining = true;
                }

windowSize = document.getElementsByTagName('body')[0].clientHeight;
                browserHeight = document.documentElement.clientHeight;

if (!delayRemaining && (
                    windowSize <= browserHeight || !scrollRemaining
                )) {
                    scrollRemaining = false;
                    acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>();
                } else {
                    function displayAcymPopupForm() {
                        let scrollPercent = Math.round((
                                                           window.scrollY
                                                       ) / (
                                                           windowSize - browserHeight
                                                       ) * 100);
                        if (scrollPercent >= scrollPercentLimit) {
                            scrollRemaining = false;
                            window.removeEventListener('scroll', displayAcymPopupForm);
                            if (!delayRemaining && acym_popupForm) {
                                acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>();
                            }
                        }
                    }

window.addEventListener('scroll', displayAcymPopupForm);

let delayInMs = delayDisplay * 1000;
                    if (addedDelayForBackup && delayDisplay > 1000) {
                        delayInMs -= 1000;
                    }

setTimeout(function () {
                        if (acym_popupForm !== null) {
                            delayRemaining = false;
                            if (!scrollRemaining) {
                                acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>();
                                window.removeEventListener('scroll', displayAcymPopupForm);
                            }
                        }
                    }, delayInMs);
                }
            }
        }
	</script>
    <?php
    include acym_getPartial('forms', 'cookie');
}
?>