From 900468728ab588f86a65696b588524bd2bc976c4 Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Fri, 6 Mar 2015 22:56:17 +0000
Subject: [PATCH] PressThis: - Close the sidebar on moving the focus outside of
 it (by clicking or by "tabbing"). - Fix a (weird) structural CSS problem
 where clicks go through the sidebar when it is open. - Clean up the JS a bit.
 Fixes #31457.

git-svn-id: https://develop.svn.wordpress.org/trunk@31651 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/press-this.css               |  18 ++-
 src/wp-admin/includes/class-wp-press-this.php |   7 +-
 src/wp-admin/js/press-this.js                 | 113 ++++++++----------
 3 files changed, 72 insertions(+), 66 deletions(-)

diff --git a/src/wp-admin/css/press-this.css b/src/wp-admin/css/press-this.css
index 8a72f8cb75..f1dad4006a 100644
--- a/src/wp-admin/css/press-this.css
+++ b/src/wp-admin/css/press-this.css
@@ -1219,7 +1219,8 @@ html {
 }
 
 .options-open.is-hidden,
-.options-close.is-hidden {
+.options-close.is-hidden,
+.options-panel-back.is-hidden {
 	display: none;
 }
 
@@ -1798,11 +1799,20 @@ html {
 	width: 320px;
 	border-left: 1px solid #e5e5e5;
 	font-size: 14px;
-	/* Keeps background the full height of the screen */
+	/* Keeps background the full height of the screen, but only visually. Clicks go through. */
 	-webkit-box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
 	box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
 }
 
+.options-panel-back {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: 320px;
+	outline: 0;
+}
+
 @media (max-width: 900px) {
 	.options-panel {
 		background: #fff;
@@ -1832,6 +1842,10 @@ html {
 		-webkit-box-shadow: 5001px 5000px 0 5000px #fff;
 		box-shadow: 5001px 5000px 0 5000px #fff;
 	}
+
+	.options-panel-back {
+		width: 100%;
+	}
 }
 
 .post-options {
diff --git a/src/wp-admin/includes/class-wp-press-this.php b/src/wp-admin/includes/class-wp-press-this.php
index 3084ce3a7c..c5e9eb378d 100644
--- a/src/wp-admin/includes/class-wp-press-this.php
+++ b/src/wp-admin/includes/class-wp-press-this.php
@@ -791,7 +791,7 @@ class WP_Press_This {
 					) );
 					?>
 				</div>
-				<button type="button" class="button add-cat-submit"><?php _e( 'Add' ); ?></button>
+				<button type="button" class="add-cat-submit"><?php _e( 'Add' ); ?></button>
 			</div>
 		<?php } ?>
 		<div class="categories-search-wrapper">
@@ -834,7 +834,7 @@ class WP_Press_This {
 					<label class="screen-reader-text" for="new-tag-post_tag"><?php _e( 'Tags' ); ?></label>
 					<p>
 						<input type="text" id="new-tag-post_tag" name="newtag[post_tag]" class="newtag form-input-tip" size="16" autocomplete="off" value="" />
-						<button type="button" class="button tagadd"><?php _e( 'Add' ); ?></button>
+						<button type="button" class="tagadd"><?php _e( 'Add' ); ?></button>
 					</p>
 				</div>
 				<p class="howto">
@@ -1035,7 +1035,8 @@ $admin_body_classes = apply_filters( 'admin_body_class', '' );
 			</div>
 		</div>
 
-		<div class="options-panel is-off-screen is-hidden">
+		<div class="options-panel-back is-hidden" tabindex="-1"></div>	
+		<div class="options-panel is-off-screen is-hidden" tabindex="-1">
 			<div class="post-options">
 
 				<?php if ( $supports_formats ) : ?>
diff --git a/src/wp-admin/js/press-this.js b/src/wp-admin/js/press-this.js
index 17796951a3..6c00faa5f9 100644
--- a/src/wp-admin/js/press-this.js
+++ b/src/wp-admin/js/press-this.js
@@ -7,6 +7,7 @@
 		var editor,
 			saveAlert             = false,
 			textarea              = document.createElement( 'textarea' ),
+			sidebarIsOpen         = false,
 			siteConfig            = window.wpPressThisConfig || {},
 			data                  = window.wpPressThisData || {},
 			smallestWidth         = 128,
@@ -17,6 +18,9 @@
 			suggestedContentStr   = getSuggestedContent( data ),
 			hasSetFocus           = false,
 			catsCache             = [],
+			isOffScreen           = 'is-off-screen',
+			isHidden              = 'is-hidden',
+			offscreenHidden       = isOffScreen + ' ' + isHidden,
 			transitionEndEvent    = ( function() {
 				var style = document.documentElement.style;
 
@@ -638,9 +642,7 @@
 		 * Interactive navigation behavior for the options modal (post format, tags, categories)
 		 */
 		function monitorOptionsModal() {
-			var isOffScreen   = 'is-off-screen',
-				isHidden      = 'is-hidden',
-				$postOptions  = $( '.post-options' ),
+			var $postOptions  = $( '.post-options' ),
 				$postOption   = $( '.post-option' ),
 				$settingModal = $( '.setting-modal' ),
 				$modalClose   = $( '.modal-close' );
@@ -649,16 +651,12 @@
 				var index = $( this ).index(),
 					$targetSettingModal = $settingModal.eq( index );
 
-				event.preventDefault();
-
-				$postOptions
-					.addClass( isOffScreen )
+				$postOptions.addClass( isOffScreen )
 					.one( transitionEndEvent, function() {
 						$( this ).addClass( isHidden );
 					} );
 
-				$targetSettingModal
-					.removeClass( isOffScreen + ' ' + isHidden )
+				$targetSettingModal.removeClass( offscreenHidden )
 					.one( transitionEndEvent, function() {
 						$( this ).find( '.modal-close' ).focus();
 					} );
@@ -668,20 +666,15 @@
 				var $targetSettingModal = $( this ).parent(),
 					index = $targetSettingModal.index();
 
-				event.preventDefault();
+				$postOptions.removeClass( offscreenHidden );
+				$targetSettingModal.addClass( isOffScreen );
 
-				$postOptions
-					.removeClass( isOffScreen + ' ' + isHidden );
-
-				$targetSettingModal
-					.addClass( isOffScreen )
-					.one( transitionEndEvent, function() {
+				if ( transitionEndEvent ) {
+					$targetSettingModal.one( transitionEndEvent, function() {
 						$( this ).addClass( isHidden );
 						$postOption.eq( index - 1 ).focus();
 					} );
-
-				// For browser that don't support transitionend.
-				if ( ! transitionEndEvent ) {
+				} else {
 					setTimeout( function() {
 						$targetSettingModal.addClass( isHidden );
 						$postOption.eq( index - 1 ).focus();
@@ -693,45 +686,31 @@
 		/**
 		 * Interactive behavior for the sidebar toggle, to show the options modals
 		 */
-		function monitorSidebarToggle() {
-			var $optOpen  = $( '.options-open' ),
-				$optClose = $( '.options-close' ),
-				$postOption = $( '.post-option' ),
-				$sidebar = $( '.options-panel' ),
-				$postActions = $( '.press-this-actions' ),
-				$scanbar = $( '#scanbar' ),
-				isOffScreen = 'is-off-screen',
-				isHidden = 'is-hidden',
-				ifOffHidden = isOffScreen + ' ' + isHidden;
+		function openSidebar() {
+			sidebarIsOpen = true;
 
-			$optOpen.on( 'click', function(){
-				$optOpen.addClass( isHidden );
-				$optClose.removeClass( isHidden );
-				$postActions.addClass( isHidden );
-				$scanbar.addClass( isHidden );
+			$( '.options-open, .press-this-actions, #scanbar' ).addClass( isHidden );
+			$( '.options-close, .options-panel-back' ).removeClass( isHidden );
 
-				$sidebar
-					.removeClass( ifOffHidden )
-					.one( 'transitionend', function() {
-						$postOption.eq( 0 ).focus();
-					} );
-			} );
+			$( '.options-panel' ).removeClass( offscreenHidden )
+				.one( 'transitionend', function() {
+					$( '.post-option:first' ).focus();
+				} );
+		}
+		
+		function closeSidebar() {
+			sidebarIsOpen = false;
 
-			$optClose.on( 'click', function(){
-				$optClose.addClass( isHidden );
-				$optOpen.removeClass( isHidden );
-				$postActions.removeClass( isHidden );
-				$scanbar.removeClass( isHidden );
+			$( '.options-close, .options-panel-back' ).addClass( isHidden );
+			$( '.options-open, .press-this-actions, #scanbar' ).removeClass( isHidden );
 
-				$sidebar
-					.addClass( isOffScreen )
-					.one( 'transitionend', function() {
-						$( this ).addClass( isHidden );
-						// Reset to options list
-						$( '.post-options' ).removeClass( ifOffHidden );
-						$( '.setting-modal').addClass( ifOffHidden );
-					} );
-			} );
+			$( '.options-panel' ).addClass( isOffScreen )
+				.one( 'transitionend', function() {
+					$( this ).addClass( isHidden );
+					// Reset to options list
+					$( '.post-options' ).removeClass( offscreenHidden );
+					$( '.setting-modal').addClass( offscreenHidden );
+				} );
 		}
 
 		/**
@@ -787,9 +766,27 @@
 			} );
 
 			monitorOptionsModal();
-			monitorSidebarToggle();
 			monitorPlaceholder();
 
+			$( '.options-open' ).on( 'click.press-this', openSidebar );
+			$( '.options-close' ).on( 'click.press-this', closeSidebar );
+
+			// Close the sidebar when focus moves outside of it.
+			$( '.options-panel, .options-panel-back' ).on( 'focusout.press-this', function() {
+				setTimeout( function() {
+					var node = document.activeElement,
+						$node = $( node );
+
+					if ( sidebarIsOpen && node && ! $node.hasClass( 'options-panel-back' ) &&
+						( node.nodeName === 'BODY' ||
+							( ! $node.closest( '.options-panel' ).length &&
+							! $node.closest( '.options-open' ).length ) ) ) {
+
+						closeSidebar();
+					}
+				}, 50 );
+			});
+
 			$( '#post-formats-select input' ).on( 'change', function() {
 				var $this = $( this );
 
@@ -798,12 +795,6 @@
 				}
 			} );
 
-			// Needs more work, doesn't detect when the other JS changes the value of #tax-input-post_tag
-			$( '#tax-input-post_tag' ).on( 'change', function() {
-				var val =  $( this ).val();
-				$( '#post-option-tags' ).text( ( val ) ? val.replace( /,([^\s])/g, ', $1' ) : '' );
-			} );
-
 			$( window ).on( 'beforeunload.press-this', function() {
 				if ( saveAlert || ( editor && editor.isDirty() ) ) {
 					return __( 'saveAlert' );