1<#if entries?has_content>
2
3 <#assign
4 totalCount = 0
5 companyId = themeDisplay.getCompanyGroupId()
6 vocabularyId = restClient.get("/headless-admin-taxonomy/v1.0/sites/${companyId}/taxonomy-vocabularies/by-external-reference-code/RESOURCE_TYPE").id
7 categories = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-vocabularies/${vocabularyId}/taxonomy-categories").items
8 orderedEntries = []
9 validCategoryIds = []
10 />
11
12 <#list categories as category>
13 <#if stringUtil.equals(category.externalReferenceCode, "HOW_TO") || stringUtil.equals(category.externalReferenceCode, "OFFICIAL_DOCUMENTATION")>
14 <#assign validCategoryIds += [category.id] />
15 </#if>
16 </#list>
17
18 <#list assetCategoriesSearchFacetDisplayContext.getBucketDisplayContexts() as bucket>
19 <#assign totalCount = totalCount + bucket.getCount() />
20 </#list>
21
22 <ul class="learn-category-facet-tabs list-unstyled tab-list" id="tab-list">
23 <li class="facet-value">
24 <@clay.button
25 cssClass="btn-unstyled facet-clear tab-btn text-center ${assetCategoriesSearchFacetDisplayContext.isNothingSelected()?then('selected-tab-btn', '')}"
26 displayType="link"
27 onClick="${namespace}updateSelection(event)"
28 value="clear"
29 >
30 <span class="term-text">${languageUtil.get(locale, "all-results", "All Results")}</span>
31
32 <#if entry.isFrequencyVisible()>
33 <span class="term-count">${totalCount}</span>
34 </#if>
35 </@clay.button>
36 </li>
37
38 <#list entries as entry>
39 <#assign categoryId = entry.getFilterValue() />
40
41 <#list categories as category>
42 <#if category.id == categoryId>
43 <#if category.externalReferenceCode == "OFFICIAL_DOCUMENTATION">
44 <#assign orderedEntries = [entry] + orderedEntries />
45 <#elseif category.externalReferenceCode == "HOW_TO">
46 <#assign orderedEntries += [entry] />
47 </#if>
48 </#if>
49 </#list>
50</#list>
51
52<#list orderedEntries as entry>
53 <li class="facet-value">
54 <@clay.button
55 cssClass="btn-unstyled facet-term tab-btn term-name text-center ${(entry.isSelected())?then('selected-tab-btn', '')}"
56 data\-term\-id="${entry.getFilterValue()}"
57 disabled="true"
58 displayType="link"
59 onClick="${namespace}updateSelection(event)"
60 >
61 <span class="term-text">
62 ${htmlUtil.escape(entry.getBucketText())}
63 </span>
64
65 <#if entry.isFrequencyVisible()>
66 <span class="term-count">
67 ${entry.getFrequency()}
68 </span>
69 </#if>
70 </@clay.button>
71 </li>
72</#list>
73 </ul>
74
75 <div class="dropdown learn-category-facet-tabs tab-list" id="tab-list-mobile">
76 <button
77 aria-expanded="false"
78 aria-haspopup="true"
79 class="btn btn-unstyled d-inline-block selected-tab-btn"
80 data-toggle="liferay-dropdown"
81 displayType="button"
82 id="dropdownAlignment1"
83 >
84 <div class="d-flex facet-value-mobile justify-content-center opacity-75">
85 <#assign facetCount = 0 />
86 <#list entries as entry>
87 <#if entry.isSelected()>
88 <#assign facetCount++ />
89
90 <span class="term-text">${entry.getBucketText()}</span>
91 <#if entry.isFrequencyVisible()>
92 <span class="term-count">${entry.getFrequency()}</span>
93 </#if>
94 </#if>
95 </#list>
96 <#if facetCount == 0>
97 <span class="term-text">All results</span>
98 <span class="term-count">${totalCount}</span>
99 </#if>
100 </div>
101 </button>
102
103 <ul
104 aria-labelledby="dropdownAlignment1"
105 class="dropdown-menu"
106 x-placement="bottom-start"
107 >
108 <li class="align-items-center d-flex position-relative ${assetCategoriesSearchFacetDisplayContext.isNothingSelected()?then('selected-item-mobile-tab', '')}">
109 <@clay.button
110 cssClass="dropdown-item facet-clear nav-link rounded"
111 displayType="link"
112 onClick="${namespace}updateSelection(event)"
113 value="clear"
114 >
115 <span class="term-text">${languageUtil.get(locale, "all-results", "All Results")}</span>
116 <#if entry.isFrequencyVisible()>
117 <span class="term-count">${totalCount}</span>
118 </#if>
119 </@clay.button>
120 </li>
121
122 <#list entries as entry>
123 <li class="align-items-center d-flex ${(entry.isSelected())?then('selected-item-mobile-tab', '')}">
124 <@clay.button
125 cssClass="dropdown-item facet-clear nav-link rounded"
126 data\-term\-id="${entry.getFilterValue()}"
127 displayType="link"
128 onClick="${namespace}updateSelection(event)"
129 >
130 <span class="term-text">${htmlUtil.escape(entry.getBucketText())}</span>
131 <#if entry.isFrequencyVisible()>
132 <span class="term-count">${entry.getFrequency()}</span>
133 </#if>
134 </@clay.button>
135 </li>
136 </#list>
137 </ul>
138 </div>
139</#if>
140
141<@liferay_aui.script>
142 function handleStyleTabs(event) {
143 const targetButton = event.currentTarget;
144 const buttons = document.querySelectorAll('.tab-btn');
145
146 buttons.forEach(button => {
147 button.classList.remove('selected-tab-btn');
148 });
149
150 if (targetButton.classList.contains('tab-btn')) {
151 targetButton.classList.add('selected-tab-btn');
152 }
153 }
154
155 function ${namespace}updateSelection(event) {
156 handleStyleTabs(event);
157
158 const form = event.currentTarget.form;
159
160 if (form) {
161 Liferay.Search.FacetUtil.selectTerms(form, []);
162
163 if (event.target.value === "clear") {
164 Liferay.Search.FacetUtil.clearSelections(event);
165 }
166 else {
167 Liferay.Search.FacetUtil.changeSelection(event);
168 }
169 }
170 }
171</@>
172
173<style>
174 .learn-category-facet-tabs .facet-term-unselected .term-text {
175 opacity: 0.8;
176 }
177
178 .learn-category-facet-tabs .facet-value {
179 flex:1;
180 }
181
182 .learn-category-facet-tabs.tab-list {
183 align-items:center;
184 display: flex;
185 background: var(--Neutral-01, #F7F7F8);
186 border-radius: 99px;
187 height: 52px;
188 padding: 4px 6px;
189 }
190
191 .learn-category-facet-tabs .selected-tab-btn {
192 background: var(--Action-Primary-Active-Lighten, #E6EDFB);
193 border-radius: 99px;
194 opacity: 1;
195 padding: 8px;
196 text-align: center;
197 width: 100%;
198 }
199
200 .learn-category-facet-tabs .term-count {
201 background: var(--Status-Info-Info, #2E5AAC);
202 border-radius: 12px;
203 color: var(--Neutral-00, #FFF);
204 font-size: 13px;
205 padding: 2px 5px;
206 }
207
208 .learn-category-facet-tabs .term-text {
209 color: var(--Neutral-10, #282934);
210 font-size: 14px;
211 font-style: normal;
212 font-weight: 600;
213 }
214
215 .selected-item-mobile-tab::after {
216 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='currentColor' class='lexicon-icon lexicon-icon-check' role='presentation' viewBox='0 0 512 512'%3E%3Cpath d='M192.9,429.5c-8.3,0-16.4-3.3-22.3-9.2L44.5,294.1C15,263.2,62.7,222,89.1,249.5L191.5,352l230-258.9 c27.2-30.5,74.3,11.5,47.1,41.9L216.4,418.9c-5.8,6.5-14,10.3-22.6,10.6C193.5,429.5,193.2,429.5,192.9,429.5z'%3E%3C/path%3E%3C/svg%3E");
217 background-repeat: no-repeat;
218 background-size: contain;
219 content: "";
220 height: 15px;
221 position: absolute;
222 right: 1rem;
223 top: 50%;
224 transform: translateY(-50%);
225 width: 15px;
226 }
227
228 @media screen and (max-width: 992px) {
229 .learn-category-facet-tabs .facet-value-mobile {
230 gap: var(--spacer-2, 0.5rem);
231 }
232
233 .learn-category-facet-tabs .facet-value-mobile .term-text {
234 opacity: 0.80;
235 }
236
237 .learn-category-facet-tabs .dropdown-menu,
238 .learn-category-facet-tabs#tab-list-mobile {
239 max-width: none;
240 padding: var(--spacer-2, 0.5rem);
241 width: 100%;
242 }
243
244 .learn-category-facet-tabs#tab-list {
245 display: none !important;
246 }
247
248 .learn-category-facet-tabs#tab-list-mobile {
249 align-items: center;
250 display: flex !important;
251 width: 100%;
252 }
253 }
254
255 #tab-list-mobile {
256 display: none;
257 }
258
259 #tab-list-mobile::after {
260 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23999AA3' d='M103.5 204.3l136.1 136.1c9 9 23.7 9 32.7 0l136.1-136.1c14.6-14.6 4.3-39.5-16.4-39.5H119.9C99.2 164.8 88.9 189.7 103.5 204.3z'/%3E%3C/svg%3E");
261 background-repeat: no-repeat;
262 background-size: contain;
263 content: "";
264 height: 15px;
265 position: absolute;
266 right: 1rem;
267 top: 50%;
268 transform: translateY(-50%);
269 width: 15px;
270 }
271</style>