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

		@@ -1,352 +1,0 @@
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		-?>