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. Built from https://develop.svn.wordpress.org/trunk@31765 git-svn-id: http://core.svn.wordpress.org/trunk@31745 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz
parent
f02e801045
commit
805c530cf0
|
|
@ -963,34 +963,28 @@ input[type="search"].categories-search,
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
.categories-select input {
|
||||
clear: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 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-right: 24px;
|
||||
}
|
||||
|
||||
.categories-select ul ul label {
|
||||
.categories-select ul ul .category {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.categories-select ul ul ul label {
|
||||
.categories-select ul ul ul .category {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.categories-select ul ul ul ul label {
|
||||
.categories-select ul ul ul ul .category {
|
||||
padding-right: 48px;
|
||||
}
|
||||
|
||||
.categories-select ul ul ul ul ul label {
|
||||
.categories-select ul ul ul ul ul .category {
|
||||
padding-right: 56px;
|
||||
}
|
||||
|
||||
.categories-select ul ul ul ul ul ul label {
|
||||
.categories-select ul ul ul ul ul ul .category {
|
||||
padding-right: 64px;
|
||||
}
|
||||
|
||||
|
|
@ -1060,27 +1044,6 @@ input[type="search"].categories-search,
|
|||
display: block;
|
||||
}
|
||||
|
||||
.lt-ie9 .categories-select input {
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
right: 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%;
|
||||
left: 10px;
|
||||
right: 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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 ) {
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue