1<#assign AssetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService")>
2<#assign AssetVocabularyLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyLocalService")>
3<#assign selectedCategoryId = renderRequest.getParameter("categoryId")?default("")>
4
5<#assign vocabularyName = "">
6<#if entries?has_content>
7 <#list entries as entry>
8 <#assign categories = entry.getCategories() />
9 <#if categories?has_content>
10 <#assign firstCategory = categories[0]>
11 <#assign vocabulary = AssetVocabularyLocalService.getVocabulary(firstCategory.getVocabularyId())>
12 <#assign vocabularyName = vocabulary.getTitle(locale)>
13 <#break>
14 </#if>
15 </#list>
16</#if>
17
18<#if selectedCategoryId?has_content>
19 <#assign currentCategory = AssetCategoryLocalService.getCategory(selectedCategoryId?number?long)>
20<#else>
21 <#assign currentCategory = "">
22</#if>
23<h2 class="sr-only">
24 <@liferay.language_format arguments=[languageUtil.get(locale, 'filter'),vocabularyName] key='x-of-x' />
25</h2>
26<div class="menu-proyectos-investigacion d-flex align-items-center pb-2">
27<button id="moreDropdown"
28 title="<@liferay.language key='filter' /> <@liferay.language key='of' /> ${vocabularyName}"
29 class="btnSecciones custom-dropdown-docs-toggle d-flex align-items-center justify-content-between"
30 href="#"
31 type="button"
32 aria-haspopup="menu"
33 aria-expanded="false"
34 data-toggle="liferay-dropdown"
35 data-options-text="<@liferay.language key='elements' />">
36
37 <#if (currentCategory != "")>
38 <span class="pr-5 pr-md-7 pr-lg-8 text-nowrap">
39 <#-- Obtener el nombre de la categoría -->
40 <#assign currentCategoryName = currentCategory.getName()?trim>
41 ${currentCategoryName}
42 <span class="sr-only"><@liferay.language key='filter' /> <@liferay.language key='active' /></span></span>
43 <@clay["icon"] symbol="angle-down" />
44 <#else>
45 <span class="pr-5 pr-md-7 pr-lg-8 text-nowrap"><@liferay.language key='all' /> <span class="sr-only"><@liferay.language key='filter' /> <@liferay.language key='active' /></span></span>
46 <@clay["icon"] symbol="angle-down" />
47 </#if>
48
49</button>
50
51 <div class="linea-proyectos-investigacion"></div>
52
53 <ul class="dropdown-menu mt-3 text-center custom-dropdown-docs" id="dropdownDocsMenu">
54 <#list entries as entry>
55 <#assign categories = entry.getCategories() />
56 <#list categories as category>
57 <#assign isSelected = (selectedCategoryId?string == category.getCategoryId()?string)>
58 <#assign categoryURL = renderResponse.createRenderURL()>
59 ${categoryURL.setParameter("resetCur", "true")}
60 ${categoryURL.setParameter("categoryId", category.getCategoryId()?string)}
61 <#assign categoryURLString = categoryURL?string>
62
63 <li value="${category.getCategoryId()}">
64 <a href="${categoryURLString}"
65 data-url="${categoryURLString}"
66 class="dropdown-item btn-link <#if isSelected>active</#if>">
67 <#-- Obtener el nombre de la categoría -->
68 <#assign categoryName = category.getName()?trim>
69 ${categoryName}
70 <#if isSelected>
71 <span class="sr-only"><@liferay.language key='filter' /> <@liferay.language key='active' /></span>
72 </#if>
73 </a>
74 </li>
75 </#list>
76 </#list>
77 <#assign categoryURLString = portalUtil.getLayoutFullURL(themeDisplay)?string>
78 <li value="0">
79 <a href="${categoryURLString}"
80 data-url="${categoryURLString}"
81 class="dropdown-item btn-link <#if validator.isNull(currentCategory)>active</#if>">
82 <@liferay.language key='all' />
83 <#if validator.isNull(currentCategory)>
84 <span class="sr-only"> <@liferay.language key='filter' /> <@liferay.language key='active' /></span>
85 </#if>
86 </a>
87 </li>
88
89
90 </ul>
91</div>
92
93<style>
94.menu-proyectos-investigacion {
95 .custom-dropdown-docs-toggle {
96 border: 0.75px solid var(--border-medium-gray, #8E9092);
97 background: var(--bg-white, #FFFFFF);
98 border-radius: 8px;
99 padding-top: 0.70rem;
100 padding-bottom: 0.70rem;
101 padding-left: 1.2rem;
102 padding-right: 1.2rem;
103
104 &:hover,
105 &:focus {
106 outline: 3px solid var(--text-black, #1E2326) !important;
107 border: 0.75px solid transparent !important;
108 }
109 }
110
111 .lexicon-icon {
112 width: 0.70em;
113 }
114
115
116
117
118
119 a:hover,
120 a:focus {
121 color: var(--once-brand-color-primary-hover, #Ffffff) !important;
122 text-decoration: none;
123 outline: var(--border-width-xs, 2px) solid transparent !important;
124 }
125
126 .dropdown-menu {
127 min-width: 13.5rem !important;
128 max-width: 13.5rem !important;
129 border-radius: 0 0 10px 10px;
130 border-top-style: none;
131 border-color: #007B22B2;
132 border-width: var(--border-width-xs, 2px);
133
134 }
135 @media (max-width: 992px) {
136 .dropdown-menu {
137 min-width: 12rem !important;
138 max-width: 12rem !important;
139 }
140 }
141 @media (max-width: 768px) {
142 .dropdown-menu {
143 min-width: 8.9375rem !important;
144 max-width: 8.9375rem !important;
145 }
146 }
147
148
149 .dropdown-item {
150 transition: color ease 0.3s;
151color: var(--body-color, var(--body-color, #272833));
152 &:hover,
153 &:focus {
154 background: unset;
155 box-shadow: none;
156 }
157
158 &.active:hover,
159 &.active:focus {
160 color: var(--once-brand-color-primary-hover, #Ffffff) !important;
161
162 }
163 }
164.dropdown-item.active {
165 background-color: unset !important;
166 outline: 2px solid transparent !important;
167 color: var(--body-color, var(--body-color, #272833)) !important;
168 }
169 .dropdown-item::before {
170 content: "";
171 position: absolute;
172 width: 0%;
173 height: 100%;
174 bottom: 0;
175 left: 0;
176 background-color: var(--once-brand-color-primary, #007B22) !important;
177 -webkit-transition: width 0.3s ease-in-out;
178 -moz-transition: width 0.3s ease-in-out;
179 -o-transition: width 0.3s ease-in-out;
180 transition: width 0.3s ease-in-out;
181 z-index: -1;
182 }
183
184 .dropdown-item:hover::before,
185 .dropdown-item:focus::before {
186 width: 100%;
187 }
188
189 @media (max-width: 1280px) {
190 padding-right: 1.875rem;
191 padding-left: 1.875rem;
192 }
193
194 .linea-proyectos-investigacion {
195 height: 1px;
196 border: 0.5px solid #4B4F51;
197 width: 100%;
198 flex-grow: 1;
199 margin-left: 1em;
200 }
201}
202</style>
203
204<script>
205AUI().ready('node', function(A) {
206 const dropdownButton = document.getElementById('moreDropdown');
207 const dropdownMenu = document.getElementById('dropdownDocsMenu');
208 const links = dropdownMenu.querySelectorAll('a');
209
210 let currentIndex = -1;
211 const optionsText = dropdownButton.getAttribute('data-options-text') || 'elementos';
212 const totalItems = links.length;
213
214 const urlParams = new URLSearchParams(window.location.search);
215 const shouldFocus = urlParams.get('focus') === 'true';
216
217 function focusFirstProjectAfterNavigation() {
218 setTimeout(() => {
219 const firstResult = document.querySelector('.listado-resultado-proyectos');
220 if (firstResult) {
221 if (firstResult.tagName === 'A') {
222 firstResult.focus();
223 } else {
224 const firstLink = firstResult.querySelector('a');
225 if (firstLink) {
226 firstLink.focus();
227 } else {
228 firstResult.setAttribute('tabindex', '-1');
229 firstResult.focus();
230 }
231 }
232 }
233
234 if (shouldFocus) {
235 const newUrl = new URL(window.location);
236 newUrl.searchParams.delete('focus');
237 window.history.replaceState({}, '', newUrl);
238 }
239 }, 300);
240 }
241
242 function focusLink(index) {
243 if (index >= 0 && index < links.length) {
244 links[index].focus();
245 currentIndex = index;
246 }
247 }
248
249 function closeDropdown() {
250 if (dropdownMenu.offsetParent !== null) {
251 dropdownButton.click();
252 }
253 }
254
255
256 function navigateToLink(link) {
257 if (!link.classList.contains('active')) {
258 closeDropdown();
259
260 const url = new URL(link.href);
261 url.searchParams.set('focus', 'true');
262
263
264 window.location.href = url.toString();
265 } else {
266 closeDropdown();
267 focusFirstProjectAfterNavigation();
268 }
269 }
270
271 if (shouldFocus) {
272 focusFirstProjectAfterNavigation();
273 }
274
275 dropdownButton.addEventListener('click', function() {
276 const isExpanded = dropdownMenu.offsetParent !== null;
277
278 if (!isExpanded) {
279 dropdownMenu.setAttribute('aria-label', totalItems + ' ' + optionsText);
280 dropdownButton.setAttribute('aria-label', totalItems + ' ' + optionsText);
281 setTimeout(() => {
282 if (links.length > 0) {
283 focusLink(0);
284 }
285 }, 10);
286 } else {
287 dropdownMenu.removeAttribute('aria-label');
288 }
289
290 currentIndex = -1;
291 });
292
293 links.forEach(link => {
294 link.addEventListener('click', function(e) {
295 e.preventDefault();
296 navigateToLink(this);
297 });
298 });
299
300dropdownMenu.addEventListener('keydown', function(e) {
301 switch (e.key) {
302 case 'Tab':
303 e.preventDefault();
304 if (e.shiftKey) {
305 if (currentIndex > 0) {
306 focusLink(currentIndex - 1);
307 } else {
308 closeDropdown();
309 dropdownButton.focus();
310 currentIndex = -1;
311 }
312 } else {
313 if (currentIndex < links.length - 1) {
314 focusLink(currentIndex + 1);
315 } else {
316 closeDropdown();
317 currentIndex = -1;
318 }
319 }
320 break;
321 case 'ArrowDown':
322 e.preventDefault();
323 if (currentIndex < links.length - 1) {
324 focusLink(currentIndex + 1);
325 }
326 break;
327 case 'ArrowUp':
328 e.preventDefault();
329 if (currentIndex > 0) {
330 focusLink(currentIndex - 1);
331 }
332 break;
333 case 'Home':
334 e.preventDefault();
335 focusLink(0);
336 break;
337 case 'End':
338 e.preventDefault();
339 focusLink(links.length - 1);
340 break;
341 case ' ':
342 case 'Spacebar':
343 case 'Enter':
344 e.preventDefault();
345 if (currentIndex >= 0 && currentIndex < links.length) {
346 const link = links[currentIndex];
347 if (!link.classList.contains('active')) {
348 const url = new URL(link.href);
349 url.searchParams.set('focus', 'true');
350 link.href = url.toString();
351 link.click();
352 } else {
353 closeDropdown();
354 focusFirstProjectAfterNavigation();
355 }
356 }
357 break;
358 case 'Escape':
359 e.preventDefault();
360 closeDropdown();
361 dropdownButton.focus();
362 currentIndex = -1;
363 break;
364 default:
365 break;
366 }
367});
368
369
370
371 dropdownButton.addEventListener('keydown', function(e) {
372 if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
373 e.preventDefault();
374 if (links.length > 0) {
375 if (e.key === 'ArrowDown') {
376 focusLink(0);
377 } else {
378 focusLink(links.length - 1);
379 }
380 }
381 } else if (e.key === 'Escape') {
382 e.preventDefault();
383 closeDropdown();
384 } else if (e.key === 'Enter' || e.key === ' ') {
385 e.preventDefault();
386 dropdownButton.click();
387 }
388 });
389
390 document.addEventListener('focusin', (e) => {
391 const isInsideDropdown = dropdownMenu.contains(e.target);
392 const isDropdownButton = dropdownButton.contains(e.target);
393
394 if (!isInsideDropdown && !isDropdownButton) {
395 closeDropdown();
396 }
397 });
398});
399 </script>
