Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Mar 11, 2020

Conversation

danielbachhuber
Copy link
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

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 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
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
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

admin_url( 'admin-ajax.php' )
);
$script = <<<EOT
jQuery('#wp-admin-bar-pantheon-hud').on('hover', function() {
Copy link
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
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
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

@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
Contributor Author

Thanks @sugaroverflow !

@szepeviktor
Copy link
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