Use vanilla JS instead of jQuery for the Cookies & Consent widget

Remove 'jquery' as a dependency, and use vanilla JS.
Automattic · Feb 21, 2020 · 94756c6 · 94756c6
1 parent ce86eb8
commit 94756c6
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 28 deletions.
diff --git a/modules/widgets/eu-cookie-law.php b/modules/widgets/eu-cookie-law.php
@@ -105,7 +105,7 @@ function enqueue_frontend_scripts() {
 					'_inc/build/widgets/eu-cookie-law/eu-cookie-law.min.js',
 					'modules/widgets/eu-cookie-law/eu-cookie-law.js'
 				),
-				array( 'jquery' ),
+				array(),
 				'20180522',
 				true
 			);

diff --git a/modules/widgets/eu-cookie-law/eu-cookie-law.js b/modules/widgets/eu-cookie-law/eu-cookie-law.js
@@ -1,44 +1,52 @@
-( function( $ ) {
+( function() {
 	var cookieValue = document.cookie.replace(
 			/(?:(?:^|.*;\s*)eucookielaw\s*\=\s*([^;]*).*$)|^.*$/,
 			'$1'
 		),
-		overlay = $( '#eu-cookie-law' ),
+		overlay = document.getElementById( 'eu-cookie-law' ),
+		widget = document.querySelector( '.widget_eu_cookie_law_widget' ),
+		getScrollTop,
 		initialScrollPosition,
 		scrollFunction;
 
-	if ( overlay.hasClass( 'top' ) ) {
-		$( '.widget_eu_cookie_law_widget' ).addClass( 'top' );
+	/**
+	 * Gets the amount that the window is scrolled.
+	 *
+	 * @return int The distance from the top of the document.
+	 */
+	getScrollTop = function() {
+		return Math.abs( document.body.getBoundingClientRect().y );
+	};
+
+	if ( overlay.classList.contains( 'top' ) ) {
+		widget.classList.add( 'top' );
 	}
 
-	if ( overlay.hasClass( 'ads-active' ) ) {
+	if ( overlay.classList.contains( 'ads-active' ) ) {
 		var adsCookieValue = document.cookie.replace(
 			/(?:(?:^|.*;\s*)personalized-ads-consent\s*\=\s*([^;]*).*$)|^.*$/,
 			'$1'
 		);
 		if ( '' !== cookieValue && '' !== adsCookieValue ) {
-			overlay.remove();
+			overlay.parentNode.removeChild( overlay );
 		}
 	} else if ( '' !== cookieValue ) {
-		overlay.remove();
+		overlay.parentNode.removeChild( overlay );
 	}
 
-	$( '.widget_eu_cookie_law_widget' )
-		.appendTo( 'body' )
-		.fadeIn();
-
-	overlay.find( 'form' ).on( 'submit', accept );
+	document.body.appendChild( widget );
+	overlay.querySelector( 'form' ).addEventListener( 'submit', accept );
 
-	if ( overlay.hasClass( 'hide-on-scroll' ) ) {
-		initialScrollPosition = $( window ).scrollTop();
+	if ( overlay.classList.contains( 'hide-on-scroll' ) ) {
+		initialScrollPosition = getScrollTop();
 		scrollFunction = function() {
-			if ( Math.abs( $( window ).scrollTop() - initialScrollPosition ) > 50 ) {
+			if ( Math.abs( getScrollTop() - initialScrollPosition ) > 50 ) {
 				accept();
 			}
 		};
-		$( window ).on( 'scroll', scrollFunction );
-	} else if ( overlay.hasClass( 'hide-on-time' ) ) {
-		setTimeout( accept, overlay.data( 'hide-timeout' ) * 1000 );
+		window.addEventListener( 'scroll', scrollFunction );
+	} else if ( overlay.classList.contains( 'hide-on-time' ) ) {
+		setTimeout( accept, overlay.getAttribute( 'data-hide-timeout' ) * 1000 );
 	}
 
 	var accepted = false;
@@ -52,29 +60,33 @@
 			event.preventDefault();
 		}
 
-		if ( overlay.hasClass( 'hide-on-scroll' ) ) {
-			$( window ).off( 'scroll', scrollFunction );
+		if ( overlay.classList.contains( 'hide-on-scroll' ) ) {
+			window.removeEventListener( 'scroll', scrollFunction );
 		}
 
 		var expireTime = new Date();
 		expireTime.setTime(
-			expireTime.getTime() + overlay.data( 'consent-expiration' ) * 24 * 60 * 60 * 1000
+			expireTime.getTime() + overlay.getAttribute( 'data-consent-expiration' ) * 24 * 60 * 60 * 1000
 		);
 
 		document.cookie =
 			'eucookielaw=' + expireTime.getTime() + ';path=/;expires=' + expireTime.toGMTString();
-		if ( overlay.hasClass( 'ads-active' ) && overlay.hasClass( 'hide-on-button' ) ) {
+		if (
+			overlay.classList.contains( 'ads-active' ) &&
+			overlay.classList.contains( 'hide-on-button' )
+		) {
 			document.cookie =
 				'personalized-ads-consent=' +
 				expireTime.getTime() +
 				';path=/;expires=' +
 				expireTime.toGMTString();
 		}
 
-		overlay.fadeOut( 400, function() {
-			overlay.remove();
+		overlay.classList.add( 'hide' );
+		setTimeout( function() {
+			overlay.parentNode.removeChild( overlay );
 			var widgetSection = document.querySelector( '.widget.widget_eu_cookie_law_widget' );
 			widgetSection.parentNode.removeChild( widgetSection );
-		} );
+		}, 400 );
 	}
-} )( jQuery );
+} )();
diff --git a/modules/widgets/eu-cookie-law/style.css b/modules/widgets/eu-cookie-law/style.css
@@ -1,7 +1,7 @@
 .widget_eu_cookie_law_widget {
+	animation: fadeIn 800ms;
 	border: none;
 	bottom: 1em;
-	display: none;
 	left: 1em;
 	margin: 0;
 	padding: 0;
@@ -11,6 +11,11 @@
 	z-index: 50001;
 }
 
+@keyframes fadeIn {
+	from { opacity: 0; visibility: hidden; }
+	to { opacity: 1; visibility: visible; }
+}
+
 .widget_eu_cookie_law_widget.widget.top {
 	bottom: auto;
 	top: 1em;
@@ -50,6 +55,12 @@
 	color: #fff;
 }
 
+#eu-cookie-law.hide {
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 400ms, visibility 400ms;
+}
+
 /**
  * Using a highly-specific rule to make sure that certain form styles
  * will be reset