WordPress.org
Get WordPress

Make WordPress Core

Changeset 31765


Ignore:
Timestamp:
03/13/2015 04:56:45 PM (10 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.