99 lines
2.9 KiB
JavaScript
99 lines
2.9 KiB
JavaScript
let allData = [];
|
|
|
|
function sanitize(str) {
|
|
return str.replaceAll("\\", "/");
|
|
}
|
|
|
|
function populateFilters(data) {
|
|
const catSet = new Set();
|
|
const tagSet = new Set();
|
|
|
|
data.forEach(item => {
|
|
catSet.add(item.properties?.Category?.[0]);
|
|
(item.properties?.Tags || []).forEach(tag => tagSet.add(tag));
|
|
});
|
|
|
|
const catFilter = document.getElementById("categoryFilter");
|
|
[...catSet].sort().forEach(cat => {
|
|
const option = document.createElement("option");
|
|
option.value = cat;
|
|
option.textContent = cat;
|
|
catFilter.appendChild(option);
|
|
});
|
|
|
|
const tagFilter = document.getElementById("tagFilter");
|
|
[...tagSet].sort().forEach(tag => {
|
|
const option = document.createElement("option");
|
|
option.value = tag;
|
|
option.textContent = tag;
|
|
tagFilter.appendChild(option);
|
|
});
|
|
}
|
|
|
|
function render(data) {
|
|
const gallery = document.getElementById("gallery");
|
|
gallery.innerHTML = ""; // clear
|
|
|
|
data.forEach((item, index) => {
|
|
const images = (item.images || []).map(sanitize);
|
|
const tags = (item.properties?.Tags || []).join(', ');
|
|
const category = item.properties?.Category?.[0] || 'Uncategorized';
|
|
const downloadPath = sanitize(item.download);
|
|
|
|
const card = document.createElement("div");
|
|
card.className = "card";
|
|
card.setAttribute("data-category", category);
|
|
card.setAttribute("data-tags", tags);
|
|
|
|
const galleryGroupId = `gallery-${index}`;
|
|
card.innerHTML = `
|
|
<div class="lg-gallery" id="${galleryGroupId}">
|
|
<a href="${images[0]}" data-lg-size="1400-800">
|
|
<img src="${images[0]}" alt="${item.title}">
|
|
</a>
|
|
${images.slice(1).map(img => `
|
|
<a href="${img}" data-lg-size="1400-800" style="display:none;"></a>
|
|
`).join("")}
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="card-title">${item.title}</div>
|
|
<div class="card-tags">Tags: ${tags}</div>
|
|
<div class="card-footer">
|
|
<a class="download-btn" href="${downloadPath}" download>⬇️ 下载资源</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
gallery.appendChild(card);
|
|
|
|
// 初始化 lightGallery
|
|
lightGallery(document.getElementById(galleryGroupId), {
|
|
selector: 'a',
|
|
thumbnail: true,
|
|
zoom: true
|
|
});
|
|
});
|
|
}
|
|
|
|
function filterGallery() {
|
|
const cat = document.getElementById("categoryFilter").value;
|
|
const tag = document.getElementById("tagFilter").value;
|
|
|
|
const filtered = allData.filter(item => {
|
|
const matchCat = (cat === 'all') || (item.properties?.Category?.[0] === cat);
|
|
const matchTag = (tag === 'all') || (item.properties?.Tags || []).includes(tag);
|
|
return matchCat && matchTag;
|
|
});
|
|
|
|
render(filtered);
|
|
}
|
|
|
|
fetch("data/kenney_data_local.json")
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
allData = data;
|
|
populateFilters(data);
|
|
render(data);
|
|
document.getElementById("categoryFilter").addEventListener("change", filterGallery);
|
|
document.getElementById("tagFilter").addEventListener("change", filterGallery);
|
|
});
|