Use new data-wp-on-window and data-wp-on-document.

WordPress · Mar 8, 2024 · 44e4977 · 44e4977
1 parent 50adcfa
commit 44e4977
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 29 deletions.
diff --git a/src/wp-content/themes/twentytwentyone/assets/js/interactivity.js b/src/wp-content/themes/twentytwentyone/assets/js/interactivity.js
@@ -19,7 +19,6 @@ function checkClass( element, className ) {
 const { state, actions } = store( 'twentytwentyone', {
     state: {
         isPrimaryMenuOpen: false,
-        windowWidth: 0,
         prevScroll: 0,
         isDarkMode: false,
         isDarkModeTogglerHidden: false,
@@ -159,14 +158,6 @@ const { state, actions } = store( 'twentytwentyone', {
             } );
         },
 
-        updateWindowWidthOnResize: () => {
-            // The following may be needed here since we can't use `data-wp-on--resize`?
-            const refreshWidth = () => {
-                state.windowWidth = window.innerWidth;
-            }
-            window.onresize = refreshWidth;
-        },
-
         initDarkMode: () => {
             let isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches;
 
@@ -177,21 +168,6 @@ const { state, actions } = store( 'twentytwentyone', {
             }
 
             state.isDarkMode = isDarkMode;
-
-            // The following may be needed here since we can't use `data-wp-on--scroll`?
-            const checkScroll = () => {
-                const currentScroll = window.scrollY || document.documentElement.scrollTop;
-                if (
-                    currentScroll + ( window.innerHeight * 1.5 ) > document.body.clientHeight ||
-                    currentScroll < state.prevScroll
-                ) {
-                    state.isDarkModeTogglerHidden = false;
-                } else if ( currentScroll > state.prevScroll && 250 < currentScroll ) {
-                    state.isDarkModeTogglerHidden = true;
-                }
-                state.prevScroll = currentScroll;
-            }
-            window.addEventListener( 'scroll', checkScroll );
         },
 
         refreshHtmlElementDarkMode: () => {
@@ -202,5 +178,18 @@ const { state, actions } = store( 'twentytwentyone', {
                 document.documentElement.classList.remove( 'is-dark-theme' );
             }
         },
+
+		refreshDarkModeToggler: () => {
+			const currentScroll = window.scrollY || document.documentElement.scrollTop;
+			if (
+				currentScroll + ( window.innerHeight * 1.5 ) > document.body.clientHeight ||
+				currentScroll < state.prevScroll
+			) {
+				state.isDarkModeTogglerHidden = false;
+			} else if ( currentScroll > state.prevScroll && 250 < currentScroll ) {
+				state.isDarkModeTogglerHidden = true;
+			}
+			state.prevScroll = currentScroll;
+		},
     },
 } );
diff --git a/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php b/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php
@@ -319,9 +319,10 @@ public function the_html( $attrs = array() ) {
 
 		// Extra attributes depending on whether or not the Interactivity API is being used.
 		if ( function_exists( 'wp_register_script_module' ) ) {
-			$defaults['data-wp-on--click']          = 'actions.toggleDarkMode';
-			$defaults['data-wp-bind--aria-pressed'] = 'state.isDarkMode';
-			$defaults['data-wp-class--hide']        = 'state.isDarkModeTogglerHidden';
+			$defaults['data-wp-on--click']           = 'actions.toggleDarkMode';
+			$defaults['data-wp-bind--aria-pressed']  = 'state.isDarkMode';
+			$defaults['data-wp-class--hide']         = 'state.isDarkModeTogglerHidden';
+			$defaults['data-wp-on-document--scroll'] = 'callbacks.refreshDarkModeToggler';
 		} else {
 			$defaults['onClick'] = 'toggleDarkMode()';
 		}

diff --git a/src/wp-content/themes/twentytwentyone/header.php b/src/wp-content/themes/twentytwentyone/header.php
@@ -26,8 +26,8 @@
 	data-wp-class--primary-navigation-open="state.isPrimaryMenuOpen"
 	data-wp-class--lock-scrolling="state.isPrimaryMenuOpen"
 	data-wp-class--is-dark-theme="state.isDarkMode"
-	data-wp-init--iframes="callbacks.updateWindowWidthOnResize"
-	data-wp-watch--iframes="callbacks.makeIframesResponsive"
+	data-wp-init--iframes="callbacks.makeIframesResponsive"
+	data-wp-on-window--resize="callbacks.makeIframesResponsive"
 	data-wp-init--darkmode="callbacks.initDarkMode"
 	data-wp-watch--darkmode="callbacks.refreshHtmlElementDarkMode"
 >