1<#assign JSONFactoryUtil = staticUtil["com.liferay.portal.kernel.json.JSONFactoryUtil"] />
2<#assign CategoriesHelperUtil = serviceLocator.findService("es.salamanca.web.categories.helper.api.CategoriesHelperUtil") />
3
4<#macro displayCategory categoryObj >
5 <#assign
6 catName = categoryObj.getString("name")
7 catCategoryId = categoryObj.getString("assetCategoryId")
8 catFrequency = categoryObj.getString("frequency")
9 />
10
11 <#assign catIsSelected = "" />
12 <#if categoryObj.getBoolean("selected") >
13 <#assign catIsSelected = "checked" />
14 </#if>
15 <fieldset>
16 <legend class="d-none">Opciones de categoria</legend>
17 <div class="slm-faceta-element custom-checkbox custom-control">
18 <label class="text-white">
19 <input
20 autocomplete="off"
21 class="custom-control-input facet-term"
22 data-term-id="${catCategoryId}"
23 type="checkbox"
24 ${catIsSelected}
25 >
26 <span class="custom-control-label">
27 <span class="custom-control-label-text">${catName} (${catFrequency})</span>
28 </span>
29 </label>
30 </div>
31 </fieldset>
32</#macro>
33
34<#macro displayCategoryTerm termObj >
35
36 <li>
37 <#assign subCategories = termObj.getJSONArray("categories") />
38
39 <div class="slm-categoria-element-wrapper">
40 <@displayCategory categoryObj = termObj />
41
42 <#if subCategories.length() gt 0 >
43 <button
44 class="collapse-button"
45 data-toggle="collapse"
46 data-target='#collapse-${termObj.getString("assetCategoryId")}'
47 type="button"
48 aria-expanded="false"
49 aria-controls='collapse-${termObj.getString("assetCategoryId")}'
50 >
51 <@clay.icon
52 symbol="angle-down"
53 color="#ffffff"
54 />
55 </a>
56 </#if>
57 </div>
58
59 <#attempt>
60 <#if subCategories.length() gt 0 >
61 <div id='collapse-${termObj.getString("assetCategoryId")}' class="slm-subcategorias-collapse collapse pl-4 mb-3">
62 <#list 0..(subCategories.length() - 1) as i >
63 <#assign subCategoryObj = subCategories.getJSONObject(i) />
64
65 <#assign
66 subCatName = subCategoryObj.getString("name")
67 subCatfrequency = subCategoryObj.getString("frequency")
68 subCategoriesChildren = subCategoryObj.getJSONArray("categories")
69 />
70
71 <@displayCategory categoryObj = subCategoryObj />
72
73 <#if subCategoriesChildren.length() gt 0 >
74 <div class="pl-4">
75 <#list 0..(subCategoriesChildren.length() - 1) as j >
76 <#assign subCatChildrenObj = subCategoriesChildren.getJSONObject(j) />
77
78 <#assign
79 subCatChildrenTermName = subCatChildrenObj.getString("name")
80 subCatChildrenfrequency = subCatChildrenObj.getString("frequency")
81 />
82
83 <@displayCategory categoryObj = subCatChildrenObj />
84 </#list>
85 </div>
86 </#if>
87 </#list>
88 </div>
89 </#if>
90 <#recover>
91 <p>ERROR - ${subCategories.length()}</p>
92 </#attempt>
93 </li>
94</#macro>
95
96
97<#macro treeview_item
98 cssClassTreeItem = ""
99 frequency = 0
100 id = ""
101 frequencyVisible = true
102 name = ""
103 selectable = false
104 selected = false
105 termDisplayContexts = ""
106>
107 <li class="treeview-item" role="none">
108 <#if name?has_content>
109 <div
110 aria-controls="${namespace}treeItem${id}"
111 aria-expanded="true"
112 class="treeview-link ${cssClassTreeItem}"
113 data-target="#${namespace}treeItem${id}"
114 data-toggle="collapse"
115 onClick="${namespace}toggleTreeItem('${namespace}treeItem${id}');"
116 role="treeitem"
117 tabindex="0"
118 >
119 <span class="c-inner" tabindex="-2">
120 <span class="autofit-row">
121 <#if selectable>
122 <span class="autofit-col autofit-col-expand">
123 <div class="custom-checkbox custom-control">
124 <label class="text-white">
125 <input
126 autocomplete="off"
127 ${selected?then("checked", "")}
128 class="custom-control-input facet-term"
129 data-term-id=${id}
130 disabled
131 type="checkbox"
132 />
133
134 <span class="custom-control-label">
135 <span class="custom-control-label-text">
136 ${name}
137
138 <#if frequencyVisible>
139 (${frequency})
140 </#if>
141 </span>
142 </span>
143 </label>
144 </div>
145 </span>
146 <#else>
147 <span class="slm-faceta-lateral-vocabulario">
148 ${name}
149
150 <#if frequencyVisible>
151 (${frequency})
152 </#if>
153 </span>
154 </#if>
155
156 <#if termDisplayContexts?has_content>
157 <span class="autofit-col">
158 <@clay.button
159 aria\-controls="${namespace}treeItem${id}"
160 aria\-expanded="true"
161 cssClass="btn btn-monospaced component-expander"
162 data\-target="#${namespace}treeItem${id}"
163 data\-toggle="collapse"
164 displayType="link"
165 tabindex="-1"
166 >
167 <span class="c-inner text-white" tabindex="-2">
168 <@clay["icon"] symbol="angle-down" />
169
170 <@clay["icon"]
171 cssClass="component-expanded-d-none"
172 symbol="angle-right"
173 />
174 </span>
175 </@clay.button>
176 </span>
177 </#if>
178 </span>
179 </span>
180 </div>
181 </#if>
182
183 <#if termDisplayContexts?has_content>
184 <div class="collapse show" id="${namespace}treeItem${id}">
185 <ul class="treeview-group pr-3" role="group">
186 <#assign termDisplayContextsJSON = CategoriesHelperUtil.sortCategoriesForFacet(termDisplayContexts, themeDisplay.getLanguageId()) />
187
188 <#if termDisplayContextsJSON != "">
189 <#assign termDisplayContextArray = JSONFactoryUtil.createJSONArray(termDisplayContextsJSON?string) />
190
191 <#list 0..(termDisplayContextArray.length() - 1) as i >
192 <#assign termCategoryObj = termDisplayContextArray.getJSONObject(i) />
193
194 <@displayCategoryTerm termObj = termCategoryObj />
195 </#list>
196 </#if>
197
198
199 </ul>
200 <hr class="slm-separador" />
201 </div>
202 </#if>
203 </li>
204</#macro>
205
206<@liferay_ui["panel-container"]
207 extended=true
208 id="${namespace + 'facetAssetCategoriesPanelContainer'}"
209 markupView="lexicon"
210 persistState=true
211 cssClass="slm-faceta-categoria-lateral-panel"
212>
213 <#assign vocabularyNames = assetCategoriesSearchFacetDisplayContext.getVocabularyNames()![] />
214
215 <@liferay_ui.panel
216 collapsible=false
217 cssClass="search-facet search-facet-display-vocabulary"
218 id="${namespace + 'facetAssetCategoriesPanel'}"
219 markupView="lexicon"
220 persistState=true
221 title="${(vocabularyNames?size == 1)?then(vocabularyNames[0]!'', 'category')}"
222 >
223 <#if vocabularyNames?has_content>
224 <ul class="treeview treeview-light treeview-nested treeview-vocabulary-display" role="tree">
225 <#list vocabularyNames as vocabularyName>
226 <@treeview_item
227 cssClassTreeItem="tree-item-vocabulary"
228 frequencyVisible=false
229 id=vocabularyName + vocabularyName?index
230 name="${(vocabularyNames?size == 1)?then('', htmlUtil.escape(vocabularyName))}"
231 termDisplayContexts=assetCategoriesSearchFacetDisplayContext.getBucketDisplayContexts(vocabularyName)
232 />
233 </#list>
234 </ul>
235 </#if>
236 </@>
237</@>
238
239
240<@liferay_aui.script>
241 function ${namespace}toggleTreeItem(dataTarget) {
242 const dataTargetElements = document.querySelectorAll("[data-target=\"#" + dataTarget + "\"]");
243
244 dataTargetElements.forEach(
245 element => {
246 if (element.classList.contains('collapsed')) {
247 element.classList.remove('collapsed');
248 element.setAttribute('aria-expanded', true);
249 }
250 else {
251 element.classList.add('collapsed');
252 element.setAttribute('aria-expanded', false);
253 }
254 }
255 );
256
257 const subtreeCategoryTreeElement = document.getElementById(dataTarget);
258
259 if (subtreeCategoryTreeElement) {
260 if (subtreeCategoryTreeElement.classList.contains('show')) {
261 subtreeCategoryTreeElement.classList.remove('show');
262 }
263 else {
264 subtreeCategoryTreeElement.classList.add('show');
265 }
266 }
267 }
268</@>
269
270
271<script>
272 $(".collapse-button").click(function(){
273 $(this).find("svg").toggleClass("rotate-180");
274 var target = $(this).attr("data-target");
275 $(target).toggle();
276 });
277</script>
278
279
280<style>
281 .slm-faceta-categoria-lateral-panel .panel-title{
282 /*font-size: 20px;
283 display: block;
284 margin-bottom: 1rem;*/
285 display: none;
286 }
287
288 .slm-faceta-categoria-lateral-panel .panel{
289 background: inherit;
290 color: #fff;
291 text-align: left;
292 }
293 .slm-faceta-categoria-lateral-panel .panel-body{
294 padding: 0;
295 }
296 .slm-faceta-categoria-lateral-panel .slm-faceta-lateral-vocabulario{
297 font-size: 16px;
298 }
299 .slm-faceta-categoria-lateral-panel ul li .treeview-link{
300 padding-left: 12px !important;
301 color: #fff !important;
302 }
303 .slm-faceta-categoria-lateral-panel .search-facet-display-vocabulary .treeview-vocabulary-display .tree-item-category .custom-control-label-text{
304 color: #fff !important;
305 }
306 .slm-faceta-categoria-lateral-panel .search-facet-display-vocabulary .treeview-vocabulary-display .tree-item-vocabulary{
307 padding-left: 0 !important;
308 }
309 .slm-faceta-element {
310 margin-top: 0 !important;
311 margin-bottom: .35rem !important;
312 display: block;
313 font-size: 16px;
314 }
315 .slm-faceta-categoria-lateral-panel .custom-control-input:checked ~ .custom-control-label::before{
316 background-color: #fff;
317 border-color: #007bff;
318 color: #007bff;
319 }
320 .slm-faceta-categoria-lateral-panel .custom-control-input:active ~ .custom-control-label::before {
321 background-color: #fff !important;
322 }
323 .slm-faceta-categoria-lateral-panel .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after{
324 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%20viewBox='0%200%208%208'%3E%3Cpath%20fill='%230075C9'%20d='M6.564.75l-3.59%203.612-1.538-1.55L0%204.26l2.974%202.99L8%202.193z'/%3E%3C/svg%3E");
325 }
326
327
328 /* ESTILOS PARA COLLAPSE DE ACORDEONES */
329 .slm-categoria-element-wrapper{
330 display: flex;
331 justify-content: space-between;
332 align-items: center;
333 }
334 .collapse-button{
335 border: 0;
336 background: transparent;
337 }
338 .rotate-180{
339 transform: rotate(180deg);
340 }
341
342 @media (min-width: 992px) {
343 .collapse-button{
344 display: none;
345 }
346 .slm-subcategorias-collapse{
347 display: block !important;
348 }
349 }
350</style>
