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 <div class="autofit-col autofit-col-expand">
50 <div class="custom-checkbox custom-control">
51 <label>
52 <input
53 ${selected?then("checked", "")}
54 class="custom-control-input facet-term"
55 data-term-id=${id}
56 disabled
57 onChange="Liferay.Search.FacetUtil.changeSelection(event);"
58 type="checkbox"
59 />
60
61 <span class="custom-control-label">
62 <span class="custom-control-label-text">
63 ${name}
64
65 <#if frequencyVisible>
66 (${frequency})
67 </#if>
68 </span>
69 </span>
70 </label>
71 </div>
72 </div>
73 <#else>
74 <span class="autofit-col autofit-col-expand">
75 <span class="component-text">
76 <span
77 class="text-truncate-inline"
78 title="${name}"
79 >
80 <span class="text-truncate">
81 ${name}
82
83 <#if frequencyVisible>
84 (${frequency})
85 </#if>
86 </span>
87 </span>
88 </span>
89 </span>
90 </#if>
91 </span>
92 </span>
93 </div>
94 </#if>
95
96 <#if termDisplayContexts?has_content>
97 <div class="collapse show" id="${namespace}treeItem${id}">
98 <ul class="treeview-group" role="group">
99 <#list termDisplayContexts as termDisplayContext>
100 <@treeview_item
101 cssClassTreeItem="tree-item-category"
102 frequency=termDisplayContext.getFrequency()
103 frequencyVisible=termDisplayContext.isFrequencyVisible()
104 id=termDisplayContext.getFilterValue()
105 name=htmlUtil.escape(termDisplayContext.getBucketText())
106 selectable=true
107 selected=termDisplayContext.isSelected()
108 />
109 </#list>
110 </ul>
111 <div class="more">${languageUtil.get(locale,'general.ver-todos')}</div>
112 </div>
113 </#if>
114 </li>
115
116</#macro>
117
118<@liferay_ui["panel-container"]
119 extended=true
120 id="${namespace + 'facetAssetCategoriesPanelContainer'}"
121 markupView="lexicon"
122 persistState=true
123>
124 <#assign vocabularyNames = assetCategoriesSearchFacetDisplayContext.getVocabularyNames() />
125
126 <@liferay_ui.panel
127 collapsible=true
128 cssClass="search-facet search-facet-display-vocabulary"
129 id="${namespace + 'facetAssetCategoriesPanel'}"
130 markupView="lexicon"
131 persistState=true
132 title="${(vocabularyNames?size == 1)?then(vocabularyNames[0]!'', 'category')}"
133 >
134 <#if vocabularyNames?has_content>
135 <ul class="treeview treeview-light treeview-nested treeview-vocabulary-display" role="tree">
136 <#list vocabularyNames as vocabularyName>
137 <@treeview_item
138 cssClassTreeItem="tree-item-vocabulary"
139 frequencyVisible=false
140 id=vocabularyName + vocabularyName?index
141 name="${(vocabularyNames?size == 1)?then('', htmlUtil.escape(vocabularyName))}"
142 termDisplayContexts=assetCategoriesSearchFacetDisplayContext.getBucketDisplayContexts(vocabularyName)
143 />
144
145 </#list>
146 </ul>
147 </#if>
148
149 <#if !assetCategoriesSearchFacetDisplayContext.isNothingSelected()>
150 <@liferay_aui.button
151 cssClass="btn-link btn-unstyled facet-clear-btn"
152 onClick="Liferay.Search.FacetUtil.clearSelections(event);"
153 value="clear"
154 />
155 </#if>
156 </@>
157</@>
158
159<@liferay_aui.script>
160 function ${namespace}toggleTreeItem(dataTarget) {
161 const dataTargetElements = document.querySelectorAll("[data-target=\"#" + dataTarget + "\"]");
162
163 dataTargetElements.forEach(
164 element => {
165 if (element.classList.contains('collapsed')) {
166 element.classList.remove('collapsed');
167 element.setAttribute('aria-expanded', true);
168 }
169 else {
170 element.classList.add('collapsed');
171 element.setAttribute('aria-expanded', false);
172 }
173 }
174 );
175
176 const subtreeCategoryTreeElement = document.getElementById(dataTarget);
177
178 if (subtreeCategoryTreeElement) {
179 if (subtreeCategoryTreeElement.classList.contains('show')) {
180 subtreeCategoryTreeElement.classList.remove('show');
181 }
182 else {
183 subtreeCategoryTreeElement.classList.add('show');
184 }
185 }
186 }
187</@>
