acymailing / back / Partial / forms / popup.php

popup.php in AcyMailing – An Ultimate Newsletter Plugin and Marketing Automation Solution for WordPress trunk, at back/Partial/forms/popup.php

353 lines 16.3 KB

Raw Download Zip

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	?>
353