wp-admin/js/tags-box.js

   1 /* jshint curly: false, eqeqeq: false */
   2 /* global ajaxurl */
   3
   4 var tagBox, array_unique_noempty;
   5
   6 ( function( $ ) {
   7         var tagDelimiter = ( window.tagsSuggestL10n && window.tagsSuggestL10n.tagDelimiter ) || ',';
   8
   9         // Return an array with any duplicate, whitespace or empty values removed
  10         array_unique_noempty = function( array ) {
  11                 var out = [];
  12
  13                 $.each( array, function( key, val ) {
  14                         val = $.trim( val );
  15
  16                         if ( val && $.inArray( val, out ) === -1 ) {
  17                                 out.push( val );
  18                         }
  19                 } );
  20
  21                 return out;
  22         };
  23
  24         tagBox = {
  25                 clean : function( tags ) {
  26                         if ( ',' !== tagDelimiter ) {
  27                                 tags = tags.replace( new RegExp( tagDelimiter, 'g' ), ',' );
  28                         }
  29
  30                         tags = tags.replace(/\s*,\s*/g, ',').replace(/,+/g, ',').replace(/[,\s]+$/, '').replace(/^[,\s]+/, '');
  31
  32                         if ( ',' !== tagDelimiter ) {
  33                                 tags = tags.replace( /,/g, tagDelimiter );
  34                         }
  35
  36                         return tags;
  37                 },
  38
  39                 parseTags : function(el) {
  40                         var id = el.id,
  41                                 num = id.split('-check-num-')[1],
  42                                 taxbox = $(el).closest('.tagsdiv'),
  43                                 thetags = taxbox.find('.the-tags'),
  44                                 current_tags = thetags.val().split( tagDelimiter ),
  45                                 new_tags = [];
  46
  47                         delete current_tags[num];
  48
  49                         $.each( current_tags, function( key, val ) {
  50                                 val = $.trim( val );
  51                                 if ( val ) {
  52                                         new_tags.push( val );
  53                                 }
  54                         });
  55
  56                         thetags.val( this.clean( new_tags.join( tagDelimiter ) ) );
  57
  58                         this.quickClicks( taxbox );
  59                         return false;
  60                 },
  61
  62                 quickClicks : function( el ) {
  63                         var thetags = $('.the-tags', el),
  64                                 tagchecklist = $('.tagchecklist', el),
  65                                 id = $(el).attr('id'),
  66                                 current_tags, disabled;
  67
  68                         if ( ! thetags.length )
  69                                 return;
  70
  71                         disabled = thetags.prop('disabled');
  72
  73                         current_tags = thetags.val().split( tagDelimiter );
  74                         tagchecklist.empty();
  75
  76                         $.each( current_tags, function( key, val ) {
  77                                 var span, xbutton;
  78
  79                                 val = $.trim( val );
  80
  81                                 if ( ! val )
  82                                         return;
  83
  84                                 // Create a new span, and ensure the text is properly escaped.
  85                                 span = $('<span />').text( val );
  86
  87                                 // If tags editing isn't disabled, create the X button.
  88                                 if ( ! disabled ) {
  89                                         /*
  90                                          * Build the X buttons, hide the X icon with aria-hidden and
  91                                          * use visually hidden text for screen readers.
  92                                          */
  93                                         xbutton = $( '<button type="button" id="' + id + '-check-num-' + key + '" class="ntdelbutton">' +
  94                                                 '<span class="remove-tag-icon" aria-hidden="true"></span>' +
  95                                                 '<span class="screen-reader-text">' + window.tagsSuggestL10n.removeTerm + ' ' + val + '</span>' +
  96                                                 '</button>' );
  97
  98                                         xbutton.on( 'click keypress', function( e ) {
  99                                                 // On click or when using the Enter/Spacebar keys.
 100                                                 if ( 'click' === e.type || 13 === e.keyCode || 32 === e.keyCode ) {
 101                                                         /*
 102                                                          * When using the keyboard, move focus back to the
 103                                                          * add new tag field. Note: when releasing the pressed
 104                                                          * key this will fire the `keyup` event on the input.
 105                                                          */
 106                                                         if ( 13 === e.keyCode || 32 === e.keyCode ) {
 107                                                                 $( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).focus();
 108                                                         }
 109
 110                                                         tagBox.userAction = 'remove';
 111                                                         tagBox.parseTags( this );
 112                                                 }
 113                                         });
 114
 115                                         span.prepend( '&nbsp;' ).prepend( xbutton );
 116                                 }
 117
 118                                 // Append the span to the tag list.
 119                                 tagchecklist.append( span );
 120                         });
 121                         // The buttons list is built now, give feedback to screen reader users.
 122                         tagBox.screenReadersMessage();
 123                 },
 124
 125                 flushTags : function( el, a, f ) {
 126                         var tagsval, newtags, text,
 127                                 tags = $( '.the-tags', el ),
 128                                 newtag = $( 'input.newtag', el );
 129
 130                         a = a || false;
 131
 132                         text = a ? $(a).text() : newtag.val();
 133
 134                         /*
 135                          * Return if there's no new tag or if the input field is empty.
 136                          * Note: when using the keyboard to add tags, focus is moved back to
 137                          * the input field and the `keyup` event attached on this field will
 138                          * fire when releasing the pressed key. Checking also for the field
 139                          * emptiness avoids to set the tags and call quickClicks() again.
 140                          */
 141                         if ( 'undefined' == typeof( text ) || '' === text ) {
 142                                 return false;
 143                         }
 144
 145                         tagsval = tags.val();
 146                         newtags = tagsval ? tagsval + tagDelimiter + text : text;
 147
 148                         newtags = this.clean( newtags );
 149                         newtags = array_unique_noempty( newtags.split( tagDelimiter ) ).join( tagDelimiter );
 150                         tags.val( newtags );
 151                         this.quickClicks( el );
 152
 153                         if ( ! a )
 154                                 newtag.val('');
 155                         if ( 'undefined' == typeof( f ) )
 156                                 newtag.focus();
 157
 158                         return false;
 159                 },
 160
 161                 get : function( id ) {
 162                         var tax = id.substr( id.indexOf('-') + 1 );
 163
 164                         $.post( ajaxurl, { 'action': 'get-tagcloud', 'tax': tax }, function( r, stat ) {
 165                                 if ( 0 === r || 'success' != stat ) {
 166                                         return;
 167                                 }
 168
 169                                 r = $( '<p id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</p>' );
 170
 171                                 $( 'a', r ).click( function() {
 172                                         tagBox.userAction = 'add';
 173                                         tagBox.flushTags( $( '#' + tax ), this );
 174                                         return false;
 175                                 });
 176
 177                                 $( '#' + id ).after( r );
 178                         });
 179                 },
 180
 181                 /**
 182                  * Track the user's last action.
 183                  *
 184                  * @since 4.7.0
 185                  */
 186                 userAction: '',
 187
 188                 /**
 189                  * Dispatch an audible message to screen readers.
 190                  *
 191                  * @since 4.7.0
 192                  */
 193                 screenReadersMessage: function() {
 194                         var message;
 195
 196                         switch ( this.userAction ) {
 197                                 case 'remove':
 198                                         message = window.tagsSuggestL10n.termRemoved;
 199                                         break;
 200
 201                                 case 'add':
 202                                         message = window.tagsSuggestL10n.termAdded;
 203                                         break;
 204
 205                                 default:
 206                                         return;
 207                         }
 208
 209                         window.wp.a11y.speak( message, 'assertive' );
 210                 },
 211
 212                 init : function() {
 213                         var ajaxtag = $('div.ajaxtag');
 214
 215                         $('.tagsdiv').each( function() {
 216                                 tagBox.quickClicks( this );
 217                         });
 218
 219                         $( '.tagadd', ajaxtag ).click( function() {
 220                                 tagBox.userAction = 'add';
 221                                 tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
 222                         });
 223
 224                         $( 'input.newtag', ajaxtag ).keyup( function( event ) {
 225                                 if ( 13 == event.which ) {
 226                                         tagBox.userAction = 'add';
 227                                         tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
 228                                         event.preventDefault();
 229                                         event.stopPropagation();
 230                                 }
 231                         }).keypress( function( event ) {
 232                                 if ( 13 == event.which ) {
 233                                         event.preventDefault();
 234                                         event.stopPropagation();
 235                                 }
 236                         }).each( function( i, element ) {
 237                                 $( element ).wpTagsSuggest();
 238                         });
 239
 240                         // save tags on post save/publish
 241                         $('#post').submit(function(){
 242                                 $('div.tagsdiv').each( function() {
 243                                         tagBox.flushTags(this, false, 1);
 244                                 });
 245                         });
 246
 247                         // Fetch and toggle the Tag cloud.
 248                         $('.tagcloud-link').click(function(){
 249                                 // On the first click, fetch the tag cloud and insert it in the DOM.
 250                                 tagBox.get( $( this ).attr( 'id' ) );
 251                                 // Update button state, remove previous click event and attach a new one to toggle the cloud.
 252                                 $( this )
 253                                         .attr( 'aria-expanded', 'true' )
 254                                         .unbind()
 255                                         .click( function() {
 256                                                 $( this )
 257                                                         .attr( 'aria-expanded', 'false' === $( this ).attr( 'aria-expanded' ) ? 'true' : 'false' )
 258                                                         .siblings( '.the-tagcloud' ).toggle();
 259                                         });
 260                         });
 261                 }
 262         };
 263 }( jQuery ));