/**
* @output wp-admin/js/tags-box.js
*/
/* jshint curly: false, eqeqeq: false */
/* global ajaxurl, tagBox, array_unique_noempty */
( function( $ ) {
var tagDelimiter = wp.i18n._x( ',', 'tag delimiter' ) || ',';
/**
* Filters unique items and returns a new array.
*
* Filters all items from an array into a new array containing only the unique
* items. This also excludes whitespace or empty values.
*
* @since 2.8.0
*
* @global
*
* @param {Array} array The array to filter through.
*
* @return {Array} A new array containing only the unique items.
*/
window.array_unique_noempty = function( array ) {
var out = [];
// Trim the values and ensure they are unique.
$.each( array, function( key, val ) {
val = val || '';
val = val.trim();
if ( val && $.inArray( val, out ) === -1 ) {
out.push( val );
}
} );
return out;
};
/**
* The TagBox object.
*
* Contains functions to create and manage tags that can be associated with a
* post.
*
* @since 2.9.0
*
* @global
*/
window.tagBox = {
/**
* Cleans up tags by removing redundant characters.
*
* @since 2.9.0
*
* @memberOf tagBox
*
* @param {string} tags Comma separated tags that need to be cleaned up.
*
* @return {string} The cleaned up tags.
*/
clean : function( tags ) {
if ( ',' !== tagDelimiter ) {
tags = tags.replace( new RegExp( tagDelimiter, 'g' ), ',' );
}
tags = tags.replace(/\s*,\s*/g, ',').replace(/,+/g, ',').replace(/[,\s]+$/, '').replace(/^[,\s]+/, '');
if ( ',' !== tagDelimiter ) {
tags = tags.replace( /,/g, tagDelimiter );
}
return tags;
},
/**
* Parses tags and makes them editable.
*
* @since 2.9.0
*
* @memberOf tagBox
*
* @param {Object} el The tag element to retrieve the ID from.
*
* @return {boolean} Always returns false.
*/
parseTags : function(el) {
var id = el.id,
num = id.split('-check-num-')[1],
taxbox = $(el).closest('.tagsdiv'),
thetags = taxbox.find('.the-tags'),
current_tags = thetags.val().split( tagDelimiter ),
new_tags = [];
delete current_tags[num];
// Sanitize the current tags and push them as if they're new tags.
$.each( current_tags, function( key, val ) {
val = val || '';
val = val.trim();
if ( val ) {
new_tags.push( val );
}
});
thetags.val( this.clean( new_tags.join( tagDelimiter ) ) );
this.quickClicks( taxbox );
return false;
},
/**
* Creates clickable links, buttons and fields for adding or editing tags.
*
* @since 2.9.0
*
* @memberOf tagBox
*
* @param {Object} el The container HTML element.
*
* @return {void}
*/
quickClicks : function( el ) {
var thetags = $('.the-tags', el),
tagchecklist = $('.tagchecklist', el),
id = $(el).attr('id'),
current_tags, disabled;
if ( ! thetags.length )
return;
disabled = thetags.prop('disabled');
current_tags = thetags.val().split( tagDelimiter );
tagchecklist.empty();
/**
* Creates a delete button if tag editing is enabled, before adding it to the tag list.
*
* @since 2.5.0
*
* @memberOf tagBox
*
* @param {string} key The index of the current tag.
* @param {string} val The value of the current tag.
*
* @return {void}
*/
$.each( current_tags, function( key, val ) {
var listItem, xbutton;
val = val || '';
val = val.trim();
if ( ! val )
return;
// Create a new list item, and ensure the text is properly escaped.
listItem = $( '<li />' ).text( val );
// If tags editing isn't disabled, create the X button.
if ( ! disabled ) {
/*
* Build the X buttons, hide the X icon with aria-hidden and
* use visually hidden text for screen readers.
*/
xbutton = $( '<button type="button" id="' + id + '-check-num-' + key + '" class="ntdelbutton">' +
'<span class="remove-tag-icon" aria-hidden="true"></span>' +
'<span class="screen-reader-text">' + wp.i18n.__( 'Remove term:' ) + ' ' + listItem.html() + '</span>' +
'</button>' );
/**
* Handles the click and keypress event of the tag remove button.
*
* Makes sure the focus ends up in the tag input field when using
* the keyboard to delete the tag.
*
* @since 4.2.0
*
* @param {Event} e The click or keypress event to handle.
*
* @return {void}
*/
xbutton.on( 'click keypress', function( e ) {
// On click or when using the Enter/Spacebar keys.
if ( 'click' === e.type || 13 === e.keyCode || 32 === e.keyCode ) {
/*
* When using the keyboard, move focus back to the
* add new tag field. Note: when releasing the pressed
* key this will fire the `keyup` event on the input.
*/
if ( 13 === e.keyCode || 32 === e.keyCode ) {
$( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).trigger( 'focus' );
}
tagBox.userAction = 'remove';
tagBox.parseTags( this );
}
});
listItem.prepend( ' ' ).prepend( xbutton );
}
// Append the list item to the tag list.
tagchecklist.append( listItem );
});
// The buttons list is built now, give feedback to screen reader users.
tagBox.screenReadersMessage();
},
/**
* Adds a new tag.
*
* Also ensures that the quick links are properly generated.
*
* @since 2.9.0
*
* @memberOf tagBox
*
* @param {Object} el The container HTML element.
* @param {Object|boolean} a When this is an HTML element the text of that
* element will be used for the new tag.
* @param {number|boolean} f If this value is not passed then the tag input
* field is focused.
*
* @return {boolean} Always returns false.
*/
flushTags : function( el, a, f ) {
var tagsval, newtags, text,
tags = $( '.the-tags', el ),
newtag = $( 'input.newtag', el );
a = a || false;
text = a ? $(a).text() : newtag.val();
/*
* Return if there's no new tag or if the input field is empty.
* Note: when using the keyboard to add tags, focus is moved back to
* the input field and the `keyup` event attached on this field will
* fire when releasing the pressed key. Checking also for the field
* emptiness avoids to set the tags and call quickClicks() again.
*/
if ( 'undefined' == typeof( text ) || '' === text ) {
return false;
}
tagsval = tags.val();
newtags = tagsval ? tagsval + tagDelimiter + text : text;
newtags = this.clean( newtags );
newtags = array_unique_noempty( newtags.split( tagDelimiter ) ).join( tagDelimiter );
tags.val( newtags );
this.quickClicks( el );
if ( ! a )
newtag.val('');
if ( 'undefined' == typeof( f ) )
newtag.trigger( 'focus' );
return false;
},
/**
* Retrieves the available tags and creates a tagcloud.
*
* Retrieves the available tags from the database and creates an interactive
* tagcloud. Clicking a tag will add it.
*
* @since 2.9.0
*
* @memberOf tagBox
*
* @param {string} id The ID to extract the taxonomy from.
*
* @return {void}
*/
get : function( id ) {
var tax = id.substr( id.indexOf('-') + 1 );
/**
* Puts a received tag cloud into a DOM element.
*
* The tag cloud HTML is generated on the server.
*
* @since 2.9.0
*
* @param {number|string} r The response message from the Ajax call.
* @param {string} stat The status of the Ajax request.
*
* @return {void}
*/
$.post( ajaxurl, { 'action': 'get-tagcloud', 'tax': tax }, function( r, stat ) {
if ( 0 === r || 'success' != stat ) {
return;
}
r = $( '<div id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</div>' );
/**
* Adds a new tag when a tag in the tagcloud is clicked.
*
* @since 2.9.0
*
* @return {boolean} Returns false to prevent the default action.
*/
$( 'a', r ).on( 'click', function() {
tagBox.userAction = 'add';
tagBox.flushTags( $( '#' + tax ), this );
return false;
});
$( '#' + id ).after( r );
});
},
/**
* Track the user's last action.
*
* @since 4.7.0
*/
userAction: '',
/**
* Dispatches an audible message to screen readers.
*
* This will inform the user when a tag has been added or removed.
*
* @since 4.7.0
*
* @return {void}
*/
screenReadersMessage: function() {
var message;
switch ( this.userAction ) {
case 'remove':
message = wp.i18n.__( 'Term removed.' );
break;
case 'add':
message = wp.i18n.__( 'Term added.' );
break;
default:
return;
}
window.wp.a11y.speak( message, 'assertive' );
},
/**
* Initializes the tags box by setting up the links, buttons. Sets up event
* handling.
*
* This includes handling of pressing the enter key in the input field and the
* retrieval of tag suggestions.
*
* @since 2.9.0
*
* @memberOf tagBox
*
* @return {void}
*/
init : function() {
var ajaxtag = $('div.ajaxtag');
$('.tagsdiv').each( function() {
tagBox.quickClicks( this );
});
$( '.tagadd', ajaxtag ).on( 'click', function() {
tagBox.userAction = 'add';
tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
});
/**
* Handles pressing enter on the new tag input field.
*
* Prevents submitting the post edit form. Uses `keypress` to take
* into account Input Method Editor (IME) converters.
*
* @since 2.9.0
*
* @param {Event} event The keypress event that occurred.
*
* @return {void}
*/
$( 'input.newtag', ajaxtag ).on( 'keypress', function( event ) {
if ( 13 == event.which ) {
tagBox.userAction = 'add';
tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
event.preventDefault();
event.stopPropagation();
}
}).each( function( i, element ) {
$( element ).wpTagsSuggest();
});
/**
* Before a post is saved the value currently in the new tag input field will be
* added as a tag.
*
* @since 2.9.0
*
* @return {void}
*/
$('#post').on( 'submit', function(){
$('div.tagsdiv').each( function() {
tagBox.flushTags(this, false, 1);
});
});
/**
* Handles clicking on the tag cloud link.
*
* Makes sure the ARIA attributes are set correctly.
*
* @since 2.9.0
*
* @return {void}
*/
$('.tagcloud-link').on( 'click', function(){
// On the first click, fetch the tag cloud and insert it in the DOM.
tagBox.get( $( this ).attr( 'id' ) );
// Update button state, remove previous click event and attach a new one to toggle the cloud.
$( this )
.attr( 'aria-expanded', 'true' )
.off()
.on( 'click', function() {
$( this )
.attr( 'aria-expanded', 'false' === $( this ).attr( 'aria-expanded' ) ? 'true' : 'false' )
.siblings( '.the-tagcloud' ).toggle();
});
});
}
};
}( jQuery ));
All system for education purposes only. For more tools: Telegram @jackleet