1// import Fetch from 'https://aplicaciones.upaep.mx/applications/util/modules/Fetch/fetch.js'; 2 3// async function executeFetch(met, json, ur) { 4// // json = {"id": "a0RS0000007e8IQMAY","section": "1"}; 5// const method = met; 6// const url = ur; 7// const instance = new Fetch(url, method, json); 8// const response = await instance.execFetch(); 9// return response; 10// } 11var urlFetch = { 12 ejemplo: "", 13 program: "", 14 newApi: "/locksmith/middleware/get.php", 15 getFile: 'https://aplicaciones.upaep.mx/utilities/getFile_Base64/getFile_Base64.php', 16}; 17 18const tem_banner_card = document.createElement('template'); 19const tem_banner_indicators = document.createElement('template'); 20const tem_banner_controls = document.createElement('template'); 21const tem_banner_card_img = document.createElement('template'); 22const tem_banner_card_video = document.createElement('template'); 23const tem_banner_card_iframe = document.createElement('template'); 24const tem_banner_modal = document.createElement('template'); 25const tem_banner_down = document.createElement('template'); 26const tem_video_controls = document.createElement('template'); 27 28 29tem_banner_card.innerHTML = ` 30<div class="carousel-item"> 31 <div class="upaep__banner-card"> 32 <div class="upaep__banner-resource"> </div> 33 <div class="upaep__banner-card-overlay"> 34 <a> 35 <div class="upaep__banner-card-overlay-content"></div> 36 </a> 37 </div> 38 </div> 39</div> 40`; 41tem_banner_indicators.innerHTML = ` 42<button type="button" class="__indicator" data-bs-target="" data-bs-slide-to="" aria-current="true" aria-label=""></button> 43`; 44tem_banner_controls.innerHTML = ` 45<button class="carousel-control-prev __controls" type="button" data-bs-target="" data-bs-slide="prev"> 46 <span class="carousel-control-prev-icon" aria-hidden="true"></span> 47 <span class="visually-hidden">Previous</span> 48</button> 49<button class="carousel-control-next __controls" type="button" data-bs-target="" data-bs-slide="next"> 50 <span class="carousel-control-next-icon" aria-hidden="true"></span> 51 <span class="visually-hidden">Next</span> 52</button> 53`; 54tem_banner_card_img.innerHTML = ` 55<img src="" class="fullscreen d-desktop"> 56<img src="" class="fullscreen d-mobile"> 57`; 58tem_banner_card_video.innerHTML = ` 59<div class="ratio ratio-16x9"> 60 <video width="350" height="250"></video> 61</div> 62`; 63tem_banner_card_iframe.innerHTML = ` 64<div class="ratio ratio-16x9 h-100"> 65 <iframe width="350" height="250" src="" frameborder="0" allowfullscreen></iframe> 66</div> 67`; 68tem_banner_modal.innerHTML = ` 69<div class="modal fade animate__animated animate__zoomIn upaep__modal-simple" id="modalUpress" tabindex="-1" aria-labelledby="modalUpressLabel" style="display: none;" aria-hidden="true"> 70 <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable"> 71 <div class="modal-content"> 72 <div class="modal-header"> 73 <h1 class="modal-title fs-5" id="modalUpressLabel">UPRESS</h1> 74 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 75 </div> 76 <div class="modal-body"> 77 </div> 78 </div> 79 </div> 80</div> 81`; 82tem_banner_down.innerHTML = ` 83<div class="banner_btn_down"><button type="button" class="upaep__btn-down"></button></div> 84`; 85tem_video_controls.innerHTML = ` 86<div class="video-controls"> 87 <div class="controls volume is-min"></div> 88 <div class="controls reproduce is-pause"></div> 89</div> 90`; 91 92class BsBanner { 93 constructor(parentNode, parameters) { 94 this.parentNode = parentNode; 95 this.parameters = parameters; 96 bsAddBanner(parentNode, parameters); 97 // swiperVideo(bsNode); 98 // slideActive(bsNode); 99 activeBsBanner(parentNode); 100 } 101} 102 103function bsAddBanner(parentNode, parameters) { 104 // console.log(parentNode); 105 const bsNode = document.querySelector(parentNode); 106 // console.log(bsNode); 107 const fechaActual = new Date(); 108 const dia = fechaActual.getDate(); 109 const mes = fechaActual.getMonth() + 1; 110 const anio = fechaActual.getFullYear(); 111 const fechaString = `${anio}-${mes}-${dia}`; 112 const fecha_final = new Date(`${fechaString}`); 113 let modal_banner = false; 114 115 if (parameters.fade) { 116 bsNode.classList.add('carousel-fade'); 117 } 118 if (parameters.controls) { 119 // console.log('controls') 120 const clone_banner_controls = tem_banner_controls.content.cloneNode(true); 121 clone_banner_controls.querySelector('.carousel-control-prev').setAttribute('data-bs-target', parentNode) 122 clone_banner_controls.querySelector('.carousel-control-next').setAttribute('data-bs-target', parentNode) 123 bsNode.append(clone_banner_controls); 124 } 125 let slideCount = 0; 126 if (slideCount == -1) { 127 slideCount = 0; 128 }
129 parameters.banners.forEach((ban, index) => { 130 if (ban.publicado === '1') { 131 const fechas = despublicForDate(ban.date_inicio, ban.date_final); 132 // console.log(fechas) 133 if (!fechas.posterior_dia) { 134 const clone_banner_card = tem_banner_card.content.cloneNode(true); 135 const clone_banner_indicators = tem_banner_indicators.content.cloneNode(true); 136 clone_banner_indicators.querySelector('.__indicator').setAttribute('data-bs-slide-to', slideCount); 137 if (parameters.data_bs4) { 138 clone_banner_indicators.querySelector('.__indicator').setAttribute('data-slide-to', slideCount); 139 } 140 // console.log(slideCount) 141 clone_banner_indicators.querySelector('.__indicator').setAttribute('data-bs-target', parentNode); 142 slideCount++; 143 clone_banner_indicators.querySelector('.__indicator').setAttribute('aria-label', `Slide${index}`); 144 if (ban.tipo == 'imagen') { 145 const clone_banner_card_img = tem_banner_card_img.content.cloneNode(true); 146 clone_banner_card_img.querySelector('.d-desktop').setAttribute('src', `${ban.src}`); 147 clone_banner_card_img.querySelector('.d-mobile').setAttribute('src', `${ban.src_mobile}`); 148 clone_banner_card.querySelector('.upaep__banner-resource').appendChild(clone_banner_card_img); 149 clone_banner_card.querySelector('.carousel-item').classList.add('__img'); 150 } 151 else if (ban.tipo == 'video') { 152 const clone_banner_card_video = tem_banner_card_video.content.cloneNode(true); 153 const clone_video_controls = tem_video_controls.content.cloneNode(true); 154 // if (ban.controls) { clone_banner_card_video.querySelector('video').setAttribute('controls', '') } 155 if (ban.mute) { clone_banner_card_video.querySelector('video').setAttribute('muted', '') } 156 if (ban.poster != '') { clone_banner_card_video.querySelector('video').setAttribute('poster', `${ban.poster}`) } 157 clone_banner_card_video.querySelector('video').setAttribute('src', `${ban.src_layer}`) 158 clone_banner_card.querySelector('.upaep__banner-resource').appendChild(clone_banner_card_video); 159 clone_banner_card.querySelector('.upaep__banner-card-overlay').classList.add('d-none') 160 clone_banner_card.querySelector('.carousel-item').classList.add('__video'); 161 if (ban.videoEnd) { 162 let video = clone_banner_card.querySelector('.carousel-item video'); 163 } 164 // clone_video_controls.querySelector('.video-controls').classList.add('d-none'); 165 clone_banner_card.querySelector('.upaep__banner-card').insertBefore(clone_video_controls, clone_banner_card.querySelector('.upaep__banner-card-overlay')) 166 } 167 else if (ban.tipo == 'youtube') { 168 const clone_banner_card_iframe = tem_banner_card_iframe.content.cloneNode(true); 169 clone_banner_card_iframe.querySelector('iframe').setAttribute('src', `https://www.youtube.com/embed/${ban.idYoutube}?loop=1&controls=1`) 170 clone_banner_card.querySelector('.upaep__banner-resource').appendChild(clone_banner_card_iframe); 171 clone_banner_card.querySelector('.upaep__banner-card-overlay').classList.add('d-none') 172 clone_banner_card.querySelector('.carousel-item').classList.add('__yt'); 173 clone_banner_card.querySelector('.carousel-item').setAttribute('yt-id', ban.idYoutube); 174 } 175 else if (ban.tipo == 'iframe') { 176 const clone_banner_card_iframe = tem_banner_card_iframe.content.cloneNode(true); 177 clone_banner_card_iframe.querySelector('iframe').setAttribute('src', `${ban.iframe_link}`); 178 clone_banner_card_iframe.querySelector('iframe').setAttribute('loading', `lazy`); 179 clone_banner_card.querySelector('.upaep__banner-resource').appendChild(clone_banner_card_iframe); 180 clone_banner_card.querySelector('.upaep__banner-card-overlay').classList.add('d-none') 181 clone_banner_card.querySelector('.carousel-item').classList.add('__iframe'); 182 } 183 else if (ban.tipo == 'upress') { 184 clone_banner_card.querySelector('.upaep__banner-card-overlay a').setAttribute('data-upress', `${ban.idUpress}`); 185 clone_banner_card.querySelector('.upaep__banner-card-overlay a').setAttribute('data-bs-toggle', `modal`); 186 clone_banner_card.querySelector('.upaep__banner-card-overlay a').setAttribute('data-bs-target', `#modalUpress`); 187 const clone_banner_card_img = tem_banner_card_img.content.cloneNode(true); 188 clone_banner_card_img.querySelector('.d-desktop').setAttribute('src', `${ban.src}`); 189 clone_banner_card_img.querySelector('.d-mobile').setAttribute('src', `${ban.src_mobile}`); 190 clone_banner_card.querySelector('.upaep__banner-resource').appendChild(clone_banner_card_img); 191 clone_banner_card.querySelector('.carousel-item').classList.add('__img'); 192 clone_banner_card.querySelector('.carousel-item').classList.add('__upress'); 193 modal_banner = true; 194 } 195 else if (ban.tipo == 'link') { 196 clone_banner_card.querySelector('.upaep__banner-card-overlay a').setAttribute('href', `${ban.link}`); 197 if (ban.target != '') { 198 clone_banner_card.querySelector('.upaep__banner-card-overlay a').setAttribute('target', `${ban.target}`); 199 } 200 const clone_banner_card_img = tem_banner_card_img.content.cloneNode(true); 201 clone_banner_card_img.querySelector('.d-desktop').setAttribute('src', `${ban.src}`); 202 clone_banner_card_img.querySelector('.d-mobile').setAttribute('src', `${ban.src_mobile}`); 203 clone_banner_card.querySelector('.upaep__banner-resource').appendChild(clone_banner_card_img); 204 clone_banner_card.querySelector('.carousel-item').classList.add('__img'); 205 clone_banner_card.querySelector('.carousel-item').classList.add('__link'); 206 } 207 if (ban.delay != '') { 208 let newdelay = parseInt(ban.delay) * 1000; 209 clone_banner_card.querySelector('.carousel-item').setAttribute('data-bs-interval', `${newdelay}`); 210 } 211 bsNode.querySelector('.carousel-indicators').append(clone_banner_indicators); 212 bsNode.querySelector('.carousel-inner').append(clone_banner_card); 213 } 214 } 215 });
216 if (parameters.btn_down) { 217 const clone_banner_down = tem_banner_down.content.cloneNode(true); 218 bsNode.querySelector('.carousel-indicators').append(clone_banner_down); 219 const banner_btn_down = document.querySelector('.banner_btn_down'); 220 banner_btn_down.addEventListener('click', () => { 221 btnbajar(parameters.down_container); 222 }); 223 } 224 if (modal_banner) { 225 const clone_banner_modal = tem_banner_modal.content.cloneNode(true); 226 bsNode.append(clone_banner_modal); 227 228 const modalUpress = document.getElementById('modalUpress'); 229 modalUpress.addEventListener('show.bs.modal', event => { 230 modalUpress.querySelector('.modal-body').innerHTML = ''; 231 const button = event.relatedTarget; 232 const id_upress = button.getAttribute('data-upress'); 233 // const content = modalUpress.querySelector('.modal-perfiles-content'); 234 const modal_title = modalUpress.querySelector('.modal-title'); 235 236 // console.log(id_upress) 237 getUpress(id_upress); 238 // getUpress('10476'); 239 // content.innerHTML = MarkdownToTag(dcont); 240 // modal_title.innerHTML = MarkdownToTag(dtitle); 241 }) 242 } 243 // if(parameters.fade){ 244 // bsNode.classList.add('carousel-fade'); 245 // } 246 bsNode.querySelector('.carousel-item').classList.add('active'); 247 bsNode.querySelector('.__indicator').classList.add('active'); 248} 249 250function despublicForDate(fecha_in, fecha_fin) { 251 let fecha_inicio = (fecha_in != '') ? new Date(`${fecha_in}T00:00:00`) : new Date(); 252 fecha_inicio 253 const year = new Date().getFullYear(); // Obtener el año actual 254 const fechaUltimoDia = new Date(year, 11, 31); // 11 representa diciembre (los meses en JavaScript comienzan desde 0) 255 let fecha_final = (fecha_fin != '') ? new Date(`${fecha_fin}T00:00:00`) : fechaUltimoDia; 256 let mismo_dia = false; 257 let anterior_dia = false; 258 let posterior_dia = false; 259 260 // console.log(`${fecha_in} - ${fecha_fin}`) 261 // console.log(`${fecha_inicio} - ${fecha_final}`) 262 // console.log(`${fecha_inicio.getTime()} - ${fecha_final.getTime()}`) 263 if (fecha_inicio.getTime() === fecha_final.getTime()) { 264 // console.log('fecha_inicio es igual a fecha_final'); 265 mismo_dia = true; 266 } 267 if (fecha_inicio.getTime() < fecha_final.getTime()) { 268 // console.log('fecha_inicio es anterior a fecha_final'); 269 anterior_dia = true; 270 } 271 if (fecha_inicio.getTime() > fecha_final.getTime()) { 272 // console.log('fecha_inicio es posterior a fecha_final'); 273 posterior_dia = true; 274 } 275 const datos = { 276 'mismo_dia': mismo_dia, 277 'anterior_dia': anterior_dia, 278 'posterior_dia': posterior_dia 279 } 280 // console.log(datos) 281 return datos; 282} 283 284const tem_upress = document.createElement('template'); 285tem_upress.innerHTML = ` 286<div class="upress-body"> 287 <div class="upress_title"></div> 288 <div class="upress_img"></div> 289 <div class="upress_info"> 290 <span class="__fecha"></span> 291 Autor: <span class="__autor"></span> 292 <span class="__foto"></span> 293 </div> 294 <div class="upress_content"></div> 295</div> 296`; 297async function getUpress(id) { 298 var json = { "KeychainName": 'COMMON_BENEFIT_API', "endPoint": "UPRESS", "mostrarInformacionItem": true, "id": id }; 299 const resejemplo = await executeFetching('POST', json, urlFetch.newApi); 300 // console.log(resejemplo); 301 // console.log("fetch ejemplo"); 302 resejemplo.forEach(async (item) => { 303 const clone_upress = tem_upress.content.cloneNode(true); 304 const fecha = item.created.split(' '); 305 const contenido = item.introtext.replaceAll("images/", "https://upress.upaep.mx/images/"); 306 clone_upress.querySelector('.upress_title').textContent = item.title; 307 // clone_upress.querySelector('.upress_img').textContent = item. 308 clone_upress.querySelector('.__fecha').textContent = fecha[0]; 309 clone_upress.querySelector('.__autor').textContent = item.autor; 310 // clone_upress.querySelector('.__foto').textContent = item.images; 311 clone_upress.querySelector('.upress_content').innerHTML = contenido; 312 modalUpress.querySelector('.modal-body').appendChild(clone_upress); 313 }) 314} 315 316function btnbajar(element) { 317 document.querySelector(element).scrollIntoView({ behavior: "smooth", block: "start" }); 318} 319function btnsubir() { 320 window.scrollTo({ behavior: "smooth", top: 0 }); 321} 322function activeBsBanner(node) { 323 const carousel = document.querySelector(node); 324 carousel.addEventListener('slide.bs.carousel', function (event) { 325 // Aquà puedes colocar el código que deseas ejecutar cuando cambia el slide activo 326 const slideActivoIndex = event.to; 327 const slideActivo = event.relatedTarget; 328 const prevSlideVideo = event.relatedTarget.previousElementSibling; 329 // console.log('El slide activo tiene el Ãndice: ' + slideActivo); 330 // console.log(prevSlideVideo); 331 332 // Selecciona todos los elementos con la clase 'vm' dentro de 'carousel-inner' 333 var carouselItems = document.querySelectorAll('.carousel-item'); 334 335 // Itera sobre cada elemento 'vm'
336 carouselItems.forEach(function (item) { 337 if (item.classList.contains('__video')) { 338 const video = item.querySelector('video'); 339 video.pause(); 340 } 341 // else if (item.classList.contains('__vm')) { 342 // const vdeovimeo = item.querySelector('iframe'); 343 // const player = new Vimeo.Player(vdeovimeo); 344 // player.pause(); 345 // } 346 // else if (item.classList.contains('__yt')) { 347 // const vdeoyoutube = item.querySelector('iframe'); 348 // const player = new YT.Player(vdeoyoutube, { 349 // events: { 350 // 'onReady': onPlayerReady, 351 // 'onStateChange': onPlayerStateChange 352 // } 353 // }); 354 // player.pauseVideo(); 355 // } 356 }); 357 358 359 if (slideActivo.classList.contains('__img')) { 360 // console.log('img') 361 } 362 if (slideActivo.classList.contains('__video')) { 363 const video = slideActivo.querySelector('video'); 364 const reproduce = slideActivo.querySelector('.controls.reproduce'); 365 const volume = slideActivo.querySelector('.controls.volume'); 366 video.click(); 367 // console.log(video) 368 if (video) { 369 video.muted = true; 370 video.play(); 371 if(video.muted){ 372 volume.classList.remove('is-max'); 373 volume.classList.add('is-min'); 374 }else{ 375 volume.classList.remove('is-min'); 376 volume.classList.add('is-max'); 377 } 378 video.addEventListener("loadeddata", function (ev) { 379 video.play(); 380 }, true); 381 video.addEventListener("canplaythrough", function (ev) { 382 video.play(); 383 }, true); 384 video.addEventListener("ended", function (ev) { 385 video.currentTime = 0; 386 video.play(); 387 }, true); 388 } 389 if (!video.paused) { 390 video.addEventListener("ended", function (ev) { 391 video.currentTime = 0; 392 video.play(); 393 }, true); 394 } 395 396 } 397 if (slideActivo.classList.contains('__yt')) { 398 console.log(slideActivo) 399 // Asegúrate de que el script de la API de YouTube se haya cargado completamente 400 document.addEventListener('DOMContentLoaded', function () { 401 // Obtén el `iframe` de YouTube 402 const vdeoyoutube = slideActivo.querySelector('iframe'); 403 404 // Inicializa el reproductor de YouTube cuando la API esté lista 405 function onYouTubeIframeAPIReady() { 406 const player = new YT.Player(vdeoyoutube.id, { 407 events: { 408 'onReady': onPlayerReady, 409 } 410 }); 411 } 412 413 // Define la función de devolución de llamada 414 function onPlayerReady(event) { 415 console.log('El reproductor de YouTube está listo'); 416 event.target.playVideo(); 417 } 418 }); 419 420 // player.playVideo(); 421 } 422 if (slideActivo.classList.contains('__vm')) { 423 console.log(slideActivo) 424 const vdeovimeo = slideActivo.querySelector('iframe'); 425 const player = new Vimeo.Player(vdeovimeo); 426 player.play(); 427 } 428 }); 429 const videos = carousel.querySelectorAll('.carousel-item.__video'); 430 if(videos.length >= 1){ 431 videos.forEach((vids)=>{ 432 const video = vids.querySelector('video'); 433 const reproduce = vids.querySelector('.controls.reproduce'); 434 const volume = vids.querySelector('.controls.volume'); 435 reproduce.addEventListener('click', function (ev) { 436 if (video.paused) { 437 video.play(); 438 reproduce.classList.remove('is-play'); 439 reproduce.classList.add('is-pause'); 440 } else { 441 video.pause(); 442 reproduce.classList.remove('is-pause'); 443 reproduce.classList.add('is-play'); 444 } 445 }, true); 446 volume.addEventListener('click', function (ev) { 447 if (video.muted) { 448 video.muted = false; 449 volume.classList.remove('is-min'); 450 volume.classList.add('is-max'); 451 } else { 452 volume.classList.remove('is-max'); 453 volume.classList.add('is-min'); 454 video.muted = true; 455 } 456 }, true); 457 }) 458 } 459} 460function activeBsBanner2(node) { 461 const carousel = document.querySelector(node); 462 carousel.addEventListener('slide.bs.carousel', function (event) { 463 // Aquà puedes colocar el código que deseas ejecutar cuando cambia el slide activo 464 const slideActivoIndex = event.to; 465 const slideActivo = event.relatedTarget; 466 const prevSlideVideo = event.relatedTarget.previousElementSibling;; 467 // console.log('El slide activo tiene el Ãndice: ' + slideActivo); 468 469 if (prevSlideVideo.classList.contains('__video')) { 470 console.log(prevSlideVideo) 471 const video = prevSlideVideo.querySelector('video'); 472 if (video) { 473 video.pause(); 474 } 475 } 476 else if (prevSlideVideo.classList.contains('__yt')) { 477 console.log(prevSlideVideo) 478 // const video = prevSlideVideo.querySelector('.video-stream'); 479 // if (video) { 480 // video.pause(); 481 // } 482 pauseYouTubeVideos(prevSlideVideo) 483 } 484 if (slideActivo.classList.contains('__img')) { 485 console.log('img') 486 } 487 if (slideActivo.classList.contains('__video')) { 488 console.log(slideActivo) 489 const video = slideActivo.querySelector('.video-stream'); 490 console.log(video) 491 if (video) { 492 video.play(); 493 } 494 } 495 if (slideActivo.classList.contains('__yt')) { 496 console.log(slideActivo) 497 // const video = slideActivo.querySelector('.video-stream'); 498 // console.log(video) 499 // if (video) { 500 // video.play(); 501 // } 502 playYouTubeVideo(slideActivo) 503 } 504 });
505} 506// Pause all YouTube videos 507function pauseYouTubeVideos(slide) { 508 const youtubeVideos = slide.querySelector('iframe'); 509 const player = youtubeVideos.contentWindow; 510 player.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*'); 511} 512 513// Play YouTube video in the active slide 514function playYouTubeVideo(slide) { 515 const youtubeVideos = slide.querySelector('iframe'); 516 if (youtubeVideos) { 517 const player = youtubeVideos.contentWindow; 518 player.postMessage('{"event":"command","func":"playVideo","args":""}', '*'); 519 } 520}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.