← All changes | _inc/jetpack-modules.js +37 -27 13.2.4 → 16.3-a.1 View file →

		@@ -1,20 +1,11 @@
1	1	( function ( window, $, items, models, views, i18n, modalinfo, nonces ) {
2	2	'use strict';
3	3
4		- var modules,
5		- list_table,
6		- handle_module_tag_click,
7		- $the_table,
8		- $the_filters,
9		- $the_search,
10		- $jp_frame,
11		- $bulk_button;
	4	+ var modules, list_table, handle_facet_click, $the_filters, $the_search, $bulk_button;
12	5
13		- $the_table = $( '.wp-list-table.jetpack-modules' );
14	6	$the_filters = $( '.navbar-form' );
15	7	$the_search = $( '#srch-term-search-input' );
16		- $jp_frame = $( '.jp-frame' );
17	8	$bulk_button = $( '#doaction' );
18	9
19	10	modules = new models.Modules( {
20	11	items: items,
		@@ -19,8 +10,9 @@
19	10	modules = new models.Modules( {
20	11	items: items,
21	12	} );
22	13
	14	+ // eslint-disable-next-line no-unused-vars -- Does this have side effects?
23	15	list_table = new views.List_Table( {
24	16	el: '#the-list',
25	17	model: modules,
26	18	} );
		@@ -27,37 +19,55 @@
27	19
28	20	// Kick off an initial redraw.
29	21	modules.trigger( 'change' );
30	22
31		- // Handle the filtering of modules.
32		- handle_module_tag_click = function ( event ) {
33		- $( '.subsubsub' ).find( 'li.current' ).removeClass( 'current' );
	23	+ // Handle the filtering of modules. The tag list (".subsubsub") and the
	24	+ // "Purpose" list (".purpose-filter") are independent single-select facets
	25	+ // that share this behaviour and combine with one another.
	26	+ handle_facet_click = function ( event ) {
	27	+ event.preventDefault();
34	28
35		- // Switch the item in the subsubsub list that's flagged as current.
36		- $( '.subsubsub' )
37		- .find( 'a[data-title="' + $( this ).data( 'title' ) + '"]' )
38		- .closest( 'li' )
39		- .addClass( 'current' );
	29	+ var $link = $( this );
40	30
41		- event.preventDefault();
	31	+ // Ignore facets greyed out because they have no matches under the current filters.
	32	+ if ( $link.closest( 'li' ).hasClass( 'is-empty' ) ) {
	33	+ return;
	34	+ }
	35	+
	36	+ // Move the "current" selection within this facet list only.
	37	+ var $list = $link.closest( '.subsubsub, .purpose-filter' );
	38	+ $list.find( 'li.current' ).removeClass( 'current' );
	39	+ $link.closest( 'li' ).addClass( 'current' );
	40	+
42	41	modules.trigger( 'change' );
43	42	};
44	43
45		- $( '.subsubsub a' ).on( 'click', { modules: modules }, handle_module_tag_click );
	44	+ $( '.subsubsub a, .purpose-filter a' ).on( 'click', handle_facet_click );
46	45
47	46	$the_filters.on( 'click', '.button-group .button', { modules: modules }, function ( event ) {
48	47	event.preventDefault();
	48	+
	49	+ // Each button group is an independent, single-select facet: activating a
	50	+ // button clears only its siblings. State and Purpose are separate groups,
	51	+ // so their selections combine rather than replacing one another.
49	52	$( this ).addClass( 'active' ).siblings( '.active' ).removeClass( 'active' );
	53	+
50	54	modules.trigger( 'change' );
51	55	} );
52	56
53		- $the_search.on( 'keyup search', function ( e ) {
54		- // Don't trigger change on tab, since it's only used for accessibility
55		- // anyway, and will remove all checked boxes
56		- if ( e.code !== 'Tab' ) {
57		- modules.trigger( 'change' );
58		- }
59		- } );
	57	+ $the_search.on(
	58	+ 'keyup search',
	59	+ // Debounce so we re-render (and history.replaceState) once the user
	60	+ // pauses typing rather than on every keystroke. This keeps the ~50-row
	61	+ // rebuild off the critical path and avoids Safari's replaceState rate limit.
	62	+ window._.debounce( function ( e ) {
	63	+ // Don't trigger change on tab, since it's only used for accessibility
	64	+ // anyway, and will remove all checked boxes
	65	+ if ( e.code !== 'Tab' ) {
	66	+ modules.trigger( 'change' );
	67	+ }
	68	+ }, 200 )
	69	+ );
60	70
61	71	$the_search.prop( 'placeholder', i18n.search_placeholder );
62	72
63	73	$bulk_button.on( 'click', function ( event ) {