Skip to content

Commit eb58819

Browse files
dominickpdominickp
authored
Merge pull request #1 from dominickp/fix-video
Fix bug where videos were never filtered out
2 parents 0118da0 + 4b290a7 commit eb58819

2 files changed

Lines changed: 20 additions & 15 deletions

File tree

‎example-gallery/gal.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><title>example-gallery</title><style>html{background-color:#000}main{display:grid;grid-template-columns:repeat(auto-fill,minmax(24rem,1fr));grid-template-rows:masonry;gap:.1rem}figure{position:relative;counter-increment:item-counter;margin:0}img,video{width:100%;height:auto;display:block;cursor:pointer}main.is-selecting figure:not(.toggling) img{opacity:.5}.hidden{display:none}.invisible{visibility:hidden}#filter-options{position:fixed;display:inline-block;right:0;top:0;z-index:1000;margin:20px}.visible-on-selecting{display:inline}a.button{cursor:pointer;box-sizing:border-box}#gallery-info{position:fixed;display:inline;right:0;top:34px;z-index:999;margin:20px;font-family:lucida sans,lucida sans regular,lucida grande,lucida sans unicode,Geneva,Verdana,sans-serif;background-color:rgba(0,0,0,.6);color:#fff;padding:2px 10px;border-radius:9px;font-size:14px}</style><script>function bootstrapSelecting(){var e,t=document.querySelector("main");t.classList.add("is-selecting"),e=document.querySelector("#filter-options .visible-on-selecting"),e.classList.remove("invisible")}function resetSelecting(){var e,t,n,s=document.querySelector("main");s.classList.remove("is-selecting"),t=document.querySelectorAll("main figure img");for(const n of t)e=n.parentElement,e.classList.remove("toggling"),e.classList.remove("hidden");n=document.querySelector("#filter-options .visible-on-selecting"),n.classList.add("invisible")}function filterSelection(){var e=document.querySelectorAll("main figure img");for(const t of e)t.parentElement.classList.contains("toggling")||t.parentElement.classList.add("hidden")}function randomizeImageOrder(){var e=document.querySelector("main"),n=document.querySelectorAll("main figure"),t=Array.from(n);t.sort(()=>Math.random()-.5),e.innerHTML="";for(const n of t)e.appendChild(n)}function showGalleryInfo(){var e=document.querySelector("#gallery-info");e.classList.remove("invisible")}function hideGalleryInfo(){var e=document.querySelector("#gallery-info");e.classList.add("invisible")}function toggleImage(e){bootstrapSelecting();var n=e.target,t=n.parentElement;t.classList.contains("toggling")?t.classList.remove("toggling"):t.classList.add("toggling")}document.addEventListener("DOMContentLoaded",e=>{var t=document.querySelectorAll("main figure img");for(const e of t)e.addEventListener("click",function(e){toggleImage(e),console.log("click")})})</script><div id=filter-options><div class="visible-on-selecting invisible"><a title="Reset gallery" class=button onclick=resetSelecting()>🔄</a><a title="Filter gallery" class=button onclick=filterSelection()>✅</a></div><a title="Randomize images" class=button onclick=randomizeImageOrder()>🔀</a><a class=button onmouseenter=showGalleryInfo() onmouseleave=hideGalleryInfo()>ℹ️</a></div><div id=gallery-info class=invisible>Created on April 29, 2024 at 3:14 PM - 46 images</div><main class=grid><figure class=card><img src=1.jpg></figure><figure class=card><img src=10.jpg></figure><figure class=card><img src=11.jpg></figure><figure class=card><img src=12.jpg></figure><figure class=card><img src=13.jpg></figure><figure class=card><img src=14.jpg></figure><figure class=card><img src=15.jpg></figure><figure class=card><img src=16.jpg></figure><figure class=card><img src=17.jpg></figure><figure class=card><img src=18.jpg></figure><figure class=card><img src=19.jpg></figure><figure class=card><img src=2.jpg></figure><figure class=card><img src=20.jpg></figure><figure class=card><img src=21.jpg></figure><figure class=card><img src=22.jpg></figure><figure class=card><img src=23.jpg></figure><figure class=card><img src=24.jpg></figure><figure class=card><img src=25.jpg></figure><figure class=card><img src=26.jpg></figure><figure class=card><img src=27.jpg></figure><figure class=card><img src=28.jpg></figure><figure class=card><img src=29.jpg></figure><figure class=card><video src=3.mp4 autoplay loop muted></figure><figure class=card><img src=30.jpg></figure><figure class=card><img src=31.jpg></figure><figure class=card><img src=32.jpg></figure><figure class=card><img src=33.jpg></figure><figure class=card><img src=34.jpg></figure><figure class=card><img src=35.jpg></figure><figure class=card><img src=36.jpg></figure><figure class=card><img src=37.jpg></figure><figure class=card><img src=38.jpg></figure><figure class=card><img src=39.jpg></figure><figure class=card><img src=4.jpg></figure><figure class=card><img src=40.jpg></figure><figure class=card><img src=41.jpg></figure><figure class=card><img src=42.jpg></figure><figure class=card><img src=43.jpg></figure><figure class=card><img src=44.jpg></figure><figure class=card><img src=45.jpg></figure><figure class=card><img src=46.jpg></figure><figure class=card><img src=5.jpg></figure><figure class=card><img src=6.jpg></figure><figure class=card><img src=7.jpg></figure><figure class=card><img src=8.jpg></figure><figure class=card><img src=9.jpg></figure></main>
1+
<!doctype html><title>example-gallery</title><style>html{background-color:#000}main{display:grid;grid-template-columns:repeat(auto-fill,minmax(24rem,1fr));grid-template-rows:masonry;gap:.1rem}figure{position:relative;counter-increment:item-counter;margin:0}img,video{width:100%;height:auto;display:block;cursor:pointer}main.is-selecting figure:not(.toggling) img{opacity:.5}.hidden{display:none}.invisible{visibility:hidden}#filter-options{position:fixed;display:inline-block;right:0;top:0;z-index:1000;margin:20px}.visible-on-selecting{display:inline}a.button{cursor:pointer;box-sizing:border-box}#gallery-info{position:fixed;display:inline;right:0;top:34px;z-index:999;margin:20px;font-family:lucida sans,lucida sans regular,lucida grande,lucida sans unicode,Geneva,Verdana,sans-serif;background-color:rgba(0,0,0,.6);color:#fff;padding:2px 10px;border-radius:9px;font-size:14px}</style><script>function bootstrapSelecting(){var e,t=document.querySelector("main");t.classList.add("is-selecting"),e=document.querySelector("#filter-options .visible-on-selecting"),e.classList.remove("invisible")}function resetSelecting(){const e=document.querySelector("main");e.classList.remove("is-selecting");const t=document.querySelectorAll("main figure.card");for(const e of t)e.classList.remove("toggling"),e.classList.remove("hidden");const n=document.querySelector("#filter-options .visible-on-selecting");n.classList.add("invisible")}function filterSelection(){var e=document.querySelectorAll("main figure.card");for(const t of e)t.classList.contains("toggling")||t.classList.add("hidden")}function randomizeImageOrder(){var e=document.querySelector("main"),n=document.querySelectorAll("main figure"),t=Array.from(n);t.sort(()=>Math.random()-.5),e.innerHTML="";for(const n of t)e.appendChild(n)}function showGalleryInfo(){var e=document.querySelector("#gallery-info");e.classList.remove("invisible")}function hideGalleryInfo(){var e=document.querySelector("#gallery-info");e.classList.add("invisible")}function toggleImage(e){bootstrapSelecting();var n=e.target,t=n.parentElement;t.classList.contains("toggling")?t.classList.remove("toggling"):t.classList.add("toggling")}document.addEventListener("DOMContentLoaded",e=>{var t=document.querySelectorAll("main figure.card");for(const e of t)e.addEventListener("click",function(e){toggleImage(e),console.log("click")})})</script><div id=filter-options><div class="visible-on-selecting invisible"><a title="Reset gallery" class=button onclick=resetSelecting()>🔄</a><a title="Filter gallery" class=button onclick=filterSelection()>✅</a></div><a title="Randomize images" class=button onclick=randomizeImageOrder()>🔀</a><a class=button onmouseenter=showGalleryInfo() onmouseleave=hideGalleryInfo()>ℹ️</a></div><div id=gallery-info class=invisible>Created on May 27, 2024 at 6:16 PM - 46 images</div><main class=grid><figure class=card><img src=1.jpg></figure><figure class=card><img src=10.jpg></figure><figure class=card><img src=11.jpg></figure><figure class=card><img src=12.jpg></figure><figure class=card><img src=13.jpg></figure><figure class=card><img src=14.jpg></figure><figure class=card><img src=15.jpg></figure><figure class=card><img src=16.jpg></figure><figure class=card><img src=17.jpg></figure><figure class=card><img src=18.jpg></figure><figure class=card><img src=19.jpg></figure><figure class=card><img src=2.jpg></figure><figure class=card><img src=20.jpg></figure><figure class=card><img src=21.jpg></figure><figure class=card><img src=22.jpg></figure><figure class=card><img src=23.jpg></figure><figure class=card><img src=24.jpg></figure><figure class=card><img src=25.jpg></figure><figure class=card><img src=26.jpg></figure><figure class=card><img src=27.jpg></figure><figure class=card><img src=28.jpg></figure><figure class=card><img src=29.jpg></figure><figure class=card><video src=3.mp4 autoplay loop muted></figure><figure class=card><img src=30.jpg></figure><figure class=card><img src=31.jpg></figure><figure class=card><img src=32.jpg></figure><figure class=card><img src=33.jpg></figure><figure class=card><img src=34.jpg></figure><figure class=card><img src=35.jpg></figure><figure class=card><img src=36.jpg></figure><figure class=card><img src=37.jpg></figure><figure class=card><img src=38.jpg></figure><figure class=card><img src=39.jpg></figure><figure class=card><img src=4.jpg></figure><figure class=card><img src=40.jpg></figure><figure class=card><img src=41.jpg></figure><figure class=card><img src=42.jpg></figure><figure class=card><img src=43.jpg></figure><figure class=card><img src=44.jpg></figure><figure class=card><img src=45.jpg></figure><figure class=card><img src=46.jpg></figure><figure class=card><img src=5.jpg></figure><figure class=card><img src=6.jpg></figure><figure class=card><img src=7.jpg></figure><figure class=card><img src=8.jpg></figure><figure class=card><img src=9.jpg></figure></main>

‎template.html‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -73,37 +73,41 @@
7373
filterOptions.classList.remove("invisible");
7474
}
7575

76+
/**
77+
* Reset gallery to its original state (unsets any selected items)
78+
*/
7679
function resetSelecting() {
77-
var main = document.querySelector("main");
80+
const main = document.querySelector("main");
7881
// Remove the is-selecting class from the main element
7982
main.classList.remove("is-selecting");
80-
8183
// Select all images
82-
var images = document.querySelectorAll("main figure img");
84+
const images = document.querySelectorAll("main figure.card");
8385
for (const image of images) {
84-
var figure = image.parentElement;
8586
// Remove the toggling/hidden classes
86-
figure.classList.remove("toggling");
87-
figure.classList.remove("hidden");
87+
image.classList.remove("toggling");
88+
image.classList.remove("hidden");
8889
}
89-
90-
var filterOptions = document.querySelector(
91-
"#filter-options .visible-on-selecting"
92-
);
90+
const filterOptions = document.querySelector("#filter-options .visible-on-selecting");
9391
filterOptions.classList.add("invisible");
9492
}
9593

94+
/**
95+
* Filter the gallery based on the selected items (hides any unselected items)
96+
*/
9697
function filterSelection() {
9798
// Select all images
98-
var images = document.querySelectorAll("main figure img");
99+
var images = document.querySelectorAll("main figure.card");
99100
for (const image of images) {
100101
// If the image is not toggling, add the hidden class to it
101-
if (!image.parentElement.classList.contains("toggling")) {
102-
image.parentElement.classList.add("hidden");
102+
if (!image.classList.contains("toggling")) {
103+
image.classList.add("hidden");
103104
}
104105
}
105106
}
106107

108+
/**
109+
* Randomize the order of the images in the gallery
110+
*/
107111
function randomizeImageOrder() {
108112
var main = document.querySelector("main");
109113
var figures = document.querySelectorAll("main figure");
@@ -146,7 +150,7 @@
146150

147151
document.addEventListener("DOMContentLoaded", (event) => {
148152
// Select all images
149-
var images = document.querySelectorAll("main figure img");
153+
var images = document.querySelectorAll("main figure.card");
150154
// Loop through each image
151155
for (const image of images) {
152156
// Add click event listener to each image
@@ -157,6 +161,7 @@
157161
});
158162
}
159163
});
164+
160165
</script>
161166
</head>
162167
<body>

0 commit comments

Comments
 (0)