Skip to content

Commit

Permalink
Support additional filters on page
Browse files Browse the repository at this point in the history
  • Loading branch information
@litvinovg
litvinovg committed Oct 18, 2024
1 parent 9a6569c commit d6b6cb2
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 31 deletions.
5 changes: 5 additions & 0 deletions webapp/src/main/webapp/css/search/custom_filters.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.li-selected > label {
background: url(../../images/arrowIcon.gif) 0px 5px no-repeat;
color: #2ea0cf;
padding-left: 16px;
}
162 changes: 131 additions & 31 deletions webapp/src/main/webapp/templates/freemarker/body/menupage/browseSearchFilterValues.ftl
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,55 @@
<#-- $This file is distributed under the terms of the license in LICENSE$ -->
<#import "search-lib.ftl" as sl>

<script>
let searchFormId = "filter-form";
</script>

<#if filterGenericInfo.filters[searchFilter]??>
<#assign f = filterGenericInfo.filters[searchFilter]>
<section id="menupage-intro" role="region">
<h2>${page.title}</h2>
</section>

<#assign additionalFilters = ["type"]>
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/menupage/menupage.css" />')}

<section id="noJavascriptContainer">
<section id="browse-by" role="region">
<nav role="navigation">
<@filterFacets />
<@alphabeticalIndexLinks />
</nav>
<section id="individuals-in-class" role="region">
<@printPagingLinks />
<@filteredResults />
<@printPagingLinks />
<form id="filter-form" name="filter-form" autocomplete="off" method="get" action="${urls.currentPage}">
<section id="noJavascriptContainer">
<section id="browse-by" role="region">
<nav role="navigation">
<ul id="browse-classes">
<#list additionalFilters as filterId>
<#if filterGenericInfo.filters[filterId]?? >
<#assign filter = filterGenericInfo.filters[filterId] >
<#if ( user.loggedIn || filter.public ) && !filter.hidden >
<li class="filter-tab">
<a href="#" <#if filter.selected> class="selected" </#if> >${filter.name?html}</a>
<ul id="facet-values">
<@collapsedFacets filter />
</ul>
</li>
</#if>
</#if>
</#list>
<div class="divider" style="border-top: 0.5rem solid #fff;margin: -2px;"></div>
<@filterFacets filterGenericInfo.filters[searchFilter] />
</ul>
<@alphabeticalIndexLinks />
</nav>
<section id="individuals-in-class" role="region">
<@printPagingLinks />
<@filteredResults />
<@printPagingLinks />
</section>
</section>
</section>
</section>
</form>

<script type="text/javascript">
$('.filter-tab > ul > li').not('.li-selected').hide();
$('.filter-tab > a').click(function() {
$(this).parent().find('ul > li').not('.li-selected').toggle();
});
</script>

</#if>

<#macro filteredResults>
Expand All @@ -35,10 +64,9 @@
</ul>
</#macro>


<#macro filterFacets>
<ul id="browse-classes">
<#macro collapsedFacets f>
<#assign selectedValue = "" >
<#assign valueNumber = 1>
<#list f.values?values as value>
<#if value.selected>
<#assign selectedValue = value.id >
Expand All @@ -47,15 +75,55 @@
<#if !(valueLabel?has_content)>
<#assign valueLabel = value.id >
</#if>
<#if value.selected>
<li id="${value.id?html}" class="li-selected">
<a href="#" class="selected">
<@sl.getInput f value sl.getValueID(f.id, valueNumber) valueNumber 'filter-form' />
<@sl.getSelectedLabel sl.getValueID(filter.id, valueNumber)?html value f />
</a>
</li>
<#else>
<li id="${value.id?html}">
<a href="#">
<@sl.getInput f value sl.getValueID(f.id, valueNumber) valueNumber 'filter-form' />
<@sl.getLabel sl.getValueID(f.id, valueNumber) value f />
</a>
</li>
</#if>
<#assign valueNumber = valueNumber + 1>
</#list>
</#macro>

