Karuna: remove jQuery (#7088)

Automattic · Jul 7, 2023 · 7091047 · 7091047
1 parent 1ac01c4
commit 7091047
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 29 deletions.
diff --git a/karuna/assets/js/functions.js b/karuna/assets/js/functions.js
@@ -2,40 +2,52 @@
  * Handles sticky header
  */
 
-( function( $ ) {
+( function () {
+ 'use strict';
 
- var stickyHeader  = $( '.sticky-wrapper' );
- var topBar  = $( '.top-bar' );
- var stickyHeaderOffset = topBar.outerHeight();
- var body = $( 'body' );
- var windowWidth;
+ var stickyHeader = document.querySelector( '.sticky-wrapper' );
+ var topBar = document.querySelector( '.top-bar' );
+ var stickyHeaderOffset = parseFloat(
+  ( getComputedStyle( topBar ).height || '0' ).replace( 'px', '' )
+ );
 
- var stickyTime = function( width ) {
- if( window.pageYOffset >= ( stickyHeaderOffset ) && width >= 1100 ) {
- stickyHeader.addClass( 'sticking' );
+ var nextFrame = null;
 
- var stuckHeader = $( '.sticky-wrapper.sticking' );
- var stickyHeaderHeight = stuckHeader.outerHeight();
+ if ( ! stickyHeader || ! topBar ) {
+ return;
+ }
+
+ function stickyTime() {
+ var windowWidth = document.documentElement.clientWidth;
+
+ if ( window.pageYOffset >= stickyHeaderOffset && windowWidth >= 1100 ) {
+ stickyHeader.classList.add( 'sticking' );
 
- body.css( 'padding-top', stickyHeaderHeight );
- topBar.css( 'visibility', 'hidden' );
+ var stuckHeader = document.querySelector( '.sticky-wrapper.sticking' );
+ var stickyHeaderHeight = getComputedStyle( stuckHeader ).height;
+
+ document.body.style.paddingTop = stickyHeaderHeight;
+ topBar.style.visibility = 'hidden';
  } else {
- stickyHeader.removeClass( 'sticking' );
- body.removeAttr( 'style' );
- topBar.removeAttr( 'style' );
+ stickyHeader.classList.remove( 'sticking' );
+ document.body.removeAttribute( 'style' );
+ topBar.removeAttribute( 'style' );
  }
+
+ nextFrame = null;
  }
 
- // Functions to fire on window load
- $( window ).load( function() {
-  windowWidth = $( this ).width();
- stickyTime( windowWidth );
- } );
+ if ( document.readyState === 'complete' ) {
+  stickyTime();
+ } else {
+ window.addEventListener( 'load', stickyTime );
+ }
 
- // After scrolling
- $( window ).scroll( function() {
- windowWidth = $( this ).width();
- stickyTime( windowWidth );
+ document.addEventListener( 'scroll', function () {
+ if ( window.requestAnimationFrame ) {
+ nextFrame = nextFrame || requestAnimationFrame( stickyTime );
+ } else {
+ stickyTime();
+ }
  } );
-
-} )( jQuery );
+} )();
diff --git a/karuna/functions.php b/karuna/functions.php
@@ -301,7 +301,7 @@ function karuna_fonts_url() {
 
  /**
  * A filter to enable child themes to add/change/omit font families.
- * 
+ *
  * @param array $font_families An array of font families to be imploded for the Google Font API
  */
  $font_families = apply_filters( 'included_google_font_families', $font_families );
@@ -335,7 +335,7 @@ function karuna_scripts() {
 
  wp_enqueue_script( 'karuna-skip-link-focus-fix', get_template_directory_uri() . '/assets/js/skip-link-focus-fix.js', array(), '20151215', true );
 
- wp_enqueue_script( 'karuna-functions', get_template_directory_uri() . '/assets/js/functions.js', array( 'jquery' ), '20160531', true );
+ wp_enqueue_script( 'karuna-functions', get_template_directory_uri() . '/assets/js/functions.js', array(), '20230519', true );
 
  if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
  wp_enqueue_script( 'comment-reply' );