|
1
|
|
|
/** global: GLSR, jQuery */ |
|
2
|
|
|
;(function( _, wp, $ ) { |
|
3
|
|
|
|
|
4
|
|
|
'use strict'; |
|
5
|
|
|
|
|
6
|
|
|
GLSR.Search = function( selector, options ) { |
|
7
|
|
|
this.el = $( selector ); |
|
8
|
|
|
this.options = options; |
|
9
|
|
|
this.searchTerm = null; |
|
10
|
|
|
this.init_(); |
|
11
|
|
|
}; |
|
12
|
|
|
|
|
13
|
|
|
GLSR.Search.prototype = { |
|
14
|
|
|
defaults: { |
|
15
|
|
|
action: null, |
|
16
|
|
|
exclude: [], |
|
17
|
|
|
onInit: null, |
|
18
|
|
|
onResultClick: null, |
|
19
|
|
|
results: {}, |
|
20
|
|
|
selected: -1, |
|
21
|
|
|
selectedClass: 'glsr-selected-result', |
|
22
|
|
|
selectorEntries: '.glsr-strings-table tbody', |
|
23
|
|
|
selectorResults: '.glsr-search-results', |
|
24
|
|
|
selectorSearch: '.glsr-search-input', |
|
25
|
|
|
// entriesEl |
|
26
|
|
|
// resultsEl |
|
27
|
|
|
// searchEl |
|
28
|
|
|
}, |
|
29
|
|
|
|
|
30
|
|
|
/** @return void */ |
|
31
|
|
|
init_: function() { |
|
32
|
|
|
this.options = $.extend( {}, this.defaults, this.options ); |
|
33
|
|
|
if( !this.el.length )return; |
|
34
|
|
|
this.options.entriesEl = this.el.parent().find( this.options.selectorEntries ); |
|
35
|
|
|
this.options.resultsEl = this.el.find( this.options.selectorResults ); |
|
36
|
|
|
this.options.searchEl = this.el.find( this.options.selectorSearch ); |
|
37
|
|
|
this.options.searchEl.attr( 'aria-describedby', 'live-search-desc' ); |
|
38
|
|
|
if( typeof this.options.onInit === 'function' ) { |
|
39
|
|
|
this.options.onInit.call( this ); |
|
40
|
|
|
} |
|
41
|
|
|
this.initEvents_(); |
|
42
|
|
|
}, |
|
43
|
|
|
|
|
44
|
|
|
/** @return void */ |
|
45
|
|
|
initEvents_: function() { |
|
46
|
|
|
this.options.searchEl.on( 'input', _.debounce( this.onSearchInput_.bind( this ), 500 )); |
|
47
|
|
|
this.options.searchEl.on( 'keyup', this.onSearchKeyup_.bind( this )); |
|
48
|
|
|
this.options.searchEl.on( 'keydown keypress', function( ev ) { |
|
49
|
|
|
if( GLSR.keys.ENTER !== ev.which )return; |
|
50
|
|
|
ev.preventDefault(); |
|
51
|
|
|
}); |
|
52
|
|
|
$( document ).on( 'click', this.onDocumentClick_.bind( this )); |
|
53
|
|
|
$( document ).on( 'keydown', this.onDocumentKeydown_.bind( this )); |
|
54
|
|
|
}, |
|
55
|
|
|
|
|
56
|
|
|
/** @return void */ |
|
57
|
|
|
abort_: function() { |
|
58
|
|
|
if( 'undefined' === typeof this.searchRequest )return; |
|
59
|
|
|
this.searchRequest.abort(); |
|
60
|
|
|
}, |
|
61
|
|
|
|
|
62
|
|
|
/** @return void */ |
|
63
|
|
|
clearResults_: function() { |
|
64
|
|
|
this.abort_(); |
|
65
|
|
|
this.options.resultsEl.empty(); |
|
66
|
|
|
this.el.removeClass( 'is-active' ); |
|
67
|
|
|
$( 'body' ).removeClass( 'glsr-focus' ); |
|
68
|
|
|
}, |
|
69
|
|
|
|
|
70
|
|
|
/** @return void */// Manage entries |
|
71
|
|
|
deleteEntry_: function( index ) { |
|
72
|
|
|
var row = this.options.entriesEl.children( 'tr' ).eq( index ); |
|
73
|
|
|
var search = this; |
|
74
|
|
|
row.find( 'td' ).css({ backgroundColor:'#faafaa' }); |
|
75
|
|
|
row.fadeOut( 350, function() { |
|
76
|
|
|
$( this ).remove(); |
|
77
|
|
|
search.options.results = {}; |
|
78
|
|
|
search.reindexRows_(); |
|
79
|
|
|
search.setVisibility_(); |
|
80
|
|
|
}); |
|
81
|
|
|
}, |
|
82
|
|
|
|
|
83
|
|
|
/** @return void */ |
|
84
|
|
|
displayResults_: function( items ) { |
|
85
|
|
|
$( 'body' ).addClass( 'glsr-focus' ); |
|
86
|
|
|
this.options.resultsEl.append( items ); |
|
87
|
|
|
this.options.resultsEl.children( 'span' ).on( 'click', this.onResultClick_.bind( this )); |
|
88
|
|
|
}, |
|
89
|
|
|
|
|
90
|
|
|
/** @return void */// Manage entries |
|
91
|
|
|
makeSortable_: function() { |
|
92
|
|
|
this.options.entriesEl.on( 'click', 'a.delete', this.onEntryDelete_.bind( this )); |
|
93
|
|
|
this.options.entriesEl.sortable({ |
|
94
|
|
|
items: 'tr', |
|
95
|
|
|
tolerance: 'pointer', |
|
96
|
|
|
start: function( ev, ui ) { |
|
97
|
|
|
ui.placeholder.height( ui.helper[0].scrollHeight ); |
|
98
|
|
|
}, |
|
99
|
|
|
sort: function( ev, ui ) { |
|
100
|
|
|
var top = ev.pageY - $( this ).offsetParent().offset().top - ( ui.helper.outerHeight( true ) / 2 ); |
|
101
|
|
|
ui.helper.css({ |
|
102
|
|
|
top: top + 'px', |
|
103
|
|
|
}); |
|
104
|
|
|
}, |
|
105
|
|
|
}); |
|
106
|
|
|
}, |
|
107
|
|
|
|
|
108
|
|
|
/** @return void */ |
|
109
|
|
|
navigateResults_: function( diff ) { |
|
110
|
|
|
this.options.selected += diff; |
|
111
|
|
|
this.options.results.removeClass( this.options.selectedClass ); |
|
112
|
|
|
if( this.options.selected < 0 ) { |
|
113
|
|
|
// reached the start (should now allow keydown scroll) |
|
114
|
|
|
this.options.selected = -1; |
|
115
|
|
|
this.options.searchEl.focus(); |
|
116
|
|
|
} |
|
117
|
|
|
if( this.options.selected >= this.options.results.length ) { |
|
118
|
|
|
// reached the end (should now allow keydown scroll) |
|
119
|
|
|
this.options.selected = this.options.results.length - 1; |
|
120
|
|
|
} |
|
121
|
|
|
if( this.options.selected >= 0 ) { |
|
122
|
|
|
this.options.results.eq( this.options.selected ) |
|
123
|
|
|
.addClass( this.options.selectedClass ) |
|
124
|
|
|
.focus(); |
|
125
|
|
|
} |
|
126
|
|
|
}, |
|
127
|
|
|
|
|
128
|
|
|
/** @return void */ |
|
129
|
|
|
onDocumentClick_: function( ev ) { |
|
130
|
|
|
if( $( ev.target ).find( this.el ).length && $( 'body' ).hasClass( 'glsr-focus' )) { |
|
131
|
|
|
this.clearResults_(); |
|
132
|
|
|
} |
|
133
|
|
|
}, |
|
134
|
|
|
|
|
135
|
|
|
/** @return void */ |
|
136
|
|
|
onDocumentKeydown_: function( ev ) { |
|
137
|
|
|
if( !this.options.results )return; |
|
138
|
|
|
if( GLSR.keys.ESC === ev.which ) { |
|
139
|
|
|
this.clearResults_(); |
|
140
|
|
|
} |
|
141
|
|
|
if( GLSR.keys.ENTER === ev.which || GLSR.keys.SPACE === ev.which ) { |
|
142
|
|
|
var selected = this.options.resultsEl.find( '.' + this.options.selectedClass ); |
|
143
|
|
|
if( selected ) { |
|
144
|
|
|
selected.trigger( 'click' ); |
|
145
|
|
|
} |
|
146
|
|
|
} |
|
147
|
|
|
if( GLSR.keys.UP === ev.which ) { |
|
148
|
|
|
ev.preventDefault(); |
|
149
|
|
|
this.navigateResults_(-1); |
|
150
|
|
|
} |
|
151
|
|
|
if( GLSR.keys.DOWN === ev.which ) { |
|
152
|
|
|
ev.preventDefault(); |
|
153
|
|
|
this.navigateResults_(1); |
|
154
|
|
|
} |
|
155
|
|
|
}, |
|
156
|
|
|
|
|
157
|
|
|
/** @return void */// Manage entries |
|
158
|
|
|
onEntryDelete_: function( ev ) { |
|
159
|
|
|
ev.preventDefault(); |
|
160
|
|
|
this.deleteEntry_( $( ev.target ).closest( 'tr' ).index() ); |
|
161
|
|
|
}, |
|
162
|
|
|
|
|
163
|
|
|
/** @return void */ |
|
164
|
|
|
onResultClick_: function( ev ) { |
|
165
|
|
|
ev.preventDefault(); |
|
166
|
|
|
if( typeof this.options.onResultClick === 'function' ) { |
|
167
|
|
|
this.options.onResultClick.call( this, ev ); |
|
168
|
|
|
} |
|
169
|
|
|
this.clearResults_(); |
|
170
|
|
|
}, |
|
171
|
|
|
|
|
172
|
|
|
/** @return void */ |
|
173
|
|
|
onSearchInput_: function( ev ) { |
|
174
|
|
|
this.abort_(); |
|
175
|
|
|
if( this.searchTerm === ev.target.value && this.options.results.length ) { |
|
176
|
|
|
return this.displayResults_( this.options.results ); |
|
177
|
|
|
} |
|
178
|
|
|
this.options.resultsEl.empty(); |
|
179
|
|
|
this.options.selected = -1; |
|
180
|
|
|
this.searchTerm = ev.target.value; |
|
181
|
|
|
if( this.searchTerm === '' ) { |
|
182
|
|
|
return this.reset_(); |
|
183
|
|
|
} |
|
184
|
|
|
this.el.addClass( 'is-active' ); |
|
185
|
|
|
this.searchRequest = wp.ajax.post( GLSR.action, { |
|
186
|
|
|
request: { |
|
187
|
|
|
action: this.options.action, |
|
188
|
|
|
exclude: this.options.exclude, |
|
189
|
|
|
nonce: this.el.find( '#_search_nonce' ).val(), |
|
190
|
|
|
search: this.searchTerm, |
|
191
|
|
|
}, |
|
192
|
|
|
}).done( function( response ) { |
|
193
|
|
|
this.el.removeClass( 'is-active' ); |
|
194
|
|
|
this.displayResults_( response.items ? response.items : response.empty ); |
|
195
|
|
|
this.options.results = this.options.resultsEl.children(); |
|
196
|
|
|
delete this.searchRequest; |
|
197
|
|
|
}.bind( this )); |
|
198
|
|
|
}, |
|
199
|
|
|
|
|
200
|
|
|
/** @return void */ |
|
201
|
|
|
onSearchKeyup_: function( ev ) { |
|
202
|
|
|
if( GLSR.keys.ESC === ev.which ) { |
|
203
|
|
|
this.reset_(); |
|
204
|
|
|
} |
|
205
|
|
|
if( GLSR.keys.ENTER === ev.which ) { |
|
206
|
|
|
this.onSearchInput_( ev ); |
|
207
|
|
|
ev.preventDefault(); |
|
208
|
|
|
} |
|
209
|
|
|
}, |
|
210
|
|
|
|
|
211
|
|
|
/** @return void */// Manage entries |
|
212
|
|
|
onUnassign_: function( ev ) { |
|
213
|
|
|
ev.preventDefault(); |
|
214
|
|
|
var assigned = this.el.find( '.description' ); |
|
215
|
|
|
this.el.find( 'input#assigned_to' ).val( '' ); |
|
216
|
|
|
assigned.find( 'a' ).css({ color:'#c00' }); |
|
217
|
|
|
assigned.fadeOut( 'fast', function() { |
|
218
|
|
|
$( this ).html( '' ).show(); |
|
219
|
|
|
}); |
|
220
|
|
|
}, |
|
221
|
|
|
|
|
222
|
|
|
/** @return void */// Manage entries |
|
223
|
|
|
reindexRows_: function() { |
|
224
|
|
|
var search = this; |
|
225
|
|
|
this.options.exclude = []; |
|
226
|
|
|
this.options.entriesEl.children( 'tr' ).each( function( index ) { |
|
227
|
|
|
$( this ).find( '.glsr-string-td2' ).children().filter( ':input' ).each( function() { |
|
228
|
|
|
var input = $( this ); |
|
229
|
|
|
var name = input.attr( 'name' ).replace( /\[\d+\]/i, '[' + index + ']' ); |
|
230
|
|
|
input.attr( 'name', name ); |
|
231
|
|
|
if( input.is( '[data-id]' )) { |
|
232
|
|
|
search.options.exclude.push({ id: input.val() }); |
|
233
|
|
|
} |
|
234
|
|
|
}); |
|
235
|
|
|
}); |
|
236
|
|
|
}, |
|
237
|
|
|
|
|
238
|
|
|
/** @return void */ |
|
239
|
|
|
reset_: function() { |
|
240
|
|
|
this.clearResults_(); |
|
241
|
|
|
this.options.results = {}; |
|
242
|
|
|
this.options.searchEl.val( '' ); |
|
243
|
|
|
}, |
|
244
|
|
|
|
|
245
|
|
|
/** @return void */// Manage entries |
|
246
|
|
|
setVisibility_: function() { |
|
247
|
|
|
var action = this.options.entriesEl.children().length > 0 ? 'remove' : 'add'; |
|
248
|
|
|
this.options.entriesEl.parent()[action + 'Class']( 'glsr-hidden' ); |
|
249
|
|
|
}, |
|
250
|
|
|
}; |
|
251
|
|
|
})( window._, window.wp, jQuery ); |
|
252
|
|
|
|