1<#macro treeview_item
2 cssClassTreeItem = ""
3 frequency = 0
4 id = ""
5 frequencyVisible = true
6 name = ""
7 selectable = false
8 selected = false
9 termDisplayContexts = ""
10>
11 <li class="treeview-item" role="none">
12 <#if name?has_content>
13 <div
14 aria-controls="${namespace}treeItem${id}"
15 aria-expanded="true"
16 class="treeview-link ${cssClassTreeItem}"
17 data-target="#${namespace}treeItem${id}"
18 data-toggle="collapse"
19 onClick="${namespace}toggleTreeItem('${namespace}treeItem${id}');"
20 role="treeitem"
21 tabindex="0"
22 >
23 <span class="c-inner" tabindex="-2">
24 <span class="autofit-row">
25 <#if termDisplayContexts?has_content>
26 <span class="autofit-col">
27 <button
28 aria-controls="${namespace}treeItem${id}"
29 aria-expanded="true"
30 class="btn btn-monospaced component-expander"
31 data-target="#${namespace}treeItem${id}"
32 data-toggle="collapse"
33 tabindex="-1"
34 type="button"
35 >
36 <span class="c-inner" tabindex="-2">
37 <@clay["icon"] symbol="angle-down" />
38
39 <@clay["icon"]
40 cssClass="component-expanded-d-none"
41 symbol="angle-right"
42 />
43 </span>
44 </button>
45 </span>
46 </#if>
47
48 <#if selectable>
49 <span class="autofit-col autofit-col-expand">
50 <div class="custom-checkbox custom-control">
51 <label>
52 <input
53 autocomplete="off"
54 ${selected?then("checked", "")}
55 class="custom-control-input facet-term"
56 data-term-id=${id}
57 disabled
58 onChange="Liferay.Search.FacetUtil.changeSelection(event);"
59 type="checkbox"
60 />
61
62 <span class="custom-control-label">
63 <span class="custom-control-label-text">
64 ${name}
65
66 <#if frequencyVisible>
67 (${frequency})
68 </#if>
69 </span>
70 </span>
71 </label>
72 </div>
73 </span>
74 <#else>
75 <span class="autofit-col autofit-col-expand">
76 <span class="component-text">
77 <span
78 class="text-truncate-inline"
79 title="${name}"
80 >
81 <span class="text-truncate">
82 ${name}
83
84 <#if frequencyVisible>
85 (${frequency})
86 </#if>
87 </span>
88 </span>
89 </span>
90 </span>
91 </#if>
92 </span>
93 </span>
94 </div>
95 </#if>
96
97 <#if termDisplayContexts?has_content>
98 <div class="collapse show" id="${namespace}treeItem${id}">
99 <ul class="treeview-group" role="group">
100 <#list termDisplayContexts as termDisplayContext>
101 <#if termDisplayContext?index == 5>
102 <li class="treeview-item" role="none">
103 <a class="read-more show" href="javascript:${namespace}toggleTreeItemMore('${namespace}treeItem${id}');">
104 <@liferay_ui.message key="more"></@>...
105 </a>
106 </li>
107 </#if>
108 <@treeview_item
109 cssClassTreeItem="tree-item-category ${(termDisplayContext?index >= 5)?then('hide', '')}"
110 frequency=termDisplayContext.getFrequency()
111 frequencyVisible=termDisplayContext.isFrequencyVisible()
112 id=termDisplayContext.getFilterValue()
113 name=htmlUtil.escape(termDisplayContext.getBucketText())
114 selectable=true
115 selected=termDisplayContext.isSelected()
116 />
117 </#list>
118 <#if termDisplayContexts?size > 5>
119 <li class="treeview-item" role="none">
120 <a class="read-less hide" href="javascript:${namespace}toggleTreeItemMore('${namespace}treeItem${id}');">
121 <@liferay_ui.message key="less"></@>
122 </a>
123 </li>
124 </#if>
125 </ul>
126 </div>
127 </#if>
128 </li>
129</#macro>
130
131<@liferay_ui["panel-container"]
132 extended=true
133 id="${namespace + 'facetAssetCategoriesPanelContainer'}"
134 markupView="lexicon"
135 persistState=true
136>
137 <#assign vocabularyNames = assetCategoriesSearchFacetDisplayContext.getVocabularyNames() />
138
139 <@liferay_ui.panel
140 collapsible=true
141 cssClass="search-facet search-facet-display-vocabulary"
142 id="${namespace + 'facetAssetCategoriesPanel'}"
143 markupView="lexicon"
144 persistState=true
145 title="${(vocabularyNames?size == 1)?then(vocabularyNames[0]!'', 'category')}"
146 >
147 <#if vocabularyNames?has_content>
148 <ul class="treeview treeview-light treeview-nested treeview-vocabulary-display" role="tree">
149 <#list vocabularyNames as vocabularyName>
150 <@treeview_item
151 cssClassTreeItem="tree-item-vocabulary"
152 frequencyVisible=false
153 id=vocabularyName?replace(' ','__') + vocabularyName?index
154 name="${(vocabularyNames?size == 1)?then('', htmlUtil.escape(vocabularyName))}"
155 termDisplayContexts=assetCategoriesSearchFacetDisplayContext.getBucketDisplayContexts(vocabularyName)
156 />
157 </#list>
158 </ul>
159 </#if>
160
161 <#if !assetCategoriesSearchFacetDisplayContext.isNothingSelected()>
162 <@liferay_aui.button
163 cssClass="btn-link btn-unstyled facet-clear-btn"
164 onClick="Liferay.Search.FacetUtil.clearSelections(event);"
165 value="clear"
166 />
167 </#if>
168 </@>
169</@>
170
171<@liferay_aui.script>
172 function ${namespace}toggleTreeItem(dataTarget) {
173 const dataTargetElements = document.querySelectorAll("[data-target=\"#" + dataTarget + "\"]");
174
175 dataTargetElements.forEach(
176 element => {
177 if (element.classList.contains('collapsed')) {
178 element.classList.remove('collapsed');
179 element.setAttribute('aria-expanded', true);
180 }
181 else {
182 element.classList.add('collapsed');
183 element.setAttribute('aria-expanded', false);
184 }
185 }
186 );
187
188 const subtreeCategoryTreeElement = document.getElementById(dataTarget);
189
190 if (subtreeCategoryTreeElement) {
191 if (subtreeCategoryTreeElement.classList.contains('show')) {
192 subtreeCategoryTreeElement.classList.remove('show');
193 }
194 else {
195 subtreeCategoryTreeElement.classList.add('show');
196 }
197 }
198 }
199
200 function ${namespace}toggleTreeItemMore(targetId) {
201
202 const dataTargetHideElements = document.querySelectorAll("#" + targetId + " .show");
203 const dataTargetShowElements = document.querySelectorAll("#" + targetId + " .hide");
204
205 dataTargetHideElements.forEach(
206 element => {
207 if (element.classList.contains('show')) {
208 element.classList.remove('show');
209 element.classList.add('hide');
210 }
211 }
212 );
213
214 dataTargetShowElements.forEach(
215 element => {
216 if (element.classList.contains('hide')) {
217 element.classList.remove('hide');
218 element.classList.add('show');
219 }
220 }
221 );
222 }
223 'tree-item-category';
224</@>
