1<#assign AssetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService")>
2<#assign AssetVocabularyLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyLocalService")>
3<#assign portletRequest = renderRequest />
4<#assign selectedCategoryId = portletRequest.getParameter("categoryId")?default("")>
5
6<#assign vocabularyName = "">
7<#if entries?has_content>
8 <#list entries as entry>
9 <#assign categories = entry.getCategories() />
10 <#if categories?has_content>
11 <#assign firstCategory = categories[0]>
12 <#assign vocabulary = AssetVocabularyLocalService.getVocabulary(firstCategory.getVocabularyId())>
13 <#assign vocabularyName = vocabulary.getTitle(locale)>
14 <#break>
15 </#if>
16 </#list>
17</#if>
18
19<#if selectedCategoryId?has_content>
20 <#assign currentCategory = AssetCategoryLocalService.getCategory(selectedCategoryId?number?long)>
21 <#-- Obtener el nombre de la categoría -->
22 <#assign currentCategoryName = currentCategory.getName()?trim>
23 <#-- Comprobar si empieza con un número seguido de espacio -->
24 <#assign firstSpace = currentCategoryName?index_of(" ")>
25 <#if firstSpace != -1 && currentCategoryName?substring(0, firstSpace)?matches("\\d+")>
26 <#-- Si hay número inicial, eliminarlo -->
27 <#assign currentCategoryName = currentCategoryName?substring(firstSpace + 1)>
28 <#else>
29 <#-- Si no empieza con número, dejar el nombre completo -->
30 <#assign currentCategoryName = currentCategoryName />
31 </#if>
32 <#assign currentCategoryName = currentCategoryName?replace("/", "<span aria-hidden='true'>/</span><span class='sr-only'> barra </span>")>
33 <#assign currentCategory = currentCategoryName />
34<#else>
35 <#assign currentCategory = "">
36</#if>
37<h2 class="sr-only">
38 <@liferay.language key='list' /> <@liferay.language key='of' /> <@liferay.language key='documents' />
39 </h2>
40<div class="menu-documentos-descargables d-flex align-items-center pb-2">
41 <button id="moreDropdown"
42
43 title="<@liferay.language key='picklist' /> <@liferay.language key='filter' /> <@liferay.language key='of' /> ${vocabularyName}"
44 class="btnSecciones custom-dropdown-docs-toggle d-flex align-items-center justify-content-between"
45 href="#"
46 aria-haspopup="true"
47 aria-expanded="false"
48 data-toggle="liferay-dropdown" aria-label="<@liferay.language key='picklist' /> <@liferay.language key='filter' /> <@liferay.language key='of' /> ${vocabularyName}">
49
50 <#if (currentCategory != "")>
51 <span class="text-nowrap pr-5 pr-md-7 pr-lg-8">${currentCategory}</span>
52 <@clay["icon"] symbol="angle-down" />
53 <#else>
54 <span class="pr-5 pr-md-7 pr-lg-8"><@liferay.language key='all' /></span>
55 <@clay["icon"] symbol="angle-down" />
56 </#if>
57
58 </button>
59
60 <div class="linea-documentos-descargables"></div>
61
62 <ul class="dropdown-menu mt-3 text-center custom-dropdown-docs" id="dropdownDocsMenu">
63 <li value="">
64 <#assign pageURL = themeDisplay.getURLCurrent()?keep_before("/-/categories")>
65 <a href="${pageURL}#foco"
66 data-url="${pageURL}#foco"
67 class="dropdown-item btn-link <#if !selectedCategoryId?has_content>active</#if>">
68 <span><@liferay.language key='all' /></span>
69 </a>
70 </li>
71 <#list entries as entry>
72 <#assign categories = entry.getCategories() />
73 <#list categories as category>
74 <#assign isSelected = (selectedCategoryId?string == category.getCategoryId()?string)>
75 <#assign categoryURL = renderResponse.createRenderURL()>
76 ${categoryURL.setParameter("resetCur", "true")}
77 ${categoryURL.setParameter("categoryId", category.getCategoryId()?string)}
78 <#assign categoryURLString = categoryURL + "#foco">
79
80 <li value="${category.getCategoryId()}">
81 <a href="${categoryURLString}"
82 data-url="${categoryURLString}"
83 class="dropdown-item btn-link <#if isSelected>active</#if>">
84 <#-- Obtener el nombre de la categoría -->
85 <#assign currentCategoryName = category.getName()?trim>
86 <#-- Comprobar si empieza con un número seguido de espacio -->
87 <#assign firstSpace = currentCategoryName?index_of(" ")>
88 <#if firstSpace != -1 && currentCategoryName?substring(0, firstSpace)?matches("\\d+")>
89 <#-- Si hay número inicial, eliminarlo -->
90 <#assign currentCategoryName = currentCategoryName?substring(firstSpace + 1)>
91 <#else>
92 <#-- Si no empieza con número, dejar el nombre completo -->
93 <#assign currentCategoryName = currentCategoryName />
94 </#if>
95 <#assign currentCategoryName = currentCategoryName?replace("/", "<span aria-hidden='true'>/</span><span class='sr-only'> barra </span>")>
96 <span>${currentCategoryName}</span>
97 </a>
98 </li>
99 </#list>
100 </#list>
101 </ul>
102</div>
103
104<style>
105.menu-documentos-descargables {
106 .custom-dropdown-docs-toggle {
107 border: 0.75px solid var(--border-medium-gray, #8E9092);
108 background: var(--bg-white, #FFFFFF);
109 border-radius: 8px;
110 padding-top: 0.70rem;
111 padding-bottom: 0.70rem;
112 padding-left: 1.2rem;
113 padding-right: 1.2rem;
114
115 &:hover,
116 &:focus {
117 outline: 3px solid var(--text-black, #1E2326) !important;
118 border: 0.75px solid transparent !important;
119 }
120 }
121
122 .lexicon-icon {
123 width: 0.70em;
124 }
125
126
127
128
129
130 a:hover,
131 a:focus {
132 color: var(--once-brand-color-primary-hover, #Ffffff) !important;
133 text-decoration: none;
134 outline: var(--border-width-xs, 2px) solid transparent !important;
135 }
136
137 .dropdown-menu {
138 min-width: 13.5rem !important;
139 max-width: 13.5rem !important;
140 border-radius: 0 0 10px 10px;
141 border-top-style: none;
142 border-color: #007B22B2;
143 border-width: var(--border-width-xs, 2px);
144
145 }
146 @media (max-width: 992px) {
147 .dropdown-menu {
148 min-width: 12rem !important;
149 max-width: 12rem !important;
150 }
151 }
152 @media (max-width: 768px) {
153 .dropdown-menu {
154 min-width: 8.9375rem !important;
155 max-width: 8.9375rem !important;
156 }
157 }
158
159
160 .dropdown-item {
161 transition: color ease 0.3s;
162color: var(--body-color, var(--body-color, #272833));
163 &:hover,
164 &:focus {
165 background: unset;
166 box-shadow: none;
167 }
168
169 &.active:hover,
170 &.active:focus {
171 color: var(--once-brand-color-primary-hover, #Ffffff) !important;
172
173 }
174 }
175.dropdown-item.active {
176 background-color: unset !important;
177 outline: 2px solid transparent !important;
178 color: var(--body-color, var(--body-color, #272833)) !important;
179 }
180 .dropdown-item::before {
181 content: "";
182 position: absolute;
183 width: 0%;
184 height: 100%;
185 bottom: 0;
186 left: 0;
187 background-color: var(--once-brand-color-primary, #007B22) !important;
188 -webkit-transition: width 0.3s ease-in-out;
189 -moz-transition: width 0.3s ease-in-out;
190 -o-transition: width 0.3s ease-in-out;
191 transition: width 0.3s ease-in-out;
192 z-index: -1;
193 }
194
195 .dropdown-item:hover::before,
196 .dropdown-item:focus::before {
197 width: 100%;
198 }
199
200 @media (max-width: 1280px) {
201 padding-right: 1.875rem;
202 padding-left: 1.875rem;
203 }
204
205 .linea-documentos-descargables {
206 height: 1px;
207 border: 0.5px solid #4B4F51;
208 width: 100%;
209 flex-grow: 1;
210 margin-left: 1em;
211 }
212}
213</style>
214
215<script>
216AUI().ready('node', function(A) {
217 const dropdownButton = document.getElementById('moreDropdown');
218 const dropdownMenu = document.getElementById('dropdownDocsMenu');
219 const links = dropdownMenu.querySelectorAll('a');
220 let currentIndex = -1;
221
222 function focusLink(index) {
223 if (index >= 0 && index < links.length) {
224 links[index].focus();
225 currentIndex = index;
226 }
227 }
228
229 dropdownButton.addEventListener('click', () => {
230 currentIndex = -1;
231 });
232
233 dropdownMenu.addEventListener('keydown', function(e) {
234 switch (e.key) {
235 case 'ArrowDown':
236 e.preventDefault();
237 if (currentIndex < links.length - 1) {
238 focusLink(currentIndex + 1);
239 }
240 break;
241 case 'ArrowUp':
242 e.preventDefault();
243 if (currentIndex > 0) {
244 focusLink(currentIndex - 1);
245 }
246 break;
247 case 'Home':
248 e.preventDefault();
249 focusLink(0);
250 break;
251 case 'End':
252 e.preventDefault();
253 focusLink(links.length - 1);
254 break;
255 case ' ':
256 case 'Spacebar':
257 e.preventDefault();
258 if (currentIndex >= 0 && currentIndex < links.length) {
259 links[currentIndex].click();
260 }
261 break;
262 default:
263 break;
264 }
265 });
266
267 dropdownButton.addEventListener('keydown', function(e) {
268 if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
269 e.preventDefault();
270 if (links.length > 0) {
271 if (e.key === 'ArrowDown') {
272 focusLink(0);
273 } else {
274 focusLink(links.length - 1);
275 }
276 }
277 }
278 });
279
280
281 document.addEventListener('focusin', (e) => {
282 const isInsideDropdown = dropdownMenu.contains(e.target);
283 const isDropdownButton = dropdownButton.contains(e.target);
284
285 if (!isInsideDropdown && !isDropdownButton) {
286 if (dropdownMenu.offsetParent !== null) {
287 dropdownButton.click();
288 }
289 }
290 });
291});
292</script>
