Skip to content

Multiple Gallery Filters #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 43 commits into from
Nov 19, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
47cbb1f
add class str of tags
jukent Oct 28, 2021
9e6cca2
add tag_str to clas for each card
jukent Oct 28, 2021
32d9777
whitespace
jukent Oct 28, 2021
d1ad047
rm old filtering
jukent Oct 28, 2021
3ea5086
add js
jukent Oct 28, 2021
ca85df9
add onclick filter to tag menu buttons
jukent Oct 28, 2021
2f46b20
js indents
jukent Oct 28, 2021
16049bb
js fx indent
jukent Oct 28, 2021
3f7c8af
mv js to custom.js
jukent Oct 28, 2021
ac88812
rm js from .py
jukent Oct 28, 2021
4181fb0
del all seperate gallery .mds
jukent Oct 28, 2021
f8cc1cc
rm all references to seperate flt gallery pages
jukent Oct 28, 2021
ee8a5fe
rm extra ''
jukent Oct 28, 2021
16cba3c
filter in wrong spot
jukent Oct 28, 2021
3d012be
a to button
jukent Oct 28, 2021
bff886a
escape quotes
jukent Oct 28, 2021
8a6cbb7
add important
jukent Oct 28, 2021
b75d5b7
class still on wront level of card
jukent Oct 28, 2021
7b515dd
linting
jukent Oct 28, 2021
90f1e2e
rm space
jukent Oct 28, 2021
0a44137
Modify classes instead of style
Oct 28, 2021
0cf3838
Add tags to panel "column"
Oct 28, 2021
d4b5848
Bootstrap button styling for tag buttons
Oct 28, 2021
8ca3928
Linting fix
Oct 28, 2021
9b07656
rm filter js
jukent Nov 15, 2021
bf023b7
add checkboxes
jukent Nov 15, 2021
ec841a0
getcheckboxes
jukent Nov 18, 2021
f253598
remove modal_str
jukent Nov 18, 2021
d075b37
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Nov 18, 2021
67c30b4
change class, not style
jukent Nov 18, 2021
7760d39
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Nov 18, 2021
a7066a8
add clearCbs js fx
jukent Nov 18, 2021
7a08864
Merge branch 'mlt-gal-flt' of github.com:jukent/projectpythia.github.…
jukent Nov 18, 2021
f763042
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Nov 18, 2021
5a57828
fix false
jukent Nov 18, 2021
2c6a569
Merge branch 'mlt-gal-flt' of github.com:jukent/projectpythia.github.…
jukent Nov 18, 2021
9c1db6e
fix tag badges
jukent Nov 18, 2021
84d639e
change clear all filters btn
jukent Nov 18, 2021
8891e1b
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Nov 18, 2021
9da2c16
add modals back
jukent Nov 18, 2021
c669884
Merge branch 'mlt-gal-flt' of github.com:jukent/projectpythia.github.…
jukent Nov 18, 2021
28ae709
rm a space
jukent Nov 18, 2021
73d86c6
Merge branch 'ProjectPythia:main' into mlt-gal-flt
jukent Nov 18, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 10 additions & 15 deletions portal/_extensions/yaml_gallery_generator.py
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,13 @@ def _generate_tag_menu(all_items, tag_key):
tag_list = sorted(tag_set)

options = ''.join(
f'<li><a class="dropdown-item" href="/gallery/{tag.replace(" ", "-")}.html">{tag.title()}</a></li>\n'
f'<li><label class="dropdown-item checkbox {tag_key}"><input type="checkbox" rel={tag} onchange="change();">&nbsp;{tag.capitalize()}</label></li>'
for tag in tag_list
)

return f"""
<div class="dropdown">

<button class="btn btn-sm btn-outline-primary mx-1 dropdown-toggle" type="button" id="{tag_key}Dropdown" data-bs-toggle="dropdown" aria-expanded="false">
{tag_key.title()}
</button>
Expand All @@ -54,17 +55,16 @@ def _generate_tag_menu(all_items, tag_key):
"""


def _generate_menu(all_items, flt=None):
def _generate_menu(all_items):

key_list = _generate_sorted_tag_keys(all_items)

