diff --git a/src/wp-content/themes/twentyfifteen/css/view-transitions.css b/src/wp-content/themes/twentyfifteen/css/view-transitions.css new file mode 100644 index 0000000000000..8f778e466b6b1 --- /dev/null +++ b/src/wp-content/themes/twentyfifteen/css/view-transitions.css @@ -0,0 +1,3 @@ +@view-transition { + navigation: auto; +} diff --git a/src/wp-content/themes/twentyfifteen/functions.php b/src/wp-content/themes/twentyfifteen/functions.php index 903dddc1f1908..dffbe76d3aefe 100644 --- a/src/wp-content/themes/twentyfifteen/functions.php +++ b/src/wp-content/themes/twentyfifteen/functions.php @@ -474,6 +474,21 @@ function twentyfifteen_scripts() { 'collapse' => '' . __( 'collapse child menu', 'twentyfifteen' ) . '', ) ); + + wp_enqueue_style( + 'twentyfifteen-view-transitions', + get_template_directory_uri() . '/css/view-transitions.css', + array(), + '20250115' + ); + + // This script must be loaded prior to rendering, i.e. not in the footer and not deferred or async. + wp_enqueue_script( + 'twentyfifteen-view-transitions', + get_template_directory_uri() . '/js/view-transitions.js', + array(), + '20250115' + ); } add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' ); diff --git a/src/wp-content/themes/twentyfifteen/js/view-transitions.js b/src/wp-content/themes/twentyfifteen/js/view-transitions.js new file mode 100644 index 0000000000000..20232853b5f1d --- /dev/null +++ b/src/wp-content/themes/twentyfifteen/js/view-transitions.js @@ -0,0 +1,87 @@ +if ( !! window.navigation && 'CSSViewTransitionRule' in window ) { + const setTemporaryViewTransitionNames = async ( entries, vtPromise ) => { + for ( const [ element, name ] of entries ) { + if ( ! element ) { + continue; + } + element.style.viewTransitionName = name; + } + + await vtPromise; + + for ( const [ element, _ ] of entries ) { + if ( ! element ) { + continue; + } + element.style.viewTransitionName = ''; + } + }; + + window.addEventListener( 'pageswap', ( e ) => { + if ( e.viewTransition ) { + if ( document.body.classList.contains( 'single' ) ) { + const article = document.querySelectorAll( 'article.post' ); + if ( article.length !== 1 ) { + return; + } + + setTemporaryViewTransitionNames( [ + [ article[ 0 ].querySelector( '.entry-title' ), 'post-title' ], + [ article[ 0 ].querySelector( '.post-thumbnail' ), 'post-thumbnail' ], + ], e.viewTransition.finished ); + } else if ( document.body.classList.contains( 'home' ) || document.body.classList.contains( 'archive' ) ) { + const articleLink = document.querySelector( 'article.post a[href="' + e.activation.entry.url + '"]' ); + if ( ! articleLink ) { + return; + } + + const article = articleLink.closest( 'article.post' ); + if ( ! article ) { + return; + } + + setTemporaryViewTransitionNames( [ + [ article.querySelector( '.entry-title' ), 'post-title' ], + [ article.querySelector( '.post-thumbnail' ), 'post-thumbnail' ], + ], e.viewTransition.finished ); + } + } + } ); + + window.addEventListener( 'pagereveal', ( e ) => { + if ( ! window.navigation.activation.from ) { + return; + } + + if ( e.viewTransition ) { + if ( document.body.classList.contains( 'single' ) ) { + const article = document.querySelectorAll( 'article.post' ); + if ( article.length !== 1 ) { + return; + } + + setTemporaryViewTransitionNames( [ + [ article[ 0 ].querySelector( '.entry-title' ), 'post-title' ], + [ article[ 0 ].querySelector( '.post-thumbnail' ), 'post-thumbnail' ], + ], e.viewTransition.ready ); + } else if ( document.body.classList.contains( 'home' ) || document.body.classList.contains( 'archive' ) ) { + const articleLink = document.querySelector( 'article.post a[href="' + window.navigation.activation.from.url + '"]' ); + if ( ! articleLink ) { + return; + } + + const article = articleLink.closest( 'article.post' ); + if ( ! article ) { + return; + } + + setTemporaryViewTransitionNames( [ + [ article.querySelector( '.entry-title' ), 'post-title' ], + [ article.querySelector( '.post-thumbnail' ), 'post-thumbnail' ], + ], e.viewTransition.ready ); + } + } + } ); +} else { + window.console.warn( 'View transitions not loaded as the browser is lacking support.' ); +}