← All changes | modules/comments/subscription-modal-on-comment/subscription-modal.js +146 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,146 @@
	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	+} );