1<!--<script src="/documents/20129/601893/jquery-3.5.1.min.js" ></script>-->
2<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" type="text/javascript"></script> -->
3<script src="https://www.javeriana.edu.co/lib/jquery.min.js" type="text/javascript"></script>
4
5
6<#if themeDisplay.isSignedIn()>
7 <span style="margin-left:30px;" class="badge badge-danger panel-notifications-count">
8 <span class="badge-item badge-item-expand">Agrupador de pestañas</span>
9 </span>
10</#if>
11
12<script>
13var onClickItem${agrapadorMenu.getData()} = function(elementAnchor, el){
14 window.location = elementAnchor;
15 $('#pestanas${agrapadorMenu.getData()} ul li').removeClass('pestanas${agrapadorMenu.getData()}Focus');
16 el.classList.add('pestanas${agrapadorMenu.getData()}Focus');
17}
18</script>
19
20<#if tipoGrupo.getData() == 'pestana'>
21 <#if pestana.getSiblings()?has_content>
22 <#assign countPestanas = pestana.getSiblings()?size />
23 <#if !(countPestanas = 1 && pestana.getSiblings()[0].getData()?has_content?string('yes', 'no') = 'no')>
24 <div id="mascarapestana" style="background-color:${ColorFondo.getData()};">
25 <div id="pestanas${agrapadorMenu.getData()}" class="pestana">
26 <ul>
27 <#list pestana.getSiblings() as cur_pestana>
28 <li id="${agrapadorMenu.getData()}${cur_pestana.urlPestana.getData()[1..*100]}" onclick="onClickItem${agrapadorMenu.getData()}('${cur_pestana.urlPestana.getData()}',this)" class="lipestana">
29 ${cur_pestana.getData()} <div class="borde-inf"></div>
30 </li>
31 </#list>
32 </ul>
33 </div>
34 </div>
35 </#if>
36 </#if>
37</#if>
38
39
40<script>
41
42$( window ).ready(function(){
43 $('.${agrapadorMenu.getData()}').css('display','none');
44 $('.${agrapadorMenu.getData()}').first().css('display','block');
45 //console.log("${randomNamespace}: "+'.${agrapadorMenu.getData()}');
46 //console.log("primero: "+$('.${agrapadorMenu.getData()}').legth);
47 onChangeAnchor${agrapadorMenu.getData()}();
48});
49
50
51
52 var isEmpty = function (e) {
53 switch (e) {
54 case "":
55 case 0:
56 case "0":
57 case null:
58 case false:
59 case typeof this === undefined:
60 case typeof this == undefined:
61 case typeof this == "undefined":
62 return true;
63 default:
64 return false;
65 }
66}
67
68
69var onChangeAnchor${agrapadorMenu.getData()} = function(){
70
71<#if tipoGrupo.getData() == 'pestana'>
72var offsetHash = 150;
73<#else>
74var offsetHash = 110;
75</#if>
76 var ASC = "";
77 var Ancla = "";
78 var AnclaReal = "";
79
80 if(!isEmpty(window.location.hash)){
81 ASC = window.location.hash.split('?')[0].split('#')[1].split('-');
82 Ancla = ASC[0];
83 AnclaReal = ASC[1];
84 }
85
86//console.log("Anclas: "+Ancla+'<->'+AnclaReal);
87
88 if(!isEmpty(Ancla)){
89
90 if(Ancla === 'BACKWARD'){
91 console.log(Ancla);
92 window.history.go(-2);
93 return;
94 }
95
96 if($('a[name ="'+Ancla+'"]:visible:first').length > 0){
97 try{
98 /*$('html, body').animate({
99 scrollTop: $('a[name ="'+Ancla+'"]:visible:first').offset().top-offsetHash
100 }, 800);*/
101 window.location.href = "#"+Ancla;
102 }
103 catch(err){
104 //console.log("1."+err.message);
105 }
106
107 return;
108 }
109
110 if($("."+Ancla).length == 0){
111 return;
112 }
113
114 try{
115 if ($("."+Ancla).hasClass("${agrapadorMenu.getData()}")) {
116
117 //console.log("ACL 1 -> "+".${agrapadorMenu.getData()} ."+Ancla);
118
119 $(".${agrapadorMenu.getData()}").css('display','none');
120 $("."+Ancla).css('display','block');
121 $("."+Ancla).css('width','0px');
122 $("."+Ancla).css('height','0px');
123
124 $("."+Ancla).animate({height: "100vh"});
125 $("."+Ancla).animate({width: "100%"});
126 $('html, body').animate({
127 scrollTop: $('.'+Ancla+':visible:first').offset().top-offsetHash
128 }, 1000);
129 <#if tipoGrupo.getData() == 'pestana'>
130 $('#pestanas${agrapadorMenu.getData()} ul li').removeClass('pestanas${agrapadorMenu.getData()}Focus');
131 $('#${agrapadorMenu.getData()}'+Ancla).addClass("pestanas${agrapadorMenu.getData()}Focus");
132 </#if>
133 } else {
134
135 //console.log("ACL 2 -> "+".${agrapadorMenu.getData()} ."+Ancla);
136
137 $('.${agrapadorMenu.getData()}').first().css('display','block');
138 <#if tipoGrupo.getData() == 'pestana'>
139 $('#pestanas${agrapadorMenu.getData()} ul li').removeClass('pestanas${agrapadorMenu.getData()}Focus');
140 $('#pestanas${agrapadorMenu.getData()} ul li:first').addClass("pestanas${agrapadorMenu.getData()}Focus");
141 </#if>
142 }
143 }
144 catch(err){
145 //console.log("2."+err.message);
146 }
147
148 if(AnclaReal !== undefined){
149 //console.log("Anclas: "+Ancla+" : "+AnclaReal);
150 $('html, body').animate({
151 scrollTop: $('a[name ="'+AnclaReal+'"]:visible:first').offset().top-offsetHash
152 }, 300);
153
154 $('.${agrapadorMenu.getData()}:visible:first').animate({
155 scrollTop: $('a[name ="'+AnclaReal+'"]:first').offset().top
156 }, 200);
157 }
158 }
159 else{
160 $('.${agrapadorMenu.getData()}').css('display','none');
161 $('.${agrapadorMenu.getData()}').first().css('display','block');
162 <#if tipoGrupo.getData() == 'pestana'>
163 $('#pestanas${agrapadorMenu.getData()} ul li').removeClass('pestanas${agrapadorMenu.getData()}Focus');
164 $('#pestanas${agrapadorMenu.getData()} ul li:first').addClass("pestanas${agrapadorMenu.getData()}Focus");
165 </#if>
166 }
167
168 //event.stopImmediatePropagation();
169
170}
171
172$( window ).on( 'hashchange', function( e ) {
173 onChangeAnchor${agrapadorMenu.getData()}();
174} );
175
176</script>
177<style type="text/css">
178 html {
179 scroll-behavior: smooth;
180 webkit-overflow-scrolling: touch;
181 }
182 .${agrapadorMenu.getData()}{
183 height: auto !important;
184 /*background-color: #f0f0f0!important;*/
185 /*padding: 25px;*/
186 <#if tipoGrupo.getData() == 'pestana'>
187 /*background-color:#f7f7f7;*/
188 /*padding:10px;*/
189 </#if>
190 }
191
192
193 #pestanas${agrapadorMenu.getData()} {
194 float: top;
195 font-size: 1.8ex;
196 border-bottom: 2px solid;
197 max-width: fit-content;
198 margin: 0 auto;
199 border-bottom-color: #ababab;
200 }
201
202
203 #pestanas${agrapadorMenu.getData()} ul{
204 background: transparent;
205 width: 100%;
206 DISPLAY: FLEX;
207 justify-content: center!important;
208 font-family:var(--sec-font);
209 font-size: 1rem;
210 margin-bottom: -1px!important;
211 padding-left: 0px;
212 }
213
214
215 #pestanas${agrapadorMenu.getData()} ul li{
216 list-style-type: none;
217 cursor: pointer;
218 padding: 10px 0px !important;
219 /* border: 2px solid #f0f0f0; */
220 border-radius: 10px 10px 0px 0px !important;
221 border-bottom: none !important;
222 background-color: transparent;
223 text-align: center;
224 color: var(--color-txt);
225 font-family: var(-sec-font);!important;
226 font-size: 1.2rem;
227 text-decoration: none;
228 /* margin: 0px 5px; */
229 font-family: var(--sec-font);
230 width: 200px;
231 }
232
233
234 .pestanas${agrapadorMenu.getData()}Focus{
235 background-color: transparent !important;
236 TEXT-DECORATION: underline;
237 text-decoration-color: var(--color-ppal);
238 font-family: var(--sec-font);
239 padding: 10px 10px 10px 10px !important;
240 border-radius: 10px 10px 0px 0px !important;
241 color: var(--color-ppal)!important;
242 font-weight: 600;
243 border-bottom: 2px solid #594845 !important;
244 }
245 .pestanas${agrapadorMenu.getData()}Focus .borde-inf {
246 width: 100%;
247 border-bottom: 6px solid;
248 border-bottom-color: var(--color-ppal);
249 display: flex;
250 justify-content: center;
251 margin: 0 auto;
252 margin-top: 0px;
253 position: relative;
254 bottom: -13px;
255 }
256
257 #pestanas${agrapadorMenu.getData()} a{
258 text-decoration: none;
259 color: #494949;
260 }
261
262 @media screen and (max-width: 660px) {
263 #pestanas${agrapadorMenu.getData()} ul li{
264 width: 100%;
265 border-bottom: 1px solid #eeeded57;
266 /* height: 32px; */
267 margin: 0px auto;
268 text-align: center;
269 }
270
271 #pestanas${agrapadorMenu.getData()} ul {
272 background: #FFF;
273 width: 100%;
274 DISPLAY: FLEX;
275 justify-content: center;
276 font-family: var(--sec-font);;
277 font-size: 1rem;
278 flex-wrap: wrap;
279 padding-left: 0px;
280 }
281 }
282
283</style>
