← All changes | _inc/jetpack-modules.js +99 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,99 @@
	1	+( function ( window, $, items, models, views, i18n, modalinfo, nonces ) {
	2	+ 'use strict';
	3	+
	4	+ var modules, list_table, handle_facet_click, $the_filters, $the_search, $bulk_button;
	5	+
	6	+ $the_filters = $( '.navbar-form' );
	7	+ $the_search = $( '#srch-term-search-input' );
	8	+ $bulk_button = $( '#doaction' );
	9	+
	10	+ modules = new models.Modules( {
	11	+ items: items,
	12	+ } );
	13	+
	14	+ // eslint-disable-next-line no-unused-vars -- Does this have side effects?
	15	+ list_table = new views.List_Table( {
	16	+ el: '#the-list',
	17	+ model: modules,
	18	+ } );
	19	+
	20	+ // Kick off an initial redraw.
	21	+ modules.trigger( 'change' );
	22	+
	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();
	28	+
	29	+ var $link = $( this );
	30	+
	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	+
	41	+ modules.trigger( 'change' );
	42	+ };
	43	+
	44	+ $( '.subsubsub a, .purpose-filter a' ).on( 'click', handle_facet_click );
	45	+
	46	+ $the_filters.on( 'click', '.button-group .button', { modules: modules }, function ( event ) {
	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.
	52	+ $( this ).addClass( 'active' ).siblings( '.active' ).removeClass( 'active' );
	53	+
	54	+ modules.trigger( 'change' );
	55	+ } );
	56	+
	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	+ );
	70	+
	71	+ $the_search.prop( 'placeholder', i18n.search_placeholder );
	72	+
	73	+ $bulk_button.on( 'click', function ( event ) {
	74	+ var selectedModules = $( '.jetpack-modules-list-table-form' ).serialize(),
	75	+ selectedAction = $( this ).siblings( 'select' ).val(),
	76	+ url;
	77	+
	78	+ if ( selectedModules.length && '-1' !== selectedAction ) {
	79	+ url = 'admin.php?page=jetpack&action=' + encodeURIComponent( selectedAction );
	80	+ url += '&' + selectedModules;
	81	+ url += '&_wpnonce=' + encodeURIComponent( nonces.bulk );
	82	+
	83	+ window.location.href = url;
	84	+ } else {
	85	+ // Possibly add in an alert here explaining why nothing's happening?
	86	+ }
	87	+
	88	+ event.preventDefault();
	89	+ } );
	90	+} )(
	91	+ window,
	92	+ jQuery,
	93	+ window.jetpackModulesData.modules,
	94	+ window.jetpackModules.models,
	95	+ window.jetpackModules.views,
	96	+ window.jetpackModulesData.i18n,
	97	+ window.jetpackModulesData.modalinfo,
	98	+ window.jetpackModulesData.nonces
	99	+);