← All changes | modules/subscriptions/subscribe-modal/subscribe-modal.js +109 -20 12.4.2 → 16.3-a.7 View file →

		@@ -1,34 +1,123 @@
	1	+/* global Jetpack_Subscriptions */
1	2	const { domReady } = wp;
	3	+domReady( () => {
	4	+ const modal = document.querySelector( '.jetpack-subscribe-modal' );
	5	+ const modalDismissedCookie = 'jetpack_post_subscribe_modal_dismissed';
	6	+ const skipUrlParam = 'jetpack_skip_subscription_popup';
2	7
3		-domReady( function () {
4		- const modal = document.getElementsByClassName( 'jetpack-subscribe-modal' )[ 0 ];
5		- const close = document.getElementsByClassName( 'jetpack-subscribe-modal__close' )[ 0 ];
	8	+ function hasEnoughTimePassed() {
	9	+ const lastDismissed = localStorage.getItem( modalDismissedCookie );
	10	+ return lastDismissed ? Date.now() - lastDismissed > Jetpack_Subscriptions.modalInterval : true;
	11	+ }
6	12
7		- if ( ! modal ) {
	13	+ // Subscriber ended up here e.g. from emails:
	14	+ // we won't show the modal to them in future since they most likely are already a subscriber.
	15	+ function skipModal() {
	16	+ const url = new URL( window.location.href );
	17	+ if ( url.searchParams.has( skipUrlParam ) ) {
	18	+ url.searchParams.delete( skipUrlParam );
	19	+ window.history.replaceState( {}, '', url );
	20	+ storeCloseTimestamp();
	21	+ return true;
	22	+ }
	23	+
	24	+ return false;
	25	+ }
	26	+
	27	+ if ( ! modal || ! hasEnoughTimePassed() || skipModal() ) {
8	28	return;
9	29	}
10	30
11		- let hasLoaded = false;
12		- let isScrolling;
	31	+ const modalLoadTimeout = setTimeout( openModal, Jetpack_Subscriptions.modalLoadTime );
13	32
14		- window.onscroll = function () {
15		- window.clearTimeout( isScrolling );
	33	+ const targetElement = (
	34	+ document.querySelector( '.entry-content' ) || document.documentElement
	35	+ ).getBoundingClientRect();
16	36
17		- isScrolling = setTimeout( function () {
18		- if ( ! hasLoaded ) {
19		- modal.classList.toggle( 'open' );
20		- hasLoaded = true;
	37	+ function hasPassedScrollThreshold() {
	38	+ const scrollPosition = window.scrollY + window.innerHeight / 2;
	39	+ const scrollPositionThreshold =
	40	+ targetElement.top +
	41	+ ( targetElement.height * Jetpack_Subscriptions.modalScrollThreshold ) / 100;
	42	+ return scrollPosition > scrollPositionThreshold;
	43	+ }
	44	+
	45	+ function onScroll() {
	46	+ requestAnimationFrame( () => {
	47	+ if ( hasPassedScrollThreshold() ) {
	48	+ openModal();
21	49	}
22		- }, 300 );
23		- };
	50	+ } );
	51	+ }
24	52
25		- close.onclick = function () {
26		- modal.classList.toggle( 'open' );
27		- };
	53	+ window.addEventListener( 'scroll', onScroll, { passive: true } );
28	54
29		- window.onclick = function ( event ) {
	55	+ // This take care of the case where the user has multiple tabs open.
	56	+ function onLocalStorage( event ) {
	57	+ if ( event.key === modalDismissedCookie ) {
	58	+ closeModal();
	59	+ removeEventListeners();
	60	+ }
	61	+ }
	62	+ window.addEventListener( 'storage', onLocalStorage );
	63	+
	64	+ // When the form is submitted, and next modal loads, it'll fire "subscription-modal-loaded" signalling that this form can be hidden.
	65	+ const form = modal.querySelector( 'form' );
	66	+ if ( form ) {
	67	+ form.addEventListener( 'subscription-modal-loaded', closeModal );
	68	+ }
	69	+
	70	+ // User can edit modal, and could remove close link.
	71	+ function onCloseButtonClick( event ) {
	72	+ event.preventDefault();
	73	+ closeModal();
	74	+ }
	75	+ const close = document.getElementsByClassName( 'jetpack-subscribe-modal__close' )[ 0 ];
	76	+ if ( close ) {
	77	+ close.addEventListener( 'click', onCloseButtonClick );
	78	+ }
	79	+
	80	+ function closeOnWindowClick( event ) {
30	81	if ( event.target === modal ) {
31		- modal.style.display = 'none';
	82	+ closeModal();
32	83	}
33		- };
	84	+ }
	85	+
	86	+ function closeModalOnEscapeKeydown( event ) {
	87	+ if ( event.key === 'Escape' ) {
	88	+ closeModal();
	89	+ }
	90	+ }
	91	+
	92	+ function openModal() {
	93	+ // If the user is typing in a form, don't open the modal or has anything else focused.
	94	+ if ( document.activeElement && document.activeElement.tagName !== 'BODY' ) {
	95	+ return;
	96	+ }
	97	+
	98	+ modal.classList.add( 'open' );
	99	+ document.body.classList.add( 'jetpack-subscribe-modal-open' );
	100	+ window.addEventListener( 'keydown', closeModalOnEscapeKeydown );
	101	+ window.addEventListener( 'click', closeOnWindowClick );
	102	+ removeEventListeners();
	103	+ }
	104	+
	105	+ function closeModal() {
	106	+ modal.classList.remove( 'open' );
	107	+ document.body.classList.remove( 'jetpack-subscribe-modal-open' );
	108	+ window.removeEventListener( 'keydown', closeModalOnEscapeKeydown );
	109	+ window.removeEventListener( 'storage', onLocalStorage );
	110	+ window.removeEventListener( 'click', closeOnWindowClick );
	111	+ storeCloseTimestamp();
	112	+ }
	113	+
	114	+ // Remove all event listeners. That would add the modal again.
	115	+ function removeEventListeners() {
	116	+ window.removeEventListener( 'scroll', onScroll );
	117	+ clearTimeout( modalLoadTimeout );
	118	+ }
	119	+
	120	+ function storeCloseTimestamp() {
	121	+ localStorage.setItem( modalDismissedCookie, Date.now() );
	122	+ }
34	123	} );