← All changes | assets/dist/js/admin/lp-themes.js +102 -0 4.4.8 → 4.4.10 View file →

		@@ -604,10 +604,15 @@
604	604	static selectors = {
605	605	container: '.learn-press-themes',
606	606	elListThemes: '.lp-themes-grid',
607	607	filter: '.lp-themes-filter__item',
	608	+ filterToggle: '.lp-themes-filter__toggle',
608	609	count: '.lp-themes-filter__count',
609	610	search: '.lp-themes-search__input',
	611	+ searchContainer: '.lp-themes-search',
	612	+ searchButton: '.lp-themes-search__btn',
	613	+ searchClear: '.lp-themes-search__btn-clear',
	614	+ searchClose: '.lp-themes-search__close',
610	615	card: '.lp-theme-card',
611	616	title: '.lp-theme-card__title',
612	617	description: '.lp-theme-card__description'
613	618	};
		@@ -640,10 +645,105 @@
640	645	selector: LPThemes.selectors.search,
641	646	callBack: this.filterThemes.name,
642	647	class: this
643	648	}]);
	649	+ lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_0__.eventHandlers('click', [{
	650	+ selector: LPThemes.selectors.searchButton,
	651	+ callBack: this.openSearch.name,
	652	+ class: this
	653	+ }, {
	654	+ selector: LPThemes.selectors.searchClear,
	655	+ callBack: this.clearSearch.name,
	656	+ class: this
	657	+ }, {
	658	+ selector: LPThemes.selectors.searchClose,
	659	+ callBack: this.closeSearch.name,
	660	+ class: this
	661	+ }, {
	662	+ selector: LPThemes.selectors.filterToggle,
	663	+ callBack: this.toggleFilterMenu.name,
	664	+ class: this
	665	+ }]);
	666	+ document.addEventListener('click', event => {
	667	+ const toolbar = this.container?.querySelector('.lp-themes-toolbar');
	668	+ if (toolbar?.classList.contains('is-filter-open') && !toolbar.contains(event.target)) {
	669	+ this.toggleFilterMenu(false);
	670	+ }
	671	+ });
	672	+ document.addEventListener('keydown', event => {
	673	+ if ('Escape' === event.key) {
	674	+ this.closeSearch();
	675	+ this.toggleFilterMenu(false);
	676	+ }
	677	+ });
644	678	}
645	679
	680	+ /** Toggle the tablet and mobile category menu. */
	681	+ toggleFilterMenu(open) {
	682	+ const toolbar = this.container.querySelector('.lp-themes-toolbar');
	683	+ const button = this.container.querySelector(LPThemes.selectors.filterToggle);
	684	+ if (!toolbar || !button) {
	685	+ return;
	686	+ }
	687	+ const shouldOpen = typeof open === 'boolean' ? open : !toolbar.classList.contains('is-filter-open');
	688	+ toolbar.classList.toggle('is-filter-open', shouldOpen);
	689	+ button.setAttribute('aria-expanded', shouldOpen ? 'true' : 'false');
	690	+ }
	691	+
	692	+ /** Open the compact search field. */
	693	+ openSearch() {
	694	+ const search = this.container.querySelector(LPThemes.selectors.searchContainer);
	695	+ if (!search) {
	696	+ return;
	697	+ }
	698	+ this.toggleFilterMenu(false);
	699	+ search.classList.add('is-open');
	700	+ search.querySelector(LPThemes.selectors.searchButton)?.setAttribute('aria-expanded', 'true');
	701	+ this.updateSearchClearBtnState();
	702	+ search.querySelector(LPThemes.selectors.search)?.focus();
	703	+ }
	704	+
	705	+ /** Close the compact search field. */
	706	+ closeSearch() {
	707	+ if (!this.container) {
	708	+ return;
	709	+ }
	710	+ const search = this.container.querySelector(LPThemes.selectors.searchContainer);
	711	+ if (!search) {
	712	+ return;
	713	+ }
	714	+ if (!search.classList.contains('is-open')) {
	715	+ return;
	716	+ }
	717	+ search.classList.remove('is-open');
	718	+ search.querySelector(LPThemes.selectors.searchButton)?.setAttribute('aria-expanded', 'false');
	719	+ this.updateSearchClearBtnState();
	720	+ search.querySelector(LPThemes.selectors.searchButton)?.focus();
	721	+ }
	722	+
	723	+ /** Clear the search input field and re-filter themes. */
	724	+ clearSearch(args) {
	725	+ if (args?.e) {
	726	+ args.e.preventDefault();
	727	+ }
	728	+ const search = this.container?.querySelector(LPThemes.selectors.search);
	729	+ if (search) {
	730	+ search.value = '';
	731	+ this.updateSearchClearBtnState();
	732	+ this.filterThemes();
	733	+ search.focus();
	734	+ }
	735	+ }
	736	+
	737	+ /** Update disabled state of clear search button. */
	738	+ updateSearchClearBtnState() {
	739	+ const search = this.container?.querySelector(LPThemes.selectors.search);
	740	+ const clearBtn = this.container?.querySelector(LPThemes.selectors.searchClear);
	741	+ if (clearBtn && search) {
	742	+ clearBtn.disabled = !search.value.trim();
	743	+ }
	744	+ }
	745	+
646	746	/**
647	747	* Count themes and update each category count.
648	748	*/
649	749	countThemes() {
		@@ -681,8 +781,9 @@
681	781	if (!container) {
682	782	return;
683	783	}
684	784	e.preventDefault();
	785	+ this.toggleFilterMenu(false);
685	786	container.querySelectorAll(LPThemes.selectors.filter).forEach(item => {
686	787	const isActive = item === filter;
687	788	item.classList.toggle('active', isActive);
688	789	item.setAttribute('aria-pressed', isActive ? 'true' : 'false');
		@@ -695,8 +796,9 @@
695	796	*/
696	797	filterThemes() {
697	798	const container = this.container;
698	799	const search = container.querySelector(LPThemes.selectors.search);
	800	+ this.updateSearchClearBtnState();
699	801	const query = search ? search.value.trim().toLowerCase() : '';
700	802	const searchTerms = query.split(/\s+/).filter(Boolean);
701	803	const active = container.querySelector(`${LPThemes.selectors.filter}.active`);
702	804	const category = active ? active.getAttribute('data-category') : 'all';