← All changes | assets/src/js/admin/lp-themes.js +122 -0 4.4.9 → 4.4.10 View file →

		@@ -13,10 +13,15 @@
13	13	static selectors = {
14	14	container: '.learn-press-themes',
15	15	elListThemes: '.lp-themes-grid',
16	16	filter: '.lp-themes-filter__item',
	17	+ filterToggle: '.lp-themes-filter__toggle',
17	18	count: '.lp-themes-filter__count',
18	19	search: '.lp-themes-search__input',
	20	+ searchContainer: '.lp-themes-search',
	21	+ searchButton: '.lp-themes-search__btn',
	22	+ searchClear: '.lp-themes-search__btn-clear',
	23	+ searchClose: '.lp-themes-search__close',
19	24	card: '.lp-theme-card',
20	25	title: '.lp-theme-card__title',
21	26	description: '.lp-theme-card__description',
22	27	};
		@@ -55,10 +60,125 @@
55	60	callBack: this.filterThemes.name,
56	61	class: this,
57	62	},
58	63	] );
	64	+
	65	+ lpUtils.eventHandlers( 'click', [
	66	+ {
	67	+ selector: LPThemes.selectors.searchButton,
	68	+ callBack: this.openSearch.name,
	69	+ class: this,
	70	+ },
	71	+ {
	72	+ selector: LPThemes.selectors.searchClear,
	73	+ callBack: this.clearSearch.name,
	74	+ class: this,
	75	+ },
	76	+ {
	77	+ selector: LPThemes.selectors.searchClose,
	78	+ callBack: this.closeSearch.name,
	79	+ class: this,
	80	+ },
	81	+ {
	82	+ selector: LPThemes.selectors.filterToggle,
	83	+ callBack: this.toggleFilterMenu.name,
	84	+ class: this,
	85	+ },
	86	+ ] );
	87	+
	88	+ document.addEventListener( 'click', ( event ) => {
	89	+ const toolbar = this.container?.querySelector( '.lp-themes-toolbar' );
	90	+ if (
	91	+ toolbar?.classList.contains( 'is-filter-open' ) &&
	92	+ ! toolbar.contains( event.target )
	93	+ ) {
	94	+ this.toggleFilterMenu( false );
	95	+ }
	96	+ } );
	97	+
	98	+ document.addEventListener( 'keydown', ( event ) => {
	99	+ if ( 'Escape' === event.key ) {
	100	+ this.closeSearch();
	101	+ this.toggleFilterMenu( false );
	102	+ }
	103	+ } );
59	104	}
60	105
	106	+ /** Toggle the tablet and mobile category menu. */
	107	+ toggleFilterMenu( open ) {
	108	+ const toolbar = this.container.querySelector( '.lp-themes-toolbar' );
	109	+ const button = this.container.querySelector(
	110	+ LPThemes.selectors.filterToggle
	111	+ );
	112	+ if ( ! toolbar || ! button ) {
	113	+ return;
	114	+ }
	115	+
	116	+ const shouldOpen =
	117	+ typeof open === 'boolean'
	118	+ ? open
	119	+ : ! toolbar.classList.contains( 'is-filter-open' );
	120	+ toolbar.classList.toggle( 'is-filter-open', shouldOpen );
	121	+ button.setAttribute( 'aria-expanded', shouldOpen ? 'true' : 'false' );
	122	+ }
	123	+
	124	+ /** Open the compact search field. */
	125	+ openSearch() {
	126	+ const search = this.container.querySelector( LPThemes.selectors.searchContainer );
	127	+ if ( ! search ) {
	128	+ return;
	129	+ }
	130	+
	131	+ this.toggleFilterMenu( false );
	132	+ search.classList.add( 'is-open' );
	133	+ search.querySelector( LPThemes.selectors.searchButton )?.setAttribute( 'aria-expanded', 'true' );
	134	+ this.updateSearchClearBtnState();
	135	+ search.querySelector( LPThemes.selectors.search )?.focus();
	136	+ }
	137	+
	138	+ /** Close the compact search field. */
	139	+ closeSearch() {
	140	+ if ( ! this.container ) {
	141	+ return;
	142	+ }
	143	+
	144	+ const search = this.container.querySelector( LPThemes.selectors.searchContainer );
	145	+ if ( ! search ) {
	146	+ return;
	147	+ }
	148	+ if ( ! search.classList.contains( 'is-open' ) ) {
	149	+ return;
	150	+ }
	151	+
	152	+ search.classList.remove( 'is-open' );
	153	+ search.querySelector( LPThemes.selectors.searchButton )?.setAttribute( 'aria-expanded', 'false' );
	154	+ this.updateSearchClearBtnState();
	155	+ search.querySelector( LPThemes.selectors.searchButton )?.focus();
	156	+ }
	157	+
	158	+ /** Clear the search input field and re-filter themes. */
	159	+ clearSearch( args ) {
	160	+ if ( args?.e ) {
	161	+ args.e.preventDefault();
	162	+ }
	163	+ const search = this.container?.querySelector( LPThemes.selectors.search );
	164	+ if ( search ) {
	165	+ search.value = '';
	166	+ this.updateSearchClearBtnState();
	167	+ this.filterThemes();
	168	+ search.focus();
	169	+ }
	170	+ }
	171	+
	172	+ /** Update disabled state of clear search button. */
	173	+ updateSearchClearBtnState() {
	174	+ const search = this.container?.querySelector( LPThemes.selectors.search );
	175	+ const clearBtn = this.container?.querySelector( LPThemes.selectors.searchClear );
	176	+ if ( clearBtn && search ) {
	177	+ clearBtn.disabled = ! search.value.trim();
	178	+ }
	179	+ }
	180	+
61	181	/**
62	182	* Count themes and update each category count.
63	183	*/
64	184	countThemes() {
		@@ -99,8 +219,9 @@
99	219	return;
100	220	}
101	221
102	222	e.preventDefault();
	223	+ this.toggleFilterMenu( false );
103	224	container
104	225	.querySelectorAll( LPThemes.selectors.filter )
105	226	.forEach( ( item ) => {
106	227	const isActive = item === filter;
		@@ -119,8 +240,9 @@
119	240	*/
120	241	filterThemes() {
121	242	const container = this.container;
122	243	const search = container.querySelector( LPThemes.selectors.search );
	244	+ this.updateSearchClearBtnState();
123	245	const query = search ? search.value.trim().toLowerCase() : '';
124	246	const searchTerms = query.split( /\s+/ ).filter( Boolean );
125	247	const active = container.querySelector(
126	248	`${ LPThemes.selectors.filter }.active`