1/**
2 * Default settings for jQuery UI Autocomplete for use with non-hierarchical taxonomies.
3 *
4 * @output wp-admin/js/tags-suggest.js
5 */
6( function( $ ) {
7 var tempID = 0;
8 var separator = wp.i18n._x( ',', 'tag delimiter' ) || ',';
9 var __ = wp.i18n.__,
10 _n = wp.i18n._n,
11 sprintf = wp.i18n.sprintf;
12
13 function split( val ) {
14 return val.split( new RegExp( separator + '\\s*' ) );
15 }
16
17 function getLast( term ) {
18 return split( term ).pop();
19 }
20
21 /**
22 * Add UI Autocomplete to an input or textarea element with presets for use
23 * with non-hierarchical taxonomies.
24 *
25 * Example: `$( element ).wpTagsSuggest( options )`.
26 *
27 * The taxonomy can be passed in a `data-wp-taxonomy` attribute on the element or
28 * can be in `options.taxonomy`.
29 *
30 * @since 4.7.0
31 *
32 * @param {Object} options Options that are passed to UI Autocomplete. Can be used to override the default settings.
33 * @return {Object} jQuery instance.
34 */
35 $.fn.wpTagsSuggest = function( options ) {
36 var cache;
37 var last;
38 var $element = $( this );
39
40 // Do not initialize if the element doesn't exist.
41 if ( ! $element.length ) {
42 return this;
43 }
44
45 options = options || {};
46
47 var taxonomy = options.taxonomy || $element.attr( 'data-wp-taxonomy' ) || 'post_tag';
48
49 delete( options.taxonomy );
50
51 options = $.extend( {
52 source: function( request, response ) {
53 var term;
54
55 if ( last === request.term ) {
56 response( cache );
57 return;
58 }
59
60 term = getLast( request.term );
61
62 $.get( window.ajaxurl, {
63 action: 'ajax-tag-search',
64 tax: taxonomy,
65 q: term,
66 number: 20
67 } ).always( function() {
68 $element.removeClass( 'ui-autocomplete-loading' ); // UI fails to remove this sometimes?
69 } ).done( function( data ) {
70 var tagName;
71 var tags = [];
72
73 if ( data ) {
74 data = data.split( '\n' );
75
76 for ( tagName in data ) {
77 var id = ++tempID;
78
79 tags.push({
80 id: id,
81 name: data[tagName]
82 });
83 }
84
85 cache = tags;
86 response( tags );
87 } else {
88 response( tags );
89 }
90 } );
91
92 last = request.term;
93 },
94 focus: function( event, ui ) {
95 $element.attr( 'aria-activedescendant', 'wp-tags-autocomplete-' + ui.item.id );
96
97 // Don't empty the input field when using the arrow keys
98 // to highlight items. See api.jqueryui.com/autocomplete/#event-focus
99 event.preventDefault();
100 },
101 select: function( event, ui ) {
102 var tags = split( $element.val() );
103 // Remove the last user input.
104 tags.pop();
105 // Append the new tag and an empty element to get one more separator at the end.
106 tags.push( ui.item.name, '' );
107
108 $element.val( tags.join( separator + ' ' ) );
109
110 if ( $.ui.keyCode.TAB === event.keyCode ) {
111 // Audible confirmation message when a tag has been selected.
112 window.wp.a11y.speak( wp.i18n.__( 'Term selected.' ), 'assertive' );
113 event.preventDefault();
114 } else if ( $.ui.keyCode.ENTER === event.keyCode ) {
115 // If we're in the edit post Tags meta box, add the tag.
116 if ( window.tagBox ) {
117 window.tagBox.userAction = 'add';
118 window.tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
119 }
120
121 // Do not close Quick Edit / Bulk Edit.
122 event.preventDefault();
123 event.stopPropagation();
124 }
125
126 return false;
127 },
128 open: function() {
129 $element.attr( 'aria-expanded', 'true' );
130 },
131 close: function() {
132 $element.attr( 'aria-expanded', 'false' );
133 },
134 minLength: 2,
135 position: {
136 my: 'left top+2',
137 at: 'left bottom',
138 collision: 'none'
139 },
140 messages: {
141 noResults: __( 'No results found.' ),
142 results: function( number ) {
143 return sprintf(
144 /* translators: %d: Number of search results found. */
145 _n(
146 '%d result found. Use up and down arrow keys to navigate.',
147 '%d results found. Use up and down arrow keys to navigate.',
148 number
149 ),
150 number
151 );
152 }
153 }
154 }, options );
155
156 $element.on( 'keydown', function() {
157 $element.removeAttr( 'aria-activedescendant' );
158 } );
159
160 $element.autocomplete( options );
161
162 // Ensure the autocomplete instance exists.
163 if ( ! $element.autocomplete( 'instance' ) ) {
164 return this;
165 }
166
167 $element.autocomplete( 'instance' )._renderItem = function( ul, item ) {
168 return $( '<li role="option" id="wp-tags-autocomplete-' + item.id + '">' )
169 .text( item.name )
170 .appendTo( ul );
171 };
172
173 $element.attr( {
174 'role': 'combobox',
175 'aria-autocomplete': 'list',
176 'aria-expanded': 'false',
177 'aria-owns': $element.autocomplete( 'widget' ).attr( 'id' )
178 } )
179 .on( 'focus', function() {
180 var inputValue = split( $element.val() ).pop();
181
182 // Don't trigger a search if the field is empty.
183 // Also, avoids screen readers announce `No search results`.
184 if ( inputValue ) {
185 $element.autocomplete( 'search' );
186 }
187 } );
188
189 // Returns a jQuery object containing the menu element.
190 $element.autocomplete( 'widget' )
191 .addClass( 'wp-tags-autocomplete' )
192 .attr( 'role', 'listbox' )
193 .removeAttr( 'tabindex' ) // Remove the `tabindex=0` attribute added by jQuery UI.
194
195 /*
196 * Looks like Safari and VoiceOver need an `aria-selected` attribute. See ticket #33301.
197 * The `menufocus` and `menublur` events are the same events used to add and remove
198 * the `ui-state-focus` CSS class on the menu items. See jQuery UI Menu Widget.
199 */
200 .on( 'menufocus', function( event, ui ) {
201 ui.item.attr( 'aria-selected', 'true' );
202 })
203 .on( 'menublur', function() {
204 // The `menublur` event returns an object where the item is `null`,
205 // so we need to find the active item with other means.
206 $( this ).find( '[aria-selected="true"]' ).removeAttr( 'aria-selected' );
207 });
208
209 return this;
210 };
211
212}( jQuery ) );
213