← All changes | modules/comments/subscription-modal-on-comment/subscription-modal.js +46 -75 13.0.2 → 16.3-beta View file →

		@@ -1,4 +1,5 @@
	1	+/* global subscriptionData */
1	2	document.addEventListener( 'DOMContentLoaded', function () {
2	3	const modal = document.getElementsByClassName( 'jetpack-subscription-modal' )[ 0 ];
3	4
4	5	if ( ! modal ) {
		@@ -5,12 +6,10 @@
5	6	return;
6	7	}
7	8
8	9	const close = document.getElementsByClassName( 'jetpack-subscription-modal__close' )[ 0 ];
9		- const subscribeForms = document.querySelectorAll( '.jetpack-subscription-modal__form' );
10	10
11	11	let redirectUrl = '';
12		- let subscriptionData = '';
13	12	let hasLoaded = false;
14	13
15	14	function reloadOnCloseSubscriptionModal( customUrl ) {
16	15	const destinationUrl = customUrl ? new URL( customUrl ) : new URL( redirectUrl );
		@@ -19,48 +18,20 @@
19	18	if ( destinationUrl.hostname !== window.location.hostname ) {
20	19	return;
21	20	}
22	21
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		- }
	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.
38	29	}
39		- }
40	30
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 );
	31	+ // Add cache-busting parameter
	32	+ destinationUrl.searchParams.set( '_ctn', Date.now() );
	33	+ window.location.href = destinationUrl.toString();
63	34	}
64	35
65	36	function JetpackSubscriptionModalOnCommentMessageListener( event ) {
66	37	let message = event && event.data;
		@@ -66,9 +37,9 @@
66	37	let message = event && event.data;
67	38	if ( typeof message === 'string' ) {
68	39	try {
69	40	message = JSON.parse( message );
70		- } catch ( err ) {
	41	+ } catch {
71	42	return;
72	43	}
73	44	}
74	45
		@@ -78,35 +49,55 @@
78	49	if ( type !== 'subscriptionModalShow' || typeof data.url === 'undefined' ) {
79	50	return;
80	51	}
81	52
82		- if ( ! event.origin.includes( window.location.host ) ) {
	53	+ if ( subscriptionData.homeUrl !== event.origin ) {
83	54	return;
84	55	}
85	56
86	57	if ( data.email ) {
87		- const emailInput = document.querySelector( '.jetpack-subscription-modal__form-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	+
88	74	emailInput.value = data.email;
89	75	if ( data.is_logged_in ) {
90	76	emailInput.setAttribute( 'readonly', 'readonly' );
	77	+ appSource.value = 'atomic-subscription-modal-li';
91	78	}
92	79	}
93	80
94	81	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 );
	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 );
100	88
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();
	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();
106	94
107		- reloadOnCloseSubscriptionModal( data.url );
108		- return;
	95	+ reloadOnCloseSubscriptionModal( data.url );
	96	+ return;
	97	+ }
	98	+ } catch {
	99	+ // Ignore any errors.
109	100	}
110	101
111	102	new Image().src =
112	103	document.location.protocol +
		@@ -115,10 +106,8 @@
115	106
116	107	modal.classList.toggle( 'open' );
117	108	hasLoaded = true;
118	109	redirectUrl = data.url;
119		- subscriptionData = data;
120		- return;
121	110	}
122	111	}
123	112
124	113	window.addEventListener( 'message', JetpackSubscriptionModalOnCommentMessageListener );
		@@ -129,26 +118,8 @@
129	118	modal.classList.toggle( 'open' );
130	119	reloadOnCloseSubscriptionModal();
131	120	};
132	121	}
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	122
152	123	window.onclick = function ( event ) {
153	124	if ( event.target === modal ) {
154	125	modal.style.display = 'none';