WordPress.org
Get WordPress

Make WordPress Core

Changeset 31765


Ignore:
Timestamp:
03/13/2015 04:56:45 PM (12 years ago)
Author:
azaozz
Message:

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.

Location:
trunk/src/wp-admin
Files:
4 edited

Legend:

Unmodified
Added
Removed

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

    r31693 r31765  
    964964}
    965965
    966 .categories-select input {
    967         clear: none;
    968         position: absolute;
    969         top: 0;
    970         left: 0;
     966.category {
     967        position: relative;
    971968        display: block;
    972         line-height: 0;
    973         width: 100%;
    974         height: 100%;
     969        padding: 13px 16px 14px 16px;
     970        cursor: pointer;
     971        background: #fff;
     972}
     973
     974.category:focus,
     975.category.selected:focus {
    975976        outline: 0;
    976         padding: 0;
    977         border: 0;
    978         -webkit-border-radius: 0;
    979         border-radius: 0;
    980         text-align: center;
    981         vertical-align: middle;
    982         -webkit-appearance: none;
    983         appearance: none;
    984         cursor: pointer;
    985 }
    986 
    987 .categories-select input:checked {
     977        background: #2ea2cc;
     978        color: #fff;
     979}
     980
     981.category.selected {
    988982        -webkit-box-shadow: inset 6px 0 0 #2ea2cc;
    989983        box-shadow: inset 6px 0 0 #2ea2cc;
    990         background: rgba(46, 162, 204, 0.1);
    991 }
    992 
    993 .categories-select input:checked:after {
     984        background: #E9F5F9;
     985}
     986
     987.category.selected:after {
    994988        display: inline-block;
    995989        content: "\f147";
    … …  
    10151009}
    10161010
    1017 .categories-select input:focus {
    1018         -webkit-box-shadow: inset 6px 0 0 #2ea2cc;
    1019         box-shadow: inset 6px 0 0 #2ea2cc;
    1020         background: rgba(46, 162, 204, 0.05);
    1021 }
    1022 
    1023 .categories-select label {
    1024         position: relative;
    1025         display: block;
    1026         padding: 13px 16px 14px 16px;
    1027         cursor: pointer;
    1028         background: #fff;
    1029 }
    1030 
    1031 .categories-select ul label {
     1011.category.selected:focus:after {
     1012        color: #fff;
     1013}
     1014
     1015.categories-select ul .category {
    10321016        padding-left: 24px;
    10331017}
    10341018
    1035 .categories-select ul ul label {
     1019.categories-select ul ul .category {
    10361020        padding-left: 32px;
    10371021}
    10381022
    1039 .categories-select ul ul ul label {
     1023.categories-select ul ul ul .category {
    10401024        padding-left: 40px;
    10411025}
    10421026
    1043 .categories-select ul ul ul ul label {
     1027.categories-select ul ul ul ul .category {
    10441028        padding-left: 48px;
    10451029}
    10461030
    1047 .categories-select ul ul ul ul ul label {
     1031.categories-select ul ul ul ul ul .category {
    10481032        padding-left: 56px;
    10491033}
    10501034
    1051 .categories-select ul ul ul ul ul ul label {
     1035.categories-select ul ul ul ul ul ul .category {
    10521036        padding-left: 64px;
    10531037}
    … …  
    10591043.categories-select .is-hidden.searched-parent {
    10601044        display: block;
    1061 }
    1062 
    1063 .lt-ie9 .categories-select input {
    1064         top: 50%;
    1065         right: 10px;
    1066         left: auto;
    1067         margin-top: -8px;
    1068         width: 16px;
    1069         height: 16px;
    1070 }
    1071 
    1072 /* TODO Reformats checkbox on Firefox until we remove checkbox in merge */
    1073 @-moz-document url-prefix() {
    1074         .categories-select input {
    1075                 top: 50%;
    1076                 right: 10px;
    1077                 left: auto;
    1078                 margin-top: -8px;
    1079                 width: 16px;
    1080                 height: 16px;
    1081         }
    10821045}
    10831046
    … …  
    18321795        -webkit-box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
    18331796        box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
     1797        outline: 0;
    18341798}
    18351799

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

    r31739 r31765  
    795795                </div>
    796796                <ul class="categories-select" aria-label="<?php esc_attr_e( 'Categories' ); ?>">
    797                         <?php wp_terms_checklist( $post->ID, array( 'taxonomy' => 'category' ) ); ?>
     797                        <?php wp_terms_checklist( $post->ID, array( 'taxonomy' => 'category', 'list_only' => true ) ); ?>
    798798                </ul>
    799799                <?php

  • trunk/src/wp-admin/includes/template.php

    r31610 r31765  
    8383                        $name = 'tax_input[' . $taxonomy . ']';
    8484                }
     85
    8586                $args['popular_cats'] = empty( $args['popular_cats'] ) ? array() : $args['popular_cats'];
    8687                $class = in_array( $category->term_id, $args['popular_cats'] ) ? ' class="popular-category"' : '';
    … …  
    8990
    9091                /** This filter is documented in wp-includes/category-template.php */
    91                 $output .= "\n<li id='{$taxonomy}-{$category->term_id}'$class>" .
    92                         '<label class="selectit"><input value="' . $category->term_id . '" type="checkbox" name="'.$name.'[]" id="in-'.$taxonomy.'-' . $category->term_id . '"' .
    93                         checked( in_array( $category->term_id, $args['selected_cats'] ), true, false ) .
    94                         disabled( empty( $args['disabled'] ), false, false ) . ' /> ' .
    95                         esc_html( apply_filters( 'the_category', $category->name ) ) . '</label>';
     92                if ( ! empty( $args['list_only'] ) ) {
     93                        $aria_cheched = 'false';
     94                        $inner_class = 'category';
     95
     96                        if ( in_array( $category->term_id, $args['selected_cats'] ) ) {
     97                                $inner_class .= ' selected';
     98                                $aria_cheched = 'true';
     99                        }
     100
     101                        $output .= "\n" . '<li' . $class . '>' .
     102                                '<div class="' . $inner_class . '" data-term-id=' . $category->term_id .
     103                                ' tabindex="0" role="checkbox" aria-checked="' . $aria_cheched . '">' .
     104                                esc_html( apply_filters( 'the_category', $category->name ) ) . '</div>';
     105                } else {
     106                        $output .= "\n<li id='{$taxonomy}-{$category->term_id}'$class>" .
     107                                '<label class="selectit"><input value="' . $category->term_id . '" type="checkbox" name="'.$name.'[]" id="in-'.$taxonomy.'-' . $category->term_id . '"' .
     108                                checked( in_array( $category->term_id, $args['selected_cats'] ), true, false ) .
     109                                disabled( empty( $args['disabled'] ), false, false ) . ' /> ' .
     110                                esc_html( apply_filters( 'the_category', $category->name ) ) . '</label>';
     111                }
    96112        }
    97113
    … …  
    203219        $tax = get_taxonomy( $taxonomy );
    204220        $args['disabled'] = ! current_user_can( $tax->cap->assign_terms );
     221
     222        $args['list_only'] = ! empty( $r['list_only'] );
    205223
    206224        if ( is_array( $r['selected_cats'] ) ) {

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

    r31693 r31765  
    122122                 */
    123123                function prepareFormData() {
     124                        var $form = $( '#pressthis-form' ),
     125                                $input = $( '<input type="hidden" name="post_category[]" value="">' );
     126
    124127                        editor && editor.save();
    125128
    … …  
    132135                                } );
    133136                        }
     137
     138                        // Get selected categories
     139                        $( '.categories-select .category' ).each( function( i, element ) {
     140                                var $cat = $( element );
     141
     142                                if ( $cat.hasClass( 'selected' ) ) {
     143                                        // Have to append a node as we submit the actual form on preview
     144                                        $form.append( $input.clone().val( $cat.attr( 'data-term-id' ) || '' ) );
     145                                }
     146                        });
    134147                }
    135148
    … …  
    233246                                        renderError( response.data.errorMessage );
    234247                                } else {
    235                                         // TODO: change if/when the html changes.
    236248                                        var $parent, $ul,
    237249                                                $wrap = $( 'ul.categories-select' );
    238250
    239251                                        $.each( response.data, function( i, newCat ) {
    240                                                 var $node = $( '<li>' ).attr( 'id', 'category-' + newCat.term_id )
    241                                                         .append( $( '<label class="selectit">' ).text( newCat.name )
    242                                                                 .append( $( '<input type="checkbox" name="post_category[]" checked>' ).attr( 'value', newCat.term_id ) ) );
    243 
     252                                                var $node = $( '<li>' ).append( $( '<div class="category selected" tabindex="0" role="checkbox" aria-checked="true">' )
     253                                                        .attr( 'data-term-id', newCat.term_id )
     254                                                        .text( newCat.name ) );
     255                                               
    244256                                                if ( newCat.parent ) {
    245257                                                        if ( ! $ul || ! $ul.length ) {
    246                                                                 $parent = $wrap.find( '#category-' + newCat.parent );
     258                                                                $parent = $wrap.find( 'div[data-term-id="' + newCat.parent + '"]' ).parent();
    247259                                                                $ul = $parent.find( 'ul.children:first' );
    248260
    … …  
    252264                                                        }
    253265
    254                                                         $ul.append( $node );
    255                                                         // TODO: set focus on
     266                                                        $ul.prepend( $node );
    256267                                                } else {
    257268                                                        $wrap.prepend( $node );
    258269                                                }
     270
     271                                                $node.focus();
    259272                                        } );
    260273
    … …  
    510523                }
    511524
     525                function toggleCatItem( $element ) {
     526                        if ( $element.hasClass( 'selected' ) ) {
     527                                $element.removeClass( 'selected' ).attr( 'aria-checked', 'false' );
     528                        } else {
     529                                $element.addClass( 'selected' ).attr( 'aria-checked', 'true' );
     530                        }
     531                }
     532
     533                function monitorCatList() {
     534                        $( '.categories-select' ).on( 'click.press-this keydown.press-this', function( event ) {
     535                                var $element = $( event.target );
     536
     537                                if ( $element.is( 'div.category' ) ) {
     538                                        if ( event.type === 'keydown' && event.keyCode !== 32 ) {
     539                                                return;
     540                                        }
     541
     542                                        toggleCatItem( $element );
     543                                        event.preventDefault();
     544                                }
     545                        });
     546                }
     547
    512548                /* ***************************************************************
    513549                 * PROCESSING FUNCTIONS
    … …  
    565601                        monitorOptionsModal();
    566602                        monitorPlaceholder();
     603                        monitorCatList();
    567604
    568605                        $( '.options-open' ).on( 'click.press-this', openSidebar );
    … …  
    642679                                        node: $this,
    643680                                        parents: $this.parents( 'li' ),
    644                                         text: $this.children( 'label' ).text().toLowerCase()
     681                                        text: $this.children( '.category' ).text().toLowerCase()
    645682                                } );
    646683                        } );
Note: See TracChangeset for help on using the changeset viewer.