<#macro filterFacets f>
<#assign selectedValue = "" >
<#assign valueNumber = 1>
<#list f.values?values as value>
<#if value.selected>
<#assign selectedValue = value.id >
</#if>
<#assign valueLabel = value.name >
<#if !(valueLabel?has_content)>
<#assign valueLabel = value.id >
</#if>
<#if value.selected>
<li id="${value.id?html}" class="li-selected">
<a href="#" class="selected">
<@sl.getInput f value sl.getValueID(f.id, valueNumber) valueNumber 'filter-form' />
<@sl.getSelectedLabel sl.getValueID(f.id, valueNumber)?html value f />
</a>
</li>
<#else>
<li id="${value.id?html}">
<a href="${urls.currentPage}?filters_main=${searchFilter?url + ":"?url + value.id?url}" data-uri="${value.id?html}" <#if value.selected> class="selected" </#if> >${valueLabel?html}<span class="count-classes">(${value.count})</span>
<a href="#">
<@sl.getInput f value sl.getValueID(f.id, valueNumber) valueNumber 'filter-form' />
<@sl.getLabel sl.getValueID(f.id, valueNumber) value f />
</a>
</li>
</#list>
</ul>
</#if>
<#assign valueNumber = valueNumber + 1>
</#list>
</#macro>


<#macro alphabeticalIndexLinks>
<#if languageAware >
<#assign indexFilterName = "label_regex">
Expand All @@ -66,19 +134,22 @@
<#assign indexFilter = filters[indexFilterName]>
<nav id="alpha-browse-container" role="navigation">
<ul id="alpha-browse-individuals">
<li><a
<#if indexFilter.inputText == "">
class="selected"
</#if>
href="${urls.currentPage}?filters_main=${searchFilter?url + ":"?url + selectedValue?url}" title="select all">${i18n().all}</a></li>
<li>
<a href="#" <#if indexFilter.inputText == ""> class="selected" </#if> >
<@getAlphabetInput indexFilter '' sl.getValueID(indexFilter.id, 0) />
<@getAlphabetLabel sl.getValueID(indexFilter.id, 0) i18n().all />
</a>
</li>
<#assign valueNumber = 1>
<#list i18n().browse_results_alphabetical_index?split(",") as c>
<#assign regexValue = "(" + c?lower_case?cap_first + "|" + c?lower_case + "|" + c?upper_case + ").*">
<li><a
<#if indexFilter.inputText == regexValue >
class="selected"
</#if>
href="${urls.currentPage}?filters_main=${searchFilter?url + ":"?url + selectedValue?url}&filter_input_${indexFilterName}=${regexValue?url}" title="${i18n().browse_all_starts_with(c?upper_case)}">${c?upper_case}</a>
<li>
<a href="#" <#if indexFilter.inputText == regexValue > class="selected" </#if> >
<@getAlphabetInput indexFilter regexValue sl.getValueID(indexFilter.id, valueNumber) />
<@getAlphabetLabel sl.getValueID(indexFilter.id, valueNumber) c?upper_case />
</a>
</li>
<#assign valueNumber = valueNumber + 1>
</#list>
</ul>
</nav>
Expand All @@ -101,3 +172,32 @@
</div>
</#if>
</#macro>

<#macro getAlphabetLabel valueId label>
<label for="${valueId}" >${label?html}</label>
</#macro>
<#-- create radio input fields for alphabetical indexes -->
<#macro getAlphabetInput filter filterValue valueID form="filter-form">
<#assign checked = "">
<#if filter.inputText == filterValue>
<#assign checked = " checked=\"checked\" " >
<#assign class = "selected-input" >
</#if>
<#assign type = "radio" >
<#assign filterName = filter.id >

<input
form="${form}"
type="radio"
id="${valueID?html}"
value="${filter.id?html + ":"?html + filterValue?html}"
name="filters_${filter.id?html}"
style="display:none;"
${checked}
>
</#macro>

${scripts.add('<script type="text/javascript" src="${urls.base}/js/search/search_results.js"></script>')}
${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/css/search/custom_filters.css"/>')}


0 comments on commit d6b6cb2

Please sign in to comment.