1<#--
2Autor: Francisco Sánchez Collado
3Fecha de creación: 12/12/2023
4Versión: 0.0
5********************************
6Fecha de modificación: 13/12/2023
7Autor: Francisco Sánchez Collado
8Versión: 1
9-->
10<style>
11 .contFacetTags {
12 position: relative;
13 text-align: left;
14 }
15
16 #contTags {
17 position: absolute;
18 top: 45px;
19 padding: 15px;
20 background-color: white;
21 width: 100%;
22 z-index: 100;
23 box-shadow: 0px 3px 6px #00000029;
24 }
25
26 #contTags label, #contTags button {
27 display: block;
28 margin-bottom: 10px;
29 }
30
31 #contTags button {
32 border: none;
33 background-color: transparent;
34 color: #004682;
35 padding: 0;
36 }
37
38 #abrirTags {
39 display: block;
40 width: 100%;
41 border-radius: 3px 3px 0px 0px;
42 border: none;
43 border-bottom: 1px solid #004682;
44 background: rgba(0, 70, 130, 0.05);
45 color: #004682;
46 padding: 9px 15px;
47 }
48
49 .contFacetTags svg {
50 transition: .5s;
51 }
52
53 .abierto svg {
54 transform: rotate(-180deg);
55 }
56
57 .textoSec {
58 color: #797979;
59 font-size: var(--fs-small, 14px);
60 }
61
62 @media screen and (max-width: 576px ) {
63 .contFacetTags {
64 padding: 0 10px;
65 }
66
67 #contTags {
68 width: 95%;
69 }
70 }
71</style>
72<#if entries?has_content>
73 <div class="contFacetTags">
74 <#assign catsSel = "" />
75 <#list entries as entry>
76 <#if entry.isSelected()>
77 <#assign catsSel = catsSel + entry.getBucketText() + ", " />
78 </#if>
79 </#list>
80 <#if catsSel == "">
81 <#assign catsSel = "Todos" />
82 </#if>
83 <button id="abrirTags" type="button">
84 <div class="d-flex align-items-center justify-content-between p-0 m-0">
85 ${catsSel?keep_before_last(",")}
86 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
87 <g id="nav-arrow-down">
88 <path id="Polygon 1"
89 d="M12.7346 16.2048C12.3386 16.6334 11.6614 16.6334 11.2654 16.2048L6.62237 11.1785C6.03072 10.5381 6.485 9.5 7.35693 9.5L16.6431 9.5C17.515 9.5 17.9693 10.5381 17.3776 11.1785L12.7346 16.2048Z"
90 fill="#004682" />
91 </g>
92 </svg>
93 </div>
94 </button>
95 <span class="textoSec">Seleccione el autor de la publicación</span>
96 <div class="d-none" id="contTags">
97 <button class="facet-clear-btn" onclick="Liferay.Search.FacetUtil.clearSelections(event);" id="${namespace}facetCategoryClear" type="button">Todos</button>
98 <#list entries as entry>
99 <label for="${namespace}term_${entry?index}">
100 <#if entry.getAssetTagId()??>
101 <input type="checkbox" class="facet-term" name="${namespace}term_${entry?index}" id="${namespace}term_${entry?index}" onclick="Liferay.Search.FacetUtil.changeSelection(event);" data-term-id="${entry.getAssetTagId()}" ${entry.isSelected()?then('checked=""', '')}>
102 <#else>
103 <input type="checkbox" class="facet-term" name="${namespace}term_${entry?index}" id="${namespace}term_${entry?index}" onclick="Liferay.Search.FacetUtil.changeSelection(event);" data-term-id="default-id" ${entry.isSelected()?then('checked=""', '')}>
104 </#if>
105 <span>${entry.getBucketText()} (${entry.getFrequency()})</span>
106 </label>
107 </#list>
108 </div>
109 </div>
110</#if>
111
112<script>
113 $(() => {
114 $('#abrirTags').on('click', function() {
115 $('#contTags').toggleClass("d-none");
116 $('#contTags').toggleClass("d-block");
117 $('#abrirTags').toggleClass("abierto");
118 })
119 })
120</script>
