Karuna: remove jQuery (#7088)

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 );
+} )();

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' );