Open Source

frontend/v1/script.js

@@ -0,0 +1,98 @@
+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);
+  });