PressThis: simplify and restyle the categories drop-down, remove the checkboxes and use JS to get the selected categories on submitting the form.

Part prop: Michael-Arestad. Fixes #31443.

git-svn-id: https://develop.svn.wordpress.org/trunk@31765 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/press-this.css

@@ -963,34 +963,28 @@ input[type="search"].categories-search,
 	list-style: none;
 }
 
-.categories-select input {
-	clear: none;
-	position: absolute;
-	top: 0;
-	left: 0;
+.category {
+	position: relative;
 	display: block;
-	line-height: 0;
-	width: 100%;
-	height: 100%;
-	outline: 0;
-	padding: 0;
-	border: 0;
-	-webkit-border-radius: 0;
-	border-radius: 0;
-	text-align: center;
-	vertical-align: middle;
-	-webkit-appearance: none;
-	appearance: none;
+	padding: 13px 16px 14px 16px;
 	cursor: pointer;
+	background: #fff;
 }
 
-.categories-select input:checked {
+.category:focus,
+.category.selected:focus {
+	outline: 0;
+	background: #2ea2cc;
+	color: #fff;
+}
+
+.category.selected {
 	-webkit-box-shadow: inset 6px 0 0 #2ea2cc;
 	box-shadow: inset 6px 0 0 #2ea2cc;
-	background: rgba(46, 162, 204, 0.1);
+	background: #E9F5F9;
 }
 
-.categories-select input:checked:after {
+.category.selected:after {
 	display: inline-block;
 	content: "\f147";
 	position: absolute;
@@ -1014,41 +1008,31 @@ input[type="search"].categories-search,
 	-moz-osx-font-smoothing: grayscale;
 }
 
-.categories-select input:focus {
-	-webkit-box-shadow: inset 6px 0 0 #2ea2cc;
-	box-shadow: inset 6px 0 0 #2ea2cc;
-	background: rgba(46, 162, 204, 0.05);
+.category.selected:focus:after {
+	color: #fff;
 }
 
-.categories-select label {
-	position: relative;
-	display: block;
-	padding: 13px 16px 14px 16px;
-	cursor: pointer;
-	background: #fff;
-}
-
-.categories-select ul label {
+.categories-select ul .category {
 	padding-left: 24px;
 }
 
-.categories-select ul ul label {
+.categories-select ul ul .category {
 	padding-left: 32px;
 }
 
-.categories-select ul ul ul label {
+.categories-select ul ul ul .category {
 	padding-left: 40px;
 }
 
-.categories-select ul ul ul ul label {
+.categories-select ul ul ul ul .category {
 	padding-left: 48px;
 }
 
-.categories-select ul ul ul ul ul label {
+.categories-select ul ul ul ul ul .category {
 	padding-left: 56px;
 }
 
-.categories-select ul ul ul ul ul ul label {
+.categories-select ul ul ul ul ul ul .category {
 	padding-left: 64px;
 }
 
@@ -1060,27 +1044,6 @@ input[type="search"].categories-search,
 	display: block;
 }
 
-.lt-ie9 .categories-select input {
-	top: 50%;
-	right: 10px;
-	left: auto;
-	margin-top: -8px;
-	width: 16px;
-	height: 16px;
-}
-
-/* TODO Reformats checkbox on Firefox until we remove checkbox in merge */
-@-moz-document url-prefix() {
-	.categories-select input {
-		top: 50%;
-		right: 10px;
-		left: auto;
-		margin-top: -8px;
-		width: 16px;
-		height: 16px;
-	}
-}
-
 /* Category search */
 .categories-search-wrapper {
 	position: relative;
@@ -1831,6 +1794,7 @@ html {
 	/* 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;
+	outline: 0;
 }
 
 .options-panel-back {

src/wp-admin/includes/class-wp-press-this.php

@@ -794,7 +794,7 @@ class WP_Press_This {
 			</label>
 		</div>
 		<ul class="categories-select" aria-label="<?php esc_attr_e( 'Categories' ); ?>">
-			<?php wp_terms_checklist( $post->ID, array( 'taxonomy' => 'category' ) ); ?>
+			<?php wp_terms_checklist( $post->ID, array( 'taxonomy' => 'category', 'list_only' => true ) ); ?>
 		</ul>
 		<?php
 	}

src/wp-admin/includes/template.php

@@ -82,17 +82,33 @@ class Walker_Category_Checklist extends Walker {
 		} else {
 			$name = 'tax_input[' . $taxonomy . ']';
 		}
+
 		$args['popular_cats'] = empty( $args['popular_cats'] ) ? array() : $args['popular_cats'];
 		$class = in_array( $category->term_id, $args['popular_cats'] ) ? ' class="popular-category"' : '';
 
 		$args['selected_cats'] = empty( $args['selected_cats'] ) ? array() : $args['selected_cats'];
 
 		/** This filter is documented in wp-includes/category-template.php */
-		$output .= "\n<li id='{$taxonomy}-{$category->term_id}'$class>" .
-			'<label class="selectit"><input value="' . $category->term_id . '" type="checkbox" name="'.$name.'[]" id="in-'.$taxonomy.'-' . $category->term_id . '"' .
-			checked( in_array( $category->term_id, $args['selected_cats'] ), true, false ) .
-			disabled( empty( $args['disabled'] ), false, false ) . ' /> ' .
-			esc_html( apply_filters( 'the_category', $category->name ) ) . '</label>';
+		if ( ! empty( $args['list_only'] ) ) {
+			$aria_cheched = 'false';
+			$inner_class = 'category';
+
+			if ( in_array( $category->term_id, $args['selected_cats'] ) ) {
+				$inner_class .= ' selected';
+				$aria_cheched = 'true';
+			}
+
+			$output .= "\n" . '<li' . $class . '>' .
+				'<div class="' . $inner_class . '" data-term-id=' . $category->term_id .
+				' tabindex="0" role="checkbox" aria-checked="' . $aria_cheched . '">' .
+				esc_html( apply_filters( 'the_category', $category->name ) ) . '</div>';
+		} else {
+			$output .= "\n<li id='{$taxonomy}-{$category->term_id}'$class>" .
+				'<label class="selectit"><input value="' . $category->term_id . '" type="checkbox" name="'.$name.'[]" id="in-'.$taxonomy.'-' . $category->term_id . '"' .
+				checked( in_array( $category->term_id, $args['selected_cats'] ), true, false ) .
+				disabled( empty( $args['disabled'] ), false, false ) . ' /> ' .
+				esc_html( apply_filters( 'the_category', $category->name ) ) . '</label>';
+		}
 	}
 
 	/**
@@ -203,6 +219,8 @@ function wp_terms_checklist( $post_id = 0, $args = array() ) {
 	$tax = get_taxonomy( $taxonomy );
 	$args['disabled'] = ! current_user_can( $tax->cap->assign_terms );
 
+	$args['list_only'] = ! empty( $r['list_only'] );
+
 	if ( is_array( $r['selected_cats'] ) ) {
 		$args['selected_cats'] = $r['selected_cats'];
 	} elseif ( $post_id ) {

src/wp-admin/js/press-this.js

@@ -121,6 +121,9 @@
 		 * Prepare the form data for saving.
 		 */
 		function prepareFormData() {
+			var $form = $( '#pressthis-form' ),
+				$input = $( '<input type="hidden" name="post_category[]" value="">' );
+
 			editor && editor.save();
 
 			$( '#post_title' ).val( sanitizeText( $( '#title-container' ).text() ) );
@@ -131,6 +134,16 @@
 					window.tagBox.flushTags( this, false, 1 );
 				} );
 			}
+
+			// Get selected categories
+			$( '.categories-select .category' ).each( function( i, element ) {
+				var $cat = $( element );
+
+				if ( $cat.hasClass( 'selected' ) ) {
+					// Have to append a node as we submit the actual form on preview
+					$form.append( $input.clone().val( $cat.attr( 'data-term-id' ) || '' ) );
+				}
+			});
 		}
 
 		/**
@@ -232,18 +245,17 @@
 				if ( ! response.success ) {
 					renderError( response.data.errorMessage );
 				} else {
-					// TODO: change if/when the html changes.
 					var $parent, $ul,
 						$wrap = $( 'ul.categories-select' );
 
 					$.each( response.data, function( i, newCat ) {
-						var $node = $( '<li>' ).attr( 'id', 'category-' + newCat.term_id )
-							.append( $( '<label class="selectit">' ).text( newCat.name )
-								.append( $( '<input type="checkbox" name="post_category[]" checked>' ).attr( 'value', newCat.term_id ) ) );
-
+						var $node = $( '<li>' ).append( $( '<div class="category selected" tabindex="0" role="checkbox" aria-checked="true">' )
+							.attr( 'data-term-id', newCat.term_id )
+							.text( newCat.name ) );
+						
 						if ( newCat.parent ) {
 							if ( ! $ul || ! $ul.length ) {
-								$parent = $wrap.find( '#category-' + newCat.parent );
+								$parent = $wrap.find( 'div[data-term-id="' + newCat.parent + '"]' ).parent();
 								$ul = $parent.find( 'ul.children:first' );
 
 								if ( ! $ul.length ) {
@@ -251,11 +263,12 @@
 								}
 							}
 
-							$ul.append( $node );
-							// TODO: set focus on
+							$ul.prepend( $node );
 						} else {
 							$wrap.prepend( $node );
 						}
+
+						$node.focus();
 					} );
 
 					refreshCatsCache();
@@ -509,6 +522,29 @@
 			}
 		}
 
+		function toggleCatItem( $element ) {
+			if ( $element.hasClass( 'selected' ) ) {
+				$element.removeClass( 'selected' ).attr( 'aria-checked', 'false' );
+			} else {
+				$element.addClass( 'selected' ).attr( 'aria-checked', 'true' );
+			}
+		}
+
+		function monitorCatList() {
+			$( '.categories-select' ).on( 'click.press-this keydown.press-this', function( event ) {
+				var $element = $( event.target );
+
+				if ( $element.is( 'div.category' ) ) {
+					if ( event.type === 'keydown' && event.keyCode !== 32 ) {
+						return;
+					}
+
+					toggleCatItem( $element );
+					event.preventDefault();
+				}
+			});
+		}
+
 		/* ***************************************************************
 		 * PROCESSING FUNCTIONS
 		 *************************************************************** */
@@ -564,6 +600,7 @@
 
 			monitorOptionsModal();
 			monitorPlaceholder();
+			monitorCatList();
 
 			$( '.options-open' ).on( 'click.press-this', openSidebar );
 			$( '.options-close' ).on( 'click.press-this', closeSidebar );
@@ -641,7 +678,7 @@
 				catsCache.push( {
 					node: $this,
 					parents: $this.parents( 'li' ),
-					text: $this.children( 'label' ).text().toLowerCase()
+					text: $this.children( '.category' ).text().toLowerCase()
 				} );
 			} );
 		}