WordPress.org

Make WordPress Core

Changeset 38797


Ignore:
Timestamp:
10/14/16 22:39:49 (10 months 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.