1<#--
2 Este ADT personaliza la faceta de tipo sitio
3-->
4
5<#attempt>
6<#-- Se inicializa contador para la suma de las frecuencias de todos los sitios -->
7<#assign sumFrequency = 0/>
8<#-- Se realiza la suma de las frecuencias de todos los sitios -->
9<#list entries as entry>
10 <#assign sumFrequency = entry.getFrequency() + sumFrequency />
11</#list>
12<#if entries?has_content>
13 <section class="o-c-search-filter pp-filter"
14 aria-label="Filtrar resultados por sitio"
15 data-pp-component="filter">
16 <div class="container">
17 <div class="o-c-tabs-links">
18 <div class="o-t-tabs-links__drag">
19 <ul role="list" aria-label="Filtros disponibles por sitio">
20 <#-- En este se coloca el filtro de Todos, donde se mostraran todos los resultados de la busqueda -->
21 <#if scopeSearchFacetDisplayContext.isNothingSelected()>
22 <li aria-current="page" role="listitem">
23 <#else>
24 <li role="listitem">
25 </#if>
26 <@clay.button
27 cssClass="facet-clear-btn o-t-tabs-links__links pp-button"
28 displayType="link"
29 aria-label="Mostrar todos los resultados - ${sumFrequency} resultados"
30 id="${namespace + 'facetScopeClear'}"
31 onClick="Liferay.Search.FacetUtil.clearSelections(event);"
32 data-pp-component="filter-btn"
33 data-pp-id="${namespace}facetScopeClear"
34 >
35 <span class="o-t-tabs-links__name">Todos</span>
36 <span class="o-t-tabs-links__label"> ${sumFrequency} </span>
37 </@clay.button>
38 </li>
39 <#-- En esta lista se renderizan los demas sitios mostrados en la faceta -->
40 <#list entries as entry>
41 <#if entry.isSelected()>
42 <li aria-current="page">
43 <#else>
44 <li>
45 </#if>
46
47 <@clay.button
48 cssClass="facet-term o-t-tabs-links__links ${(entry.isSelected())?then('label-primary facet-term-selected', 'label-secondary facet-term-unselected')} term-name"
49 data\-term\-id="${entry.getFilterValue()}"
50 onClick="singleSelection(${entry.getFilterValue()});"
51 >
52 <span class="o-t-tabs-links__name">
53 ${stringUtil.shorten(htmlUtil.stripHtml(entry.getBucketText()), 10, "")?capitalize}
54 </span>
55 <#if entry.isFrequencyVisible()>
56 <span class="o-t-tabs-links__label">
57 ${entry.getFrequency()}
58 </span>
59 </#if>
60 </@clay.button>
61 </li>
62 </#list>
63 </ul>
64 </div>
65 </div>
66 </section>
67 </#if>
68
69 <script>
70 function singleSelection(value){
71 const urlParams = new URLSearchParams(window.location.search)
72 urlParams.set('site', value);
73 window.location.search = urlParams;
74 }
75
76 const $carousel = $(".o-c-search-filter .o-t-tabs-links__drag");
77 $(document).ready(function () {
78 //Funciones movimiento del carrusel
79 let isDragging = false;
80 let startX, scrollLeft;
81 function startDrag(e) {
82 isDragging = true;
83 startX = e.pageX || e.originalEvent.touches[0].pageX;
84 scrollLeft = $carousel.scrollLeft();
85 }
86 function moveDrag(e) {
87 if (!isDragging) return;
88 e.preventDefault();
89 let x = e.pageX || e.originalEvent.touches[0].pageX;
90 let walk = (x - startX) * 2; // Ajusta la sensibilidad
91 $carousel.scrollLeft(scrollLeft - walk);
92 }
93 function endDrag() {
94 isDragging = false;
95 }
96 // Eventos para mouse
97 $carousel.on("mousedown", startDrag);
98 $(document).on("mousemove", moveDrag);
99 $(document).on("mouseup", endDrag);
100 // Eventos para táctil
101 $carousel.on("touchstart", startDrag);
102 $(document).on("touchmove", moveDrag);
103 $(document).on("touchend", endDrag);
104
105 function activeTabScroll() {
106 let $activeTab = $carousel.find("li[aria-current=page]"); // ajusta la clase si es diferente
107 if ($activeTab.length) {
108 let offsetLeft = $activeTab.position().left;
109 let tabWidth = $activeTab.outerWidth();
110 let carouselScroll = $carousel.scrollLeft();
111 let carouselWidth = $carousel.width();
112 // Si la tab activa no está completamente visible, ajustamos el scroll
113 if (offsetLeft + tabWidth > carouselWidth || offsetLeft < 0) {
114 $carousel.animate(
115 {
116 scrollLeft:
117 carouselScroll +
118 offsetLeft -
119 carouselWidth / 2 +
120 tabWidth / 2,
121 },
122 400
123 ); // duración de la animación
124 }
125 }
126 }
127 activeTabScroll();
128 });
129 </script>
130 <#recover>
131 <h2>Lo sentimos, este contenido esta en construcción</h2>
132 </#attempt>
