Add show/hide buttons to cover TOC (fix #146) (#161)

pressbooks · Mar 26, 2018 · 8e9b505 · 8e9b505
1 parent b6ef40d
commit 8e9b505
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 24 deletions.
diff --git a/assets/src/scripts/routes/home.js b/assets/src/scripts/routes/home.js
@@ -1,29 +1,43 @@
 export default {
 	init() {
 		jQuery( $ => {
-			// $( document.body ).on( 'click', function ( e ) {
-			// 	let $target = $( e.target );
-			// 	if ( $target.is( '[data-toggle=dropdown]' ) ) {
-			// 		return;
-			// 	}
-
-			// 	$( '.dropdown-menu.show' ).each( function () {
-			// 		let $dropdown = $( this );
-			// 		$dropdown.removeClass( 'show' );
-			// 	} );
-			// } );
-
-			// $( document.body ).on( 'click', '[data-toggle=dropdown]', function ( e ) {
-			// 	let $target = $( this );
-			// 	let $dropdown = $target.parent( '.dropdown' ).find( '.dropdown-menu' );
-			// 	$dropdown.toggleClass( 'show' );
-			// } );
-
 			$( document.body ).on( 'click', '.js-toggle-block', function ( e ) {
 				let $target = $( this );
 				$target.parents( '.js-block' ).toggleClass( 'block-toggle--visible' );
 				$target.toggleClass( '--visible' );
 			} );
+
+			$( document.body ).on( 'click', '.toc__toggle #show', function ( e ) {
+				let $target = $( this );
+				let $dropdowns = $( '.toc__list .dropdown' );
+				$dropdowns.each( function ( el ) {
+					$( this )
+						.find( 'button' )
+						.attr( 'aria-expanded', 'true' );
+					$( this )
+						.find(
+							'h3 + .inner-content, .toc__front-matter-list, .toc__back-matter-list'
+						)
+						.removeAttr( 'hidden' );
+				} );
+				$target.parents( '.toc__toggle' ).attr( 'aria-expanded', 'true' );
+			} );
+
+			$( document.body ).on( 'click', '.toc__toggle #hide', function ( e ) {
+				let $target = $( this );
+				let $dropdowns = $( '.toc__list .dropdown' );
+				$dropdowns.each( function ( el ) {
+					$( this )
+						.find( 'button' )
+						.attr( 'aria-expanded', 'false' );
+					$( this )
+						.find(
+							'h3 + .inner-content, .toc__front-matter-list, .toc__back-matter-list'
+						)
+						.attr( 'hidden', 'true' );
+				} );
+				$target.parents( '.toc__toggle' ).attr( 'aria-expanded', 'false' );
+			} );
 		} );
 	},
 	finalize() {

diff --git a/assets/src/styles/components/_toc.scss b/assets/src/styles/components/_toc.scss
@@ -263,3 +263,25 @@ ol.toc__chapters {
     }
   }
 }
+
+
+.toc__toggle {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+.toc__toggle[aria-expanded="false"] #hide {
+  display: none;
+}
+
+.toc__toggle[aria-expanded="false"] #show {
+  display: inline-block;
+}
+
+.toc__toggle[aria-expanded="true"] #hide {
+  display: inline-block;
+}
+
+.toc__toggle[aria-expanded="true"] #show {
+  display: none;
+}
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/scripts/book.js": "/scripts/book.js?id=b6f58c3abcbb9a472fe6",
-    "/styles/book.css": "/styles/book.css?id=f1d0be60ef7a0c43d6b4",
+    "/scripts/book.js": "/scripts/book.js?id=48a288842a7ea7a4a89b",
+    "/styles/book.css": "/styles/book.css?id=c248aa0123445b327332",
     "/scripts/sharer.js": "/scripts/sharer.js?id=b257fe1ee31a1838f343"
 }
diff --git a/dist/scripts/book.js b/dist/scripts/book.js
diff --git a/dist/styles/book.css b/dist/styles/book.css
diff --git a/partials/content-cover-toc.php b/partials/content-cover-toc.php
@@ -1,8 +1,12 @@
 <section class="block block-toc">
 	<?php if ( pb_get_first_post_id() ) : ?>
 		<h2 class="block__title block-toc__title"><?php _e( 'Contents', 'pressbooks-book' ); ?></h2><?php
-		include( locate_template( 'partials/content-toc.php' ) );
-	endif;
+		include( locate_template( 'partials/content-toc.php' ) ); ?>
+		<div class="toc__toggle" aria-expanded="false">
+			<button id="show" class="button"><?php _e( 'Show All Contents' ); ?></button>
+			<button id="hide" class="button"><?php _e( 'Hide All Contents' ); ?></button>
+		</div>
+	<?php endif;
 	/**
 	 * Append content to cover table of contents block.
 	 *