document.addEventListener("DOMContentLoaded", function () {
if (window.angular) return;
const principal = document.querySelector(".fp3-container-textos"),
secciones = principal.querySelectorAll(".fp3-seccion"),
linksIconos = document.querySelectorAll(".fp3-link_icono"),
destino = document.querySelector(".fp3-guia_div-container"),
footer = document.querySelector('footer'),
Ttags = ["h2", "h3", "h4", "h5", "h6"], LnkSec = []
let rootMarg = -250, maxLinkW = 0
while (destino.firstChild) { destino.removeChild(destino.firstChild)}
secciones.forEach((sec) => {
LnkSec.push(sec.id);
Ttags.forEach((tag) => {
encontrados = sec.querySelectorAll(tag);
encontrados.forEach((ele) => {
const newEle = document.createElement("a"),
tagName = ele.nodeName,
eleId = ele.id,
eleTexto = ele.innerText
newEle.href = `#${eleId}`
newEle.id = `link-${tagName}-${eleId}`
newEle.classList.add('link-H', `link-${tagName}`)
newEle.innerText = `${eleTexto}`
destino.appendChild(newEle)
});
});
})
//Ajustar los anchos de los enlace para encajar con el diseño
const links = document.querySelectorAll('.link-H')
links.forEach(link =>{
maxLinkW = link.clientWidth > maxLinkW ? link.clientWidth : maxLinkW
})
//Maniobra de ajuste para Responsive
for(l of links)
l.style.width = `${maxLinkW+15}px`
LnkSec.forEach((lnKS, index) => {linksIconos[index].href = `#${lnKS}`})
function responsive(){
let styles= ""
const hScreen = Math.round(window.innerHeight / 3.5)
rootMarg = (hScreen * -.5) + 45
if(screen.width < 994 ){
altoPrin = destino.firstChild.clientHeight * 7
factor = destino.clientHeight / principal.clientHeight
styles = `height: ${altoPrin}px; max-height: ${altoPrin}px; padding-top: 10px`
window.addEventListener('scroll', function() {
var scrolling = window.scrollY * factor
destino.parentElement.scrollTo({top: scrolling,})
})
rootMarg = -20
}
destino.parentElement.style= styles
}
responsive()
window.addEventListener('resize', responsive)
/*** OBSERVERS ***/
//Observer de Secciones
const seccionesObsever = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
const obj = entry.target
const objId = obj.id
const boton = document.querySelector('[href*="' +objId+ '"]')
boton.firstChild.classList.toggle('icono-activado',entry.isIntersecting)
const idH2 = obj.querySelector('h2').id
destino.querySelector(`[id*="${idH2}"]`).classList.toggle('primer-header',entry.isIntersecting)
})
},{ threshold: 0, rootMargin: `${rootMarg}px`}
)
LnkSec.forEach((l) => {seccionesObsever.observe(document.getElementById(l))})
//Observer de Enlaces de la izquierda
const destinoObsever = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
const aleId = entry.target.previousSibling.id
const destLnk = document.querySelector('[id*="' + aleId+ '"]')
const laClase = destLnk.classList[1] + '-activado'
destLnk.classList.toggle(laClase, entry.isIntersecting)
},{threshold: 0, rootMargin: `${rootMarg}px, threshold: 0.5 `})
})
secciones.forEach(ase =>{
ses = ase.querySelectorAll(Ttags)
ses.forEach(se =>{
if(se.nextSibling.localName == 'div')
destinoObsever.observe(se.nextSibling)
})
})
//Observer del Footer
const footerObsever = new IntersectionObserver(entries => {
icl.firstChild.classList.toggle('icono-activado',entries[0].isIntersecting)})
for(icl of linksIconos)
if(icl.href.includes('footer'))
footerObsever.observe(footer)
})/**** Final ****/
