<!-- Filter -->
<div class="js-big-filter big_filter">
<script type="text/javascript">
let categories = [{
"id": "civic",
"label": "Civic & Americana",
"color": "#5B000F",
"icon": "../../images/pin-red.svg"
}, {
"id": "stonework",
"label": "Stonework & Carvings",
"color": "#9F7610",
"icon": "../../images/pin-yellow.svg"
}, {
"id": "windows",
"label": "Windows & Glass",
"color": "#473599",
"icon": "../../images/pin-navy.svg"
}, {
"id": "architectural",
"label": "Architectural Details",
"color": "#9F9F9F",
"icon": "../../images/pin-grey.svg"
}, {
"id": "chapels",
"label": "Chapels & Spaces",
"color": "#BBACFE",
"icon": "../../images/pin-light-purple.svg"
}];
</script>
<div class="big_filter_header">
<button class="js-big-filter-toggle js-swap big_filter_toggle " data-swap-target=".js-big-filter">
<span class="big_filter_toggle_inner_default big_filter_toggle_inner">
<span class="big_filter_toggle_label_default big_filter_toggle_label">Filter Points of Interest</span>
<span class="big_filter_toggle_icon_default big_filter_toggle_icon" aria-hidden="true">
<svg class="icon icon_more">
<use href="/images/icons.svg#more" />
</svg>
</span>
</span>
<span class="big_filter_toggle_inner_active big_filter_toggle_inner">
<span class="big_filter_toggle_label_active big_filter_toggle_label">Close</span>
<span class="big_filter_toggle_icon_active big_filter_toggle_icon" aria-hidden="true">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</span>
</button>
</div>
<div class="js-big-filter-body big_filter_body">
<form class="js-big-filter-body-inner big_filter_body_inner" action="#" method="get">
<div class="big_filter_tools">
<div class="big_filter_tool">
<span class="big_filter_tool_select_label">Select a View</span>
<div class="big_filter_radio_outer_wrapper">
<div class="big_filter_radio_inner_wrapper">
<label class="big_filter_radio_label">Cathedral</label>
<input class="big_filter_radio_input js-view-radio-input" type="radio" name="map_view" value="cathedral" checked>
</div>
<div class="big_filter_radio_inner_wrapper">
<label class="big_filter_radio_label">Campus</label>
<input class="big_filter_radio_input js-view-radio-input" type="radio" name="map_view" value="campus">
</div>
</div>
</div>
</div>
<fieldset class="js-map-categories-fieldset big_filter_fieldset">
<legend class="big_filter_legend">Filter</legend>
<div class="big_filter_option">
<input class="big_filter_option_input_field" checked type="checkbox" id="civic" name="Civic & Americana">
<label class="big_filter_option_input_label" for="civic">Civic & Americana</label>
<span class="big_filter_option_input_color" style="background: #5B000F"></span>
<span class="big_filter_option_input_indicator"></span>
</div>
<div class="big_filter_option">
<input class="big_filter_option_input_field" checked type="checkbox" id="stonework" name="Stonework & Carvings">
<label class="big_filter_option_input_label" for="stonework">Stonework & Carvings</label>
<span class="big_filter_option_input_color" style="background: #9F7610"></span>
<span class="big_filter_option_input_indicator"></span>
</div>
<div class="big_filter_option">
<input class="big_filter_option_input_field" checked type="checkbox" id="windows" name="Windows & Glass">
<label class="big_filter_option_input_label" for="windows">Windows & Glass</label>
<span class="big_filter_option_input_color" style="background: #473599"></span>
<span class="big_filter_option_input_indicator"></span>
</div>
<div class="big_filter_option">
<input class="big_filter_option_input_field" checked type="checkbox" id="architectural" name="Architectural Details">
<label class="big_filter_option_input_label" for="architectural">Architectural Details</label>
<span class="big_filter_option_input_color" style="background: #9F9F9F"></span>
<span class="big_filter_option_input_indicator"></span>
</div>
<div class="big_filter_option">
<input class="big_filter_option_input_field" checked type="checkbox" id="chapels" name="Chapels & Spaces">
<label class="big_filter_option_input_label" for="chapels">Chapels & Spaces</label>
<span class="big_filter_option_input_color" style="background: #BBACFE"></span>
<span class="big_filter_option_input_indicator"></span>
</div>
</fieldset>
</form>
</div>
</div>
<!-- END: Filter -->
{#
{% include '@partial-filter' with {
label: 'Directory',
active: 'search',
action_category: '#',
action_search: '#',
tools: [
{
label: 'Category',
options: [
{
label: 'All Categories',
label: true
}
]
}
],
search_placeholder: 'Placeholder',
results: '',
category: ''
} %}
#}
<!-- Filter -->
<div class="js-big-filter big_filter">
<script type="text/javascript">
let categories = {{ fieldsets[0].options|json_encode }};
</script>
<div class="big_filter_header">
{% render '@partial-button-toggle' with {
class: 'big_filter',
title: 'Filter Points of Interest',
icon: 'more',
active_title: 'Close',
active_icon: 'close',
swap_target: '.js-big-filter',
js: true
} %}
</div>
<div class="js-big-filter-body big_filter_body">
<form class="js-big-filter-body-inner big_filter_body_inner" action="{{ action_category }}" method="get">
<div class="big_filter_tools">
{% for tool in tools %}
<div class="big_filter_tool">
<span class="big_filter_tool_select_label">Select a View</span>
<div class="big_filter_radio_outer_wrapper">
{% for view in views %}
<div class="big_filter_radio_inner_wrapper">
<label class="big_filter_radio_label">{{ view.title }}</label>
<input class="big_filter_radio_input js-view-radio-input" type="radio" name="map_view" value="{{ view.slug }}"{% if loop.first %} checked {% endif %}>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{% for fieldset in fieldsets %}
<fieldset class="js-map-categories-fieldset big_filter_fieldset">
<legend class="big_filter_legend">{{ fieldset.legend }}</legend>
{% for option in fieldset.options %}
<div class="big_filter_option">
<input class="big_filter_option_input_field" checked type="checkbox" id="{{ option.id }}" name="{{ option.label }}">
<label class="big_filter_option_input_label" for="{{ option.id }}">{{ option.label }}</label>
<span class="big_filter_option_input_color" style="background: {{ option.color }}"></span>
<span class="big_filter_option_input_indicator"></span>
</div>
{% endfor %}
</fieldset>
{% endfor %}
{# <div class="big_filter_tool">
<button class="big_filter_tools_submit" type="submit">
<span class="big_filter_tools_submit_inner">
<span class="big_filter_tools_submit_label">Submit Filters</span>
</span>
</button>
</div> #}
</form>
</div>
</div>
<!-- END: Filter -->
No notes defined.