Multiple gallery filters #125
Comments
kmpaul
added
high priority
and removed
hackathon
|
Below is an example HTML page with javascript and CSS to allow a "list of elements" (which could be cards in the gallery) to expand/contract based on changing the
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Filter Test</title>
<script>
function filter(classes) {
for (var i = 0; i < classes.length; i++) {
var elements = document.getElementsByClassName(classes[i]);
for (var j = 0; j < elements.length; j++) {
e = elements[j];
if (e.style.display === "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
}
}
}
</script>
<style>
div {
padding: 1rem;
}
.red {
display: block;
background-color: red;
}
.blue {
display: block;
background-color: blue;
}
</style>
</head>
<html>
<body>
<button onclick="filter(['red'])">Hide/Show Red</button>
<button onclick="filter(['blue'])">Hide/Show Blue</button>
<div class="red" id="div1">
This is div element #1.
</div>
<div class="blue" id="div2">
This is div element #2.
</div>
<div class="blue" id="div3">
This is div element #3.
</div>
<div class="red" id="div4">
This is div element #4.
</div>
<div class="blue" id="div5">
This is div element #5.
</div>
</body>
</html> |
|
@kmpaul you indicated that this is just a start, but the todo items you listed don't seem terribly insurmountable (and some may even be optional for an interim solution). Is the takeaway that the desired capability is more readily doable than what was thought during our earlier discussion, or am I misinterpreting your findings? |
|
I do think this is doable with static webpages using this methodology. I believe this kind of approach could be done without much difficulty, with a little care. |
|
That sounds like great news! Thanks for clarifying. |
|
@jukent will be working on this during today's hackathon. |
Currently our Resource Gallery uses tags under three different categories (Domains, Formats, Packages) for filtering.
How feasible is it to enable multi-dimensional filtering? e.g. Formats=Video & Packages=Xarray
I think this capability will become more important as the gallery grows.
The text was updated successfully, but these errors were encountered: