Template inclusion failed (for parameter value "_TEMPLATE_CONTEXT_/10155/396619647/352001675/C360-MACROS-NAVEGACION"):
Unable to find FreeMarker template with ID _TEMPLATE_CONTEXT_/10155/396619647/352001675/C360-MACROS-NAVEGACION
----
FTL stack trace ("~" means nesting-related):
- Failed at: #include "${templatesPath}/C360-MACRO... [in template "10155#10193#385014477" at line 1, column 1]
----
1<#include "${templatesPath}/C360-MACROS-NAVEGACION" />
2
3<nav class="navbar navigation-horizontal">
4 <div class="container-xxl pl-0">
5 <ul class="navbar-nav scroll-horizontal d-flex">
6 <li class="scroll-arrow-wrapper scroll-arrow-left-wrapper">
7 <a class="scroll-arrow scroll-arrow-left gva-btn gva-btn-ghost-primary gva-btn-icon" aria-label="Ver menos">
8 <i class="fa-solid fa-angle-left"></i>
9 </a>
10 </li>
11
12 <#assign navItems = entries />
13 <#list navItems as navItem>
14 <#if navItem.hasBrowsableChildren() && !(navItem.getLayout().getType() == "link_to_layout")>
15
16 <li class="dropdown <#if navItem.isChildSelected() || navItem.isSelected()>active</#if>">
17 <a class="dropdown-toggle gva-btn gva-btn-ghost-primary link-nav transition-underline" href="#" id="navbarDropdown_${navItem.getLayoutId()}" role="button" aria-haspopup="true" aria-expanded="false">
18 ${navItem.getName()}
19 <i class="fa-solid fa-angle-down"></i>
20 </a>
21 <div class="dropdown-menu" aria-labelledby="navbarDropdown_${navItem.getLayoutId()}">
22 <div class="container-xxl dropdown-close">
23 <button class="close" aria-label="<@liferay.language key="close" />">
24 <span aria-hidden="true">×</span>
25 </button>
26 </div>
27 <ul class="container-xxl child-list">
28
29 <#list navItem.getChildren() as childNavItem>
30
31 <#if childNavItem.hasBrowsableChildren() && (childNavItem.getLayout().getType() == "link_to_layout" || childNavItem.getTarget()?contains("group-pages") )>
32 <li class="d-flex flex-column m-0 <#if childNavItem.getTarget()?contains("break-before")>break-before</#if>">
33 <a class="gva-btn gva-btn-ghost-primary" <@pintarHrefTarget childNavItem themeDisplay/> ><span>${childNavItem.getName()}</span></a>
34 <ul class="p-0 ml-4">
35 <#list childNavItem.getChildren() as childChildNavItem>
36 <li class="d-flex align-items-center add-link-icons <#if childChildNavItem.isChildSelected() || childChildNavItem.isSelected()>active</#if>">
37 <i class="fa-solid fa-square-full"></i>
38 <a class="gva-btn gva-btn-ghost-primary d-flex" <@pintarHrefTarget childChildNavItem themeDisplay/> >${childChildNavItem.getName()}</a>
39 </li>
40 </#list>
41 </ul>
42 </li>
43
44 <#else>
45 <li class="d-flex align-items-center add-link-icons <#if childNavItem.isChildSelected() || childNavItem.isSelected()>active</#if>">
46 <i class="fa-solid fa-square-full"></i>
47 <a class="gva-btn gva-btn-ghost-primary d-flex" <@pintarHrefTarget childNavItem themeDisplay/> >${childNavItem.getName()}</a>
48 </li>
49 </#if>
50
51 </#list>
52 </ul>
53 </div>
54 </li>
55 <#else>
56 <li <#if navItem.isSelected()>class="active"</#if>>
57 <a class="gva-btn gva-btn-ghost-primary link-nav transition-underline" <@pintarHrefTarget navItem themeDisplay/> >${navItem.getName()}</a>
58 </li>
59 </#if>
60 </#list>
61 <li class="scroll-arrow-wrapper scroll-arrow-right-wrapper">
62 <a class="scroll-arrow scroll-arrow-right gva-btn gva-btn-ghost-primary gva-btn-icon" aria-label="Ver más">
63 <i class="fa-solid fa-angle-right"></i>
64 </a>
65 </li>
66 </ul>
67 </div>
68</nav>
69<script>
70 <#--
71 ===================================================================================
72 FUNCIONALIDADES DEL MENÚ
73 ===================================================================================
74 Este script controla la interacción del menú. Si se modifica algo, se puede seguir esta
75 lista para verificar que no se ha roto nada. Si se modifican o añaden funcionalidades hay
76 que actualizar este comentario.
77
78 1. NAVEGACIÓN Y CARGA (Liferay SPA)
79 Carga Inicial: El menú carga correctamente al entrar en la página.
80 Navegación SPA: Al navegar a otra página sin recargar, el menú carga y que los eventos NO se duplican.
81
82 2. MENÚS DESPLEGABLES (Dropdowns)
83 Apertura: Click en un ítem abre su submenú y oscurece el fondo (Overlay). Si abres un segundo menú,
84 el primero se cierra automáticamente.
85 Cierre: El menú debe cerrarse al:
86 - Hacer click fuera del menú (en el cuerpo de la página).
87 - Pulsar la tecla 'ESC' (Accesibilidad).
88 - Pulsar el botón de cerrar 'X' dentro del submenú.
89
90 3. SCROLL HORIZONTAL (Flechas)
91 Visibilidad: Si el menú es más ancho que la pantalla, aparecen flechas laterales.
92 Acción: Click en flechas mueve el menú suavemente a izq/der.
93 Resize: Al cambiar el tamaño de la ventana, las flechas aparecen/desaparecen según necesidad.
94
95 4. EFECTOS DE SCROLL VERTICAL (Sticky Header)
96 Al bajar (Scroll Down): El menú se contrae (clase .scrolled) y se quita el overlay.
97 Al subir (Scroll Up): El menú recupera su estado original.
98 * Nota: Esta funcionalidad se aplica en la cabecera que no es gva. En cabecera gva el
99 menú desplegado se muestra siempre.
100
101 5. OTRAS FUNCIONALIDADES
102 Margen Superior: El contenido de la página (#content) baja automáticamente según
103 la altura de la cabecera (evita que el menú tape el título).
104 Ítem Activo: El menú marca como 'active' la sección actual comparando su texto
105 con el del Breadcrumb (Migas de pan), solo en cabeceras que utilizan "navigation.menu.id".
106
107 ===================================================================================
108 -->
109 (function() {
110
111 <#--
112 PREVENCIÓN DE DUPLICIDAD DE EVENTOS (LIFERAY SPA)
113 Comprobamos si este script ya ha sido inicializado en el objeto 'window'.
114 Esto evita que, al navegar entre páginas (sin recarga completa), se vuelvan
115 a añadir listeners globales, lo que duplicaría la ejecución y degradaría el rendimiento.
116 Si la bandera ya existe "window.__mainNavigationInitialized = true", significa que este
117 código ya se cargó previamente.
118 -->
119 if (window.__mainNavigationInitialized) {
120 return;
121 }
122 window.__mainNavigationInitialized = true;
123
124 function updateScrollArrows() {
125 setTimeout(() => {
126 const scrollContainer = document.querySelector('.navbar-nav.scroll-horizontal');
127 const leftArrow = document.querySelector('.scroll-arrow-left-wrapper');
128 const rightArrow = document.querySelector('.scroll-arrow-right-wrapper');
129
130 if (!scrollContainer || !leftArrow || !rightArrow) return;
131
132 const scrollLeft = scrollContainer.scrollLeft;
133 const scrollWidth = scrollContainer.scrollWidth;
134 const clientWidth = scrollContainer.clientWidth;
135
136 const rightArrowWidth = rightArrow.getBoundingClientRect().width;
137
138 const hasScroll = scrollWidth > clientWidth;
139 const canScrollLeft = scrollLeft > 0;
140 const canScrollRight = scrollLeft + clientWidth < scrollWidth - rightArrowWidth;
141
142 // Mostrar u ocultar las flechas
143 if (hasScroll && canScrollLeft) {
144 leftArrow.classList.add('scroll-visible');
145 } else {
146 leftArrow.classList.remove('scroll-visible');
147 }
148
149 if (hasScroll && canScrollRight) {
150 rightArrow.classList.add('scroll-visible');
151 } else {
152 rightArrow.classList.remove('scroll-visible');
153 }
154
155
156 }, 50); // Pequeño retraso para asegurar que los cálculos del DOM son precisos
157
158 // Desplazamiento con las flechas
159 document.querySelector('.scroll-arrow-left')?.addEventListener('click', (e) => {
160 e.preventDefault();
161 const scroll = document.querySelector('.scroll-horizontal');
162 scroll?.scrollBy({left: -250, behavior: 'smooth'});
163 // Llama a updateScrollArrows después de un breve retraso para que el scroll termine
164 setTimeout(updateScrollArrows, 300);
165 });
166
167 document.querySelector('.scroll-arrow-right')?.addEventListener('click', (e) => {
168 e.preventDefault();
169 const scroll = document.querySelector('.scroll-horizontal');
170 scroll?.scrollBy({left: 250, behavior: 'smooth'});
171 // Llama a updateScrollArrows después de un breve retraso para que el scroll termine
172 setTimeout(updateScrollArrows, 300);
173 });
174
175 // Ejecutar al cargar y al cambiar de tamaño o hacer scroll
176 window.addEventListener('resize', updateScrollArrows);
177 document.querySelector('.scroll-horizontal')?.addEventListener('scroll', updateScrollArrows);
178 }
179
180 document.addEventListener("DOMContentLoaded", updateScrollArrows);
181 Liferay.on('endNavigate', updateScrollArrows);
182
183
184 <#--
185 FUNCION: closeMenuDropdown
186 DESCRIPCION: Cierra el menú desplegado, elimina las clases de estado 'show/open etc...'
187 y gestiona la visibilidad del overlay. También recalcula la altura si no es 'gva'.
188 -->
189 function closeMenuDropdown() {
190 document.body.classList.remove('main-navigation-dropdown-menu-show');
191
192 document.querySelectorAll('.main-navigation-wrapper .navbar-nav .dropdown-menu, .main-navigation-wrapper .navbar-nav .dropdown').forEach(element => {
193 element.classList.remove('show');
194 });
195 document.querySelectorAll('.main-navigation-wrapper').forEach(mainNavigationWrapper => {
196 mainNavigationWrapper.classList.remove('open');
197 });
198
199 if (!document.body.classList.contains('gva')) {
200 const mainNavigationWrapper = document.querySelector('.main-navigation-wrapper');
201 if (mainNavigationWrapper) {
202 mainNavigationWrapper.style.removeProperty('height');
203 mainNavigationWrapper.style.height = mainNavigationWrapper.offsetHeight + 'px';
204 }
205 }
206
207 document.getElementById('overlay')?.classList.remove('nav');
208 }
209
210 <#--
211 FUNCION: navDropdownsClick
212 DESCRIPCION: Añade los listeners de 'click' a los elementos desplegables.
213 Gestiona la apertura y cálculos de altura del menú desplgado.
214 -->
215 function navDropdownsClick() {
216 const navDropdowns = document.querySelectorAll('.main-navigation-wrapper .navbar-nav .dropdown-toggle');
217 navDropdowns.forEach(dropdown => {
218 dropdown.addEventListener('click', (event) => {
219 event.preventDefault();
220
221 <#-- Detiene la propagación para que no salte el evento click del body -->
222 event.stopPropagation();
223
224 <#-- Limpiamos y cerramos cualquier menú que pudiera estar abierto antes de desplegar el nuevo -->
225 closeMenuDropdown();
226
227 const parent = event.currentTarget.closest('.main-navigation-wrapper .dropdown');
228 const isActive = parent?.classList.contains('show');
229
230 <#-- Si el elemento pulsado NO estaba activo, procedemos a abrirlo -->
231 if (!isActive && parent) {
232 document.body.classList.add('main-navigation-dropdown-menu-show');
233 parent?.classList.add('show');
234
235 const dropdownMenu = parent.querySelector('.dropdown-menu');
236 if (dropdownMenu) {
237 dropdownMenu.classList.add('show');
238 dropdownMenu.style.visibility = 'visible';
239 }
240 const mainNavigationWrapper = document.querySelector('.main-navigation-wrapper');
241 const overlay = document.getElementById('overlay');
242
243 mainNavigationWrapper?.classList.add('open');
244 overlay?.classList.add('nav');
245
246 <#-- Codigo en js para los calculos por la funcionalidad de la cabecera fixed -->
247 if (!document.body.classList.contains('gva')) {
248 <#-- Usamos setTimeout para esperar por seguridad a que el DOM renderice la clase .show antes de medir alturas -->
249 setTimeout(() => {
250 const dropdownMenuShow = document.querySelector('.dropdown-menu.show');
251 const mainNavigationWrapperOpen = document.querySelector('.main-navigation-wrapper.open');
252
253 if (dropdownMenuShow && mainNavigationWrapperOpen) {
254 const dropdownHeight = dropdownMenuShow.offsetHeight;
255 mainNavigationWrapperOpen.style.height = dropdownHeight + mainNavigationWrapper.offsetHeight + 'px';
256
257 <#-- Ajuste dinámico para permitir scroll dentro del dropdown si es muy alto -->
258 const dropdownOpen = document.querySelector('.main-navigation-wrapper .dropdown.show .dropdown-menu.show');
259 if (dropdownOpen) {
260 dropdownOpen.style.maxHeight = dropdownHeight + 'px';
261 }
262 }
263 }, 100);
264 }
265 <#-- Fin -->
266
267 }
268 });
269 });
270 }
271
272 <#-- EVENTO: Click en el Body. Cierra el menú si se hace click fuera de la barra de navegación -->
273 document.body.addEventListener('click', (event) => {
274 const openMenu = document.querySelector('.main-navigation-wrapper .navbar-nav .dropdown-menu.show');
275 if (openMenu !== null) {
276 if (!event.target.closest('.navbar-nav')) {
277 closeMenuDropdown();
278 }
279 }
280 });
281
282 <#-- EVENTO: Tecla Escape. Accesibilidad para cerrar el menú con teclado -->
283 document.body.addEventListener('keydown', (event) => {
284 if (event.key === 'Escape' || event.keyCode === 27) {
285 const openMenu = document.querySelector('.main-navigation-wrapper .navbar-nav .dropdown-menu.show');
286 if (openMenu !== null) {
287 if (event.target.closest('.navbar-nav')) {
288 closeMenuDropdown();
289 }
290 }
291 }
292 });
293
294 <#--
295 FUNCIONALIDAD SCROLL: Controla la clase .scrolled y el overlay cuando el usuario baja la página.
296 Pliega el menú si está desplegado y la barra navegación cuando el usuario baja, lo vuelve a desplegar
297 en el mismo estado cuanto vuelve arriba
298 -->
299 if (!document.body.classList.contains('gva')) {
300 window.addEventListener('scroll', () => {
301 const overlay = document.getElementById('overlay');
302 const mainNavigationWrapper = document.querySelector('.main-navigation-wrapper');
303 if (window.scrollY > 42) {
304 mainNavigationWrapper?.classList.add('scrolled');
305 overlay?.classList.remove('nav');
306 } else {
307 mainNavigationWrapper?.classList.remove('scrolled');
308 const isMenuOpen = document.querySelector('.main-navigation-wrapper .navbar-nav .dropdown-menu.show');
309 if (isMenuOpen) {
310 overlay?.classList.add('nav');
311 }
312 }
313 });
314 }
315
316 <#--
317 FUNCION: setActiveMenuItemFromBreadcrumb
318 DESCRIPCION: Compara los elementos del breadcrumb con el menú principal para marcar como 'active' en el menú
319 la sección correspondiente. (casos como GVA o Sede) Usa jQuery.
320 -->
321 function setActiveMenuItemFromBreadcrumb() {
322 <#assign navigation_menu_id = themeDisplay.getThemeSetting("navigation.menu.id") >
323 <#if navigation_menu_id?has_content>
324 $("#breadcrumb .breadcrumb .breadcrumb-item a").each(function (index) {
325 var elementoBreadcrumb = $(this);
326 if (elementoBreadcrumb) {
327 var tituloElementoBreadcrumb = elementoBreadcrumb.attr("title");
328 if (tituloElementoBreadcrumb) {
329 tituloElementoBreadcrumb = tituloElementoBreadcrumb.toLowerCase().trim();
330 $("header#banner .main-navigation-wrapper.gva nav.navbar ul.navbar-nav>li a").each(function (index) {
331
332 var elementoNavegacion = $(this);
333 if (elementoNavegacion) {
334 var tituloNavegacion = elementoNavegacion.text().toLowerCase().trim()
335 if (tituloNavegacion && tituloNavegacion === tituloElementoBreadcrumb) {
336 $(this).parent().addClass("active");
337 }
338 }
339 });
340 }
341 }
342 });
343 </#if>
344 }
345
346 <#--
347 FUNCION: calcContentMarginTop
348 DESCRIPCION: Las cabeceras están posicionadas como fixed, por lo que es necesario aplicar un margen superior al contenido.
349 Dado que las cabeceras pueden tener alturas diferentes, se calcula dinámicamente la altura de la cabecera y se utiliza
350 ese valor como margen superior del contenido.
351 -->
352 function calcContentMarginTop(){
353 const banner = document.getElementById('banner');
354 const bannerHeight = banner ? banner.offsetHeight : 0;
355 const content = document.getElementById('content');
356 const controlMenuContainer = document.querySelector('.control-menu-container');
357 const heightControlMenuContainer = controlMenuContainer ? controlMenuContainer.offsetHeight : 0;
358
359 if (content) {
360 content.style.marginTop = bannerHeight - heightControlMenuContainer + 'px';
361 }
362 }
363
364 <#--
365 FUNCION: initMainNavigation
366 DESCRIPCION: Inicializador principal. Configura alturas iniciales, márgenes del contenido
367 y dispara la asignación de eventos.
368 -->
369 function initMainNavigation() {
370
371 const mainNavigationWrapper = document.querySelector('.main-navigation-wrapper');
372
373 if (mainNavigationWrapper) {
374
375 if (!document.body.classList.contains('gva')) {
376 <#-- Antes de ajustar el alto del mainNavigationWrapper hay que limpiarlo de clases
377 por el caso de cuando se refresca una página en con el evento scroll activado, para poder
378 calcular el alto correcto-->
379 mainNavigationWrapper.classList.remove('scrolled');
380 mainNavigationWrapper.style.removeProperty('height');
381
382 mainNavigationWrapper.style.height = mainNavigationWrapper.offsetHeight + 'px';
383 }
384
385 calcContentMarginTop();
386
387 navDropdownsClick();
388
389 <#-- Listener para el botón explícito de "Cerrar" dentro de los menús -->
390 const closeButtons = document.querySelectorAll('.dropdown-close .close');
391
392 closeButtons.forEach(closeBtn => {
393 closeBtn.addEventListener('click', event => {
394 const openMenu = document.querySelector('.main-navigation-wrapper .navbar-nav .dropdown-menu.show');
395 if (openMenu !== null) {
396 if (event.target.closest('.navbar-nav')) {
397 closeMenuDropdown();
398 }
399 }
400 });
401 });
402
403 setActiveMenuItemFromBreadcrumb();
404
405 }
406 }
407
408 <#--
409 INICIALIZACION:
410 - load: Carga inicial normal cuando todo los recursos están cargados.
411 - endNavigate: Evento específico de Liferay SPA (Single Page Application) para reinicializar al navegar sin recargar.
412 -->
413 window.addEventListener("load", initMainNavigation);
414 Liferay.on('endNavigate', initMainNavigation);
415
416 })();
417</script>
Template inclusion failed (for parameter value "_TEMPLATE_CONTEXT_/10155/396619647/352001675/C360-MACROS-NAVEGACION"):
Unable to find FreeMarker template with ID _TEMPLATE_CONTEXT_/10155/396619647/352001675/C360-MACROS-NAVEGACION
----
FTL stack trace ("~" means nesting-related):
- Failed at: #include "${templatesPath}/C360-MACRO... [in template "10155#10193#385014489" at line 1, column 1]
----
1<#include "${templatesPath}/C360-MACROS-NAVEGACION" />
2
3<nav class="navbar-mobile"></nav>
4<#assign htmlOutput = "" />
5<#macro buildNavigation
6 branchNavItems
7 cssClass
8 displayDepth
9 includeAllChildNavItems
10 navItemLevel
11 navItems
12 currentItemName
13 currentItemUrl
14 target
15>
16 <#if navItems?has_content && ((displayDepth == 0) || (navItemLevel <= displayDepth))>
17 <#if (navItemLevel > 1)>
18 <#assign htmlOutput = htmlOutput + '<ul class="${cssClass} level-${navItemLevel}">' />
19 <#assign htmlOutput = htmlOutput + '<li class="back-btn d-flex"><a href="" class="gva-btn back"><i class="fa-solid fa-chevron-left"></i></a><a ${target} class="gva-btn w-100" href="${currentItemUrl}">${currentItemName}</a></li>' />
20 <#else>
21 <#assign htmlOutput = htmlOutput + '<ul class="${cssClass} level-${navItemLevel}">' />
22 </#if>
23 <#list navItems as navItem>
24 <#assign nav_item_css_class = "" />
25 <#if navItem.isChildSelected() || navItem.isSelected()>
26 <#assign nav_item_css_class = "selected active"/>
27 </#if>
28 <#assign htmlOutput = htmlOutput + '<li class="${nav_item_css_class} layout-${navItem.getLayoutId()} add-link-icons">' />
29 <#if navItem.hasChildren()>
30 <#assign htmlOutput = htmlOutput + '<a rel="nofollow" class="gva-btn gva-btn-ghost-primary link-nav ${nav_item_css_class} submenu-toggle" href="${getHref(navItem,themeDisplay)}" ${navItem.getTarget()}>${navItem.getName()}<i class="fa-solid fa-chevron-right"></i></a>' />
31 <#else>
32 <#assign htmlOutput = htmlOutput + '<a rel="nofollow" class="gva-btn gva-btn-ghost-primary link-nav ${nav_item_css_class}" href="${getHref(navItem,themeDisplay)}" ${navItem.getTarget()}>${navItem.getName()}</a>' />
33 </#if>
34
35 <#if includeAllChildNavItems || navItem.isInNavigation(branchNavItems)>
36 <@buildNavigation
37 branchNavItems=branchNavItems
38 cssClass=cssClass
39 displayDepth=displayDepth
40 includeAllChildNavItems=includeAllChildNavItems
41 navItemLevel=(navItemLevel + 1)
42 navItems=navItem.getChildren()
43 currentItemName=navItem.getName()
44 currentItemUrl=navItem.getRegularURL()
45 target=navItem.getTarget()
46 />
47 </#if>
48 <#assign htmlOutput = htmlOutput + '</li>' />
49 </#list>
50 <#assign htmlOutput = htmlOutput + '</ul>' />
51 </#if>
52</#macro>
53
54<#if !entries?has_content>
55 <#if themeDisplay.isSignedIn()>
56 <#assign htmlOutput = htmlOutput + '<div class="alert alert-info"><@liferay.language key="there-are-no-menu-items-to-display" /></div>' />
57 </#if>
58<#else>
59 <#assign htmlOutput = htmlOutput + '<div class="list-menu">' />
60 <@buildNavigation
61 branchNavItems=branchNavItems
62 cssClass="layouts"
63 displayDepth=displayDepth
64 includeAllChildNavItems=true
65 navItemLevel=1
66 navItems=entries
67 currentItemName=""
68 currentItemUrl=""
69 target=""
70 />
71 <#assign htmlOutput = htmlOutput + '</div>' />
72</#if>
73
74
75
76<script>
77 (function() {
78
79 <#--
80 ===================================================================================
81 FUNCIONALIDADES DEL MENU MOVIL
82 ===================================================================================
83 Este script controla la interaccion del menu movil. Si se modifica algo, se puede seguir esta
84 lista para verificar que no se ha roto nada. Si se modifican o anaden funcionalidades hay
85 que actualizar este comentario.
86
87 1. NAVEGACION Y CARGA (Liferay SPA)
88 Carga Inicial: El menu movil carga correctamente al entrar en la pagina.
89 Navegacion SPA: Al navegar sin recargar, el menu se reinicializa sin duplicar eventos
90 (eventos globales una sola vez, eventos del wrapper se vuelven a asignar si cambia el DOM).
91
92 2. SUBMENUS (NIVELES)
93 Apertura: Click en item con submenu activa el siguiente nivel y oculta enlaces del nivel actual.
94 Retroceso: Click en el boton de volver activa el nivel anterior y recalcula alturas.
95 Importante: El click de submenu/back se maneja dentro del wrapper para evitar navegacion del enlace.
96
97 3. BOTON HAMBURGUESA Y OVERLAY
98 Apertura/Cierre: Click en el boton muestra/oculta el menu y alterna los iconos.
99 Overlay: Se muestra/oculta con la clase .nav-mobile.
100 HTML: Se inserta el HTML del menu en cada apertura (menu actualizado en SPA).
101
102 4. CIERRE DEL MENU
103 Click fuera: Cierra el menu si se hace click fuera del wrapper o el boton.
104 ESC: Cierra el menu si esta abierto.
105
106 5. ESTADO VISUAL Y ALTURAS
107 Alturas: Ajuste dinamico del nivel 1 segun el submenu activo.
108 Nivel actual: Al abrir, activa el UL mas profundo con items selected/active y ajusta el alto.
109 Iconos: Alterna los iconos en el boton segun el estado de menu cerrado/abierto.
110
111 6. EXTRAS Y ACTIVO
112 Clonado: Anade area privada, logo/nombre y selector de idiomas al menu movil.
113 Item Activo: Marca como activo el item segun las migas de pan (jQuery),
114 solo en cabeceras que utilizan "navigation.menu.id".
115
116 ===================================================================================
117 -->
118
119 <#-- Variable que contiene el HTML de navegacion -->
120 const navigationHTML = "${htmlOutput?json_string}";
121 window.__mainNavigationMobileHTML = navigationHTML;
122
123 <#--
124 PREVENCION DE DUPLICIDAD DE EVENTOS (LIFERAY SPA)
125 Comprobamos si este script ya ha sido inicializado en el objeto 'window'.
126 Esto evita que, al navegar entre paginas (sin recarga completa), se vuelvan
127 a anadir listeners globales, lo que duplicaria la ejecucion y degradaria el rendimiento.
128 Si la bandera ya existe "window.__mainNavigationMobileInitialized = true", significa que este
129 codigo ya se cargo previamente.
130 -->
131 if (window.__mainNavigationMobileInitialized) {
132 return;
133 }
134 window.__mainNavigationMobileInitialized = true;
135
136 <#--
137 FUNCION: getLevelFromElement
138 DESCRIPCION: Obtiene el nivel (level-n) del elemento (li) clicado a partir de su UL padre.
139 -->
140 function getLevelFromElement(element) {
141 const parentUl = element ? element.closest('ul') : null;
142 if (!parentUl || !parentUl.className) {
143 return null;
144 }
145 const match = parentUl.className.match(/level-(\d+)/);
146 return match ? parseInt(match[1], 10) : null;
147 }
148
149 <#--
150 FUNCION: handleSubmenuClick
151 DESCRIPCION: Gestiona el click en un submenu, activa el nivel siguiente y ajusta alturas.
152 -->
153 function handleSubmenuClick(event, level, target) {
154 event.preventDefault();
155
156 <#-- Oculta los a del nivel actual (el nivel que se oculta) ya que el icono de enlace externo siempre se veia, se anade settimeout para evitar un efecto raro al cambiar de nivel -->
157 setTimeout(function() {
158 document.querySelectorAll('.navbar-mobile ul.level-' + level + ' > li > a').forEach(function(node) {
159 node.style.display = 'none';
160 });
161 }, 200);
162
163 const parentLi = target ? target.closest('li') : null;
164 const nextLevel = parentLi ? parentLi.querySelector('ul.level-' + (level + 1)) : null;
165
166 <#-- Ajusta el alto de cada submenu -->
167 const level1 = document.querySelector('.navbar-mobile ul.level-1');
168 if (level1 && nextLevel) {
169 level1.style.height = nextLevel.offsetHeight + 'px';
170 }
171
172 if (nextLevel) {
173 nextLevel.classList.add('active');
174 }
175 }
176
177 <#--
178 FUNCION: handleBackClick
179 DESCRIPCION: Gestiona el click en volver, desactiva el nivel actual y activa el nivel previo y ajusta alturas.
180 -->
181 function handleBackClick(event, level) {
182 event.preventDefault();
183 const currentLevel = document.querySelector('.navbar-mobile ul.level-' + level + '.active');
184 const previousLevel = currentLevel ? currentLevel.closest('ul.level-' + (level - 1)) : null;
185
186 <#-- Vuelve a mostrar los a del nivel que se van a visualizar -->
187 document.querySelectorAll('.navbar-mobile ul.level-' + (level - 1) + ' > li > a').forEach(function(node) {
188 node.style.display = 'flex';
189 });
190 if (previousLevel && currentLevel) {
191 currentLevel.classList.remove('active');
192
193 <#-- Ajusta el alto de cada submenu -->
194 const level1 = document.querySelector('.navbar-mobile ul.level-1');
195 if (level1) {
196 if (level == 2) {
197 level1.style.height = '';
198 } else {
199 level1.style.height = previousLevel.offsetHeight + 'px';
200 }
201 }
202 }
203 }
204
205 <#--
206 FUNCION: setOverlay
207 DESCRIPCION: Muestra u oculta el overlay del menu movil.
208 -->
209 function setOverlay(isOpen, overlay) {
210 if (!overlay) {
211 return;
212 }
213 if (isOpen) {
214 overlay.classList.add('nav-mobile');
215 } else {
216 overlay.classList.remove('nav-mobile');
217 }
218 }
219
220 <#--
221 FUNCION: setHamburgerState
222 DESCRIPCION: Actualiza estado del boton hamburguesa, iconos y visibilidad del wrapper.
223 -->
224 function setHamburgerState(isOpen, hamburgerButton, navWrapper, faBars, faXmark) {
225 if (!hamburgerButton) {
226 return;
227 }
228
229 if (isOpen) {
230 hamburgerButton.classList.add('active');
231 } else {
232 hamburgerButton.classList.remove('active');
233 }
234
235 if (navWrapper) {
236 navWrapper.style.display = isOpen ? 'block' : 'none';
237 }
238 if (faBars) {
239 faBars.style.display = isOpen ? 'none' : 'block';
240 }
241 if (faXmark) {
242 faXmark.style.display = isOpen ? 'block' : 'none';
243 }
244 }
245
246 <#--
247 FUNCION: addMenuExtras
248 DESCRIPCION: Clona e inserta en el menu movil los bloques auxiliares (logo, nombre, area privada e idiomas) si existen.
249 -->
250 function addMenuExtras(navbarListMenu, logoDer, nameParent, privateArea, languageSelector) {
251 if (navbarListMenu && logoDer) {
252 navbarListMenu.appendChild(logoDer.cloneNode(true));
253 }
254 if (navbarListMenu && nameParent) {
255 navbarListMenu.appendChild(nameParent.cloneNode(true));
256 }
257 if (navbarListMenu && privateArea) {
258 navbarListMenu.appendChild(privateArea.cloneNode(true));
259 }
260 if (navbarListMenu && languageSelector) {
261 navbarListMenu.appendChild(languageSelector.cloneNode(true));
262 }
263 }
264
265 <#--
266 FUNCION: setActiveMenuItemFromBreadcrumb
267 DESCRIPCION: Compara los elementos del breadcrumb con el menú principal para marcar como 'active' en el menú
268 la sección correspondiente. (casos como GVA o Sede) Usa jQuery.
269 -->
270 function setActiveMenuItemFromBreadcrumb() {
271 <#assign navigation_menu_id = themeDisplay.getThemeSetting("navigation.menu.id") >
272 <#if navigation_menu_id?has_content>
273 <#-- Codigo en js para ACTIVAR las opciones del menu que tienen el mismo nombre que alguno de los elementos del camino de migas -->
274 $("#breadcrumb .breadcrumb .breadcrumb-item a").each(function( index ) {
275 var elementoBreadcrumb = $( this );
276 if (elementoBreadcrumb){
277 var tituloElementoBreadcrumb = elementoBreadcrumb.attr("title");
278 if (tituloElementoBreadcrumb){
279 tituloElementoBreadcrumb = tituloElementoBreadcrumb.toLowerCase().trim();
280 $("header#banner .main-navigation-mobile-wrapper nav.navbar-mobile .list-menu a").each(function( index ) {
281
282 var elementoNavegacion = $( this );
283 if (elementoNavegacion){
284 var tituloNavegacion = elementoNavegacion.text().toLowerCase().trim()
285 if (tituloNavegacion && tituloNavegacion === tituloElementoBreadcrumb){
286 $( this ).parent().addClass("selected");
287 $( this ).parent().addClass("active");
288 }
289 }
290 });
291 }
292 }
293 });
294 </#if>
295 }
296
297 <#--
298 FUNCION: closeMobileMenuDropdown
299 DESCRIPCION: Cierra el menu movil, resetea el boton y oculta el overlay.
300 -->
301 function closeMobileMenuDropdown() {
302 const navWrapper = document.querySelector('.main-navigation-mobile-wrapper');
303 const hamburgerButton = document.querySelector('.hamburger-button-mobile');
304 const overlay = document.getElementById('overlay');
305
306 if (!hamburgerButton) {
307 return;
308 }
309
310 const faBars = hamburgerButton.querySelector('.fa-bars');
311 const faXmark = hamburgerButton.querySelector('.fa-xmark');
312
313 setHamburgerState(false, hamburgerButton, navWrapper, faBars, faXmark);
314
315 setOverlay(false, overlay);
316
317 }
318
319 <#--
320 FUNCION: onSubmenuToggleClick
321 DESCRIPCION: Handler del click en submenu, evita navegacion (que se recargue la pagina).
322 -->
323 function onSubmenuToggleClick(event) {
324 const target = event.target.closest('.navbar-mobile .submenu-toggle');
325 if (!target) {
326 return;
327 }
328
329 <#-- Evita la navegacion por defecto si el item es un submenu -->
330 event.preventDefault();
331 event.stopPropagation();
332
333 if (!event.target.closest('.main-navigation-mobile-wrapper')) {
334 return;
335 }
336
337 <#-- Obtiene el nivel del submenu actual -->
338 const level = getLevelFromElement(target);
339 if (!level) {
340 return;
341 }
342 handleSubmenuClick(event, level, target);
343 }
344
345 <#--
346 FUNCION: onBackButtonClick
347 DESCRIPCION: Handler del click en volver, retrocede un nivel y ajusta alturas.
348 -->
349 function onBackButtonClick(event) {
350 const target = event.target.closest('.navbar-mobile .back-btn .back');
351 if (!target) {
352 return;
353 }
354
355 <#-- Evita la navegacion por defecto si es el boton de volver -->
356 event.preventDefault();
357 event.stopPropagation();
358
359 if (!event.target.closest('.main-navigation-mobile-wrapper')) {
360 return;
361 }
362
363 <#-- Obtiene el nivel del submenu actual -->
364 const level = getLevelFromElement(target);
365 if (!level) {
366 return;
367 }
368 handleBackClick(event, level);
369 }
370
371 <#--
372 FUNCION: onHamburgerClick
373 DESCRIPCION: Abre/cierra el menu, inserta HTML, clona extras y marca item activo.
374 -->
375 function onHamburgerClick(event) {
376 const hamburgerButton = event.target.closest('.hamburger-button-mobile');
377 if (!hamburgerButton) {
378 return;
379 }
380
381 <#-- Inserta el html del menu de navegacion con todos sus niveles -->
382 const navbarMobile = document.querySelector('.navbar-mobile');
383 if (navbarMobile) {
384 navbarMobile.innerHTML = window.__mainNavigationMobileHTML || '';
385 }
386
387 const navWrapper = document.querySelector('.main-navigation-mobile-wrapper');
388 const faBars = hamburgerButton.querySelector('.fa-bars');
389 const faXmark = hamburgerButton.querySelector('.fa-xmark');
390 const isActive = hamburgerButton.classList.contains('active');
391 const privateArea = document.querySelector('.private-area-wrapper');
392 const navbarListMenu = navbarMobile ? navbarMobile.querySelector('.list-menu') : null;
393 const logoDer = document.querySelector('.portal-parent-brand');
394 const nameParent = document.querySelector('.portal-parent-name');
395 const languageSelector = document.querySelector('.language-wrapper .language-selector');
396 const overlay = document.getElementById('overlay');
397 const level1 = navbarMobile ? navbarMobile.querySelector('ul.level-1') : null;
398 const allUls = navbarMobile ? navbarMobile.querySelectorAll('ul') : [];
399
400 setHamburgerState(!isActive, hamburgerButton, navWrapper, faBars, faXmark);
401
402 setOverlay(!isActive, overlay);
403
404 <#-- Ajusta el alto del submenu -->
405 if (!isActive) {
406 if (level1) {
407 level1.style.height = level1.offsetHeight + 'px';
408 }
409 }
410
411 <#-- Anade el area privada y el selector de idiomas al menu movil -->
412 addMenuExtras(navbarListMenu, logoDer, nameParent, privateArea, languageSelector);
413
414 setActiveMenuItemFromBreadcrumb();
415 <#-- Se encarga de que al abrir el menu se pinte el nivel actual de navegacion -->
416 let deepestUl = null;
417 let maxDepth = 0;
418
419 allUls.forEach(function(ul) {
420 const lis = ul.querySelectorAll('li.selected.active');
421
422 if (lis.length > 0) {
423 ul.classList.add('active');
424
425 <#-- Calcular profundidad para saber si este es el mas profundo -->
426 let depth = 0;
427 let tempUl = ul;
428 while (tempUl.parentElement) {
429 tempUl = tempUl.parentElement;
430 if (tempUl.tagName === 'UL') {
431 depth++;
432 }
433 }
434
435 if (depth > maxDepth) {
436 maxDepth = depth;
437 deepestUl = ul;
438 }
439 }
440 });
441
442 <#-- Establecemos el height en el level 1 igual al offsetHeight del mas profundo -->
443 if (deepestUl && level1) {
444 level1.style.height = deepestUl.offsetHeight + 'px';
445 }
446
447 }
448
449 <#--
450 FUNCION: onDocumentClick
451 DESCRIPCION: Cierra el menu si se hace click fuera del wrapper o del boton.
452 -->
453 function onDocumentClick(event) {
454 const navWrapper = document.querySelector('.main-navigation-mobile-wrapper');
455 const hamburgerButton = document.querySelector('.hamburger-button-mobile');
456
457 if (navWrapper && !navWrapper.contains(event.target) && hamburgerButton && !hamburgerButton.contains(event.target)) {
458 closeMobileMenuDropdown();
459 }
460 }
461
462 <#--
463 FUNCION: onDocumentKeydown
464 DESCRIPCION: Cierra el menu al pulsar ESC si esta abierto.
465 -->
466 function onDocumentKeydown(event) {
467 const navWrapper = document.querySelector('.main-navigation-mobile-wrapper');
468 const hamburgerButton = document.querySelector('.hamburger-button-mobile');
469 if (event.key === 'Escape' || event.keyCode === 27) {
470 if (navWrapper && hamburgerButton && hamburgerButton.classList.contains('active')) {
471 closeMobileMenuDropdown();
472 }
473 }
474 }
475
476 <#--
477 FUNCION: bindMobileWrapperEvents
478 DESCRIPCION: Enlaza los eventos de submenu/back al wrapper para evitar listeners globales.
479 Asegura que siempre hay un solo wrapper con listeners activos, incluso cuando Liferay SPA recrea el DOM.
480 -->
481 function bindMobileWrapperEvents() {
482 const navWrapper = document.querySelector('.main-navigation-mobile-wrapper');
483 if (!navWrapper) {
484 return;
485 }
486
487 if (window.__mainNavigationMobileWrapper === navWrapper) {
488 return;
489 }
490
491 if (window.__mainNavigationMobileWrapper) {
492 window.__mainNavigationMobileWrapper.removeEventListener('click', onSubmenuToggleClick);
493 window.__mainNavigationMobileWrapper.removeEventListener('click', onBackButtonClick);
494 }
495
496 window.__mainNavigationMobileWrapper = navWrapper;
497 navWrapper.addEventListener('click', onSubmenuToggleClick);
498 navWrapper.addEventListener('click', onBackButtonClick);
499 }
500
501 <#--
502 FUNCION: initMainNavigationMobile
503 DESCRIPCION: Inicializa eventos globales una sola vez y re-enlaza eventos del wrapper.
504 -->
505 function initMainNavigationMobile() {
506 if (!window.__mainNavigationMobileEventsBound) {
507 window.__mainNavigationMobileEventsBound = true;
508 document.addEventListener('click', onHamburgerClick);
509 document.addEventListener('click', onDocumentClick);
510 document.addEventListener('keydown', onDocumentKeydown);
511 }
512
513 bindMobileWrapperEvents();
514 }
515
516 <#--
517 INICIALIZACION:
518 - load: Carga inicial normal cuando todo los recursos estan cargados.
519 - endNavigate: Evento especifico de Liferay SPA (Single Page Application) para reinicializar al navegar sin recargar.
520 -->
521 window.addEventListener("load", initMainNavigationMobile);
522 Liferay.on('endNavigate', initMainNavigationMobile);
523
524 })();
525
526</script>
Please review the list of frequently asked questions beforehand
We remind you that you also have at your disposal a test procedure that will allow you to familiarize yourself with the procedure and check your equipment in advance
If your incident is related to access through a digital certificate, previously verify its validity through the page http://valide.redsara.es/valide/inicio.html and attach a capture.
The Generalitat Valenciana will carry out the processing of your personal data in accordance with the General Data Protection Regulation (EU) 2016/679 and Organic Law 3/2018 on Data Protection and guarantee of digital rights.
This website uses its own and third-party cookies to improve the content offered.
More information