← All changes | back/Partial/forms/popup.php +352 -0 11.1.1 → 11.1.0 View file →

		@@ -1,0 +1,352 @@
	1	+<?php
	2	+// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- View file, its variables are local to the include scope, not true globals.
	3	+defined('ABSPATH') || die('Restricted Access');
	4	+?>
	5	+<div id="acym_fulldiv_<?php echo esc_attr($form->form_tag_name); ?>"
	6	+ class="acym__subscription__form__popup__overlay acym__subscription__form-erase"
	7	+ role="dialog"
	8	+ aria-modal="true"
	9	+ aria-label="<?php echo esc_attr(acym_translation('ACYM_SUBSCRIPTION')); ?>"
	10	+ <?php
	11	+ if (!$edition && isset($form->settings['display']['scroll']) && $form->settings['display']['scroll'] != 0) {
	12	+ echo 'style="display: none;"';
	13	+ }
	14	+ ?>>
	15	+ <div class="acym__subscription__form__popup">
	16	+ <button type="button" class="acym__subscription__form__popup__close acymicon-close" aria-label="<?php echo esc_attr(acym_translation('ACYM_CLOSE')); ?>"></button>
	17	+ <?php
	18	+ if ($edition) {
	19	+ echo '<form action="#" onsubmit="return false;" id="'.esc_attr($form->form_tag_name).'">';
	20	+ } else {
	21	+ $isButton = $form->settings['display']['display_action'] === 'yes';
	22	+ if ($isButton) {
	23	+ $cookieExpiration = '0';
	24	+ } else {
	25	+ $cookieExpiration = empty($form->settings['cookie']['cookie_expiration']) ? '1' : $form->settings['cookie']['cookie_expiration'];
	26	+ }
	27	+ echo '<form acym-data-id="'.esc_attr($form->id).'"
	28	+ acym-data-cookie="'.intval($cookieExpiration).'"
	29	+ action="'.esc_url($form->form_tag_action).'"
	30	+ id="'.esc_attr($form->form_tag_name).'"
	31	+ name="'.esc_attr($form->form_tag_name).'"
	32	+ aria-label="'.esc_attr(acym_translation('ACYM_SUBSCRIPTION')).'"
	33	+ enctype="multipart/form-data"
	34	+ onsubmit="return submitAcymForm(\'subscribe\',\''.esc_attr($form->form_tag_name).'\', \'acymSubmitSubForm\')">';
	35	+ }
	36	+ if (in_array($form->settings['style']['position'], ['image-top', 'image-left'])) {
	37	+ if (!empty($form->settings['message']['text']) && $form->settings['message']['position'] === 'before-image') {
	38	+ echo '<p id="acym__subscription__form__popup-text">'.nl2br(esc_html(acym_translation($form->settings['message']['text']))).'</p>';
	39	+ }
	40	+ include acym_getPartial('forms', 'image');
	41	+ }
	42	+ echo '<div class="acym__subscription__form__popup__fields-button">';
	43	+ include acym_getPartial('forms', 'fields');
	44	+ if (!empty($form->settings['message']['text']) && $form->settings['message']['position'] == 'before-button') {
	45	+ echo '<p id="acym__subscription__form__popup-text">'.nl2br(esc_html(acym_translation($form->settings['message']['text']))).'</p>';
	46	+ }
	47	+ include acym_getPartial('forms', 'button');
	48	+ echo '</div>';
	49	+ if (in_array($form->settings['style']['position'], ['image-bottom', 'image-right'])) {
	50	+ if (!empty($form->settings['message']['text']) && $form->settings['message']['position'] == 'before-image') {
	51	+ echo '<p id="acym__subscription__form__popup-text">'.nl2br(esc_html(acym_translation($form->settings['message']['text']))).'</p>';
	52	+ }
	53	+ include acym_getPartial('forms', 'image');
	54	+ }
	55	+ include acym_getPartial('forms', 'hidden_params');
	56	+ echo '</form>';
	57	+ ?>
	58	+ </div>
	59	+</div>
	60	+<?php
	61	+$popupPosition = $form->settings['display']['popup_position'] ?? 'center';
	62	+$positionMap = [
	63	+ 'top_left' => 'top: 20px; left: 20px;',
	64	+ 'top_center' => 'top: 20px; left: 50%; transform: translateX(-50%);',
	65	+ 'top_right' => 'top: 20px; right: 20px;',
	66	+ 'middle_left' => 'top: 50%; left: 20px; transform: translateY(-50%);',
	67	+ 'middle_right' => 'top: 50%; right: 20px; transform: translateY(-50%);',
	68	+ 'bottom_left' => 'bottom: 20px; left: 20px;',
	69	+ 'bottom_center' => 'bottom: 20px; left: 50%; transform: translateX(-50%);',
	70	+ 'bottom_right' => 'bottom: 20px; right: 20px;',
	71	+];
	72	+$positionCss = $positionMap[$popupPosition] ?? 'top: 50%; left: 50%; transform: translate(-50%, -50%);';
	73	+?>
	74	+<style>
	75	+ #acym_fulldiv_<?php echo esc_html($form->form_tag_name); ?>.acym__subscription__form__popup__overlay{
	76	+ display: <?php echo $edition ? 'inline' : 'none'; ?>;
	77	+ <?php if ($popupPosition === 'center') { ?>
	78	+ position: fixed;
	79	+ top: 0;
	80	+ bottom: 0;
	81	+ right: 0;
	82	+ left: 0;
	83	+ background-color: rgba(200, 200, 200, .5);
	84	+ <?php } else { ?>
	85	+ position: static;
	86	+ <?php } ?> z-index: 999999;
	87	+ }
	88	+
	89	+ #acym_fulldiv_<?php echo esc_html($form->form_tag_name); ?> .acym__subscription__form__popup__close{
	90	+ position: absolute;
	91	+ top: 10px;
	92	+ right: 10px;
	93	+ font-weight: bold;
	94	+ font-size: 1rem;
	95	+ cursor: pointer;
	96	+ background: none;
	97	+ border: none;
	98	+ padding: 0;
	99	+ line-height: 1;
	100	+ color: inherit;
	101	+ }
	102	+
	103	+ #acym_fulldiv_<?php echo esc_html($form->form_tag_name); ?> .acym__subscription__form__popup{
	104	+ position: fixed;
	105	+ <?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;
	106	+ background-color: <?php echo esc_html($form->settings['style']['background_color']); ?>;
	107	+ color: <?php echo esc_html($form->settings['style']['text_color']); ?> !important;
	108	+ background-image: url("<?php echo esc_url($form->settings['style']['background_image']); ?>");
	109	+ background-size: <?php echo esc_html($form->settings['style']['background_size']); ?>;
	110	+ background-position: <?php echo esc_html(str_replace('_', ' ', $form->settings['style']['background_position'])); ?>;
	111	+ background-repeat: <?php echo esc_html($form->settings['style']['background_repeat']); ?>;
	112	+ border-radius: <?php echo intval($form->settings['style']['border_radius'] ?? 0); ?>px;
	113	+ 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)'); ?>;
	114	+ z-index: 999999;
	115	+ text-align: center;
	116	+ display: flex;
	117	+ justify-content: center;
	118	+ align-items: center;
	119	+ }
	120	+
	121	+ <?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup .responseContainer{
	122	+ margin-bottom: 0 !important;
	123	+ padding: .4rem !important;
	124	+ }
	125	+
	126	+ <?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup <?php echo '#'.esc_html($form->form_tag_name); ?>{
	127	+ margin: 0;
	128	+ }
	129	+
	130	+ <?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{
	131	+ display: block;
	132	+ width: 100%;
	133	+ margin: 1rem 0 !important;
	134	+ }
	135	+
	136	+ <?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{
	137	+ display: block;
	138	+ }
	139	+
	140	+ <?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"]{
	141	+ margin-left: 5px;
	142	+ }
	143	+
	144	+ <?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup .acym__subscription__form__fields .acym__subscription__form__lists{
	145	+ display: block;
	146	+ width: 100%;
	147	+ margin: 1rem 10px !important;
	148	+ }
	149	+
	150	+ <?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup .acym__subscription__form__fields .acym__user__edit__email{
	151	+ margin: auto;
	152	+ }
	153	+
	154	+ <?php if (!empty($form->settings['message']['color'])) { ?>
	155	+ <?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>#acym__subscription__form__popup-text{
	156	+ color: <?php echo esc_html($form->settings['message']['color']); ?>;
	157	+ }
	158	+
	159	+ <?php } ?>
	160	+
	161	+ <?php if (in_array($form->settings['style']['position'], ['image-right', 'image-left'])) { ?>
	162	+ <?php echo '#acym_fulldiv_'.esc_html($form->form_tag_name).' '; ?>.acym__subscription__form__popup <?php echo '#'.esc_html($form->form_tag_name); ?>{
	163	+ display: flex;
	164	+ justify-content: center;
	165	+ align-items: center
	166	+ }
	167	+
	168	+ <?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{
	169	+ display: inline-block;
	170	+ }
	171	+
	172	+ <?php } ?>
	173	+
	174	+</style>
	175	+<?php if (!$edition) { ?>
	176	+ <script type="text/javascript">
	177	+ const acymBackupFormTimeout<?php echo esc_html($form->form_tag_name); ?> = setTimeout(() => {
	178	+ acym_initPopupDisplay<?php echo esc_html($form->form_tag_name); ?>(true);
	179	+ }, 1000);
	180	+
	181	+ window.addEventListener('DOMContentLoaded', function () {
	182	+ clearTimeout(acymBackupFormTimeout<?php echo esc_html($form->form_tag_name); ?>);
	183	+ acym_initPopupDisplay<?php echo esc_html($form->form_tag_name); ?>();
	184	+ });
	185	+
	186	+ function acym_initPopupDisplay<?php echo esc_html($form->form_tag_name); ?>(addedDelayForBackup = false) {
	187	+ const acym_popupForm = document.querySelector('#acym_fulldiv_<?php echo esc_html($form->form_tag_name); ?>.acym__subscription__form__popup__overlay');
	188	+
	189	+ if (!acym_popupForm) {
	190	+ return;
	191	+ }
	192	+
	193	+ const isDisplayButton = <?php echo $isButton ? 'true' : 'false'; ?>;
	194	+ let acymLastFocusedElement = null;
	195	+
	196	+ function acymGetFocusableElements() {
	197	+ return acym_popupForm.querySelectorAll(
	198	+ 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])'
	199	+ );
	200	+ }
	201	+
	202	+ function acymPopupKeydown(event) {
	203	+ if (event.key === 'Escape' || event.key === 'Esc') {
	204	+ acym_closePopupform<?php echo esc_html($form->form_tag_name); ?>(acym_popupForm);
	205	+ return;
	206	+ }
	207	+
	208	+ if (event.key !== 'Tab') {
	209	+ return;
	210	+ }
	211	+
	212	+ const focusable = acymGetFocusableElements();
	213	+ if (focusable.length === 0) {
	214	+ return;
	215	+ }
	216	+
	217	+ const first = focusable[0];
	218	+ const last = focusable[focusable.length - 1];
	219	+
	220	+ if (event.shiftKey && document.activeElement === first) {
	221	+ event.preventDefault();
	222	+ last.focus();
	223	+ } else if (!event.shiftKey && document.activeElement === last) {
	224	+ event.preventDefault();
	225	+ first.focus();
	226	+ }
	227	+ }
	228	+
	229	+ function acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>() {
	230	+ acymLastFocusedElement = document.activeElement;
	231	+ acym_popupForm.style.display = 'inline';
	232	+ acym_popupForm.addEventListener('keydown', acymPopupKeydown);
	233	+
	234	+ const focusable = acymGetFocusableElements();
	235	+ if (focusable.length > 0) {
	236	+ focusable[0].focus();
	237	+ }
	238	+ }
	239	+
	240	+ function acym_closePopupform<?php echo esc_html($form->form_tag_name); ?>(element) {
	241	+ element.style.display = 'none';
	242	+ acym_popupForm.removeEventListener('keydown', acymPopupKeydown);
	243	+
	244	+ if (acymLastFocusedElement && typeof acymLastFocusedElement.focus === 'function') {
	245	+ acymLastFocusedElement.focus();
	246	+ }
	247	+
	248	+ if (isDisplayButton) {
	249	+ return;
	250	+ }
	251	+
	252	+ let expirationDate = new Date();
	253	+ expirationDate.setDate(expirationDate.getDate() + <?php echo empty($form->settings['cookie']['cookie_expiration']) ? 1
	254	+ : intval($form->settings['cookie']['cookie_expiration']); ?>);
	255	+ document.cookie = 'acym_form_<?php echo esc_html($form->id); ?>=' + Date.now() + ';expires=' + expirationDate.toUTCString() + ';path=/';
	256	+ }
	257	+
	258	+ <?php if ($popupPosition === 'center') { ?>
	259	+ acym_popupForm.addEventListener('click', function (event) {
	260	+ if (event.target.closest('.acym__subscription__form__popup') === null) {
	261	+ acym_closePopupform<?php echo esc_html($form->form_tag_name); ?>(this);
	262	+ }
	263	+ });
	264	+ <?php } ?>
	265	+ document.querySelector('#acym_fulldiv_<?php echo esc_html($form->form_tag_name); ?> .acym__subscription__form__popup__close')
	266	+ .addEventListener('click', function (event) {
	267	+ acym_closePopupform<?php echo esc_html($form->form_tag_name); ?>(event.target.closest('.acym__subscription__form__popup__overlay'));
	268	+ });
	269	+
	270	+ if (isDisplayButton) {
	271	+ displayByButton();
	272	+ } else {
	273	+ displayByDelayAndScroll();
	274	+ }
	275	+
	276	+ function displayByButton() {
	277	+ const button = document.querySelector('#<?php echo esc_html($form->settings['display']['button']); ?>');
	278	+
	279	+ if (!button) {
	280	+ console.error('Could not find the button with the ID <?php echo esc_html($form->settings['display']['button']); ?>');
	281	+ return;
	282	+ }
	283	+
	284	+ button.addEventListener('click', function () {
	285	+ acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>();
	286	+ });
	287	+ }
	288	+
	289	+ function displayByDelayAndScroll() {
	290	+ const delayDisplay = parseInt(<?php echo esc_html($form->settings['display']['delay']); ?>);
	291	+ const scrollPercentLimit = parseInt(<?php echo esc_html($form->settings['display']['scroll']); ?>);
	292	+ let windowSize;
	293	+ let browserHeight;
	294	+ let delayRemaining = false;
	295	+
	296	+ if (delayDisplay > 0) {
	297	+ delayRemaining = true;
	298	+ }
	299	+
	300	+ let scrollRemaining = false;
	301	+ if (scrollPercentLimit > 0) {
	302	+ scrollRemaining = true;
	303	+ }
	304	+
	305	+ windowSize = document.getElementsByTagName('body')[0].clientHeight;
	306	+ browserHeight = document.documentElement.clientHeight;
	307	+
	308	+ if (!delayRemaining && (
	309	+ windowSize <= browserHeight || !scrollRemaining
	310	+ )) {
	311	+ scrollRemaining = false;
	312	+ acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>();
	313	+ } else {
	314	+ function displayAcymPopupForm() {
	315	+ let scrollPercent = Math.round((
	316	+ window.scrollY
	317	+ ) / (
	318	+ windowSize - browserHeight
	319	+ ) * 100);
	320	+ if (scrollPercent >= scrollPercentLimit) {
	321	+ scrollRemaining = false;
	322	+ window.removeEventListener('scroll', displayAcymPopupForm);
	323	+ if (!delayRemaining && acym_popupForm) {
	324	+ acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>();
	325	+ }
	326	+ }
	327	+ }
	328	+
	329	+ window.addEventListener('scroll', displayAcymPopupForm);
	330	+
	331	+ let delayInMs = delayDisplay * 1000;
	332	+ if (addedDelayForBackup && delayDisplay > 1000) {
	333	+ delayInMs -= 1000;
	334	+ }
	335	+
	336	+ setTimeout(function () {
	337	+ if (acym_popupForm !== null) {
	338	+ delayRemaining = false;
	339	+ if (!scrollRemaining) {
	340	+ acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>();
	341	+ window.removeEventListener('scroll', displayAcymPopupForm);
	342	+ }
	343	+ }
	344	+ }, delayInMs);
	345	+ }
	346	+ }
	347	+ }
	348	+ </script>
	349	+ <?php
	350	+ include acym_getPartial('forms', 'cookie');
	351	+}
	352	+?>