Update Aetna, simplify font size button (#163)

Accompanies https://github.com/pressbooks/pressbooks-book/pull/452.

assets/scripts/routes/common.js

@@ -3,52 +3,53 @@ import * as Cookies from 'js-cookie';
 export default {
 	init() {
 		// JavaScript to be fired on all pages
-		jQuery( $ => {
+		// JavaScript to be fired on all pages
-			$( 'body' )
+		document.body.classList.remove( 'no-js' );
-				.removeClass( 'no-js' )
+		document.body.classList.add( 'js' );
-				.addClass( 'js' );
+
-			$( document ).ready( function () {
+		// Font Size handler
-				// Fontsize handler
+		( function () {
+			const fontSizeButton = document.querySelector( '.a11y-fontsize' );
+
 			if ( Cookies.get( 'a11y-root-larger-fontsize' ) === '1' ) {
-					$( 'html' ).addClass( 'fontsize' );
+				document.documentElement.classList.add( 'fontsize' );
-					$( '#is_normal_fontsize' )
+				fontSizeButton.setAttribute( 'aria-pressed', true );
-						.attr( 'id', 'is_large_fontsize' )
+				fontSizeButton.textContent = pressbooksBook.decrease_label;
-						.attr( 'aria-checked', true )
-						.addClass( 'active' )
-						.text( PB_A11y.decrease_label )
-						.attr( 'title', PB_A11y.decrease_label );
 			}
 
-				$( '.toggle-fontsize' ).on( 'click', function () {
+			fontSizeButton.onclick = () => {
-					if ( $( this ).attr( 'id' ) === 'is_normal_fontsize' ) {
+				// Cast the state as a boolean
-						$( 'html' ).addClass( 'fontsize' );
+				let pressed = fontSizeButton.getAttribute( 'aria-pressed' ) === 'true' || false;
-						$( this )
+
-							.attr( 'id', 'is_large_fontsize' )
+				// Switch the state
-							.attr( 'aria-checked', true )
+				fontSizeButton.setAttribute( 'aria-pressed', ! pressed );
-							.addClass( 'active' )
+
-							.text( PB_A11y.decrease_label )
+				if ( ! pressed ) {
-							.attr( 'title', PB_A11y.decrease_label );
+					document.documentElement.classList.add( 'fontsize' );
+					fontSizeButton.setAttribute( 'title', pressbooksBook.decrease_label );
+					fontSizeButton.textContent = pressbooksBook.decrease_label;
+					document.querySelector( '.nav-reading' ).setAttribute( 'style', '' );
 					Cookies.set( 'a11y-root-larger-fontsize', '1', {
 						expires: 365,
 						path: '/',
 					} );
 					return false;
 				} else {
-						$( 'html' ).removeClass( 'fontsize' );
+					document.documentElement.classList.remove( 'fontsize' );
-						$( this )
+					fontSizeButton.setAttribute( 'title', pressbooksBook.increase_label );
-							.attr( 'id', 'is_normal_fontsize' )
+					fontSizeButton.textContent = pressbooksBook.increase_label;
-							.removeAttr( 'aria-checked' )
+					document.querySelector( '.nav-reading' ).setAttribute( 'style', '' );
-							.removeClass( 'active' )
-							.text( PB_A11y.increase_label )
-							.attr( 'title', PB_A11y.increase_label );
 					Cookies.set( 'a11y-root-larger-fontsize', '0', {
 						expires: 365,
 						path: '/',
 					} );
 					return false;
 				}
-				} );
+			};
+		} )();
 
+		jQuery( $ => {
+			$( document ).ready( function () {
 				// Sets a -1 tabindex to ALL sections for .focus()-ing
 				let sections = document.getElementsByTagName( 'section' );
 				for ( let i = 0, max = sections.length; i < max; i++ ) {

dist/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/scripts/aldine.js": "/scripts/aldine.js?id=ee02a6da7afbb08e2da2",
+    "/scripts/aldine.js": "/scripts/aldine.js?id=9c733367c69402ea3d31",
-    "/styles/aldine.css": "/styles/aldine.css?id=1f8a15821c0738b3ffab",
+    "/styles/aldine.css": "/styles/aldine.css?id=6a420921e1b3f0f42695",
     "/styles/editor.css": "/styles/editor.css?id=c45cb52a8c16b5642bf6",
     "/scripts/call-to-action.js": "/scripts/call-to-action.js?id=14b2ac09b5fc52660522",
     "/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=4f9c16093cec65a0274f",

package.json

@@ -66,7 +66,7 @@
 		"vue-template-compiler": "^2.5.21"
 	},
 	"dependencies": {
-		"aetna": "^1.0.0-alpha.21",
+		"aetna": "^1.0.0-alpha.22",
 		"isotope-layout": "^3.0.6",
 		"jquery-bridget": "^2.0.1",
 		"js-cookie": "^2.2.0",

partials/content-accessibility-toolbar.php

@@ -1,13 +1,7 @@
 <!-- a11y toolbar -->
 <div class="a11y-toolbar">
-	<div class="wrap">
+	<button class="a11y-fontsize" aria-pressed="false">
-	  <ul>
-			<li>
-				<a href="#" role="button" class="a11y-toggle-fontsize toggle-fontsize" id="is_normal_fontsize" title="<?php _e( 'Increase Font Size', 'pressbooks-aldine' ); ?>">
 		<?php _e( 'Increase Font Size', 'pressbooks-aldine' ); ?>
-				</a>
+	</button>
-			</li>
-		</ul>
-	</div>
 </div>
 <!-- // a11y toolbar -->