Skip to content

Populate Pantheon HUD menu with an AJAX request on hover#55

Merged
danielbachhuber merged 4 commits intomasterfrom
18-admin-ajax
Mar 11, 2020
Merged

Populate Pantheon HUD menu with an AJAX request on hover#55
danielbachhuber merged 4 commits intomasterfrom
18-admin-ajax

Conversation

@danielbachhuber
Copy link
Copy Markdown
Contributor

Fixes #18

pantheonhud

If you'd like to test it locally, drop this code snippet into a mu-plugin to mock a bunch of data:

$_ENV['PANTHEON_ENVIRONMENT'] = 'dev';
$_ENV['PANTHEON_SITE']        = '73cae74a-b66e-440a-ad3b-4f0679eb5e97';
$_ENV['PANTHEON_SITE_NAME']   = 'daniel-pantheon';
$_ENV['php_version']          = '7.3';
define( 'PANTHEON_HUD_PHPUNIT_RUNNING', true );

add_filter(
	'pre_http_request',
	function( $response, $request, $url ) {
		$data_files = [
			'/sites/self/environments/dev/domains'  => 'domains.json',
			'/sites/self/environments/dev/settings' => 'environment-settings.json',
		];
		$path       = wp_parse_url( $url, PHP_URL_PATH );
		if ( ! isset( $data_files[ $path ] ) ) {
			return $response;
		}
		return array(
			'headers'  => array(
				'date'            => 'Thu, 14 Jan 2016 13:46:02 GMT',
				'content-type'    => 'application/json',
				'x-pantheon-host' => 'yggdrasil4ead8a2d.chios.panth.io',
				'server'          => 'TwistedWeb/12.2.0',
			),
			'body'     => file_get_contents( WP_PLUGIN_DIR . '/pantheon-hud/tests/phpunit/data/' . $data_files[ $path ] ), // phpcs:ignore WordPress.WP.AlternativeFunctions
			'response' => array(
				'code'    => 200,
				'message' => 'OK',
			),
			'cookies'  => array(),
			'filename' => null,
		);
	},
	10,
	3
);

@sugaroverflow
Copy link
Copy Markdown

sugaroverflow commented Feb 15, 2020

Hi @danielbachhuber, is there an existing multidev site that I can test and verify this works? Or do I need to create my own wp site and install the plugin :D (first time testing something like this) thank you!

Comment thread inc/class-toolbar.php Outdated
Comment on lines +161 to +168
jQuery('#wp-admin-bar-pantheon-hud').on('hover', function() {
if (jQuery('#wp-admin-bar-pantheon-hud-wp-admin-loading').length) {
jQuery.get('{$request_url}', function(data) {
jQuery('#wp-admin-bar-pantheon-hud .ab-sub-wrapper').html(data);
});
}
});
EOT;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This presumes that jQuery is on the page, but this is not necessarily the case. In fact, Twenty Nineteen and Twenty Twenty don't use jQuery at all and so it is not enqueued on the page. Core recently improved its handling of the admin bar when jQuery is not present: https://core.trac.wordpress.org/ticket/47069

So this needs to be rewritten to use vanilla JS.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@westonruter Great suggestion! updated with 5305ce1

Comment thread inc/class-toolbar.php
Comment thread inc/class-toolbar.php Outdated
admin_url( 'admin-ajax.php' )
);
$script = <<<EOT
jQuery('#wp-admin-bar-pantheon-hud').on('hover', function() {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, this needs to take into account keyboard navigation (e.g. it should trigger on focus as well).

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Included with 5305ce1

danielbachhuber and others added 2 commits February 24, 2020 14:00
Co-Authored-By: Weston Ruter <westonruter@google.com>
@danielbachhuber
Copy link
Copy Markdown
Contributor Author

Hi @danielbachhuber, is there an existing multidev site that I can test and verify this works? Or do I need to create my own wp site and install the plugin :D (first time testing something like this) thank you!

@sugaroverflow Sorry for the late reply here. I wanted to address @westonruter's comments before you checked the changes out.

The plugin isn't auto-deployed to a multidev environment right now. You should be able to install it on any old Pantheon WordPress site though.

Copy link
Copy Markdown

@sugaroverflow sugaroverflow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @danielbachhuber for showing me how to test this on a Wordpress site - super appreciated! I was able to get this working, the code looks good to me, and @westonruter also did a code review - so this sounds good to go 🎉 👍

Screen Shot 2020-03-10 at 3 11 42 PM

@danielbachhuber danielbachhuber merged commit 96510b0 into master Mar 11, 2020
@danielbachhuber
Copy link
Copy Markdown
Contributor Author

Thanks @sugaroverflow !

@szepeviktor
Copy link
Copy Markdown
Contributor

Highly effective!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

API calls slowing down the backend

4 participants