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]); } } if (item.querySelector("img").height > 0) { item.querySelector("[data-overlay]").classList.remove("invisible"); } else { item.querySelector("img").addEventListener("load", () => { item.querySelector("[data-overlay]").classList.remove("invisible"); this.removeEventListener("load", this); }); } } }); 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) => { 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 }, extraProps: [ "redditText", "bskyText", "msText", "redditShareUrl", "bskyShareUrl", "msShareUrl", ], additionalShareOptions: [ { selector: ".lg-share-reddit", dropdownHTML: '<li class="lg-share-item-reddit"><a class="lg-share-reddit" target="_blank"><span class="lg-icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><path fill="#ff4500" d="M373 138.6c-25.2 0-46.3-17.5-51.9-41c-30.6 4.3-54.2 30.7-54.2 62.4v.2c47.4 1.8 90.6 15.1 124.9 36.3c12.6-9.7 28.4-15.5 45.5-15.5c41.3 0 74.7 33.4 74.7 74.7c0 29.8-17.4 55.5-42.7 67.5c-2.4 86.8-97 156.6-213.2 156.6S45.5 410.1 43 323.4c-25.4-11.9-43-37.7-43-67.7C0 214.4 33.4 181 74.7 181c17.2 0 33 5.8 45.7 15.6c34-21.1 76.8-34.4 123.7-36.4v-.3c0-44.3 33.7-80.9 76.8-85.5C325.8 50.2 347.2 32 373 32c29.4 0 53.3 23.9 53.3 53.3s-23.9 53.3-53.3 53.3M157.5 255.3c-20.9 0-38.9 20.8-40.2 47.9s17.1 38.1 38 38.1s36.6-9.8 37.8-36.9s-14.7-49.1-35.7-49.1zM395 303.1c-1.2-27.1-19.2-47.9-40.2-47.9s-36.9 22-35.7 49.1s16.9 36.9 37.8 36.9s39.3-11 38-38.1zm-60.1 70.8c1.5-3.6-1-7.7-4.9-8.1c-23-2.3-47.9-3.6-73.8-3.6s-50.8 1.3-73.8 3.6c-3.9.4-6.4 4.5-4.9 8.1c12.9 30.8 43.3 52.4 78.7 52.4s65.8-21.6 78.7-52.4"/></svg></span><span class="lg-dropdown-text">Reddit</span></a></li>', generateLink: (galleryItem) => { const url = galleryItem.redditShareUrl || encodeURIComponent(window.location.href); const title = galleryItem.redditText; const redditShareLink = `https://reddit.com/submit?url=${url}&title=${title}`; return redditShareLink; }, }, { selector: ".lg-share-bsky", dropdownHTML: '<li class="lg-share-item-bsky"><a class="lg-share-bsky" target="_blank"><span class="lg-icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><path fill="#0085ff" d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2c-18.2 64.8-84.4 81.4-143.3 71.3C456 322 482.2 380 425.6 438c-107.4 110.2-154.3-27.6-166.3-62.9c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></svg></span><span class="lg-dropdown-text">Bluesky</span></a></li>', generateLink: (galleryItem) => { const url = galleryItem.bskyShareUrl || encodeURIComponent(window.location.href); const title = galleryItem.bskyText; const bskyShareLink = `https://bsky.app/intent/compose?text=${title}%20${url}`; return bskyShareLink; }, }, { selector: ".lg-share-ms", dropdownHTML: '<li class="lg-share-item-ms"><a class="lg-share-ms" target="_blank"><span class="lg-icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 448 512"><path fill="#8c8dff" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7c-62.52-28.7-228.56-28.4-290.48 0c0 0-63.72 28.5-63.72 125.7c0 115.7-6.6 259.4 105.63 289.1c40.51 10.7 75.32 13 103.33 11.4c50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.5 102.5 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7c56.12-6.7 105-41.3 111.23-72.9c9.8-49.8 9-121.5 9-121.5m-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175c25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5l11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1c23.71 27.3 18.4 53 18.4 175z"/></svg></span><span class="lg-dropdown-text">Mastodon</span></a></li>', generateLink: (galleryItem) => { const url = galleryItem.msShareUrl || encodeURIComponent(window.location.href); const title = galleryItem.msText; const msShareLink = `https://tootpick.org/#text=${title}%20${url}`; return msShareLink; }, }, ], }); } });