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( $ => {
-			$( 'body' )
-				.removeClass( 'no-js' )
-				.addClass( 'js' );
-			$( document ).ready( function () {
-				// Fontsize handler
-				if ( Cookies.get( 'a11y-root-larger-fontsize' ) === '1' ) {
-					$( 'html' ).addClass( 'fontsize' );
-					$( '#is_normal_fontsize' )
-						.attr( 'id', 'is_large_fontsize' )
-						.attr( 'aria-checked', true )
-						.addClass( 'active' )
-						.text( PB_A11y.decrease_label )
-						.attr( 'title', PB_A11y.decrease_label );
-				}
+		// JavaScript to be fired on all pages
+		document.body.classList.remove( 'no-js' );
+		document.body.classList.add( 'js' );
+
+		// Font Size handler
+		( function () {
+			const fontSizeButton = document.querySelector( '.a11y-fontsize' );
+
+			if ( Cookies.get( 'a11y-root-larger-fontsize' ) === '1' ) {
+				document.documentElement.classList.add( 'fontsize' );
+				fontSizeButton.setAttribute( 'aria-pressed', true );
+				fontSizeButton.textContent = pressbooksBook.decrease_label;
+			}
 
-				$( '.toggle-fontsize' ).on( 'click', function () {
-					if ( $( this ).attr( 'id' ) === 'is_normal_fontsize' ) {
-						$( 'html' ).addClass( 'fontsize' );
-						$( this )
-							.attr( 'id', 'is_large_fontsize' )
-							.attr( 'aria-checked', true )
-							.addClass( 'active' )
-							.text( PB_A11y.decrease_label )
-							.attr( 'title', PB_A11y.decrease_label );
-						Cookies.set( 'a11y-root-larger-fontsize', '1', {
-							expires: 365,
-							path: '/',
-						} );
-						return false;
-					} else {
-						$( 'html' ).removeClass( 'fontsize' );
-						$( this )
-							.attr( 'id', 'is_normal_fontsize' )
-							.removeAttr( 'aria-checked' )
-							.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;
-					}
-				} );
+			fontSizeButton.onclick = () => {
+				// Cast the state as a boolean
+				let pressed = fontSizeButton.getAttribute( 'aria-pressed' ) === 'true' || false;
 
+				// Switch the state
+				fontSizeButton.setAttribute( 'aria-pressed', ! pressed );
+
+				if ( ! pressed ) {
+					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 {
+					document.documentElement.classList.remove( 'fontsize' );
+					fontSizeButton.setAttribute( 'title', pressbooksBook.increase_label );
+					fontSizeButton.textContent = pressbooksBook.increase_label;
+					document.querySelector( '.nav-reading' ).setAttribute( 'style', '' );
+					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",
-    "/styles/aldine.css": "/styles/aldine.css?id=1f8a15821c0738b3ffab",
+    "/scripts/aldine.js": "/scripts/aldine.js?id=9c733367c69402ea3d31",
+    "/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">
-	  <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>
-			</li>
-		</ul>
-	</div>
+	<button class="a11y-fontsize" aria-pressed="false">
+		<?php _e( 'Increase Font Size', 'pressbooks-aldine' ); ?>
+	</button>
 </div>
 <!-- // a11y toolbar -->