WordPress.org
Get WordPress

Make WordPress Core

Changeset 38797


Ignore:
Timestamp:
10/14/2016 10:39:49 PM (8 years ago)
Author:
azaozz
Message:

Accessible Tags autocomplete:

  • Replace suggest.js with UI Autocomplete.
  • Use the same settings like in the editor link toolbar.
  • Abstract it and add in a new file, tags-suggest.js. Then make it a dependency for the Tags postbox(es) and Quick and Bulk Edit.
  • Add data-wp-taxonomy on all input elements to improve handling in the UI for custom taxonomies.

Props afercia, azaozz.
See #33902.

Location:
trunk/src
Files:
1 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/includes/class-wp-posts-list-table.php

    r38672 r38797  
    15511551
    15521552    <?php foreach ( $flat_taxonomies as $taxonomy ) : ?>
    1553         <?php if ( current_user_can( $taxonomy->cap->assign_terms ) ) : ?>
     1553        <?php if ( current_user_can( $taxonomy->cap->assign_terms ) ) :
     1554            $taxonomy_name = esc_attr( $taxonomy->name );
     1555   
     1556            ?>
    15541557            <label class="inline-edit-tags">
    15551558                <span class="title"><?php echo esc_html( $taxonomy->labels->name ) ?></span>
    1556                 <textarea cols="22" rows="1" name="tax_input[<?php echo esc_attr( $taxonomy->name )?>]" class="tax_input_<?php echo esc_attr( $taxonomy->name )?>"></textarea>
     1559                <textarea data-wp-taxonomy="<?php echo $taxonomy_name; ?>" cols="22" rows="1" name="tax_input[<?php echo $taxonomy_name; ?>]" class="tax_input_<?php echo $taxonomy_name; ?>"></textarea>
    15571560            </label>
    15581561        <?php endif; ?>

  • trunk/src/wp-admin/includes/meta-boxes.php

    r38700 r38797  
    432432    <div class="ajaxtag hide-if-no-js">
    433433        <label class="screen-reader-text" for="new-tag-<?php echo $tax_name; ?>"><?php echo $taxonomy->labels->add_new_item; ?></label>
    434         <p><input type="text" id="new-tag-<?php echo $tax_name; ?>" name="newtag[<?php echo $tax_name; ?>]" class="newtag form-input-tip" size="16" autocomplete="off" aria-describedby="new-tag-<?php echo $tax_name; ?>-desc" value="" />
     434        <p><input data-wp-taxonomy="<?php echo $tax_name; ?>" type="text" id="new-tag-<?php echo $tax_name; ?>" name="newtag[<?php echo $tax_name; ?>]" class="newtag form-input-tip" size="16" autocomplete="off" aria-describedby="new-tag-<?php echo $tax_name; ?>-desc" value="" />
    435435        <input type="button" class="button tagadd" value="<?php esc_attr_e('Add'); ?>" /></p>
    436436    </div>

  • trunk/src/wp-admin/js/inline-edit-post.js

    r36375 r38797  
    8484
    8585    setBulk : function(){
    86         var te = '', type = this.type, tax, c = true;
     86        var te = '', type = this.type, c = true;
    8787        this.revert();
    8888
    … …  
    115115        // enable autocomplete for tags
    116116        if ( 'post' === type ) {
    117             // support multi taxonomies?
    118             tax = 'post_tag';
    119             $('tr.inline-editor textarea[name="tax_input['+tax+']"]').suggest( ajaxurl + '?action=ajax-tag-search&tax=' + tax, { delay: 500, minchars: 2, multiple: true, multipleSep: inlineEditL10n.comma } );
     117            $( 'tr.inline-editor textarea[data-wp-taxonomy]' ).each( function ( i, element ) {
     118                $( element ).wpTagsSuggest();
     119            } );
    120120        }
    121121        $('html, body').animate( { scrollTop: 0 }, 'fast' );
    … …  
    197197            }
    198198
    199             textarea.suggest( ajaxurl + '?action=ajax-tag-search&tax=' + taxname, { delay: 500, minchars: 2, multiple: true, multipleSep: inlineEditL10n.comma } );
     199            textarea.wpTagsSuggest();
    200200        });
    201201

  • trunk/src/wp-admin/js/tags-box.js

    r35292 r38797  
    55
    66( function( $ ) {
     7    var tagDelimiter = ( window.tagsSuggestL10n && window.tagsSuggestL10n.tagDelimiter ) || ',';
     8
    79    // Return an array with any duplicate, whitespace or empty values removed
    810    array_unique_noempty = function( array ) {
    … …  
    2123
    2224    tagBox = {
    23         clean : function(tags) {
    24             var comma = window.tagsBoxL10n.tagDelimiter;
    25             if ( ',' !== comma )
    26                 tags = tags.replace(new RegExp(comma, 'g'), ',');
     25        clean : function( tags ) {
     26            if ( ',' !== tagDelimiter ) {
     27                tags = tags.replace( new RegExp( tagDelimiter, 'g' ), ',' );
     28            }
     29
    2730            tags = tags.replace(/\s*,\s*/g, ',').replace(/,+/g, ',').replace(/[,\s]+$/, '').replace(/^[,\s]+/, '');
    28             if ( ',' !== comma )
    29                 tags = tags.replace(/,/g, comma);
     31
     32            if ( ',' !== tagDelimiter ) {
     33                tags = tags.replace( /,/g, tagDelimiter );
     34            }
     35
    3036            return tags;
    3137        },
    … …  
    3642                taxbox = $(el).closest('.tagsdiv'),
    3743                thetags = taxbox.find('.the-tags'),
    38                 comma = window.tagsBoxL10n.tagDelimiter,
    39                 current_tags = thetags.val().split( comma ),
     44                current_tags = thetags.val().split( tagDelimiter ),
    4045                new_tags = [];
    4146
    … …  
    4954            });
    5055
    51             thetags.val( this.clean( new_tags.join( comma ) ) );
     56            thetags.val( this.clean( new_tags.join( tagDelimiter ) ) );
    5257
    5358            this.quickClicks( taxbox );
    … …  
    6671            disabled = thetags.prop('disabled');
    6772
    68             current_tags = thetags.val().split( window.tagsBoxL10n.tagDelimiter );
     73            current_tags = thetags.val().split( tagDelimiter );
    6974            tagchecklist.empty();
    7075
    … …  
    107112            var tagsval, newtags, text,
    108113                tags = $( '.the-tags', el ),
    109                 newtag = $( 'input.newtag', el ),
    110                 comma = window.tagsBoxL10n.tagDelimiter;
     114                newtag = $( 'input.newtag', el );
    111115
    112116            a = a || false;
    … …  
    119123
    120124            tagsval = tags.val();
    121             newtags = tagsval ? tagsval + comma + text : text;
     125            newtags = tagsval ? tagsval + tagDelimiter + text : text;
    122126
    123127            newtags = this.clean( newtags );
    124             newtags = array_unique_noempty( newtags.split( comma ) ).join( comma );
     128            newtags = array_unique_noempty( newtags.split( tagDelimiter ) ).join( tagDelimiter );
    125129            tags.val( newtags );
    126130            this.quickClicks( el );
    … …  
    154158
    155159        init : function() {
    156             var t = this, ajaxtag = $('div.ajaxtag');
     160            var ajaxtag = $('div.ajaxtag');
    157161
    158162            $('.tagsdiv').each( function() {
    159                 tagBox.quickClicks(this);
    160             });
    161 
    162             $('.tagadd', ajaxtag).click(function(){
    163                 t.flushTags( $(this).closest('.tagsdiv') );
    164             });
    165 
    166             $('input.newtag', ajaxtag).keyup(function(e){
    167                 if ( 13 == e.which ) {
    168                     tagBox.flushTags( $(this).closest('.tagsdiv') );
    169                     return false;
    170                 }
    171             }).keypress(function(e){
    172                 if ( 13 == e.which ) {
    173                     e.preventDefault();
    174                     return false;
    175                 }
    176             }).each( function() {
    177                 var tax = $(this).closest('div.tagsdiv').attr('id');
    178                 $(this).suggest(
    179                     ajaxurl + '?action=ajax-tag-search&tax=' + tax,
    180                     { delay: 500, minchars: 2, multiple: true, multipleSep: window.tagsBoxL10n.tagDelimiter }
    181                 );
     163                tagBox.quickClicks( this );
     164            });
     165
     166            $( '.tagadd', ajaxtag ).click( function() {
     167                tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
     168            });
     169
     170            $( 'input.newtag', ajaxtag ).keyup( function( event ) {
     171                if ( 13 == event.which ) {
     172                    tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
     173                    event.preventDefault();
     174                    event.stopPropagation();
     175                }
     176            }).keypress( function( event ) {
     177                if ( 13 == event.which ) {
     178                    event.preventDefault();
     179                    event.stopPropagation();
     180                }
     181            }).each( function( i, element ) {
     182                $( element ).wpTagsSuggest();
    182183            });
    183184

  • trunk/src/wp-includes/script-loader.php

    r38628 r38797  
    235235        /* translators: %d: Number of results found when using jQuery UI Autocomplete */
    236236        'manyResults' => __( '%d results found. Use up and down arrow keys to navigate.' ),
     237        'itemSelected' => __( 'Item selected.' ),
    237238    ) );
    238239
    … …  
    242243    // jQuery plugins
    243244    $scripts->add( 'jquery-color', "/wp-includes/js/jquery/jquery.color.min.js", array('jquery'), '2.1.1', 1 );
    244     $scripts->add( 'suggest', "/wp-includes/js/jquery/suggest$suffix.js", array('jquery'), '1.1-20110113', 1 );
    245245    $scripts->add( 'schedule', '/wp-includes/js/jquery/jquery.schedule.js', array('jquery'), '20m', 1 );
    246246    $scripts->add( 'jquery-query', "/wp-includes/js/jquery/jquery.query.js", array('jquery'), '2.1.7', 1 );
    … …  
    249249    $scripts->add( 'jquery-table-hotkeys', "/wp-includes/js/jquery/jquery.table-hotkeys$suffix.js", array('jquery', 'jquery-hotkeys'), false, 1 );
    250250    $scripts->add( 'jquery-touch-punch', "/wp-includes/js/jquery/jquery.ui.touch-punch.js", array('jquery-ui-widget', 'jquery-ui-mouse'), '0.2.2', 1 );
     251
     252    // Not used any more, registered for backwards compatibility.
     253    $scripts->add( 'suggest', "/wp-includes/js/jquery/suggest$suffix.js", array('jquery'), '1.1-20110113', 1 );
    251254
    252255    // Masonry v2 depended on jQuery. v3 does not. The older jquery-masonry handle is a shiv.
    … …  
    524527        ) );
    525528
    526         $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'suggest' ), false, 1 );
    527         did_action( 'init' ) && $scripts->localize( 'tags-box', 'tagsBoxL10n', array(
     529        $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'tags-suggest' ), false, 1 );
     530
     531        $scripts->add( 'tags-suggest', "/wp-admin/js/tags-suggest$suffix.js", array( 'jquery-ui-autocomplete', 'wp-a11y' ), false, 1 );
     532        did_action( 'init' ) && $scripts->localize( 'tags-suggest', 'tagsSuggestL10n', array(
    528533            'tagDelimiter' => _x( ',', 'tag delimiter' ),
    529534        ) );
    … …  
    585590        $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone', 'wp-a11y' ), false, 1 );
    586591
    587         $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest', 'wp-a11y' ), false, 1 );
     592        $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'tags-suggest', 'wp-a11y' ), false, 1 );
    588593        did_action( 'init' ) && $scripts->localize( 'inline-edit-post', 'inlineEditL10n', array(
    589594            'error'      => __( 'Error while saving the changes.' ),
Note: See TracChangeset for help on using the changeset viewer.