menu_html = '<div class="d-sm-flex mt-3 mb-4">\n'
menu_html += '<div class="d-flex gallery-menu">\n'
menu_html += '<div><a role="button" class="btn btn-primary btn-sm mx-1" href="https://github.com/ProjectPythia/projectpythia.github.io/issues/new?assignees=&labels=external-links-gallery-submission&template=update-external-links-gallery.md&title=">Submit a new resource</a></div>\n'
if flt:
menu_html += '<div><a role="button" class="btn btn-link btn-sm text-decoration-none" href="/gallery.html">Return to Full Gallery</a></div>\n'
menu_html += '</div>\n'
menu_html += '<div class="ms-auto d-flex">\n'
menu_html += '<div><button class="btn btn-link btn-sm mx-1" onclick="clearCbs()">Clear all filters</button></div>\n'
for tag_key in key_list:
menu_html += _generate_tag_menu(all_items, tag_key) + '\n'
menu_html += '</div>\n'
Expand All @@ -82,12 +82,13 @@ def build_from_items(items, filename, title='Gallery', subtitle=None, menu_html=
item['thumbnail'] = '/_static/images/ebp-logo.png'
thumbnail = item['thumbnail']
tag_list = sorted((itertools.chain(*item['tags'].values())))
tags = [
f'<a href="/gallery/{tag.replace(" ", "-")}.html" class="badge bg-primary link-light">{tag}</a>'
for tag in tag_list
]
tag_list_f = [tag.replace(' ', '-') for tag in tag_list]

tags = [f'<span class="badge bg-primary">{tag}</span>' for tag in tag_list_f]
tags = '\n'.join(tags)

tag_class_str = ' '.join(tag_list_f)

author_strs = set()
institution_strs = set()
for a in item['authors']:
Expand Down Expand Up @@ -139,6 +140,7 @@ def build_from_items(items, filename, title='Gallery', subtitle=None, menu_html=
panels_body.append(
f"""\
---
:column: + tagged-card {tag_class_str}

<div class="d-flex gallery-card">
<img src="{thumbnail}" class="gallery-thumbnail" />
Expand Down Expand Up @@ -197,13 +199,6 @@ def main(app):
menu_html = _generate_menu(all_items)
build_from_items(all_items, 'gallery', title=title, menu_html=menu_html)

menu_html_flt = _generate_menu(all_items, flt=True)
tag_set = _generate_tag_set(all_items)

for tag in tag_set:
items = [item for item in all_items if _tag_in_item(item, tag)]
build_from_items(items, f'gallery/{tag.replace(" ", "-")}', title=title, subtitle=tag, menu_html=menu_html_flt)


def setup(app):
app.connect('builder-inited', main)
152 changes: 152 additions & 0 deletions portal/_static/custom.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,155 @@ for (i = 0; i < buttons.length; i++) {
})(i)
)
}


function change() {
var affiliationCbs = document.querySelectorAll(".affiliation input[type='checkbox']");
var domainsCbs = document.querySelectorAll(".domains input[type='checkbox']");
var formatsCbs = document.querySelectorAll(".formats input[type='checkbox']");
var packagesCbs = document.querySelectorAll(".packages input[type='checkbox']");

var filters = {
affiliation: getClassOfCheckedCheckboxes(affiliationCbs),
domains: getClassOfCheckedCheckboxes(domainsCbs),
formats: getClassOfCheckedCheckboxes(formatsCbs),
packages: getClassOfCheckedCheckboxes(packagesCbs)
};

filterResults(filters);
}

function getClassOfCheckedCheckboxes(checkboxes) {
var classes = [];

if (checkboxes && checkboxes.length > 0) {
for (var i = 0; i < checkboxes.length; i++) {
var cb = checkboxes[i];

if (cb.checked) {
classes.push(cb.getAttribute("rel"));
}
}
}

return classes;
}

function filterResults(filters) {
var rElems = document.querySelectorAll(".tagged-card");
var hiddenElems = [];

if (!rElems || rElems.length <= 0) {
return;
}

for (var i = 0; i < rElems.length; i++) {
var el = rElems[i];

if (filters.affiliation.length > 0) {
var isHidden = true;

for (var j = 0; j < filters.affiliation.length; j++) {
var filter = filters.affiliation[j];

if (el.classList.contains(filter)) {
isHidden = false;
break;
}
}

if (isHidden) {
hiddenElems.push(el);
}
}

if (filters.domains.length > 0) {
var isHidden = true;

for (var j = 0; j < filters.domains.length; j++) {
var filter = filters.domains[j];

if (el.classList.contains(filter)) {
isHidden = false;
break;
}
}

if (isHidden) {
hiddenElems.push(el);
}
}

if (filters.formats.length > 0) {
var isHidden = true;

for (var j = 0; j < filters.formats.length; j++) {
var filter = filters.formats[j];

if (el.classList.contains(filter)) {
isHidden = false;
break;
}
}

if (isHidden) {
hiddenElems.push(el);
}
}

if (filters.packages.length > 0) {
var isHidden = true;

for (var j = 0; j < filters.packages.length; j++) {
var filter = filters.packages[j];

if (el.classList.contains(filter)) {
isHidden = false;
break;
}
}

if (isHidden) {
hiddenElems.push(el);
}
}
}

for (var i = 0; i < rElems.length; i++) {
rElems[i].classList.replace("d-none", "d-flex");
}

if (hiddenElems.length <= 0) {
return;
}

for (var i = 0; i < hiddenElems.length; i++) {
hiddenElems[i].classList.replace("d-flex", "d-none");
}
}


function clearCbs() {
var affiliationCbs = document.querySelectorAll(".affiliation input[type='checkbox']");
var domainsCbs = document.querySelectorAll(".domains input[type='checkbox']");
var formatsCbs = document.querySelectorAll(".formats input[type='checkbox']");
var packagesCbs = document.querySelectorAll(".packages input[type='checkbox']");

for (var i = 0; i < affiliationCbs.length; i++) {
affiliationCbs[i].checked=false;
}

for (var i = 0; i < domainsCbs.length; i++) {
domainsCbs[i].checked=false;
}

for (var i = 0; i < formatsCbs.length; i++) {
formatsCbs[i].checked=false;
}

for (var i = 0; i < packagesCbs.length; i++) {
packagesCbs[i].checked=false;
}

change();
}
1 change: 0 additions & 1 deletion portal/gallery/.keep

This file was deleted.