(function (){
'use strict';
const CONFIG={
tocSelectors: 'h2',
tocMinHeadings: 2,
scrollOffset: 80,
mobileCTAStorageKey: 'cgn_mobile_cta_collapsed'
};
let elements={};
function init(){
if(document.readyState==='loading'){
document.addEventListener('DOMContentLoaded', init);
return;
}
cacheElements();
initMobileCTA();
initTableOfContents();
initScrollBehavior();
initDynamicStyling();
initReadingProgressBar();
initStickySidebar();
console.log('CGN Blog Post Enhanced: Initialized');
}
function cacheElements(){
elements={
mobileCTA: document.getElementById('mobile-cta'),
mobileCTAToggle: document.getElementById('mobile-cta-toggle'),
articleContent: document.querySelector('.article-content'),
heroSection: document.querySelector('.hero-section'),
sidebarCTA: document.querySelector('[data-cgn-cta="sidebar-cta"]'),
mobileCTAButton: document.querySelector('[data-cgn-cta="mobile-sticky-cta"]'),
cleanSidebar: document.querySelector('.clean-sidebar'),
mainContent: document.querySelector('.main-content'),
postContainer: document.querySelector('.post-container'),
progressBar: document.getElementById('reading-progress-bar')
};}
function initMobileCTA(){
const {mobileCTA, mobileCTAToggle}=elements;
if(!mobileCTA||!mobileCTAToggle) return;
const isCollapsed=localStorage.getItem(CONFIG.mobileCTAStorageKey)==='true';
if(isCollapsed){
mobileCTA.classList.add('collapsed');
}
mobileCTAToggle.addEventListener('click', function (){
const isNowCollapsed=mobileCTA.classList.toggle('collapsed');
localStorage.setItem(CONFIG.mobileCTAStorageKey, isNowCollapsed.toString());
mobileCTAToggle.setAttribute('aria-expanded', (!isNowCollapsed).toString());
});
let lastScrollY=window.scrollY;
let ticking=false;
function updateMobileCTAVisibility(){
const currentScrollY=window.scrollY;
const heroHeight=elements.heroSection ? elements.heroSection.offsetHeight:300;
const windowHeight=window.innerHeight;
const shouldShow=currentScrollY > (heroHeight + windowHeight * 0.2)&&window.innerWidth <=768;
if(shouldShow){
mobileCTA.style.display='block';
mobileCTA.setAttribute('aria-hidden', 'false');
}else{
mobileCTA.style.display='none';
mobileCTA.setAttribute('aria-hidden', 'true');
}
lastScrollY=currentScrollY;
ticking=false;
}
function requestTick(){
if(!ticking){
requestAnimationFrame(updateMobileCTAVisibility);
ticking=true;
}}
window.addEventListener('scroll', requestTick, {passive: true});
updateMobileCTAVisibility();
console.log('Mobile CTA: Initialized');
}
function initTableOfContents(){
const {articleContent}=elements;
if(!articleContent) return;
const headings=articleContent.querySelectorAll(CONFIG.tocSelectors);
if(headings.length < CONFIG.tocMinHeadings){
return;
}
initTOCScrolling();
initTOCActiveStates(headings);
initTOCToggle();
console.log('Table of Contents: Initialized with', headings.length, 'headings');
}
function initTOCScrolling(){
const tocLinks=document.querySelectorAll('.clean-toc-link, .mobile-toc-link');
tocLinks.forEach(link=> {
link.addEventListener('click', function (e){
e.preventDefault();
const targetId=this.getAttribute('href').substring(1)||this.getAttribute('data-target');
const targetElement=document.getElementById(targetId);
if(targetElement){
const offsetTop=targetElement.getBoundingClientRect().top + window.scrollY - CONFIG.scrollOffset;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
updateActiveTOCLink(targetId);
}});
});
}
function initTOCActiveStates(headings){
let ticking=false;
function updateActiveStates(){
const scrollY=window.scrollY + CONFIG.scrollOffset;
let activeHeading=null;
for (let i=headings.length - 1; i >=0; i--){
const heading=headings[i];
const headingTop=heading.getBoundingClientRect().top + window.scrollY;
if(scrollY >=headingTop){
activeHeading=heading;
break;
}}
if(activeHeading){
updateActiveTOCLink(activeHeading.id);
}
ticking=false;
}
function requestTick(){
if(!ticking){
requestAnimationFrame(updateActiveStates);
ticking=true;
}}
window.addEventListener('scroll', requestTick, {passive: true});
}
function updateActiveTOCLink(activeId){
const tocLinks=document.querySelectorAll('.clean-toc-link, .mobile-toc-link');
tocLinks.forEach(link=> {
const linkTarget=link.getAttribute('data-heading-id') ||
link.getAttribute('data-target') ||
link.getAttribute('href')?.substring(1);
const isActive=linkTarget===activeId;
link.classList.toggle('active', isActive);
});
}
function initTOCToggle(){
const toggleButton=document.querySelector('.toc-toggle-clean');
const tocNav=document.querySelector('.toc-nav-clean');
if(toggleButton&&tocNav){
toggleButton.addEventListener('click', function(){
const isExpanded=this.getAttribute('aria-expanded')==='true';
if(isExpanded){
tocNav.style.display='none';
this.setAttribute('aria-expanded', 'false');
this.querySelector('.toggle-icon').textContent='↓';
}else{
tocNav.style.display='block';
this.setAttribute('aria-expanded', 'true');
this.querySelector('.toggle-icon').textContent='↑';
}});
console.log('Desktop TOC Toggle: Initialized');
}
const mobileToggleHeader=document.querySelector('.mobile-toc-header');
const mobileTocContent=document.querySelector('.mobile-toc-content');
if(mobileToggleHeader&&mobileTocContent){
mobileToggleHeader.setAttribute('aria-expanded', 'false');
mobileToggleHeader.setAttribute('role', 'button');
mobileToggleHeader.setAttribute('tabindex', '0');
function toggleMobileTOC(){
const isExpanded=mobileTocContent.classList.contains('expanded');
if(isExpanded){
mobileTocContent.classList.remove('expanded');
mobileToggleHeader.setAttribute('aria-expanded', 'false');
const toggleIcon=mobileToggleHeader.querySelector('.mobile-toc-toggle');
if(toggleIcon) toggleIcon.textContent='↓';
}else{
mobileTocContent.classList.add('expanded');
mobileToggleHeader.setAttribute('aria-expanded', 'true');
const toggleIcon=mobileToggleHeader.querySelector('.mobile-toc-toggle');
if(toggleIcon) toggleIcon.textContent='↑';
}}
mobileToggleHeader.addEventListener('click', toggleMobileTOC);
mobileToggleHeader.addEventListener('keydown', function(e){
if(e.key==='Enter'||e.key===' '){
e.preventDefault();
toggleMobileTOC();
}});
console.log('Mobile TOC Toggle: Initialized');
}}
function initScrollBehavior(){
const anchorLinks=document.querySelectorAll('.article-content a[href^="#"]');
anchorLinks.forEach(link=> {
link.addEventListener('click', function (e){
const href=this.getAttribute('href');
const targetElement=document.querySelector(href);
if(targetElement){
e.preventDefault();
const offsetTop=targetElement.getBoundingClientRect().top + window.scrollY - CONFIG.scrollOffset;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
}});
});
console.log('Scroll behavior: Initialized');
}
function initDynamicStyling(){
if(typeof cgnThemeSettings!=='undefined'){
const root=document.documentElement;
if(cgnThemeSettings.brandColor){
root.style.setProperty('--brand-color', cgnThemeSettings.brandColor);
const lightColor=hexToRgba(cgnThemeSettings.brandColor, 0.1);
root.style.setProperty('--brand-color-light', lightColor);
const darkColor=darkenHexColor(cgnThemeSettings.brandColor, 0.2);
root.style.setProperty('--brand-color-dark', darkColor);
const shadowColor=hexToRgba(cgnThemeSettings.brandColor, 0.3);
const shadowColorHover=hexToRgba(cgnThemeSettings.brandColor, 0.4);
root.style.setProperty('--brand-shadow', shadowColor);
root.style.setProperty('--brand-shadow-hover', shadowColorHover);
}
if(cgnThemeSettings.borderRadius){
let borderRadius=cgnThemeSettings.borderRadius;
if(!borderRadius.includes('px')&&borderRadius!=='0'){
borderRadius +='px';
}
root.style.setProperty('--border-radius', borderRadius);
}
if(cgnThemeSettings.ctaButtonRadius){
let ctaButtonRadius=cgnThemeSettings.ctaButtonRadius;
if(!ctaButtonRadius.includes('px')&&ctaButtonRadius!=='0'){
ctaButtonRadius +='px';
}
root.style.setProperty('--cta-button-radius', ctaButtonRadius);
}
if(cgnThemeSettings.baseFontSize){
root.style.setProperty('--base-font-size', cgnThemeSettings.baseFontSize + 'px');
}
if(cgnThemeSettings.ctaButtonBgColor){
root.style.setProperty('--cta-button-bg-color', cgnThemeSettings.ctaButtonBgColor);
}
if(cgnThemeSettings.ctaButtonTextColor){
root.style.setProperty('--cta-button-text-color', cgnThemeSettings.ctaButtonTextColor);
}
console.log('Dynamic styling: Applied theme settings');
}}
function initReadingProgressBar(){
const {progressBar}=elements;
if(!progressBar) return;
let ticking=false;
function updateProgressBar(){
const scrollTop=window.scrollY||document.documentElement.scrollTop;
const scrollHeight=document.documentElement.scrollHeight;
const clientHeight=document.documentElement.clientHeight;
const scrollPercentage=(scrollTop / (scrollHeight - clientHeight)) * 100;
progressBar.style.width=scrollPercentage + '%';
ticking=false;
}
function requestTick(){
if(!ticking){
requestAnimationFrame(updateProgressBar);
ticking=true;
}}
window.addEventListener('scroll', requestTick, {passive: true});
updateProgressBar();
console.log('Reading Progress Bar: Initialized');
}
function hexToRgba(hex, alpha){
const r=parseInt(hex.slice(1, 3), 16);
const g=parseInt(hex.slice(3, 5), 16);
const b=parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
function darkenHexColor(hex, percentage){
hex=hex.replace('#', '');
const r=parseInt(hex.slice(0, 2), 16);
const g=parseInt(hex.slice(2, 4), 16);
const b=parseInt(hex.slice(4, 6), 16);
const darkenedR=Math.max(0, Math.floor(r * (1 - percentage)));
const darkenedG=Math.max(0, Math.floor(g * (1 - percentage)));
const darkenedB=Math.max(0, Math.floor(b * (1 - percentage)));
const toHex=(value)=> value.toString(16).padStart(2, '0');
return `#${toHex(darkenedR)}${toHex(darkenedG)}${toHex(darkenedB)}`;
}
function debounce(func, wait){
let timeout;
return function executedFunction(...args){
const later=()=> {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout=setTimeout(later, wait);
};}
function initStickySidebar(){
const sidebar=elements.cleanSidebar;
if(!sidebar) return;
function updateSidebarTop(){
const header=document.querySelector('.elementor-location-header, header, .site-header');
sidebar.style.setProperty('position', 'sticky', 'important');
if(header){
const headerHeight=header.offsetHeight;
const offset=32;
const totalTop=headerHeight + offset;
sidebar.style.top=`${totalTop}px`;
const maxHeight=`calc(100vh - ${totalTop + offset}px)`;
sidebar.style.maxHeight=maxHeight;
console.log('Sticky Sidebar: Updated top position to', totalTop + 'px', '(header:', headerHeight + 'px + offset:', offset + 'px)');
}else{
sidebar.style.top='2rem';
sidebar.style.maxHeight='calc(100vh - 4rem)';
console.log('Sticky Sidebar: No header found, using default 2rem offset');
}}
updateSidebarTop();
window.addEventListener('resize', debounce(updateSidebarTop, 250));
setTimeout(updateSidebarTop, 100);
console.log('Sticky Sidebar: Initialized with dynamic header height detection');
}
function handleResize(){
const headings=document.querySelectorAll('.article-content ' + CONFIG.tocSelectors);
if(headings.length >=CONFIG.tocMinHeadings){
initTOCActiveStates(headings);
}}
window.addEventListener('resize', debounce(handleResize, 250));
window.addEventListener('error', function (e){
console.error('CGN Blog Post Enhanced Error:', e.error);
});
init();
window.CGNBlogPost={
updateActiveTOCLink,
initTOCToggle,
version: '1.1.0'
};})();