395 lines
11 KiB
JavaScript
395 lines
11 KiB
JavaScript
|
|
let currentSlide = 0;
|
|
let slides = document.querySelectorAll(".hero-slide");
|
|
let wrapper = document.getElementById("hero-wrapper");
|
|
let dotsContainer = document.getElementById("hero-dots");
|
|
|
|
function initSlider() {
|
|
slides = document.querySelectorAll(".hero-slide");
|
|
|
|
slides.forEach((_, i) => {
|
|
let dot = document.createElement("span");
|
|
dot.onclick = () => goToSlide(i);
|
|
dotsContainer.appendChild(dot);
|
|
});
|
|
|
|
updateSlider();
|
|
}
|
|
|
|
function updateSlider() {
|
|
wrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
|
|
|
|
let dots = dotsContainer.querySelectorAll("span");
|
|
dots.forEach(d => d.classList.remove("active"));
|
|
dots[currentSlide].classList.add("active");
|
|
}
|
|
|
|
function nextSlide() {
|
|
currentSlide = (currentSlide + 1) % slides.length;
|
|
updateSlider();
|
|
}
|
|
|
|
function prevSlide() {
|
|
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
|
|
updateSlider();
|
|
}
|
|
|
|
function goToSlide(index) {
|
|
currentSlide = index;
|
|
updateSlider();
|
|
}
|
|
|
|
|
|
setInterval(nextSlide, 6000);
|
|
|
|
document.addEventListener("DOMContentLoaded", initSlider);
|
|
|
|
|
|
//kompetensi
|
|
|
|
const swiper = new Swiper(".mySwiper", {
|
|
slidesPerView: 4,
|
|
spaceBetween: 20,
|
|
loop: true,
|
|
|
|
speed: 5000,
|
|
|
|
autoplay: {
|
|
delay: 0,
|
|
disableOnInteraction: false,
|
|
},
|
|
|
|
freeMode: true,
|
|
freeModeMomentum: false,
|
|
|
|
breakpoints: {
|
|
320: { slidesPerView: 1.2 },
|
|
576: { slidesPerView: 2 },
|
|
768: { slidesPerView: 3 },
|
|
1200: { slidesPerView: 4 }
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
//data capaian
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
const counters = document.querySelectorAll('.counter');
|
|
|
|
const runCounter = (counter) => {
|
|
const target = +counter.getAttribute('data-target');
|
|
let count = 0;
|
|
|
|
const duration = 1500;
|
|
const stepTime = 16;
|
|
const totalSteps = duration / stepTime;
|
|
const increment = target / totalSteps;
|
|
|
|
const update = () => {
|
|
count += increment;
|
|
|
|
if (count < target) {
|
|
counter.innerText = Math.floor(count).toLocaleString();
|
|
requestAnimationFrame(update);
|
|
} else {
|
|
counter.innerText = target.toLocaleString();
|
|
}
|
|
};
|
|
|
|
update();
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries, obs) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
runCounter(entry.target);
|
|
obs.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
counters.forEach(counter => observer.observe(counter));
|
|
|
|
});
|
|
|
|
|
|
const ctx = document.getElementById('chartSampel').getContext('2d');
|
|
|
|
const gradientBlue = ctx.createLinearGradient(0, 0, 0, 350);
|
|
gradientBlue.addColorStop(0, 'rgba(59, 130, 246, 0.25)');
|
|
gradientBlue.addColorStop(1, 'rgba(59, 130, 246, 0.02)');
|
|
|
|
const gradientTeal = ctx.createLinearGradient(0, 0, 0, 350);
|
|
gradientTeal.addColorStop(0, 'rgba(20, 184, 166, 0.25)');
|
|
gradientTeal.addColorStop(1, 'rgba(20, 184, 166, 0.02)');
|
|
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Tahun 2025', 'Tahun 2024', 'Tahun 2023', 'Tahun 2022'],
|
|
datasets: [
|
|
{
|
|
label: 'Internal',
|
|
data: [1909, 1007, 1567, 1837],
|
|
borderColor: '#3b82f6',
|
|
backgroundColor: gradientBlue,
|
|
fill: true,
|
|
tension: 0.5,
|
|
borderWidth: 2,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
pointBackgroundColor: '#fff',
|
|
pointBorderColor: '#3b82f6',
|
|
pointBorderWidth: 2
|
|
},
|
|
{
|
|
label: 'Eksternal',
|
|
data: [9078, 5828, 8069, 8554],
|
|
borderColor: '#14b8a6',
|
|
backgroundColor: gradientTeal,
|
|
fill: true,
|
|
tension: 0.5,
|
|
borderWidth: 2,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
pointBackgroundColor: '#fff',
|
|
pointBorderColor: '#14b8a6',
|
|
pointBorderWidth: 2
|
|
},
|
|
{
|
|
label: 'Total',
|
|
data: [10987, 6835, 9636, 10391],
|
|
borderColor: '#9ca3af',
|
|
backgroundColor: 'rgba(156, 163, 175, 0.1)',
|
|
fill: true,
|
|
tension: 0.5,
|
|
borderWidth: 2,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
pointBackgroundColor: '#fff',
|
|
pointBorderColor: '#9ca3af',
|
|
pointBorderWidth: 2
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false
|
|
},
|
|
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
labels: {
|
|
usePointStyle: true,
|
|
pointStyle: 'circle',
|
|
padding: 20
|
|
}
|
|
},
|
|
|
|
tooltip: {
|
|
backgroundColor: '#ffffff',
|
|
titleColor: '#000',
|
|
bodyColor: '#000',
|
|
borderColor: '#e5e7eb',
|
|
borderWidth: 1,
|
|
padding: 10,
|
|
displayColors: false,
|
|
callbacks: {
|
|
label: function (context) {
|
|
return context.dataset.label + ': ' + context.raw.toLocaleString();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
color: '#9ca3af'
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(0,0,0,0.05)',
|
|
drawBorder: false
|
|
},
|
|
ticks: {
|
|
color: '#9ca3af',
|
|
callback: function (value) {
|
|
return value.toLocaleString();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//mitra
|
|
|
|
function loadLogo() {
|
|
fetch('/webnew/json/mitra.json')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
let html = "";
|
|
|
|
data.forEach(row => {
|
|
|
|
html += `
|
|
<div class="logo-track move-${row.direction}">
|
|
${renderGroup(row.logos)}
|
|
${renderGroup(row.logos)}
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
document.querySelector(".logo-slider").innerHTML = html;
|
|
});
|
|
}
|
|
|
|
function renderGroup(logos) {
|
|
let group = '<div class="logo-group">';
|
|
|
|
logos.forEach(src => {
|
|
group += `<img src="${src}">`;
|
|
});
|
|
|
|
group += '</div>';
|
|
return group;
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", loadLogo);
|
|
|
|
|
|
//berita
|
|
|
|
function formatTanggal(dateStr) {
|
|
return new Date(dateStr).toLocaleDateString("id-ID", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric"
|
|
});
|
|
}
|
|
|
|
function loadLandingBerita() {
|
|
fetch('/WebNew/Berita/GetAll')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
if (!data || data.length === 0) return;
|
|
|
|
const featured = data[0];
|
|
|
|
document.getElementById("featured-berita").innerHTML = `
|
|
<img src="${Array.isArray(featured.gambar) ? featured.gambar[0] : featured.gambar}" class="featured-img">
|
|
|
|
<small class="text-muted d-block mt-2">${formatTanggal(featured.tanggal)}</small>
|
|
|
|
<h5 class="fw-bold mt-2">${featured.judul}</h5>
|
|
|
|
<p class="text-muted">
|
|
${featured.deskripsi}
|
|
</p>
|
|
|
|
<a href="/WebNew/Berita/Detail?id=${featured.id}" class="text-primary fw-semibold">
|
|
Baca Selengkapnya
|
|
</a>
|
|
`;
|
|
|
|
let sidebarHTML = "";
|
|
|
|
data.slice(1, 5).forEach(item => {
|
|
sidebarHTML += `
|
|
<div class="d-flex landing-item mb-3">
|
|
<img src="${Array.isArray(item.gambar) ? item.gambar[0] : item.gambar}" class="landing-img">
|
|
<div>
|
|
<small class="text-muted">${formatTanggal(item.tanggal)}</small>
|
|
|
|
<div class="landing-title">${item.judul}</div>
|
|
|
|
<a href="/WebNew/Berita/Detail?id=${item.id}" class="text-primary small">
|
|
Baca Selengkapnya
|
|
</a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
`;
|
|
|
|
});
|
|
|
|
document.getElementById("sidebar-berita").innerHTML = sidebarHTML;
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", loadLandingBerita);
|
|
|
|
function loadVideoPreview() {
|
|
|
|
fetch('/WebNew/Video/GetAll')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
let html = "";
|
|
|
|
data.slice(0, 2).forEach(item => {
|
|
html += `
|
|
<div class="col-md-5">
|
|
|
|
<div class="video-embed">
|
|
<iframe
|
|
src="https://www.youtube.com/embed/${item.youtube}"
|
|
frameborder="0"
|
|
allowfullscreen>
|
|
</iframe>
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
document.getElementById("video-preview").innerHTML = html;
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", loadVideoPreview);
|
|
|
|
|
|
//galeri
|
|
function loadGaleriPreview() {
|
|
|
|
fetch('/WebNew/Galeri/GetAll')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
let html = "";
|
|
|
|
data.forEach(item => {
|
|
|
|
html += `
|
|
<div class="galeri-item">
|
|
<img src="${item.gambar}" alt="${item.judul}">
|
|
</div>
|
|
`;
|
|
|
|
});
|
|
|
|
document.getElementById("galeri-preview").innerHTML = html;
|
|
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", loadGaleriPreview); |