Ticket #467: handbook.diff

wp-content/plugins/handbook/handbook.php

@@ -30 +30 @@
                 }
 
                 add_action( 'wp_enqueue_scripts', array( __CLASS__, 'enqueue_styles' ) );
+                add_action( 'wp_enqueue_scripts', array( __CLASS__, 'enqueue_scripts' ) );
         }
 
         static public function enqueue_styles() {
@@ -36 +37 @@
                 wp_enqueue_style( 'wporg-handbook-css', plugins_url( '/stylesheets/callout-boxes.css', __FILE__ ), array(), '20150507' );
         }
 
+        static public function enqueue_scripts() {
+                wp_enqueue_script( 'wporg-handbook', plugins_url( '/scripts/handbook.js', __FILE__ ), array( 'jquery' ), '20150930' );
+        }
+
 }
 
 add_action( 'after_setup_theme', array( 'WPorg_Handbook_Init', 'init' ) );
@@ -235 +240 @@
                 }
         }
 
-}
- No newline at end of file
+}

wp-content/plugins/handbook/scripts/handbook.js

@@ +1 @@
+/**
+ * Enables toggling visibility of all the chapters in the Handbook Chapter widget.
+ *
+ * @since ???
+ */
+var toggleChapters = function () {
+        /**
+         * The Handbook Chapter widget title element.
+         *
+         * @type {NodeList}
+         */
+        var chapterWidgetHeading = document.querySelectorAll( '.widget_wporg_handbook_pages .widgettitle' );
+
+        /*
+         * Bind to the touch and click events to make it useful on both mobile and desktop.
+         * Since 'click' is the last event in the chain, we use preventDefault() to stop the
+         * touch event from continuing and triggering a "ghost click".
+         *
+         * @link http://www.html5rocks.com/en/mobile/touchandmouse/
+         */
+        jQuery( chapterWidgetHeading ).bind( 'touchstart click', function ( e ) {
+                e.preventDefault();
+                jQuery( this ).next( '.menu-table-of-contents-container' ).toggle();
+        } );
+};
+
+// Layout changes the widget at 700px, so we don't want to enable toggling above that.
+// @todo Check on window resize, rather than just on page loading
+jQuery( document ).ready( function() {
+        if ( 700 >= parseInt( jQuery( window ).width(), 10 ) ) {
+                toggleChapters();
+        }
+});
+