Interactive elements

danzhik · July 23, 2018, 8:49am

Good day guys!

Currently I am developing new child theme based on McLoohan theme and I have started to face some problems with front-end interactive elements. I am trying to add couple of elements in chapter web-pages with dropdown ability, but looks like I do not finally understand the way it is supposed to be done using PB stock functionality. I tried to reach this approach by means of ‘.dropdown’ class and following the same elements structure like it is done with sidebar table of contents, but the actual behaviour is not working as it is supposed to be.

I tried to allocate JS listeners or CSS interactivity for dropdown elements in McLoohan theme files, but I did not have much success Could You please briefly give some hints about better ways to do it using your plugin/theme code. I can do it with my own code snippets somehow, but I really would like to have a consistent design and behaviour with your theme.

Thanks a lot in advance!

ned · July 25, 2018, 11:52am

This is the code that creates dropdowns:

github.com

pressbooks/pressbooks-book/blob/dev/assets/src/scripts/routes/common.js#L78-L113




		// Header navigation
		( function () {
			const navToggle = document.querySelector( '.js-header-nav-toggle' );
			navToggle.addEventListener( 'click', function ( event ) {
				event.preventDefault();
				document.querySelector( '.header__nav' ).classList.toggle( 'header__nav--active' );
			} );
		} )();


		( function () {
			// Get all the <h3> headings
			const headings = document.querySelectorAll(
				'.dropdown > p, .dropdown > h3'
			);


			Array.prototype.forEach.call( headings, heading => {
				// Give each <h3> a toggle button child
				heading.innerHTML = `
				<button type="button" aria-expanded="false">

This file has been truncated. show original

It’s based on Heydon Pickering’s article on collapsible sections: https://inclusive-components.design/collapsible-sections/

Basically you need to just use the following markup and the built-in CSS/JS will turn it into a dropdown:

<div class="dropdown">
  <p>Dropdown Title</p>
  <ul>
    <li class="dropdown-item"><a href="#">Item One</a></li>
    <li class="dropdown-item"><a href="#">Item Two</a></li>
    <li class="dropdown-item"><a href="#">Item Three</a></li>
  </ul>
</div>

You can see an example of this here:

github.com

pressbooks/pressbooks-book/blob/dev/partials/content-cover-book-header.php#L34-L66


					}
					?>
				</div>
				<?php
}


			/**
			 * @author Brad Payne <brad@bradpayne.ca>
			 * @copyright 2014 Brad Payne
			 * @since 1.6.0
			 */


			$files = \Pressbooks\Utility\latest_exports();


			$site_option = get_site_option( 'pressbooks_sharingandprivacy_options', [ 'allow_redistribution' => 0 ] );
			$option      = get_option( 'pbt_redistribute_settings', [ 'latest_files_public' => 0 ] );
if ( ! empty( $files ) && ( ! empty( $site_option['allow_redistribution'] ) ) && ( ! empty( $option['latest_files_public'] ) ) ) {
	?>
				<div class="book-header__cover__downloads dropdown">

This file has been truncated. show original

Hope this helps.

danzhik · July 25, 2018, 12:44pm

@ned, thank you a lot! I’m sure it will save plenty of my time!