|
1
|
|
-import*as lpUtils from"lpAssetsJsPath/utils.js";export class LPThemes{static selectors={container:".learn-press-themes",elListThemes:".lp-themes-grid",filter:".lp-themes-filter__item",count:".lp-themes-filter__count",search:".lp-themes-search__input",card:".lp-theme-card",title:".lp-theme-card__title",description:".lp-theme-card__description"};init(e){this.container=e,this.events(),this.countThemes()}events(){LPThemes._loadedEvents||(LPThemes._loadedEvents=!0,lpUtils.eventHandlers("click",[{selector:LPThemes.selectors.filter,callBack:this.filterByCategory.name,class:this}]),lpUtils.eventHandlers("input",[{selector:LPThemes.selectors.search,callBack:this.filterThemes.name,class:this}]))}countThemes(){const e=this.container,t=e.querySelectorAll(LPThemes.selectors.card),s={all:t.length};t.forEach(e=>{const t=e.getAttribute("data-category");s[t]=(s[t]||0)+1}),e.querySelectorAll(LPThemes.selectors.filter).forEach(e=>{const t=e.querySelector(LPThemes.selectors.count),l=`(${s[e.getAttribute("data-category")]||0})`;t&&t.textContent!==l&&(t.textContent=l)})}filterByCategory({e:e,target:t}){const s=t.closest(LPThemes.selectors.filter),l=s.closest(LPThemes.selectors.container);l&&(e.preventDefault(),l.querySelectorAll(LPThemes.selectors.filter).forEach(e=>{const t=e===s;e.classList.toggle("active",t),e.setAttribute("aria-pressed",t?"true":"false")}),this.filterThemes())}filterThemes(){const e=this.container,t=e.querySelector(LPThemes.selectors.search),s=(t?t.value.trim().toLowerCase():"").split(/\s+/).filter(Boolean),l=e.querySelector(`${LPThemes.selectors.filter}.active`),r=l?l.getAttribute("data-category"):"all";e.querySelectorAll(LPThemes.selectors.card).forEach(e=>{const t=e.querySelector(LPThemes.selectors.title),l=e.querySelector(LPThemes.selectors.description),c=`${t?t.textContent:""} ${l?l.textContent:""}`.toLowerCase();e.hidden="all"!==r&&r!==e.getAttribute("data-category")||!s.every(e=>c.includes(e))})}}const lpThemes=new LPThemes;lpUtils.lpOnElementReady(LPThemes.selectors.elListThemes,e=>{const t=e.closest(LPThemes.selectors.container);lpThemes.init(t)}); |
|
1
|
+import*as lpUtils from"lpAssetsJsPath/utils.js";export class LPThemes{static selectors={container:".learn-press-themes",elListThemes:".lp-themes-grid",filter:".lp-themes-filter__item",filterToggle:".lp-themes-filter__toggle",count:".lp-themes-filter__count",search:".lp-themes-search__input",searchContainer:".lp-themes-search",searchButton:".lp-themes-search__btn",searchClear:".lp-themes-search__btn-clear",searchClose:".lp-themes-search__close",card:".lp-theme-card",title:".lp-theme-card__title",description:".lp-theme-card__description"};init(e){this.container=e,this.events(),this.countThemes()}events(){LPThemes._loadedEvents||(LPThemes._loadedEvents=!0,lpUtils.eventHandlers("click",[{selector:LPThemes.selectors.filter,callBack:this.filterByCategory.name,class:this}]),lpUtils.eventHandlers("input",[{selector:LPThemes.selectors.search,callBack:this.filterThemes.name,class:this}]),lpUtils.eventHandlers("click",[{selector:LPThemes.selectors.searchButton,callBack:this.openSearch.name,class:this},{selector:LPThemes.selectors.searchClear,callBack:this.clearSearch.name,class:this},{selector:LPThemes.selectors.searchClose,callBack:this.closeSearch.name,class:this},{selector:LPThemes.selectors.filterToggle,callBack:this.toggleFilterMenu.name,class:this}]),document.addEventListener("click",e=>{const t=this.container?.querySelector(".lp-themes-toolbar");t?.classList.contains("is-filter-open")&&!t.contains(e.target)&&this.toggleFilterMenu(!1)}),document.addEventListener("keydown",e=>{"Escape"===e.key&&(this.closeSearch(),this.toggleFilterMenu(!1))}))}toggleFilterMenu(e){const t=this.container.querySelector(".lp-themes-toolbar"),s=this.container.querySelector(LPThemes.selectors.filterToggle);if(!t||!s)return;const r="boolean"==typeof e?e:!t.classList.contains("is-filter-open");t.classList.toggle("is-filter-open",r),s.setAttribute("aria-expanded",r?"true":"false")}openSearch(){const e=this.container.querySelector(LPThemes.selectors.searchContainer);e&&(this.toggleFilterMenu(!1),e.classList.add("is-open"),e.querySelector(LPThemes.selectors.searchButton)?.setAttribute("aria-expanded","true"),this.updateSearchClearBtnState(),e.querySelector(LPThemes.selectors.search)?.focus())}closeSearch(){if(!this.container)return;const e=this.container.querySelector(LPThemes.selectors.searchContainer);e&&e.classList.contains("is-open")&&(e.classList.remove("is-open"),e.querySelector(LPThemes.selectors.searchButton)?.setAttribute("aria-expanded","false"),this.updateSearchClearBtnState(),e.querySelector(LPThemes.selectors.searchButton)?.focus())}clearSearch(e){e?.e&&e.e.preventDefault();const t=this.container?.querySelector(LPThemes.selectors.search);t&&(t.value="",this.updateSearchClearBtnState(),this.filterThemes(),t.focus())}updateSearchClearBtnState(){const e=this.container?.querySelector(LPThemes.selectors.search),t=this.container?.querySelector(LPThemes.selectors.searchClear);t&&e&&(t.disabled=!e.value.trim())}countThemes(){const e=this.container,t=e.querySelectorAll(LPThemes.selectors.card),s={all:t.length};t.forEach(e=>{const t=e.getAttribute("data-category");s[t]=(s[t]||0)+1}),e.querySelectorAll(LPThemes.selectors.filter).forEach(e=>{const t=e.querySelector(LPThemes.selectors.count),r=`(${s[e.getAttribute("data-category")]||0})`;t&&t.textContent!==r&&(t.textContent=r)})}filterByCategory({e:e,target:t}){const s=t.closest(LPThemes.selectors.filter),r=s.closest(LPThemes.selectors.container);r&&(e.preventDefault(),this.toggleFilterMenu(!1),r.querySelectorAll(LPThemes.selectors.filter).forEach(e=>{const t=e===s;e.classList.toggle("active",t),e.setAttribute("aria-pressed",t?"true":"false")}),this.filterThemes())}filterThemes(){const e=this.container,t=e.querySelector(LPThemes.selectors.search);this.updateSearchClearBtnState();const s=(t?t.value.trim().toLowerCase():"").split(/\s+/).filter(Boolean),r=e.querySelector(`${LPThemes.selectors.filter}.active`),l=r?r.getAttribute("data-category"):"all";e.querySelectorAll(LPThemes.selectors.card).forEach(e=>{const t=e.querySelector(LPThemes.selectors.title),r=e.querySelector(LPThemes.selectors.description),c=`${t?t.textContent:""} ${r?r.textContent:""}`.toLowerCase();e.hidden="all"!==l&&l!==e.getAttribute("data-category")||!s.every(e=>c.includes(e))})}}const lpThemes=new LPThemes;lpUtils.lpOnElementReady(LPThemes.selectors.elListThemes,e=>{const t=e.closest(LPThemes.selectors.container);lpThemes.init(t)}); |