DEPRECATED: do no longer use this component. It has been replaced by checkboxes dynamic
Use the checkboxes with filter component when you need to help users select one or more options from a long list of options.
Do not use the checkboxes with filter component when you need to help users:
In these cases, use checkboxes without filter instead.
In a checkboxes with filter component, what would normally be a long list of checkboxes, is replaced by a button that opens a modal where the list of checkboxes is placed instead.
The behavior is as follows:
When one or more checkboxes are selected, the user can see this both:
Create a new CheckboxFilter object by running:
new CheckboxFilter(element, [options]);The optional ‘options’ object contains all queryselectors, a string ‘hiddenTagText’ to use as hidden text on the selected tags buttons and a boolean to prevent creating selected tags in case you need your own implementation.
{% set modalTitle = label %}
{% if label_optional %}
{% set modalTitle = modalTitle ~ '<span class="label-optional">(' ~ label_optional ~ ')</span>' %}
{% endif %}
{% set modalContent %}
<div class="checkbox-filter__selected"></div>
<div class="form-item">
<label for="checkboxes__filter_id_{{ modifier }}">Filter the list
below</label>
<div class="form-item checkbox-filter__filter__search-wrapper">
<input type="search" id="checkboxes__filter_id_{{ modifier }}"
class="checkbox-filter__filter">
<p aria-live="polite" aria-atomic="true"
class="checkbox-filter__result-wrapper">
<span class="checkbox-filter__result">#</span> filter(s) found
</p>
</div>
</div>
{% for category in options %}
<div class="checkbox-filter__checkboxes">
<h4 class="checkbox-filter__category">{{ category.title }}</h4>
{% include '@input' with {
type: 'checkbox',
id: category.value~"-"~modifier,
label: 'Show all',
value: category.value,
modifierWrapper: 'full-width'
} %}
{% for item in category.items %}
{% include '@input' with {
type: 'checkbox',
label: item.label_checkbox,
name: item.checkbox_name,
id: item.checkbox_id,
value: item.checkbox_value
} %}
{% endfor %}
</div>
{% endfor %}
{% endset %}
{% set modalActions %}
<button type="button"
class="button button-primary checkbox-filter__submit modal-close"
data-target="{{ 'modal' ~ modifier }}">Confirm selection
</button>
{% endset %}
<fieldset class="form-item {{ modifier }} {{ stacked ? 'stacked' : '' }} checkbox-filter">
<legend>
<span class="legend-title">{{ label }}</span>
{% if label_optional %}
<span class="label-optional">({{ label_optional }})</span>
{% endif %}
</legend>
{% include '@field-message' with {
"field_message": field_description,
"modifier": null
} %}
<div class="form-columns">
<div class="form-item-column">
{% include "@modal" with {
id: 'modal' ~ modifier,
title: modalTitle,
classes: 'checkbox-filter__modal',
cancelClasses: 'checkbox-filter__close',
modifier: 'fixed-height',
content: modalContent,
actions: modalActions
} %}
<p class="checkbox-filter__count-wrapper hidden">
<strong><span class="checkbox-filter__count">0</span> {{ label_count }}
selected</strong>
</p>
<button type="button"
class="button button-secondary button-small checkbox-filter__open"
aria-controls="{{ 'modal' ~ modifier }}" aria-expanded="false">
Select ...
</button>
</div>
{% apply spaceless %}
<div class="form-item-column">
{% if modifier == 'error' %}
{% include '@field-message' with {
"modifier": "error"
} %}
{% endif %}
{% if modifier == 'success' %}
{% include '@field-message' with {
"modifier": "success"
} %}
{% endif %}
</div>
{% apply spaceless %}
</div>
</fieldset>
<!-- Error rendering component -->
<!-- Error: Unable to find an end tag for Twig.logic.type.apply, expecting one of undefined -->
<!-- Error: Error: Unable to find an end tag for Twig.logic.type.apply, expecting one of undefined
at /var/lib/jenkins/workspace/stijlgids_deploy_prod/node_modules/@frctl/twig/src/adapter.js:156:24
at new Promise (<anonymous>)
at TwigAdapter.render (/var/lib/jenkins/workspace/stijlgids_deploy_prod/node_modules/@frctl/twig/src/adapter.js:134:16)
at ComponentSource._renderVariant (/var/lib/jenkins/workspace/stijlgids_deploy_prod/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
at _renderVariant.next (<anonymous>)
at onFulfilled (/var/lib/jenkins/workspace/stijlgids_deploy_prod/node_modules/co/index.js:65:19) -->
{
"label": "Label checkbox",
"label_optional": "Optional",
"label_count": "value(s)",
"field_description": "Optional field description.<br> --- <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consectetur eveniet illo porro quis sint.",
"field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
"description": "Description checkboxes.",
"options": [
{
"title": "Category 1",
"value": "category_1",
"items": [
{
"label_checkbox": "Checkbox option 419",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-419-with-success",
"checkbox_value": "419"
},
{
"label_checkbox": "Checkbox option 418",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-418-with-success",
"checkbox_value": "418"
},
{
"label_checkbox": "Checkbox option 417",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-417-with-success",
"checkbox_value": "417"
},
{
"label_checkbox": "Checkbox option 416",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-416-with-success",
"checkbox_value": "416"
},
{
"label_checkbox": "Checkbox option 415",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-415-with-success",
"checkbox_value": "415"
},
{
"label_checkbox": "Checkbox option 414",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-414-with-success",
"checkbox_value": "414"
},
{
"label_checkbox": "Checkbox option 413",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-413-with-success",
"checkbox_value": "413"
},
{
"label_checkbox": "Checkbox option 412",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-412-with-success",
"checkbox_value": "412"
},
{
"label_checkbox": "Checkbox option 411",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-411-with-success",
"checkbox_value": "411"
},
{
"label_checkbox": "Checkbox option 410",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-410-with-success",
"checkbox_value": "410"
},
{
"label_checkbox": "Checkbox option 49",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-49-with-success",
"checkbox_value": "49"
},
{
"label_checkbox": "Checkbox option 48",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-48-with-success",
"checkbox_value": "48"
},
{
"label_checkbox": "Checkbox option 47",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-47-with-success",
"checkbox_value": "47"
},
{
"label_checkbox": "Checkbox option 46",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-46-with-success",
"checkbox_value": "46"
},
{
"label_checkbox": "Checkbox option 45",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-45-with-success",
"checkbox_value": "45"
},
{
"label_checkbox": "Checkbox option 44",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-44-with-success",
"checkbox_value": "44"
},
{
"label_checkbox": "Checkbox option 43",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-43-with-success",
"checkbox_value": "43"
},
{
"label_checkbox": "Checkbox option 42",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-42-with-success",
"checkbox_value": "42"
},
{
"label_checkbox": "Checkbox option 41",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-41-with-success",
"checkbox_value": "41"
},
{
"label_checkbox": "Checkbox option 40",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-40-with-success",
"checkbox_value": "40"
}
]
},
{
"title": "Category 2",
"value": "category_2",
"items": [
{
"label_checkbox": "Checkbox option 319",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-319-with-success",
"checkbox_value": "319"
},
{
"label_checkbox": "Checkbox option 318",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-318-with-success",
"checkbox_value": "318"
},
{
"label_checkbox": "Checkbox option 317",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-317-with-success",
"checkbox_value": "317"
},
{
"label_checkbox": "Checkbox option 316",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-316-with-success",
"checkbox_value": "316"
},
{
"label_checkbox": "Checkbox option 315",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-315-with-success",
"checkbox_value": "315"
},
{
"label_checkbox": "Checkbox option 314",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-314-with-success",
"checkbox_value": "314"
},
{
"label_checkbox": "Checkbox option 313",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-313-with-success",
"checkbox_value": "313"
},
{
"label_checkbox": "Checkbox option 312",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-312-with-success",
"checkbox_value": "312"
},
{
"label_checkbox": "Checkbox option 311",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-311-with-success",
"checkbox_value": "311"
},
{
"label_checkbox": "Checkbox option 310",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-310-with-success",
"checkbox_value": "310"
},
{
"label_checkbox": "Checkbox option 39",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-39-with-success",
"checkbox_value": "39"
},
{
"label_checkbox": "Checkbox option 38",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-38-with-success",
"checkbox_value": "38"
},
{
"label_checkbox": "Checkbox option 37",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-37-with-success",
"checkbox_value": "37"
},
{
"label_checkbox": "Checkbox option 36",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-36-with-success",
"checkbox_value": "36"
},
{
"label_checkbox": "Checkbox option 35",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-35-with-success",
"checkbox_value": "35"
},
{
"label_checkbox": "Checkbox option 34",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-34-with-success",
"checkbox_value": "34"
},
{
"label_checkbox": "Checkbox option 33",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-33-with-success",
"checkbox_value": "33"
},
{
"label_checkbox": "Checkbox option 32",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-32-with-success",
"checkbox_value": "32"
},
{
"label_checkbox": "Checkbox option 31",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-31-with-success",
"checkbox_value": "31"
},
{
"label_checkbox": "Checkbox option 30",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-30-with-success",
"checkbox_value": "30"
}
]
},
{
"title": "Category 3",
"value": "category_3",
"items": [
{
"label_checkbox": "Checkbox option 219",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-219-with-success",
"checkbox_value": "219"
},
{
"label_checkbox": "Checkbox option 218",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-218-with-success",
"checkbox_value": "218"
},
{
"label_checkbox": "Checkbox option 217",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-217-with-success",
"checkbox_value": "217"
},
{
"label_checkbox": "Checkbox option 216",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-216-with-success",
"checkbox_value": "216"
},
{
"label_checkbox": "Checkbox option 215",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-215-with-success",
"checkbox_value": "215"
},
{
"label_checkbox": "Checkbox option 214",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-214-with-success",
"checkbox_value": "214"
},
{
"label_checkbox": "Checkbox option 213",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-213-with-success",
"checkbox_value": "213"
},
{
"label_checkbox": "Checkbox option 212",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-212-with-success",
"checkbox_value": "212"
},
{
"label_checkbox": "Checkbox option 211",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-211-with-success",
"checkbox_value": "211"
},
{
"label_checkbox": "Checkbox option 210",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-210-with-success",
"checkbox_value": "210"
},
{
"label_checkbox": "Checkbox option 29",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-29-with-success",
"checkbox_value": "29"
},
{
"label_checkbox": "Checkbox option 28",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-28-with-success",
"checkbox_value": "28"
},
{
"label_checkbox": "Checkbox option 27",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-27-with-success",
"checkbox_value": "27"
},
{
"label_checkbox": "Checkbox option 26",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-26-with-success",
"checkbox_value": "26"
},
{
"label_checkbox": "Checkbox option 25",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-25-with-success",
"checkbox_value": "25"
},
{
"label_checkbox": "Checkbox option 24",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-24-with-success",
"checkbox_value": "24"
},
{
"label_checkbox": "Checkbox option 23",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-23-with-success",
"checkbox_value": "23"
},
{
"label_checkbox": "Checkbox option 22",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-22-with-success",
"checkbox_value": "22"
},
{
"label_checkbox": "Checkbox option 21",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-21-with-success",
"checkbox_value": "21"
},
{
"label_checkbox": "Checkbox option 20",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-20-with-success",
"checkbox_value": "20"
}
]
},
{
"title": "Category 4",
"value": "category_4",
"items": [
{
"label_checkbox": "Checkbox option 119",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-119-with-success",
"checkbox_value": "119"
},
{
"label_checkbox": "Checkbox option 118",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-118-with-success",
"checkbox_value": "118"
},
{
"label_checkbox": "Checkbox option 117",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-117-with-success",
"checkbox_value": "117"
},
{
"label_checkbox": "Checkbox option 116",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-116-with-success",
"checkbox_value": "116"
},
{
"label_checkbox": "Checkbox option 115",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-115-with-success",
"checkbox_value": "115"
},
{
"label_checkbox": "Checkbox option 114",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-114-with-success",
"checkbox_value": "114"
},
{
"label_checkbox": "Checkbox option 113",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-113-with-success",
"checkbox_value": "113"
},
{
"label_checkbox": "Checkbox option 112",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-112-with-success",
"checkbox_value": "112"
},
{
"label_checkbox": "Checkbox option 111",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-111-with-success",
"checkbox_value": "111"
},
{
"label_checkbox": "Checkbox option 110",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-110-with-success",
"checkbox_value": "110"
},
{
"label_checkbox": "Checkbox option 19",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-19-with-success",
"checkbox_value": "19"
},
{
"label_checkbox": "Checkbox option 18",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-18-with-success",
"checkbox_value": "18"
},
{
"label_checkbox": "Checkbox option 17",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-17-with-success",
"checkbox_value": "17"
},
{
"label_checkbox": "Checkbox option 16",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-16-with-success",
"checkbox_value": "16"
},
{
"label_checkbox": "Checkbox option 15",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-15-with-success",
"checkbox_value": "15"
},
{
"label_checkbox": "Checkbox option 14",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-14-with-success",
"checkbox_value": "14"
},
{
"label_checkbox": "Checkbox option 13",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-13-with-success",
"checkbox_value": "13"
},
{
"label_checkbox": "Checkbox option 12",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-12-with-success",
"checkbox_value": "12"
},
{
"label_checkbox": "Checkbox option 11",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-11-with-success",
"checkbox_value": "11"
},
{
"label_checkbox": "Checkbox option 10",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-10-with-success",
"checkbox_value": "10"
}
]
},
{
"title": "Category 5",
"value": "category_5",
"items": [
{
"label_checkbox": "Checkbox option 019",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-019-with-success",
"checkbox_value": "019"
},
{
"label_checkbox": "Checkbox option 018",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-018-with-success",
"checkbox_value": "018"
},
{
"label_checkbox": "Checkbox option 017",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-017-with-success",
"checkbox_value": "017"
},
{
"label_checkbox": "Checkbox option 016",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-016-with-success",
"checkbox_value": "016"
},
{
"label_checkbox": "Checkbox option 015",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-015-with-success",
"checkbox_value": "015"
},
{
"label_checkbox": "Checkbox option 014",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-014-with-success",
"checkbox_value": "014"
},
{
"label_checkbox": "Checkbox option 013",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-013-with-success",
"checkbox_value": "013"
},
{
"label_checkbox": "Checkbox option 012",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-012-with-success",
"checkbox_value": "012"
},
{
"label_checkbox": "Checkbox option 011",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-011-with-success",
"checkbox_value": "011"
},
{
"label_checkbox": "Checkbox option 010",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-010-with-success",
"checkbox_value": "010"
},
{
"label_checkbox": "Checkbox option 09",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-09-with-success",
"checkbox_value": "09"
},
{
"label_checkbox": "Checkbox option 08",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-08-with-success",
"checkbox_value": "08"
},
{
"label_checkbox": "Checkbox option 07",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-07-with-success",
"checkbox_value": "07"
},
{
"label_checkbox": "Checkbox option 06",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-06-with-success",
"checkbox_value": "06"
},
{
"label_checkbox": "Checkbox option 05",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-05-with-success",
"checkbox_value": "05"
},
{
"label_checkbox": "Checkbox option 04",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-04-with-success",
"checkbox_value": "04"
},
{
"label_checkbox": "Checkbox option 03",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-03-with-success",
"checkbox_value": "03"
},
{
"label_checkbox": "Checkbox option 02",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-02-with-success",
"checkbox_value": "02"
},
{
"label_checkbox": "Checkbox option 01",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-01-with-success",
"checkbox_value": "01"
},
{
"label_checkbox": "Checkbox option 00",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-00-with-success",
"checkbox_value": "00"
}
]
}
],
"modifier": "success"
}
.checkbox-filter {
.checkbox-filter__count-wrapper {
&.hidden {
@extend %visually-hidden
}
em {
font-style: normal;
}
}
.checkbox-filter__result-placeholder {
&.hidden {
display: none;
}
}
}
.checkbox-filter__modal {
.tag {
margin: 0 .5rem .5rem 0;
}
.checkbox-filter__filter__search-wrapper {
max-width: 30rem;
@include desktop {
display: flex;
}
input,
p {
margin-bottom: 0;
}
}
.checkbox-filter__filter {
margin-bottom: 1rem;
}
.checkbox-filter__result-wrapper {
&.hidden {
display: none;
}
em {
font-style: normal;
}
@include desktop {
margin-left: 1rem;
line-height: 2.4rem;
white-space: nowrap;
}
}
.checkbox-filter__checkboxes {
display: flex;
flex: 1;
flex-wrap: wrap;
> .checkbox {
flex-basis: 320px;
padding-right: 1rem;
}
> .checkbox.full-width,
> .checkbox-filter__category {
right: 0;
left: 0;
flex-basis: 100%;
width: 100%;
margin-right: auto;
margin-left: auto;
}
> [hidden] {
display: none;
}
& + .checkbox-filter__checkboxes {
margin-top: 1rem;
}
}
.checkbox-filter__selected {
margin-bottom: .7rem;
}
}
'use strict';
(function () {
if (!CheckboxFilter) { // eslint-disable-line no-undef
return;
}
const selected = document.querySelectorAll('.checkbox-filter');
for (let i = selected.length; i--;) {
new CheckboxFilter(selected[i], {hiddenTagText: 'Remove tag'}); // eslint-disable-line no-undef
}
})();
'use strict';
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
}
else {
if (typeof exports === 'object') {
module.exports = factory();
}
else {
root.CheckboxFilter = factory();
}
}
})(this || window, function () {
return function (elem, options) {
if (!options) {
options = {};
}
/**
* Filter input field.
* @type {Element}
*/
const filterfield = elem.querySelector(
options.filterfield || '.checkbox-filter__filter'
);
/**
* List of checkboxwrappers, each containing a checkbox and a label.
* @type {NodeList|Array}
*/
const checkboxes =
elem.querySelectorAll(options.checkboxes || 'div.checkbox') || [];
/**
* Container to display the selected items.
* @type {Element}
*/
const selectedContainer = elem.querySelector(
options.selectedContainer || '.checkbox-filter__selected'
);
/**
* Container for the checkboxes.
* @type {Element}
*/
const checkboxContainers = elem.querySelectorAll(
options.checkboxContainers || '.checkbox-filter__checkboxes'
);
/**
* Button to trigger opening the modal.
* @type {Element}
*/
const openBtn = elem.querySelector(
options.openBtn || '.checkbox-filter__open'
);
/**
* Button to confirm the selection and close the modal.
* @type {Element}
*/
const submitBtn = elem.querySelector(
options.submitBtn || '.checkbox-filter__submit'
);
/**
* A list of elements to trigger closing the modal.
* At least one must have the button role.
* @type {NodeList}
*/
const closeBtns = elem.querySelectorAll(
options.closeBtns || '.checkbox-filter__close'
);
/**
* Container to display the number of search results.
* @type {Element}
*/
const resultSpan = elem.querySelector(
options.resultSpan || '.checkbox-filter__result'
);
/**
* Container wrapping the countspan.
* @type {Element}
*/
const countSpanWrapper = elem.querySelector(
options.countSpanWrapper || '.checkbox-filter__count-wrapper'
);
/**
* Container to display the number of selected values.
* @type {Element}
*/
const countSpan = elem.querySelector(
options.countSpan || '.checkbox-filter__count'
);
/**
* Store the checked checkboxes prior to making changes.
* @type {Array}
*/
let selectedFilters = [];
/**
* Check to prevent the class from making selected item tags.
* @type {boolean}
*/
const makeTags = (() => {
if (options.makeTags === false) {
return options.makeTags;
}
return true;
})();
/**
* Filter the displayed checkboxes.
* @param {boolean} clear Clear the filtervalue if true.
*/
const filter = clear => {
if (!filterfield) {
return;
}
if (clear) {
filterfield.value = '';
}
let count = 0;
[].slice.call(checkboxContainers).forEach(container => {
container.style.display = 'none';
});
checkboxLoop(({checkboxWrapper, checkbox, label}) => {
if (
!label ||
label.textContent
.toUpperCase()
.indexOf(filterfield.value.toUpperCase()) === -1
) {
checkboxWrapper.setAttribute('hidden', 'true');
checkbox.setAttribute('hidden', 'true');
}
else {
checkboxWrapper.removeAttribute('hidden');
checkbox.removeAttribute('hidden');
count++;
}
});
[].slice.call(checkboxContainers).forEach(container => {
let displayedCount = container.querySelectorAll(`${options.checkboxes || 'div.checkbox'}:not([hidden])`).length;
if (displayedCount) {
container.style.display = '';
}
});
updateResult(count);
};
/**
* Make a tag.
* @param {Element} checkbox Input type checkbox.
* @param {Element} label Label for the input type checkbox.
* @return {Element} A gent styleguide tag component.
*/
const makeTag = (checkbox, label) => {
let tag = document.createElement('span');
tag.className = 'tag filter';
tag.textContent = label.textContent;
tag.setAttribute('data-value', checkbox.value);
let button = document.createElement('button');
button.type = 'button';
button.innerHTML = `<span class="visually-hidden">${options.hiddenTagText ||
'Remove tag'}</span>`;
button.addEventListener('click', () => {
checkbox.checked = false;
selectedContainer.removeChild(tag);
if (typeof options.onRemoveTag === 'function') {
options.onRemoveTag(checkbox, tag);
}
});
tag.appendChild(button);
return tag;
};
/**
* Remove a tag from the selectedContainer.
* @param {Element} checkbox Input type checkbox.
*/
const removeTag = checkbox => {
let test = selectedContainer.querySelectorAll('.filter');
for (let i = test.length; i--;) {
if (test[i].getAttribute('data-value') === checkbox.value) {
selectedContainer.removeChild(test[i]);
}
}
};
/**
* Update the count display.
*/
const updateCount = () => {
const selectedCount = selectedContainer.children.length;
if (countSpan) {
countSpan.textContent = selectedCount;
}
if (countSpanWrapper) {
if (selectedCount > 0) {
countSpanWrapper.classList.remove('hidden');
}
else {
countSpanWrapper.classList.add('hidden');
}
}
};
/**
* Update the result display.
* @param {number} resultCount The number of results after filter.
*/
const updateResult = (resultCount) => {
if (resultSpan) {
resultSpan.textContent = resultCount;
}
};
/**
* Loop over all checkboxes and execute a callback for each iteration.
* @param {function} next The callback function.
*/
const checkboxLoop = next => {
for (let i = checkboxes.length; i--;) {
let checkboxWrapper = checkboxes[i];
let checkbox = checkboxWrapper.querySelector('input[type=checkbox]');
let label = checkboxWrapper.querySelector('label');
// Sometimes the input element isn't rendered at this point.
if (checkbox && label) {
next({checkboxWrapper, checkbox, label});
}
}
};
/**
* Reset the component to it's stored value.
*/
const reset = () => {
if (makeTags) {
selectedContainer.innerHTML = '';
}
checkboxLoop(({checkbox, label}) => {
if (selectedFilters.indexOf(checkbox) !== -1) {
checkbox.checked = true;
}
else {
checkbox.checked = false;
}
if (checkbox.checked && makeTags) {
selectedContainer.appendChild(makeTag(checkbox, label));
}
});
};
/**
* Initialise the component.
*/
const init = () => {
selectedFilters = [];
checkboxLoop(({checkbox, label}) => {
if (checkbox.checked && !checkbox.indeterminate && makeTags) {
selectedContainer.appendChild(makeTag(checkbox, label));
}
});
updateCount();
filter(true);
};
/**
* Add all events.
*/
const addEvents = () => {
// Make sure the filter method is not repeated while typing.
if (filterfield) {
let filterTimeOut = null;
filterfield.addEventListener('input', () => {
if (filterTimeOut) {
clearTimeout(filterTimeOut);
}
filterTimeOut = setTimeout(filter, 200);
});
}
// Add events for all checkboxes.
checkboxLoop(({checkbox, label}) => {
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
if (makeTags) {
selectedContainer.appendChild(makeTag(checkbox, label));
}
}
else {
if (makeTags) {
removeTag(checkbox);
}
}
});
});
// Enable opening the modal.
if (openBtn) {
openBtn.addEventListener('click', (e) => {
selectedFilters = [];
let count = 0;
checkboxLoop(({checkbox}) => {
if (checkbox.checked) {
selectedFilters.push(checkbox);
}
count++;
});
updateResult(count);
document.addEventListener('keydown', handleKeyboardInput);
});
}
// Add close events to all closeBtns.
if (closeBtns) {
for (let i = closeBtns.length; i--;) {
closeBtns[i].addEventListener('click', () => {
reset();
updateCount();
document.removeEventListener('keydown', handleKeyboardInput);
});
}
}
// Update selectedFilters and close.
if (submitBtn) {
submitBtn.addEventListener('click', () => {
updateCount();
document.removeEventListener('keydown', handleKeyboardInput);
});
}
};
/**
* Handle keyboard input
* @param {object} e event
*/
const handleKeyboardInput = e => {
let keyCode = e.keyCode || e.which;
if (keyCode === 27) {
e.preventDefault();
reset();
updateCount();
}
};
init();
addEvents();
return {};
};
});