Inform user on cache clear in admin bar (#257)

pluginkollektiv · Feb 8, 2022 · 2abed98 · 2abed98
1 parent 4457792
commit 2abed98
Show file tree

Hide file tree

Showing 7 changed files with 350 additions and 14 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,21 @@
+{
+  "extends": "plugin:@wordpress/eslint-plugin/es5",
+  "env": {
+    "browser": true,
+    "jquery": true
+  },
+  "globals": {
+    "Raphael": "readonly",
+    "getAnchors": "readonly"
+  },
+  "rules": {
+    "camelcase": 0,
+    "eqeqeq": 0,
+    "no-mixed-operators": 0,
+    "no-redeclare": 0,
+    "no-shadow": 0,
+    "no-unused-expressions": 0,
+    "no-unused-vars": 0,
+    "vars-on-top": 0
+  }
+}
diff --git a/composer.json b/composer.json
@@ -40,7 +40,9 @@
       "@build"
     ],
     "build": [
-      "minifycss css/dashboard.css > css/dashboard.min.css"
+      "minifycss css/dashboard.css > css/dashboard.min.css",
+      "minifycss css/admin-bar-flush.css > css/admin-bar-flush.min.css",
+      "minifyjs js/admin-bar-flush.js > js/admin-bar-flush.min.js"
     ],
     "cs": [
       "@lint-php"
@@ -50,10 +52,14 @@
     ],
     "lint-all": [
       "@lint-php",
-      "@lint-css"
+      "@lint-css",
+      "@lint-js"
     ],
     "lint-css": [
-      "npx stylelint css/dashboard.css"
+      "npx stylelint css/dashboard.css css/admin-bar-flush.css"
+    ],
+    "lint-js": [
+      "npx eslint js/admin-bar-flush.js"
     ],
     "lint-php": [
       "phpcs --standard=phpcs.xml -s"

diff --git a/css/admin-bar-flush.css b/css/admin-bar-flush.css
@@ -0,0 +1,51 @@
+#wp-admin-bar-cachify .animate-pulse {
+	animation: cachify-dash-icon-pulse 2s infinite;
+	animation-timing-function: linear;
+}
+
+#wp-admin-bar-cachify .animate-fade {
+	animation: cachify-dash-icon-fade-in 0.1s;
+	animation-timing-function: linear;
+}
+
+@keyframes cachify-dash-icon-pulse {
+
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.2;
+	}
+}
+
+@keyframes cachify-dash-icon-fade-in {
+
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+#wp-admin-bar-cachify button.ab-item {
+	background: none;
+	border: none;
+	padding: 0 8px 0 7px;
+}
+
+#wp-admin-bar-cachify button.ab-item:hover {
+	cursor: pointer;
+}
+
+#wp-admin-bar-cachify button.ab-item:focus {
+	outline: none;
+}
+
+#wpadminbar #wp-admin-bar-cachify button.ab-item:focus span.ab-label {
+	color: inherit;
+}
+
diff --git a/inc/class-cachify.php b/inc/class-cachify.php
@@ -58,6 +58,14 @@ final class Cachify {
 	const MINIFY_HTML_ONLY = 1;
 	const MINIFY_HTML_JS = 2;
 
+	/**
+	 * REST endpoints
+	 *
+	 * @var    string
+	 */
+	const REST_NAMESPACE = 'cachify/v1';
+	const REST_ROUTE_FLUSH = 'flush';
+
 	/**
 	 * Pseudo constructor
 	 *
@@ -90,9 +98,21 @@ public function __construct() {
 
 		add_action( 'cachify_remove_post_cache', array( __CLASS__, 'remove_page_cache_by_post_id' ) );
 
+		/* Register scripts */
+		add_action( 'init', array( __CLASS__, 'register_scripts' ) );
+
+		/* Register styles */
+		add_action( 'init', array( __CLASS__, 'register_styles' ) );
+
 		/* Flush icon */
 		add_action( 'admin_bar_menu', array( __CLASS__, 'add_flush_icon' ), 90 );
 
+		/* Flush icon script */
+		add_action( 'admin_bar_menu', array( __CLASS__, 'add_flush_icon_script' ), 90 );
+
+		/* Flush REST endpoint */
+		add_action( 'rest_api_init', array( __CLASS__, 'add_flush_rest_endpoint' ) );
+
 		add_action( 'init', array( __CLASS__, 'process_flush_request' ) );
 
 		/* Flush (post) cache if comment is made from frontend or backend */
@@ -313,6 +333,45 @@ private static function _get_blog_ids() {
 		return $wpdb->get_col( "SELECT blog_id FROM `$wpdb->blogs`" );
 	}
 
+	/**
+	 * Register the styles
+	 *
+	 * @since 2.4.0
+	 */
+	public static function register_styles() {
+		/* Register dashboard CSS */
+		wp_register_style(
+			'cachify-dashboard',
+			plugins_url( 'css/dashboard.min.css', CACHIFY_FILE ),
+			array(),
+			filemtime( plugin_dir_path( CACHIFY_FILE ) . 'css/dashboard.min.css' )
+		);
+
+		/* Register admin bar flush CSS */
+		wp_register_style(
+			'cachify-admin-bar-flush',
+			plugins_url( 'css/admin-bar-flush.min.css', CACHIFY_FILE ),
+			array(),
+			filemtime( plugin_dir_path( CACHIFY_FILE ) . 'css/admin-bar-flush.min.css' )
+		);
+	}
+
+	/**
+	 * Register the scripts
+	 *
+	 * @since 2.4.0
+	 */
+	public static function register_scripts() {
+		/* Register admin bar flush script */
+		wp_register_script(
+			'cachify-admin-bar-flush',
+			plugins_url( 'js/admin-bar-flush.min.js', CACHIFY_FILE ),
+			array(),
+			filemtime( plugin_dir_path( CACHIFY_FILE ) . 'js/admin-bar-flush.min.js' ),
+			true
+		);
+	}
+
 	/**
 	 * Register the language file
 	 *
@@ -565,6 +624,7 @@ public static function get_cache_size() {
 	 *
 	 * @since   1.2
 	 * @change  2.2.2
+	 * @change  2.4.0 Adjust icon for flush request via AJAX
 	 *
 	 * @hook    mixed   cachify_user_can_flush_cache
 	 *
@@ -576,16 +636,27 @@ public static function add_flush_icon( $wp_admin_bar ) {
 			return;
 		}
 
+		/* Enqueue style */
+		wp_enqueue_style( 'cachify-admin-bar-flush' );
+
 		/* Display the admin icon anytime */
-		echo '<style>#wp-admin-bar-cachify{display:list-item !important} #wp-admin-bar-cachify .ab-icon{margin:0 !important} #wp-admin-bar-cachify .ab-icon:before{content:"\f182";top:2px;margin:0;} #wp-admin-bar-cachify .ab-label{margin:0 5px}</style>';
+		echo '<style>#wp-admin-bar-cachify{display:list-item !important} #wp-admin-bar-cachify .ab-icon{margin:0 !important} #wp-admin-bar-cachify .ab-icon:before{top:2px;margin:0;} #wp-admin-bar-cachify .ab-label{margin:0 5px}</style>';
+
+		/* Print area for aria live updates */
+		echo '<span class="ab-aria-live-area screen-reader-text" aria-live="polite"></span>';
+		/* Check if the flush action was used without AJAX */
+		$dashicon_class = 'dashicons-trash';
+		if ( isset( $_GET['_cachify'] ) && 'flushed' === $_GET['_cachify'] ) {
+			$dashicon_class = self::get_dashicon_success_class();
+		}
 
 		/* Add menu item */
 		$wp_admin_bar->add_menu(
 			array(
 				'id'     => 'cachify',
 				'href'   => wp_nonce_url( add_query_arg( '_cachify', 'flush' ), '_cachify__flush_nonce' ), // esc_url in /wp-includes/class-wp-admin-bar.php#L438.
 				'parent' => 'top-secondary',
-				'title'  => '<span class="ab-icon dashicons"></span>' .
+				'title'  => '<span class="ab-icon dashicons ' . $dashicon_class . '" aria-hidden="true"></span>' .
 										'<span class="ab-label">' .
 											__(
 												'Flush site cache',
@@ -599,11 +670,95 @@ public static function add_flush_icon( $wp_admin_bar ) {
 		);
 	}
 
+	/**
+	 * Returns the dashicon class for the success state in admin bar flush button
+	 *
+	 * @since  2.4.0
+	 *
+	 * @return string
+	 */
+	public static function get_dashicon_success_class() {
+		global $wp_version;
+		if ( version_compare( $wp_version, '5.2', '<' ) ) {
+			return 'dashicons-yes';
+		}
+
+		return 'dashicons-yes-alt';
+	}
+
+	/**
+	 * Add a script to query the REST endpoint and animate the flush icon in admin bar menu
+	 *
+	 * @since   2.4.0
+	 *
+	 * @hook    mixed   cachify_user_can_flush_cache ?
+	 *
+	 * @param   object $wp_admin_bar  Object of menu items.
+	 */
+	public static function add_flush_icon_script( $wp_admin_bar ) {
+		/* Quit */
+		if ( ! is_admin_bar_showing() || ! apply_filters( 'cachify_user_can_flush_cache', current_user_can( 'manage_options' ) ) ) {
+			return;
+		}
+
+		/* Enqueue script */
+		wp_enqueue_script( 'cachify-admin-bar-flush' );
+
+		/* Localize script */
+		wp_localize_script(
+			'cachify-admin-bar-flush',
+			'cachify_admin_bar_flush_ajax_object',
+			array(
+				'url' => esc_url_raw( rest_url( self::REST_NAMESPACE . '/' . self::REST_ROUTE_FLUSH ) ),
+				'nonce' => wp_create_nonce( 'wp_rest' ),
+				'flushing' => __( 'Flushing cache', 'cachify' ),
+				'flushed' => __( 'Cache flushed successfully', 'cachify' ),
+				'dashicon_success' => self::get_dashicon_success_class(),
+			)
+		);
+	}
+
+
+	/**
+	 * Registers an REST endpoint for the flush operation
+	 *
+	 * @change 2.4.0
+	 */
+	public static function add_flush_rest_endpoint() {
+		register_rest_route(
+			self::REST_NAMESPACE,
+			self::REST_ROUTE_FLUSH,
+			array(
+				'methods' => WP_REST_Server::DELETABLE,
+				'callback' => array(
+					__CLASS__,
+					'flush_cache',
+				),
+				'permission_callback' => array(
+					__CLASS__,
+					'user_can_manage_options',
+				),
+			)
+		);
+	}
+
+	/**
+	 * Check if user can manage options
+	 *
+	 * @since   2.4.0
+	 *
+	 * @return  bool
+	 */
+	public static function user_can_manage_options() {
+		return current_user_can( 'manage_options' );
+	}
+
 	/**
 	 * Process plugin's meta actions
 	 *
 	 * @since   0.5
 	 * @change  2.2.2
+	 * @change  2.4.0  Extract cache flushing to own method and always redirect to referer with new value for `_cachify` param.
 	 *
 	 * @hook    mixed  cachify_user_can_flush_cache
 	 *
@@ -630,6 +785,26 @@ public static function process_flush_request( $data ) {
 			require_once( ABSPATH . 'wp-admin/includes/plugin.php' );
 		}
 
+		/* Flush cache */
+		self::flush_cache();
+
+		wp_safe_redirect(
+			add_query_arg(
+				'_cachify',
+				'flushed',
+				wp_get_referer()
+			)
+		);
+
+		exit();
+	}
+
+	/**
+	 * Flush cache
+	 *
+	 * @since 2.4.0
+	 */
+	public static function flush_cache() {
 		/* Flush cache */
 		if ( is_multisite() && is_network_admin() ) {
 			/* Old blog */
@@ -1303,18 +1478,10 @@ public static function add_admin_resources( $hook ) {
 			return;
 		}
 
-		/* Plugin data */
-		$plugin_data = get_plugin_data( CACHIFY_FILE );
-
 		/* Register css */
 		switch ( $hook ) {
 			case 'index.php':
-				wp_enqueue_style(
-					'cachify-dashboard',
-					plugins_url( 'css/dashboard.min.css', CACHIFY_FILE ),
-					array(),
-					$plugin_data['Version']
-				);
+				wp_enqueue_style( 'cachify-dashboard' );
 				break;
 
 			default: