285 lines
8.7 KiB
JavaScript
285 lines
8.7 KiB
JavaScript
// ===============================
|
|
// ✅ Load Header & Footer
|
|
// ===============================
|
|
['header', 'footer'].forEach(id => {
|
|
const file = id === 'header' ? 'components/header.html' : 'components/footer.html';
|
|
fetch(file)
|
|
.then(res => res.text())
|
|
.then(html => {
|
|
const mount = document.getElementById(id);
|
|
if (!mount) return;
|
|
mount.innerHTML = html;
|
|
if (id === 'header') {
|
|
const script = document.createElement('script');
|
|
script.src = 'js/navbar.js';
|
|
script.defer = true;
|
|
document.body.appendChild(script);
|
|
}
|
|
});
|
|
});
|
|
|
|
// ===============================
|
|
// ✅ Routes for SPA Navigation
|
|
// ===============================
|
|
const routes = {
|
|
"#/": "pages/home.html",
|
|
"#/our-fund": "pages/our-fund.html",
|
|
"#/our-team": "pages/our-team.html",
|
|
"#/about": "pages/about.html",
|
|
"#/contact": "pages/contact.html",
|
|
"#/blog": "pages/blog.html",
|
|
};
|
|
|
|
// ===============================
|
|
// ✅ Timeline Data
|
|
// ===============================
|
|
const timelineData = {
|
|
1983: {
|
|
icon: "../assests/images/1983-Icon.png",
|
|
heading: "The beginning",
|
|
sub: "Set up by Mr. Asit Koticha and Mr. Sameer Koticha, ASK Group offers research-based Investment advisory."
|
|
},
|
|
1991: {
|
|
icon: "../assests/images/1991-Icon.png",
|
|
heading: "ASK Raymond James",
|
|
sub: "ASK Group and Raymond James Financial enter into a Partnership."
|
|
},
|
|
2007: {
|
|
icon: "../assests/images/2007-Icon.png",
|
|
heading: "Launch of ASK Wealth Advisors",
|
|
sub: "Raymond James Financial partnership exits."
|
|
},
|
|
2008: {
|
|
icon: "../assests/images/2008-Icon.png",
|
|
heading: "Launch of ASK multi-family office",
|
|
sub: ""
|
|
},
|
|
2013: {
|
|
icon: "../assests/images/2013-Icon.png",
|
|
heading: "License from SEBI",
|
|
sub: "ASK Wealth Advisors receives an Investment Advisor License from SEBI."
|
|
},
|
|
2015: {
|
|
icon: "../assests/images/2015-Icon.png",
|
|
heading: "Best Independent Wealth Advisor",
|
|
sub: "ASK Wealth Advisors adjudged 'the best Independent Wealth Advisor, 2015' by Wealth Briefing, Asia."
|
|
},
|
|
2016: {
|
|
icon: "../assests/images/2016-Icon.png",
|
|
heading: "",
|
|
sub: "Advent International acquires minority stake in ASK Group."
|
|
},
|
|
2017: {
|
|
icon: "../assests/images/2015-Icon.png",
|
|
heading: "",
|
|
sub: "ASK Wealth Advisors adjudged 'One to Watch - Wealth Manager - India Domestic' - Distinction, 2017 by Asian Private Banker."
|
|
},
|
|
2018: {
|
|
icon: "../assests/images/2015-Icon.png",
|
|
heading: "ASK launches its first offshore fund - ASK Global Strategies Fund",
|
|
sub: "TWICE IN A ROW: ASK Wealth advisors adjudged 'Best Performing Financial Advisor' - Wealth 2016-17 by UTI MF & CNBC TV18."
|
|
},
|
|
2019: {
|
|
icon: "../assests/images/1983-Icon.png",
|
|
heading: "Hall of Fame",
|
|
sub: "ASK Wealth Advisors inducted into the 'Hall of Fame' at the Financial Advisor Awards for 2018-19 and 2019-20 by UTI MF & CNBC TV18."
|
|
},
|
|
2020: {
|
|
icon: "../assests/images/2015-Icon.png",
|
|
heading: "Outstanding Private Bank",
|
|
sub: "Outstanding Private Bank for UNHW clients at the Private Banker International Global Wealth Summit & Awards 2020, Singapore."
|
|
},
|
|
2022: {
|
|
icon: "../assests/images/2022-icon.png",
|
|
heading: "Blackstone Acquisition",
|
|
sub: "Blackstone acquires majority stake in ASK Group. Advent International exits."
|
|
}
|
|
};
|
|
|
|
// ===============================
|
|
// ✅ Initialize Timeline & Swiper
|
|
// ===============================
|
|
function initTimelineSwiper() {
|
|
const swiperWrapper = document.querySelector(".swiper-wrapper");
|
|
const timelineItems = document.querySelectorAll(".timeline-item");
|
|
if (!swiperWrapper || !timelineItems.length) return;
|
|
|
|
// Generate Swiper slides
|
|
swiperWrapper.innerHTML = "";
|
|
timelineItems.forEach((item) => {
|
|
const year = item.dataset.year;
|
|
const content = timelineData[year] || { icon: "", heading: "", sub: "" };
|
|
const slide = document.createElement("div");
|
|
slide.classList.add("swiper-slide");
|
|
slide.innerHTML = `
|
|
${content.icon ? `<img src="${content.icon}" alt="icon" />` : ""}
|
|
<h2>${year}</h2>
|
|
${content.heading ? `<p class="heading">${content.heading}</p>` : ""}
|
|
${content.sub ? `<div class="sub-heading-container"><p>${content.sub}</p></div>` : ""}
|
|
`;
|
|
swiperWrapper.appendChild(slide);
|
|
});
|
|
|
|
// Line fill logic
|
|
const lineFill = document.querySelector(".line-fill");
|
|
const totalKites = timelineItems.length;
|
|
|
|
function updateTimeline(index) {
|
|
timelineItems.forEach((item, i) => {
|
|
item.classList.toggle("active", i === index);
|
|
});
|
|
const timelineWidth = document.querySelector(".timeline").offsetWidth - 40;
|
|
const newWidth = (timelineWidth / (totalKites - 1)) * index;
|
|
if (lineFill) lineFill.style.width = newWidth + "px";
|
|
}
|
|
|
|
// Initialize Swiper
|
|
const swiper = new Swiper(".mySwiper", {
|
|
spaceBetween: 20,
|
|
centeredSlides: true,
|
|
effect: "fade",
|
|
autoplay: {
|
|
delay: 2500,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
}
|
|
});
|
|
|
|
swiper.on("slideChange", () => {
|
|
updateTimeline(swiper.realIndex);
|
|
});
|
|
|
|
updateTimeline(0);
|
|
}
|
|
|
|
// ===============================
|
|
// ✅ Generic Swiper Init (Other Pages)
|
|
// ===============================
|
|
function initSwiper() {
|
|
if (document.querySelector(".mySwiper")) {
|
|
new Swiper(".mySwiper", {
|
|
slidesPerView: 1.2,
|
|
spaceBetween: 20,
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 2500,
|
|
disableOnInteraction: false,
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
// ===============================
|
|
// ✅ Team Drawer
|
|
// ===============================
|
|
window.openDrawer = function (name, role, img, desc) {
|
|
document.getElementById("drawerName").textContent = name;
|
|
document.getElementById("drawerRole").textContent = role;
|
|
document.getElementById("drawerImg").src = img;
|
|
document.getElementById("drawerDesc").innerHTML = desc;
|
|
|
|
const drawer = bootstrap.Offcanvas.getOrCreateInstance(document.getElementById('teamDrawer'));
|
|
drawer.show();
|
|
};
|
|
|
|
// ===============================
|
|
// ✅ GSAP Stack Scroll Animation
|
|
// ===============================
|
|
let cards = [];
|
|
let currentIndex = 0;
|
|
let animating = false;
|
|
let isInsideSection = false;
|
|
|
|
function initGsapStackScroll() {
|
|
const section = document.querySelector('.cards-wrapper');
|
|
if (!section) return;
|
|
|
|
cards = Array.from(section.querySelectorAll('.card-scroll'));
|
|
if (!cards.length) return;
|
|
|
|
gsap.set(cards, { opacity: 0, y: "100%" });
|
|
gsap.set(cards[0], { opacity: 1, y: "0%" });
|
|
currentIndex = 0;
|
|
|
|
section.addEventListener('mouseenter', () => { isInsideSection = true; });
|
|
section.addEventListener('mouseleave', () => { isInsideSection = false; });
|
|
|
|
window.removeEventListener('wheel', window._gsapStackHandler);
|
|
window._gsapStackHandler = function (e) {
|
|
if (!isInsideSection) return;
|
|
e.preventDefault();
|
|
if (animating) return;
|
|
|
|
if (e.deltaY > 0) {
|
|
showNextGsapCard();
|
|
} else {
|
|
showPrevGsapCard();
|
|
}
|
|
};
|
|
window.addEventListener('wheel', window._gsapStackHandler, { passive: false });
|
|
}
|
|
|
|
function showNextGsapCard() {
|
|
if (currentIndex >= cards.length - 1) return;
|
|
animating = true;
|
|
|
|
const current = cards[currentIndex];
|
|
const next = cards[currentIndex + 1];
|
|
|
|
gsap.to(current, { y: "-100%", opacity: 0, duration: 0.8, ease: "power2.inOut" });
|
|
gsap.fromTo(next,
|
|
{ y: "100%", opacity: 0 },
|
|
{ y: "0%", opacity: 1, duration: 0.8, ease: "power2.inOut", onComplete: () => animating = false }
|
|
);
|
|
|
|
currentIndex++;
|
|
}
|
|
|
|
function showPrevGsapCard() {
|
|
if (currentIndex <= 0) return;
|
|
animating = true;
|
|
|
|
const current = cards[currentIndex];
|
|
const prev = cards[currentIndex - 1];
|
|
|
|
gsap.to(current, { y: "100%", opacity: 0, duration: 0.8, ease: "power2.inOut" });
|
|
gsap.fromTo(prev,
|
|
{ y: "-100%", opacity: 0 },
|
|
{ y: "0%", opacity: 1, duration: 0.8, ease: "power2.inOut", onComplete: () => animating = false }
|
|
);
|
|
|
|
currentIndex--;
|
|
}
|
|
|
|
// ===============================
|
|
// ✅ Load Page Content Dynamically
|
|
// ===============================
|
|
function loadPage() {
|
|
const hash = location.hash || "#/";
|
|
const page = routes[hash] || routes["#/"];
|
|
|
|
fetch(page)
|
|
.then(res => res.text())
|
|
.then(html => {
|
|
document.getElementById("page-content").innerHTML = html;
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
|
|
// Init all components after content load
|
|
initSwiper();
|
|
initTimelineSwiper();
|
|
initGsapStackScroll();
|
|
})
|
|
.catch(() => {
|
|
document.getElementById("page-content").innerHTML = "<h2>Page not found</h2>";
|
|
});
|
|
}
|
|
|
|
// ===============================
|
|
// ✅ Router Event Listener
|
|
// ===============================
|
|
window.addEventListener("hashchange", loadPage);
|
|
loadPage(); // Default load
|