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.
Built from https://develop.svn.wordpress.org/trunk@31651


git-svn-id: http://core.svn.wordpress.org/trunk@31632 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/press-this-rtl.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-right: 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;
+	left: 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 {

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 {

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 ) : ?>

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',
+			var $postOptions  = $( '.post-options' ),
-				isHidden      = 'is-hidden',
-				$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
+				$targetSettingModal.removeClass( offscreenHidden )
-					.removeClass( isOffScreen + ' ' + isHidden )
 					.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
+				if ( transitionEndEvent ) {
-					.removeClass( isOffScreen + ' ' + isHidden );
+					$targetSettingModal.one( transitionEndEvent, function() {
-
-				$targetSettingModal
-					.addClass( isOffScreen )
-					.one( transitionEndEvent, function() {
 						$( this ).addClass( isHidden );
 						$postOption.eq( index - 1 ).focus();
 					} );
-
+				} else {
-				// For browser that don't support transitionend.
-				if ( ! transitionEndEvent ) {
 					setTimeout( function() {
 						$targetSettingModal.addClass( isHidden );
 						$postOption.eq( index - 1 ).focus();
@@ -693,44 +686,30 @@
 		/**
 		 * Interactive behavior for the sidebar toggle, to show the options modals
 		 */
-		function monitorSidebarToggle() {
+		function openSidebar() {
-			var $optOpen  = $( '.options-open' ),
+			sidebarIsOpen = true;
-				$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;
 
-			$optOpen.on( 'click', function(){
+			$( '.options-open, .press-this-actions, #scanbar' ).addClass( isHidden );
-				$optOpen.addClass( isHidden );
+			$( '.options-close, .options-panel-back' ).removeClass( isHidden );
-				$optClose.removeClass( isHidden );
-				$postActions.addClass( isHidden );
-				$scanbar.addClass( isHidden );
 
-				$sidebar
+			$( '.options-panel' ).removeClass( offscreenHidden )
-					.removeClass( ifOffHidden )
 				.one( 'transitionend', function() {
-						$postOption.eq( 0 ).focus();
+					$( '.post-option:first' ).focus();
-					} );
 				} );
+		}
 		
-			$optClose.on( 'click', function(){
+		function closeSidebar() {
-				$optClose.addClass( isHidden );
+			sidebarIsOpen = false;
-				$optOpen.removeClass( isHidden );
-				$postActions.removeClass( isHidden );
-				$scanbar.removeClass( isHidden );
 
-				$sidebar
+			$( '.options-close, .options-panel-back' ).addClass( isHidden );
-					.addClass( isOffScreen )
+			$( '.options-open, .press-this-actions, #scanbar' ).removeClass( isHidden );
+
+			$( '.options-panel' ).addClass( isOffScreen )
 				.one( 'transitionend', function() {
 					$( this ).addClass( isHidden );
 					// Reset to options list
-						$( '.post-options' ).removeClass( ifOffHidden );
+					$( '.post-options' ).removeClass( offscreenHidden );
-						$( '.setting-modal').addClass( ifOffHidden );
+					$( '.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' );

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.2-alpha-31650';
+$wp_version = '4.2-alpha-31651';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.