feat/generator: add tags navigation

generate/static/js/initGalleries.js

@@ -1,17 +1,103 @@
+const url = new URL(window.location.href);
+let tags = url.searchParams.get("tag") || "";
+if (tags.length > 0) {
+  tags = tags.split(",");
+} else {
+  tags = [];
+}
+let availableTags = [];
+
 const galleries = document.querySelectorAll('[data-type="gallery"]');
+let tagsButtons = document.querySelectorAll('[data-type="tag"]');
+let allTagsButton = document.querySelector('[data-type="tag"][data-tag="all"]');
+let Images = document.querySelectorAll('[data-type="image"]');
+
+Images.forEach((item) => {
+  const imTags = item.dataset.tags.split(",") || [];
+  const foundTags = [];
+
+  for (let i = 0; i < imTags.length; i++) {
+    if (tags.includes(imTags[i]) || tags.length == 0) {
+      foundTags.push(imTags[i]);
+    }
+  }
+
+  if (foundTags.length == 0 || foundTags.length < tags.length) {
+    item.remove();
+  } else {
+    item.classList.remove("hidden");
+    for (let i = 0; i < imTags.length; i++) {
+      if (!availableTags.includes(imTags[i])) {
+        availableTags.push(imTags[i]);
+      }
+    }
+  }
+});
+
+allTagsButton.addEventListener("click", () => {
+  removeTags();
+});
+
+if (tags.length == 0) {
+  allTagsButton.classList.remove("bg-gray-800");
+  allTagsButton.classList.add("bg-gray-600");
+}
+
+tagsButtons.forEach((item) => {
+  if (item.dataset.tag != "all") {
+    item.addEventListener("click", () => {
+      toggleTag(item.dataset.tag);
+    });
+  }
+  if (tags.includes(item.dataset.tag)) {
+    item.classList.remove("bg-gray-800");
+    item.classList.add("bg-gray-600");
+  }
+  if (!availableTags.includes(item.dataset.tag) && item.dataset.tag != "all") {
+    item.remove();
+  } else {
+    item.classList.remove("hidden");
+  }
+});
+
+function removeTags() {
+  const url = new URL(window.location.href);
+  url.searchParams.delete("tag");
+  window.history.pushState({}, "", url);
+  window.location.reload();
+}
+
+function toggleTag(tag) {
+  if (tags.includes(tag)) {
+    tags = tags.filter((item) => item !== tag);
+  } else {
+    tags.push(tag);
+  }
+
+  tags = tags.join(",");
+  url.searchParams.set("tag", tags);
+  window.history.pushState({}, "", url);
+  window.location.reload();
+}
 
 galleries.forEach((item, idx) => {
-  lightGallery(item, {
-    plugins: [lgThumbnail, lgHash, lgShare, lgFullscreen, lgZoom],
-    speed: 500,
-    thumbnail: true,
-    download: true,
-    animateThumb: true,
-    zoomFromOrigin: false,
-    toggleThumb: false,
-    galleryId: Number(item.getAttribute('data-year')),
-    hash: true,
-    customSlideName: true,
-    mobileSettings: { controls: true, showCloseIcon: true, download: true }
-  });
+  if (item.children.length == 0) {
+    item.parentElement.remove();
+  } else {
+    item.parentElement.classList.remove("hidden");
+
+    lightGallery(item, {
+      plugins: [lgThumbnail, lgHash, lgShare, lgFullscreen, lgZoom],
+      speed: 500,
+      thumbnail: true,
+      download: true,
+      animateThumb: true,
+      zoomFromOrigin: false,
+      toggleThumb: false,
+      galleryId: Number(item.getAttribute("data-year")),
+      hash: true,
+      customSlideName: true,
+      mobileSettings: { controls: true, showCloseIcon: true, download: true },
+    });
+  }
 });