Jetpack – WP Security, Backup, Speed, & Growth / 16.3-a.1

Jetpack – WP Security, Backup, Speed, & Growth v16.3-a.1

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

subscription-modal.js in Jetpack – WP Security, Backup, Speed, & Growth 16.3-a.1, at modules/comments/subscription-modal-on-comment/subscription-modal.js

147 lines 3.7 KB

Raw Download Zip

1	/* global subscriptionData */
2	document.addEventListener( 'DOMContentLoaded', function () {
3	const modal = document.getElementsByClassName( 'jetpack-subscription-modal' )[ 0 ];
4
5	if ( ! modal ) {
6	return;
7	}
8
9	const close = document.getElementsByClassName( 'jetpack-subscription-modal__close' )[ 0 ];
10
11	let redirectUrl = '';
12	let hasLoaded = false;
13
14	function reloadOnCloseSubscriptionModal( customUrl ) {
15	const destinationUrl = customUrl ? new URL( customUrl ) : new URL( redirectUrl );
16
17	// Prevent redirect to external sites.
18	if ( destinationUrl.hostname !== window.location.hostname ) {
19	return;
20	}
21
22	try {
23	localStorage.setItem(
24	'jetpack-subscription-modal-on-comment-scroll-to',
25	destinationUrl.hash
26	);
27	} catch {
28	// Ok if we can't set it.
29	}
30
31	// Add cache-busting parameter
32	destinationUrl.searchParams.set( '_ctn', Date.now() );
33	window.location.href = destinationUrl.toString();
34	}
35
36	function JetpackSubscriptionModalOnCommentMessageListener( event ) {
37	let message = event && event.data;
38	if ( typeof message === 'string' ) {
39	try {
40	message = JSON.parse( message );
41	} catch {
42	return;
43	}
44	}
45
46	const type = message && message.type;
47	const data = message && message.data;
48
49	if ( type !== 'subscriptionModalShow' \|\| typeof data.url === 'undefined' ) {
50	return;
51	}
52
53	if ( subscriptionData.homeUrl !== event.origin ) {
54	return;
55	}
56
57	if ( data.email ) {
58	const emailInput = document.querySelector(
59	'.jetpack-subscription-modal__modal-content input[type="email"]'
60	);
61	if ( ! emailInput ) {
62	reloadOnCloseSubscriptionModal( data.url );
63	return;
64	}
65
66	const appSource = document.querySelector(
67	'.jetpack-subscription-modal__modal-content input[name="app_source"]'
68	);
69	if ( ! appSource ) {
70	reloadOnCloseSubscriptionModal( data.url );
71	return;
72	}
73
74	emailInput.value = data.email;
75	if ( data.is_logged_in ) {
76	emailInput.setAttribute( 'readonly', 'readonly' );
77	appSource.value = 'atomic-subscription-modal-li';
78	}
79	}
80
81	if ( ! hasLoaded ) {
82	try {
83	const storedCount = parseInt(
84	sessionStorage.getItem( 'jetpack-subscription-modal-shown-count' )
85	);
86	const showCount = ( isNaN( storedCount ) ? 0 : storedCount ) + 1;
87	sessionStorage.setItem( 'jetpack-subscription-modal-shown-count', showCount );
88
89	if ( showCount > 5 ) {
90	new Image().src =
91	document.location.protocol +
92	'//pixel.wp.com/g.gif?v=wpcom-no-pv&x_jetpack-subscribe-modal-comm=hidden_views_limit&r=' +
93	Math.random();
94
95	reloadOnCloseSubscriptionModal( data.url );
96	return;
97	}
98	} catch {
99	// Ignore any errors.
100	}
101
102	new Image().src =
103	document.location.protocol +
104	'//pixel.wp.com/g.gif?v=wpcom-no-pv&x_jetpack-subscribe-modal-comm=showed&r=' +
105	Math.random();
106
107	modal.classList.toggle( 'open' );
108	hasLoaded = true;
109	redirectUrl = data.url;
110	}
111	}
112
113	window.addEventListener( 'message', JetpackSubscriptionModalOnCommentMessageListener );
114
115	if ( close ) {
116	close.onclick = function ( event ) {
117	event.preventDefault();
118	modal.classList.toggle( 'open' );
119	reloadOnCloseSubscriptionModal();
120	};
121	}
122
123	window.onclick = function ( event ) {
124	if ( event.target === modal ) {
125	modal.style.display = 'none';
126	reloadOnCloseSubscriptionModal();
127	}
128	};
129
130	window.addEventListener( 'load', () => {
131	// Scroll to the last comment.
132	const subscriptionScroll = localStorage.getItem(
133	'jetpack-subscription-modal-on-comment-scroll-to'
134	);
135
136	if ( subscriptionScroll ) {
137	window.location.hash = subscriptionScroll;
138	localStorage.removeItem( 'jetpack-subscription-modal-on-comment-scroll-to' );
139
140	const comment = document.querySelector( subscriptionScroll );
141	if ( comment ) {
142	comment.scrollIntoView( { block: 'center', behavior: 'smooth' } );
143	}
144	}
145	} );
146	} );
147