Eliminate no-global-event-listener ESLint warnings

assets/src/amp-validation/amp-validated-url-post-edit-screen.js

@@ -46,11 +46,11 @@ const addBeforeUnloadPrompt = () => {
 	if ( beforeUnloadPromptAdded ) {
 		return;
 	}
-	window.addEventListener( 'beforeunload', onBeforeUnload );
+	global.addEventListener( 'beforeunload', onBeforeUnload );
 
 	// Remove prompt when clicking trash or update.
 	document.querySelector( '#major-publishing-actions' ).addEventListener( 'click', () => {
-		window.removeEventListener( 'beforeunload', onBeforeUnload );
+		global.removeEventListener( 'beforeunload', onBeforeUnload );
 	} );
 
 	beforeUnloadPromptAdded = true;

assets/src/amp-validation/amp-validation-single-error-url-details.js

@@ -144,7 +144,7 @@ class ErrorRows {
 			} );
 		};
 
-		window.addEventListener( 'click', ( event ) => {
+		global.addEventListener( 'click', ( event ) => {
 			if ( toggleButtons.includes( event.target ) ) {
 				onButtonClick( event.target );
 			}

assets/src/components/unsaved-changes-warning/index.js

@@ -20,9 +20,10 @@ import { Options } from '../options-context-provider';
  *
  * @param {Object} props Component props.
  * @param {boolean} props.excludeUserContext Whether to exclude listening to user context.
+ * @param {Element} props.appRoot React app root.
  * @return {null} Renders nothing.
  */
-export function UnsavedChangesWarning( { excludeUserContext = false } ) {
+export function UnsavedChangesWarning( { excludeUserContext = false, appRoot } ) {
 	const { hasOptionsChanges, didSaveOptions } = useContext( Options );
 	const [ userState, setUserState ] = useState( { hasDeveloperToolsOptionChange: false, didSaveDeveloperToolsOption: true } );
 
@@ -36,19 +37,20 @@ export function UnsavedChangesWarning( { excludeUserContext = false } ) {
 				return null;
 			};
 
-			window.addEventListener( 'beforeunload', warnIfUnsavedChanges );
+			appRoot.ownerDocument.addEventListener( 'beforeunload', warnIfUnsavedChanges );
 
 			return () => {
-				window.removeEventListener( 'beforeunload', warnIfUnsavedChanges );
+				appRoot.ownerDocument.removeEventListener( 'beforeunload', warnIfUnsavedChanges );
 			};
 		}
 
 		return () => undefined;
-	}, [ hasOptionsChanges, didSaveOptions, hasDeveloperToolsOptionChange, didSaveDeveloperToolsOption ] );
+	}, [ appRoot, hasOptionsChanges, didSaveOptions, hasDeveloperToolsOptionChange, didSaveDeveloperToolsOption ] );
 
 	return excludeUserContext ? null : <WithUserContext setUserState={ setUserState } />;
 }
 UnsavedChangesWarning.propTypes = {
+	appRoot: PropTypes.instanceOf( global.Element ),
 	excludeUserContext: PropTypes.bool,
 };
 

assets/src/mobile-redirection.js

@@ -24,7 +24,7 @@
 		return;
 	}
 
-	document.addEventListener( 'DOMContentLoaded', () => {
+	global.addEventListener( 'DOMContentLoaded', () => {
 		// Show the mobile version switcher link once the DOM has loaded.
 		const siteVersionSwitcher = document.getElementById( 'amp-mobile-version-switcher' );
 		if ( ! siteVersionSwitcher ) {

assets/src/onboarding-wizard/index.js

@@ -94,7 +94,7 @@ domReady( () => {
 		render(
 
 			<Providers>
-				<SetupWizard closeLink={ CLOSE_LINK } finishLink={ FINISH_LINK } />
+				<SetupWizard closeLink={ CLOSE_LINK } finishLink={ FINISH_LINK } appRoot={ root } />
 			</Providers>,
 			root,
 		);

assets/src/onboarding-wizard/setup-wizard.js

@@ -41,8 +41,9 @@ function PageComponentSideEffects( { children } ) {
  * @param {Object} props Component props.
  * @param {string} props.closeLink Link to return to previous user location.
  * @param {string} props.finishLink Exit link.
+ * @param {Element} props.appRoot App root element.
  */
-export function SetupWizard( { closeLink, finishLink } ) {
+export function SetupWizard( { closeLink, finishLink, appRoot } ) {
 	const { isMobile } = useWindowWidth();
 	const { activePageIndex, currentPage: { title, PageComponent, showTitle }, moveBack, moveForward, pages } = useContext( Navigation );
 
@@ -98,12 +99,13 @@ export function SetupWizard( { closeLink, finishLink } ) {
 					/>
 				</div>
 			</div>
-			<UnsavedChangesWarning />
+			<UnsavedChangesWarning appRoot={ appRoot } />
 		</div>
 	);
 }
 
 SetupWizard.propTypes = {
 	closeLink: PropTypes.string.isRequired,
 	finishLink: PropTypes.string.isRequired,
+	appRoot: PropTypes.instanceOf( global.Element ),
 };

assets/src/settings-page/index.js

@@ -92,8 +92,11 @@ function scrollFocusedSectionIntoView( focusedSectionId ) {
 
 /**
  * Settings page application root.
+ *
+ * @param {Object} props
+ * @param {Element} props.appRoot App root.
  */
-function Root() {
+function Root( { appRoot } ) {
 	const [ focusedSection, setFocusedSection ] = useState( global.location.hash.replace( /^#/, '' ) );
 
 	const { fetchingOptions, saveOptions } = useContext( Options );
@@ -187,10 +190,13 @@ function Root() {
 				</AMPDrawer>
 				<SettingsFooter />
 			</form>
-			<UnsavedChangesWarning excludeUserContext={ true } />
+			<UnsavedChangesWarning excludeUserContext={ true } appRoot={ appRoot } />
 		</>
 	);
 }
+Root.propTypes = {
+	appRoot: PropTypes.instanceOf( global.Element ),
+};
 
 domReady( () => {
 	const root = document.getElementById( 'amp-settings-root' );
@@ -199,7 +205,7 @@ domReady( () => {
 		render( (
 			<ErrorContextProvider>
 				<Providers>
-					<Root />
+					<Root appRoot={ root } />
 				</Providers>
 			</ErrorContextProvider>
 		), root );

assets/src/utils/use-window-width.js

@@ -29,10 +29,10 @@ export function useWindowWidth( args = {} ) {
 			setWidth( window.innerWidth );
 		};
 
-		window.addEventListener( 'resize', resizeCallback, { passive: true } );
+		global.addEventListener( 'resize', resizeCallback, { passive: true } );
 
 		return () => {
-			window.removeEventListener( 'resize', resizeCallback );
+			global.removeEventListener( 'resize', resizeCallback );
 		};
 	}, [] );