1<script>
2Liferay.Portlet.ready( function (_portletId, _node) {
3 if(_portletId ==='${themeDisplay.getPortletDisplay().getId()}'){
4 calcWidth();
5 window.addEventListener('resize', calcWidth);
6 }
7
8});
9 window.onload = function(){
10 document.getElementById("btnMenuSecciones").onclick = function() {
11
12 if($('.btnSecciones').attr("aria-expanded")== "true"){
13 $('.lista').css('display','none');
14 $('.btnSecciones').attr("aria-expanded", false);
15 }else if($('.btnSecciones').attr("aria-expanded")== "false"){
16 $('.lista').css('display','block');
17 $('.btnSecciones').attr("aria-expanded", true);
18 }
19
20 };
21
22 const elm = document.getElementById('listaSecciones')
23 const but = document.getElementById('btnMenuSecciones')
24
25 elm.addEventListener('focusout', (event) => {
26
27 if(elm.contains(event.relatedTarget) == false ){
28 $('.lista').css('display','none');
29 $('.btnSecciones').attr("aria-expanded", false);
30 }else{
31 $('.lista').css('display','block');
32 $('.btnSecciones').attr("aria-expanded", true);
33 }
34 })
35 but.addEventListener('focusout', (event) => {
36
37 if(elm.contains(event.relatedTarget) == false ){
38 $('.lista').css('display','none');
39 $('.btnSecciones').attr("aria-expanded", false);
40 }else{
41 if(code= 38){
42 $('.lista').css('display','block');
43 $('.btnSecciones').attr("aria-expanded", true);
44
45 }
46
47
48 }
49 })
50
51 }
52
53
54
55document.body.addEventListener('keydown', function(e) {
56 if (e.keyCode == 27) {
57 $('.lista').css('display','none');
58 }
59 if (e.keyCode == 13) {
60 $('.lista').css('display','none');
61 }
62
63
64
65
66
67});
68
69
70
71
72
73function calcWidth() {
74 var navwidth = 0;
75 var morewidth = $('#main .more').outerWidth(true);
76 $('#main > li:not(.more)').each(function() {
77 navwidth += $(this).outerWidth( true );
78 });
79
80 //var availablespace = $('nav').outerWidth(true) - morewidth;
81 var availablespace = $('#nav-main').width() - morewidth;
82
83 if (navwidth > availablespace) {
84 var lastItem = $('#main > li:not(.more)').last();
85 lastItem.attr('data-width', lastItem.outerWidth(true));
86 lastItem.prependTo($('#main .more ul'));
87 calcWidth();
88 } else {
89
90 var firstMoreElement = $('#main li.more li').first();
91 if (navwidth + firstMoreElement.data('width') < availablespace) {
92 firstMoreElement.insertBefore($('#main .more'));
93 }
94
95 $('#listaSecciones li a').each(function(e){
96 $(this).attr('role', 'button');
97
98 })
99 }
100
101 if ($('.more li').length > 0) {
102 $('.more').css('display','block');
103
104 } else {
105 $('.more').css('display','none');
106 }
107
108
109 let menuNav = document.getElementById("nav-main");
110 if(menuNav){
111 menuNav.style.visibility = "visible";
112 }
113
114 }
115/*Liferay.on('startNavigate', function(event) {
116 calcWidth();
117 });
118
119 $(window).on('load',function(){
120 calcWidth();
121 });
122
123 Liferay.on('screenChange', function(event) {
124 calcWidth();
125 });*/
126
127</script>
128
129<#assign AssetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService")>
130<#assign JournalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")>
131
132<#assign
133 asisomosService = serviceLocator.findService("com.once.welgso.asisomos.service.api.AsiSomosService")
134 asisomosGroupId = asisomosService.getGroupId(request)!groupId
135 asisomosRevista = asisomosService.getRevista(request)>
136
137 <div id="nav-main" class="row justify-content-center">
138 <#if Secciones.getSiblings()?has_content>
139 <ul id="main" role="navigation">
140 <#list Secciones.getSiblings() as cur_secciones>
141 <#assign
142 webContentData = jsonFactoryUtil.createJSONObject(cur_secciones.getData())
143 categories = AssetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", webContentData.classPK?number)
144
145
146 />
147
148 <#if categories?? && categories?has_content>
149 <#assign categorySeccion = categories[0] />
150 </#if>
151
152 <li role="presentation">
153 <a role="button" id="start" href="${cur_secciones.getFriendlyUrl()}?revista=${asisomosRevista.getArticleId()}">
154 ${categorySeccion.name}
155 </a>
156 </li>
157
158 </#list>
159 <#else>
160 No tenemos secciones
161</#if>
162 <li class="more hidden" >
163 <button role="button" id="btnMenuSecciones" class="btnSecciones" aria-expanded="false"><i class="icon-chevron-down"></i>
164 </button><ul class="lista" id="listaSecciones"></ul>
165 </li>
166 </ul>
167
168</div>
169
170
171
172<style>
173#nav-main{
174 visibility: hidden;
175}
176
177#nav-main ul ul {
178 left: -15% !important;
179 margin-top:0px !important;
180}
181#nav-main ul ul li {
182 width: 210px !important;
183 text-align: left !important;
184/*a{
185 padding:unset;
186}*/
187 }
188 #nav-main .btnSecciones:hover .lista {
189 display: none !important;
190}
191</style>
