subscription-modal.js — Jetpack – WP Security, Backup, Speed, & Growth 13.0.2 | PluginProbe

PluginProbe ʕ •ᴥ•ʔ

Jetpack – WP Security, Backup, Speed, & Growth / 13.0.2

Jetpack – WP Security, Backup, Speed, & Growth v13.0.2

jetpack / modules / comments / subscription-modal-on-comment / subscription-modal.js

jetpack / modules / comments / subscription-modal-on-comment Last commit date

class-jetpack-subscription-modal-on-comment.php 2 years ago subscription-modal.css 2 years ago subscription-modal.js 2 years ago

subscription-modal.js

176 lines

1	document.addEventListener( 'DOMContentLoaded', function () {
2	const modal = document.getElementsByClassName( 'jetpack-subscription-modal' )[ 0 ];
3
4	if ( ! modal ) {
5	return;
6	}
7
8	const close = document.getElementsByClassName( 'jetpack-subscription-modal__close' )[ 0 ];
9	const subscribeForms = document.querySelectorAll( '.jetpack-subscription-modal__form' );
10
11	let redirectUrl = '';
12	let subscriptionData = '';
13	let hasLoaded = false;
14
15	function reloadOnCloseSubscriptionModal( customUrl ) {
16	const destinationUrl = customUrl ? new URL( customUrl ) : new URL( redirectUrl );
17
18	// Prevent redirect to external sites.
19	if ( destinationUrl.hostname !== window.location.hostname ) {
20	return;
21	}
22
23	localStorage.setItem( 'jetpack-subscription-modal-on-comment-scroll-to', destinationUrl.hash );
24
25	// For avoiding Firefox reload, we need to force reload bypassing the cache.
26	window.location.reload( true );
27	}
28
29	function handleSubscriptionModalIframeResult( eventFromIframe ) {
30	if ( eventFromIframe.origin === 'https://subscribe.wordpress.com' && eventFromIframe.data ) {
31	const data = JSON.parse( eventFromIframe.data );
32	const iframeElement = document.querySelector( '.jetpack-subscription-modal__iframe' );
33	if ( data && data.action === 'close' ) {
34	window.removeEventListener( 'message', handleSubscriptionModalIframeResult );
35	iframeElement.src = 'about:blank';
36	reloadOnCloseSubscriptionModal( subscriptionData.url );
37	}
38	}
39	}
40
41	function showSubscriptionIframe( subscriptionData ) {
42	const modalContainer = document.querySelector( '.jetpack-subscription-modal' );
43	const iframeElement = document.querySelector( '.jetpack-subscription-modal__iframe' );
44	const subscribeData = {
45	email: document.querySelector( '.jetpack-subscription-modal__form-email' ).value,
46	post_id: subscriptionData.post_id,
47	plan: 'newsletter',
48	blog: subscriptionData.blog_id,
49	source: 'jetpack_subscribe',
50	display: 'alternate',
51	app_source: subscriptionData.is_logged_in
52	? 'atomic-subscription-modal-li'
53	: 'atomic-subscription-modal-lo',
54	locale: subscriptionData.lang,
55	};
56	const params = new URLSearchParams( subscribeData );
57
58	iframeElement.src = 'https://subscribe.wordpress.com/memberships/?' + params.toString();
59
60	modalContainer.classList.add( 'has-iframe' );
61
62	window.addEventListener( 'message', handleSubscriptionModalIframeResult, false );
63	}
64
65	function JetpackSubscriptionModalOnCommentMessageListener( event ) {
66	let message = event && event.data;
67	if ( typeof message === 'string' ) {
68	try {
69	message = JSON.parse( message );
70	} catch ( err ) {
71	return;
72	}
73	}
74
75	const type = message && message.type;
76	const data = message && message.data;
77
78	if ( type !== 'subscriptionModalShow' \|\| typeof data.url === 'undefined' ) {
79	return;
80	}
81
82	if ( ! event.origin.includes( window.location.host ) ) {
83	return;
84	}
85
86	if ( data.email ) {
87	const emailInput = document.querySelector( '.jetpack-subscription-modal__form-email' );
88	emailInput.value = data.email;
89	if ( data.is_logged_in ) {
90	emailInput.setAttribute( 'readonly', 'readonly' );
91	}
92	}
93
94	if ( ! hasLoaded ) {
95	const storedCount = parseInt(
96	sessionStorage.getItem( 'jetpack-subscription-modal-shown-count' )
97	);
98	const showCount = ( isNaN( storedCount ) ? 0 : storedCount ) + 1;
99	sessionStorage.setItem( 'jetpack-subscription-modal-shown-count', showCount );
100
101	if ( showCount > 5 ) {
102	new Image().src =
103	document.location.protocol +
104	'//pixel.wp.com/g.gif?v=wpcom-no-pv&x_jetpack-subscribe-modal-comm=hidden_views_limit&r=' +
105	Math.random();
106
107	reloadOnCloseSubscriptionModal( data.url );
108	return;
109	}
110
111	new Image().src =
112	document.location.protocol +
113	'//pixel.wp.com/g.gif?v=wpcom-no-pv&x_jetpack-subscribe-modal-comm=showed&r=' +
114	Math.random();
115
116	modal.classList.toggle( 'open' );
117	hasLoaded = true;
118	redirectUrl = data.url;
119	subscriptionData = data;
120	return;
121	}
122	}
123
124	window.addEventListener( 'message', JetpackSubscriptionModalOnCommentMessageListener );
125
126	if ( close ) {
127	close.onclick = function ( event ) {
128	event.preventDefault();
129	modal.classList.toggle( 'open' );
130	reloadOnCloseSubscriptionModal();
131	};
132	}
133
134	subscribeForms.forEach( form => {
135	form.addEventListener( 'submit', function ( event ) {
136	if ( form.resubmitted ) {
137	return;
138	}
139
140	const emailInput = form.querySelector( 'input[type=email]' );
141	const email = emailInput ? emailInput.value : form.dataset.subscriber_email;
142
143	if ( ! email ) {
144	return;
145	}
146	event.preventDefault();
147	showSubscriptionIframe( subscriptionData );
148	return;
149	} );
150	} );
151
152	window.onclick = function ( event ) {
153	if ( event.target === modal ) {
154	modal.style.display = 'none';
155	reloadOnCloseSubscriptionModal();
156	}
157	};
158
159	window.addEventListener( 'load', () => {
160	// Scroll to the last comment.
161	const subscriptionScroll = localStorage.getItem(
162	'jetpack-subscription-modal-on-comment-scroll-to'
163	);
164
165	if ( subscriptionScroll ) {
166	window.location.hash = subscriptionScroll;
167	localStorage.removeItem( 'jetpack-subscription-modal-on-comment-scroll-to' );
168
169	const comment = document.querySelector( subscriptionScroll );
170	if ( comment ) {
171	comment.scrollIntoView( { block: 'center', behavior: 'smooth' } );
172	}
173	}
174	} );
175	} );
176