Merge pull request #76 from norcross/barryceelen-toolbar-icon

updated toolbar icon. props @barryceelen

CHANGES.md

@@ -1,3 +1,6 @@
+#### Version 0.1.5 - 2016/04/24
+* adding custom icon font for display and removing label. props @barryceelen
+
 #### Version 0.1.4 - 2016/02/26
 * better setup for blocked external assets. props @johnbillion
 

airplane-mode.php

@@ -5,7 +5,7 @@
  * Description: Control loading of external files when developing locally
  * Author: Andrew Norcross
  * Author URI: http://reaktivstudios.com/
- * Version: 0.1.4
+ * Version: 0.1.5
  * Text Domain: airplane-mode
  * Requires WP: 4.0
  * Domain Path: languages
@@ -45,7 +45,7 @@
 }
 
 if ( ! defined( 'AIRMDE_VER' ) ) {
-	define( 'AIRMDE_VER', '0.1.4' );
+	define( 'AIRMDE_VER', '0.1.5' );
 }
 
 if ( ! class_exists( 'Airplane_Mode_Core' ) ) {
@@ -76,7 +76,6 @@ private function __construct() {
 			add_action( 'script_loader_src',                    array( $this, 'block_script_load'       ),  100     );
 			add_action( 'admin_init',                           array( $this, 'remove_update_crons'     )           );
 			add_action( 'admin_init',                           array( $this, 'remove_schedule_hook'    )           );
-			add_filter( 'admin_body_class',                     array( $this, 'admin_body_class'        )           );
 
 			add_filter( 'embed_oembed_html',                    array( $this, 'block_oembed_html'       ),  1,  4   );
 			add_filter( 'get_avatar',                           array( $this, 'replace_gravatar'        ),  1,  5   );
@@ -101,6 +100,11 @@ private function __construct() {
 			add_action( 'admin_enqueue_scripts',                array( $this, 'toggle_css'              ),  9999    );
 			add_action( 'login_enqueue_scripts',                array( $this, 'toggle_css'              ),  9999    );
 
+			// Body class on each location for the display.
+			add_filter( 'body_class',                           array( $this, 'body_class'              )           );
+			add_filter( 'login_body_class',                     array( $this, 'body_class'              )           );
+			add_filter( 'admin_body_class',                     array( $this, 'admin_body_class'        )           );
+
 			// Remove bulk action for updating themes/plugins.
 			add_filter( 'bulk_actions-plugins',                 array( $this, 'remove_bulk_actions'     )           );
 			add_filter( 'bulk_actions-themes',                  array( $this, 'remove_bulk_actions'     )           );
@@ -337,13 +341,27 @@ public function block_oembed_html( $html, $url, $attr, $post_ID ) {
 			return $this->enabled() ? sprintf( '<div class="loading-placeholder airplane-mode-placeholder"><p>%s</p></div>', sprintf( __( 'Airplane Mode is enabled. oEmbed blocked for %1$s.', 'airplane-mode' ), esc_url( $url ) ) ) : $html;
 		}
 
+		/**
+		 * Add body class to front-end pages and login based on plugin status
+		 *
+		 * @return string          our new class appended to the existing string
+		 */
+		public function body_class() {
+
+			// Add the class based on the current status.
+			$classes[]	= $this->enabled() ? 'airplane-mode-enabled' : 'airplane-mode-disabled';
+
+			// Return our array of classes.
+			return $classes;
+		}
+
 		/**
 		 * Add body class to admin pages based on plugin status
 		 *
 		 * @return string          our new class appended to the existing string
 		 */
 		public function admin_body_class() {
-			return $this->enabled() ? 'airplane-mode-enabled' : 'airplane-mode-disabled';
+			return $this->enabled() ? ' airplane-mode-enabled' : ' airplane-mode-disabled';
 		}
 
 		/**
@@ -561,38 +579,33 @@ public function admin_bar_toggle( WP_Admin_Bar $wp_admin_bar ) {
 			// Set our toggle variable parameter (in reverse since we want the opposite action).
 			$toggle = $status ? 'off' : 'on';
 
-			// Determine our class based on the status.
-			$class  = $status ? 'airplane-toggle-icon-on' : 'airplane-toggle-icon-off';
-
-			// Get my label and wrap it in a span for styling.
-			$label  = $status ? __( 'Active', 'airplane-mode' ) : __( 'Inactive', 'airplane-mode' );
-			$text   = '<span class="airplane-toggle-text">' . esc_html( $label ) . '</span>';
-			$icon   = '<span class="airplane-toggle-icon ' . sanitize_html_class( $class ) . '"></span>';
-
-			// Set my HTTP bubble display to a blank string for now.
-			$bubble = '';
+			// Set my HTTP request count label to a blank string for now.
+			$label = '';
 
 			// Get and display the HTTP count when Query Monitor isn't active.
-			if ( ! class_exists( 'QueryMonitor' ) ) {
+			if ( ! class_exists( 'QueryMonitor' ) || defined( 'QM_DISABLED' ) && QM_DISABLED ) {
 
 				// Pull my HTTP count.
 				$count  = ! empty( $this->http_count ) ? number_format_i18n( $this->http_count ) : 0;
 
-				// Build the markup for my bubble.
-				$bubble = '<span class="airplane-toggle-count">' . absint( $count ) . '</span>';
+				$count_label = sprintf( _n( 'There was %s HTTP request.', 'There were %s HTTP requests.', $count, 'airplane-mode' ), $count );
+
+				// Build the markup for my label.
+				$label = '<span class="ab-label" aria-hidden="true">' . absint( $count ) . '</span>';
+				$label .= '<span class="screen-reader-text">' . esc_html( $count_label ) . '</span>';
 
 				// Amend the tooltip title with the count.
-				$title .= '&nbsp;' . sprintf( _n( 'There was %s HTTP request.', 'There were %s HTTP requests.', $count, 'airplane-mode' ), $count );
+				$title .= '&nbsp;' . $count_label;
 			}
 
 			// Get our link with the status parameter.
-			$link   = wp_nonce_url( add_query_arg( 'airplane-mode', $toggle ), 'airmde_nonce', 'airmde_nonce' );
+			$link = wp_nonce_url( add_query_arg( 'airplane-mode', $toggle ), 'airmde_nonce', 'airmde_nonce' );
 
 			// Now add the admin bar link.
 			$wp_admin_bar->add_menu(
 				array(
 					'id'        => 'airplane-mode-toggle',
-					'title'     => $icon . $text . $bubble,
+					'title'     => '<span class="ab-icon"></span>' . $label,
 					'href'      => esc_url( $link ),
 					'position'  => 0,
 					'meta'      => array(

lib/css/airplane-mode.css

@@ -1,45 +1,40 @@
-#wp-admin-bar-airplane-mode-toggle span.airplane-toggle-count {
-	height: 18px;
-	width: 18px;
-	border-radius: 50%;
-	background: #ccc;
-	font-weight: bold;
-	display: inline-block;
-	vertical-align: middle;
-	margin: 0;
-	position: relative;
-	bottom: 2px;
-	color: #000;
-	text-align: center;
-	line-height: 19px;
+@font-face {
+  font-family: "airplanemodeicons";
+  src:url("../fonts/airplanemodeicons.eot");
+  src:url("../fonts/airplanemodeicons.eot?#iefix") format("embedded-opentype"),
+      url("../fonts/airplanemodeicons.woff") format("woff"),
+      url("../fonts/airplanemodeicons.ttf") format("truetype"),
+      url("../fonts/airplanemodeicons.svg#airplanemodeicons") format("svg");
+  font-weight: normal;
+  font-style: normal;
 }
 
-#wp-admin-bar-airplane-mode-toggle span.airplane-toggle-text {
-	font-variant: small-caps;
-	padding: 0 7px;
-	text-align: center;
+#wp-admin-bar-airplane-mode-toggle .ab-icon {
+	top: 1px;
 }
 
-#wp-admin-bar-airplane-mode-toggle span.airplane-toggle-icon {
-	background-repeat: no-repeat;
-	background-position: center;
-	height: 24px;
-	width: 24px;
-	display: inline-block;
-	vertical-align: middle;
-	margin: 0;
-	position: relative;
-	bottom: 2px;
-	text-align: center;
-	line-height: 1;
+#wp-admin-bar-airplane-mode-toggle .ab-icon:before {
+	content: "\e000";
+	font: normal 18px/1 airplanemodeicons;
 }
 
-#wp-admin-bar-airplane-mode-toggle span.airplane-toggle-icon-on {
-	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBOEY2RUY4Mzk1M0MxMUU1ODY2Q0RBQTA5MkNGQjVDRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBOEY2RUY4NDk1M0MxMUU1ODY2Q0RBQTA5MkNGQjVDRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkE4RjZFRjgxOTUzQzExRTU4NjZDREFBMDkyQ0ZCNUNEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4RjZFRjgyOTUzQzExRTU4NjZDREFBMDkyQ0ZCNUNEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+umZ0pgAAAMpJREFUeNpi/P//PwMtASOtLWAAWUAkbvgPAQ0k6CHJB8gKGWkRRKMWDFELiElqCkC8/j8qWA8VJ6ifkIICIH7/HzsAieeTa4EBEJ//Txw4D1VPlAUCQNz/nzzQD9WP0wIHIL6PReMHIF6AJrYAKo4OQPoDcFmADB4A8QQ0xcgAJhYAtewBDnkUCy5ADcUVnlgNQIu3CVBzRgs76uZkUNKbjxYH87ElSXJyMizycWUwqtRoD4B4AxAfgNIBQOwApRUGvNKnuQUAAQYASg9ZtoYF8awAAAAASUVORK5CYII=');
+.airplane-mode-disabled #wp-admin-bar-airplane-mode-toggle .ab-icon:before {
+	content: "\e001";
 }
 
-#wp-admin-bar-airplane-mode-toggle span.airplane-toggle-icon-off {
-	background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBOEY2RUY4Nzk1M0MxMUU1ODY2Q0RBQTA5MkNGQjVDRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBOEY2RUY4ODk1M0MxMUU1ODY2Q0RBQTA5MkNGQjVDRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkE4RjZFRjg1OTUzQzExRTU4NjZDREFBMDkyQ0ZCNUNEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4RjZFRjg2OTUzQzExRTU4NjZDREFBMDkyQ0ZCNUNEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VVKSowAAAPVJREFUeNrMluERgjAMhYsTMAIjMAIjMIIbuAIb4Aa4gW4gG9ANZAPdIKZnfsRcW1Na7nx373oHTb5LSK9UAGD21MHsrBTAgAZa1aoSWsQ3VlsraNF3dF2sR64C5hk+WtC1eMdltJYPXFIbgBQBxCCXUgANJBvwC3JFN7kA54G1RUKe6NNWQEsJpXztWmi/eopGiCv04UfPaH8BOvTDk/AlEsUgLr4PAbhW9Fls1lYCIYClpKF+cvmmq6V4mzJFIUDsxJsSAKOF5ABUEE1iFzQJwMSSSUgywEbOg6zkKOM1N9qKvqFnWnt0R2tT8sr8z7+KtwADADqdBvUNABi9AAAAAElFTkSuQmCC');
+ /* Set the opacity to mimic comment moderation queue. */
+.airplane-mode-disabled #wp-admin-bar-airplane-mode-toggle .ab-label {
+  /* Theoretically for IE 8 & 9 (more valid) */
+  /* ...but not required as filter works too */
+  /* should come BEFORE filter */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+
+  /* This works in IE 8 & 9 too */
+  /* ... but also 5, 6, 7 */
+	filter: alpha(opacity=50); /* IE 5-7 */
+
+  /* Modern Browsers */
+  opacity: 0.5;
 }
 
 .airplane-mode-enabled.plugin-install-php h1 a.upload,

readme.txt

@@ -4,8 +4,8 @@ Website Link: https://github.com/norcross/airplane-mode
 Donate link: https://andrewnorcross.com/donate
 Tags: external calls, HTTP
 Requires at least: 4.0
-Tested up to: 4.4
-Stable tag: 0.1.4
+Tested up to: 4.5
+Stable tag: 0.1.5
 License: MIT
 License URI: http://norcross.mit-license.org/
 
@@ -43,6 +43,9 @@ Because you are a jet set developer who needs to work without internet.
 
 == Changelog ==
 
+= 0.1.5 - 2016/04/24
+* adding custom icon font for display and removing label. props @barryceelen
+
 = 0.1.4 - 2016/02/26
 * better setup for blocked external assets. props @johnbillion