filterDegreePrograms (component)

Description

This blueprint is based on the blueprint of Veams.

Requirements

• Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/filter-degree-programs

Fields

filter-degree-programs.hbs

Settings

Content

SASS

Variables

There are multiple variables which you can change:

Modifier Classes

There are modifier classes you can add to c-filter-degree-programs:

filter-degree-programs.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"filterDegreeProgramsContextClass": "default",
				"filterDegreeProgramsClasses": ""
			},
			"content": {
				"filterbox": [
					{
						"settings": {
							"filterid": "fl_1",
							"filtertyp": "onecheckbox"
						},
						"content": {
							"filtertitle": "Grundständige Studiengänge",
							"filterselecttext": "Studiengang wählen",
							"filterdropdownrole": "Filterbereich für grundständige Studiengangwahl",
							"filterdropdown": [
								{
									"content": {
										"fieldsets": [
											{
												"settings": {
													"fieldsetClasses": "is-small",
													"legendClasses": "is-col-mobile-p-12"
												},
												"content": {
													"rows": [
														{
															"settings": {
																"rowClasses": "filter-degree-programs__checkboxarea"
															},
															"content": {
																"cols": [
																	{
																		"settings": {
																			"colClasses": "",
																			"typeOf": "checkbox",
																			"required": false,
																			"inputClasses": "is-checkboxes"
																		},
																		"content": {
																			"checkboxes": [
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_all",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "checked",
																								"attrValue": "checked"
																							},
																							{
																								"attrKey": "value",
																								"attrValue": "1_all"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Alle auswählen"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_01",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "value",
																								"attrValue": "1_01"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Bachelor"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_02",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "value",
																								"attrValue": "1_02"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Master"
																					}
																				}
																			]
																		}
																	}
																]
															}
														}
													]
												}
											}
										]
									}
								},
								{
									"content": {
										"submitbutton": {
											"settings": {
												"buttonid": "fl_b_1"
											},
											"content": {
												"buttontext": "Anwenden"
											}
										}
									}
								}
							]
						}
					},
					{
						"settings": {
							"filterid": "fl_2",
							"filtertyp": "onecheckbox"
						},
						"content": {
							"filtertitle": "Lehramtstudiengänge",
							"filterselecttext": "Studiengang wählen",
							"filterdropdownrole": "Filterbereich für Lehramtstudiengang",
							"filterdropdown": [
								{
									"content": {
										"fieldsets": [
											{
												"settings": {
													"fieldsetClasses": "is-small",
													"legendClasses": "is-col-mobile-p-12"
												},
												"content": {
													"rows": [
														{
															"settings": {
																"rowClasses": "filter-degree-programs__checkboxarea"
															},
															"content": {
																"cols": [
																	{
																		"settings": {
																			"colClasses": "",
																			"typeOf": "checkbox",
																			"required": false,
																			"inputClasses": "is-checkboxes"
																		},
																		"content": {
																			"checkboxes": [
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_2_all",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "checked",
																								"attrValue": "checked"
																							},
																							{
																								"attrKey": "value",
																								"attrValue": "2_all"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Alle auswählen"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_2_01",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "value",
																								"attrValue": "2_01"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Lehramt Grundschule"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_2_02",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "value",
																								"attrValue": "2_02"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Lehramt Mittelschule"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_2_03",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "value",
																								"attrValue": "2_03"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Lehramt Realschule"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_2_04",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "value",
																								"attrValue": "2_04"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Lehramt Gymnasium"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "is-empty",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_2_05",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "value",
																								"attrValue": "2_05"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Lehramt Sonderpädagogoik"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_2_06",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "value",
																								"attrValue": "2_06"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Lehramt an Beruflichen Schulen"
																					}
																				}
																			]
																		}
																	}
																]
															}
														}
													]
												}
											}
										]
									}
								},
								{
									"content": {
										"submitbutton": {
											"settings": {
												"buttonid": "fl_b_2"
											},
											"content": {
												"buttontext": "Anwenden"
											}
										}
									}
								}
							]
						}
					},
					{
						"settings": {
							"filterid": "fl_3",
							"filtertyp": "onecheckbox"
						},
						"content": {
							"filtertitle": "Fachrichtung",
							"filterselecttext": "Fachrichtung wählen",
							"filterdropdownrole": "Filterbereich für Fachrichtung",
							"filterdropdown": [
								{
									"content": {
										"fieldsets": [
											{
												"settings": {
													"fieldsetClasses": "is-small",
													"legendClasses": "is-col-mobile-p-12"
												},
												"content": {
													"rows": [
														{
															"settings": {
																"rowClasses": "filter-degree-programs__checkboxarea"
															},
															"content": {
																"cols": [
																	{
																		"settings": {
																			"colClasses": "",
																			"typeOf": "checkbox",
																			"required": false,
																			"inputClasses": "is-checkboxes"
																		},
																		"content": {
																			"checkboxes": [
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_3_all",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "checked",
																								"attrValue": "checked"
																							},
																							{
																								"attrKey": "value",
																								"attrValue": "3_all"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Alle auswählen"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_3_01",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "value",
																								"attrValue": "3_01"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Mathematik und Naturwissenschaften"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_3_02",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "value",
																								"attrValue": "3_02"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Kunst und Kunstwissenschaft"
																					}
																				}
																			]
																		}
																	}
																]
															}
														}
													]
												}
											}
										]
									}
								},
								{
									"content": {
										"submitbutton": {
											"settings": {
												"buttonid": "fl_b_3"
											},
											"content": {
												"buttontext": "Anwenden"
											}
										}
									}
								}
							]
						}
					},
					{
						"settings": {
							"filterid": "fl_4",
							"filtertyp": "onecheckbox"
						},
						"content": {
							"filtertitle": "Fakultät",
							"filterselecttext": "Fakultät wählen",
							"filterdropdownrole": "Filterbereich für Fakultät",
							"filterdropdown": [
								{
									"content": {
										"fieldsets": [
											{
												"settings": {
													"fieldsetClasses": "is-small",
													"legendClasses": "is-col-mobile-p-12"
												},
												"content": {
													"rows": [
														{
															"settings": {
																"rowClasses": "filter-degree-programs__checkboxarea"
															},
															"content": {
																"cols": [
																	{
																		"settings": {
																			"colClasses": "",
																			"typeOf": "checkbox",
																			"required": false,
																			"inputClasses": "is-checkboxes"
																		},
																		"content": {
																			"checkboxes": [
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_4_all",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "checked",
																								"attrValue": "checked"
																							},
																							{
																								"attrKey": "value",
																								"attrValue": "4_all"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Alle auswählen"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_4_01",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "value",
																								"attrValue": "4_01"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Fakultät für Physik"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_4_02",
																						"labelClasses": "",
																						"attributes": [
																							{
																								"attrKey": "value",
																								"attrValue": "4_02"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-degree-programs-checkbox"
																							}
																						],
																						"labelAttributes": []
																					},
																					"content": {
																						"label": "Fakultät für Chemie"
																					}
																				}
																			]
																		}
																	}
																]
															}
														}
													]
												}
											}
										]
									}
								},
								{
									"content": {
										"submitbutton": {
											"settings": {
												"buttonid": "fl_b_4"
											},
											"content": {
												"buttontext": "Anwenden"
											}
										}
									}
								}
							]
						}
					}
				],
				"filtersearch": [
					{
						"content": {
							"fieldsets": [
								{
									"settings": {
										"fieldsetClasses": "filter-degree-programs__search",
										"legendClasses": ""
									},
									"content": {
										"rows": [
											{
												"settings": {
													"rowClasses": "filter-degree-programs__search-area"
												},
												"content": {
													"cols": [
														{
															"settings": {
																"colClasses": "",
																"labelClasses": "filter-degree-programs__title",
																"id": "filter-degree-programs-search",
																"required": false,
																"type": "text",
																"typeOf": "input"
															},
															"content": {
																"label": "Freitextsuche"
															}
														}
													]
												}
											}
										]
									}
								}
							]
						}
					}
				],
				"aktivFilterClose": "Filter zurücksetzen",
				"aktivFilterTitle": "Ihre Filterauswahl:",
				"resultnumber": "XX",
				"resulttext": "Ergebnisse",
				"resultfiltertext": "zur getroffenen Filterauswahl"
			}
		}
	}
}

filter-degree-programs.js

/**
 * Description of FilterDegreePrograms.
 * Class properties and decorators are supported.
 *
 * @module FilterDegreePrograms
 * @version v1.0.0
 *
 * @author Ralf Arnert
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';

class FilterDegreePrograms extends Component {
	/**
	 * Class Properties
	 */
	$el = $(this.el);

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			selectors: {},
			classes: {
				showFilter: 'is-showFilter',
				hideFilter: 'is-hideFilter',
				activeFilterItem: 'is-active',
				showFilteredInfo: 'is-filtered',
				showselectedFilter: 'is-showselectedFilter',
				hideselectedFilter: 'is-hideselectedFilter',
				notvisibleFilter: 'is-notvisibleFilter',
				noentriesFilter: 'is-noentriesFilter',
				checkInputAfterChange: 'is-inputchange'
			},
			filterArea: [],
			selFilterButtons: [],
			filterZones: [],
			submitFilterButton: [],
			delFilterButton: [],
			selCheckboxes: [],
			activeFilterZone: '',
			buttonPlaceholderArea: '',
			resultfiltertextArea: []
		};

		super(obj, options);
	}

	/**
	 * Event handling
	 */

	// Local Handlers
	get events() {}

	/**
	 * Bind events
	 *
	 */
	bindEvents() {
		this.options.filterArea = document.querySelector(
			'[data-js-item="js-filter-degree-programs-area"]'
		);

		this.options.selFilterButtons = [].slice.call(
			this.options.filterArea.querySelectorAll(
				'[data-js-item="js-filter-degree-programs-select"]'
			)
		);
		this.options.filterZones = [].slice.call(
			this.options.filterArea.querySelectorAll(
				'[data-js-item="js-filter-degree-programs-zone"]'
			)
		);
		this.options.selFilterButtons.forEach(opt => {
			opt.addEventListener('click', () => {
				this.toogleFilter(opt);
			});
		});

		// Click-Handler for cosing the FilterZones per Klick outside of the active filter
		document.addEventListener('click', event => {
			const target = event.target;
			let isElementinFilterArea = this.checkClickPosition(target);
			if (isElementinFilterArea == 0) {
				this.closeFilterZones();
			}
		});

		// Keydown-Handler for closing the Filter per esc
		document.addEventListener('keydown', event => {
			const keyCode = event.which || event.keyCode;
			switch (keyCode) {
				// esc key
				case 27:
					this.closeFilterZones();
					break;
			}
		});

		//Changeeventhandling for the Checkbox-input in the filterarea
		this.options.selCheckboxes = [].slice.call(
			this.options.filterArea.querySelectorAll(
				'[data-js-item="js-filter-degree-programs-checkbox"]'
			)
		);
		if (this.options.selCheckboxes.length > 0) {
			this.options.selCheckboxes.forEach(checkbox => {
				checkbox.addEventListener('keydown', event => {
					const keyCode = event.which || event.keyCode;
					switch (keyCode) {
						// esc key
						case 13:
							if (checkbox.checked) {
								checkbox.checked = false;
							} else {
								checkbox.checked = true;
							}
							let jq_oneFilterZone = $(checkbox).closest(
								'[data-js-item="js-filter-degree-programs-zone"]'
							);
							this.resetCheckboxesOnClick(jq_oneFilterZone[0], checkbox);
							break;
					}
				});
			});
			this.options.selCheckboxes.forEach(checkbox => {
				checkbox.addEventListener('change', event => {
					if (checkbox.checked) {
						let jq_oneFilterZone = $(checkbox).closest(
							'[data-js-item="js-filter-degree-programs-zone"]'
						);
						this.resetCheckboxesOnClick(jq_oneFilterZone[0], checkbox);
					}
				});
			});
		}

		//Clickeventhandling for the Submit-Buttons in the filterarea
		this.options.submitFilterButton = [].slice.call(
			this.options.filterArea.querySelectorAll(
				'[data-js-item="js-filter-degree-programs-submitButton"]'
			)
		);
		if (this.options.submitFilterButton.length > 0) {
			this.options.submitFilterButton.forEach(submitbutton => {
				submitbutton.addEventListener('click', event => {
					let jq_oneFilterZone = $(submitbutton).closest(
						'[data-js-item="js-filter-degree-programs-zone"]'
					);
					let reload = this.checkFilterItems(jq_oneFilterZone[0]);
					if (reload) {
						this.reloadEventList();
					}
				});
			});
		}

		//Clickeventhandling for the Delete-Filter-Button in the filterarea
		this.options.delFilterButton = document.querySelector(
			'[data-js-item="js-filter-degree-programs-filterDeleteButton"]'
		);
		this.options.delFilterButton.addEventListener('click', event => {
			this.resetAllAktivFilterItems();
			this.manageActiveFilterAreaView();
			this.closeFilterZones();
			this.reloadEventList();
		});

		this.options.activeFilterZone = document.querySelector(
			'[data-js-item="js-filter-degree-programs-activeFilterZone"]'
		);
		this.options.buttonPlaceholderArea = document.querySelector(
			'[data-js-item="js-filter-degree-programs-buttonPlaceholder"]'
		);
	}

	didMount() {
		//console.log("Component FilterDegreePrograms mounted!");
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}

	/** =================================================
	 * CUSTOM METHODS
	 * ================================================= */

	/**
	 * Reset all checkboxelements under a special ParentElement without the checkedElement
	 *
	 * @param {Object} oneFilterZone - FilterZone in which all the specific checkboxes are included
	 * @param {Object} checkedCheckbox - Checkbox-Object which will not loose the checked-Attribute
	 *
	 */
	resetCheckboxesOnClick(oneFilterZone, checkedCheckbox) {
		let checkedCheckboxId = checkedCheckbox.id;
		if (checkedCheckboxId.indexOf('_all') >= 0) {
			let checkboxesInFilterZone = [].slice.call(
				oneFilterZone.querySelectorAll('input[type=checkbox]')
			);
			checkboxesInFilterZone.forEach(checkbox => {
				if (checkedCheckbox.id != checkbox.id && $(checkbox).prop('checked')) {
					$(checkbox).prop('checked', false);
				}
			});
		} else {
			if (oneFilterZone.hasAttribute('data-js-id')) {
				let idCheckboxAllChecked = oneFilterZone.getAttribute('data-js-id') + '_all';
				let checkboxAllChecked = document.getElementById(idCheckboxAllChecked);
				if (checkboxAllChecked !== null && $(checkboxAllChecked).prop('checked')) {
					$(checkboxAllChecked).prop('checked', false);
				}
			}
		}
	}

	/**
	 * Check the clicked Element if it is in one of the filter Areas
	 *
	 * @param {Object} target - Event object
	 *
	 * @return {Number} - How often the clicked element was found in the filter areas 0= no clicked element found in the filterelements, >0 element found
	 *
	 */
	checkClickPosition(target) {
		let isinFilter = 0;
		if (this.options.filterArea.contains(target)) {
			if (this.options.selFilterButtons.indexOf(target) == -1) {
				this.options.filterZones.forEach(opt => {
					if (opt.contains(target)) {
						isinFilter++;
					}
				});
			} else {
				isinFilter++;
			}
		}
		return isinFilter;
	}

	/**
	 * Handle the toogle of the clicked filter
	 *
	 * @param {Object} oneSelFilterButton- Element selFilterButton for a specific filterZone
	 */
	toogleFilter(oneSelFilterButton) {
		let jq_oneFilterZone = $(oneSelFilterButton).closest(
			'[data-js-item="js-filter-degree-programs-zone"]'
		);
		if (jq_oneFilterZone.hasClass(this.options.classes.showFilter)) {
			jq_oneFilterZone.removeClass(this.options.classes.showFilter);
			jq_oneFilterZone.addClass(this.options.classes.hideFilter);
			this.setAriaExpanded(oneSelFilterButton, false);
		} else {
			this.closeFilterZones();
			jq_oneFilterZone.removeClass(this.options.classes.hideFilter);
			jq_oneFilterZone.addClass(this.options.classes.showFilter);
			this.setAriaExpanded(oneSelFilterButton, true);
		}
	}

	/**
	 * Close all dropdowns of the clicked filterarea
	 */
	closeFilterZones() {
		this.options.filterZones.forEach(oneFilterZone => {
			let jq_oneFilterZone = $(oneFilterZone);
			if (jq_oneFilterZone.hasClass(this.options.classes.showFilter)) {
				jq_oneFilterZone.removeClass(this.options.classes.showFilter);
				jq_oneFilterZone.addClass(this.options.classes.hideFilter);
				let oneSelFilterButton = oneFilterZone.querySelector(
					'[data-js-item="js-filter-degree-programs-select"]'
				);
				this.setAriaExpanded(oneSelFilterButton, false);
				this.unfillFilterItems(oneFilterZone);
				this.fillFilterItems(oneFilterZone);
			}
		});
	}

	/**
	 * Change aria-expanded Attribute for the Filter Select
	 *
	 * @param {Object} filterElement - the specific filter element z.B. oneSelFilterButton
	 * @param {Boolean} ariaexpandedstatus - The Status of the aris-expanded-Attribute 'false' or 'true'
	 *
	 */
	setAriaExpanded(filterElement, ariaexpandedstatus) {
		filterElement.setAttribute('aria-expanded', ariaexpandedstatus);
	}

	/**
	 * Change Filteritems depending on there filtertyp to unchecked or empty
	 *
	 * @param {Object} oneFilterZone - The Element (Filterzone) in which the Input-Items should get the unchecked , unselected or empty status.
	 *
	 */
	unfillFilterItems(oneFilterZone) {
		if (
			oneFilterZone.hasAttribute('data-js-filtertyp') &&
			oneFilterZone.hasAttribute('data-js-id')
		) {
			let filtertyp = oneFilterZone.getAttribute('data-js-filtertyp');
			switch (filtertyp.toUpperCase()) {
				case 'ONECHECKBOX': {
					let arrayItemsUnfill = [].slice.call(
						oneFilterZone.querySelectorAll('input[type=checkbox]:checked')
					);
					arrayItemsUnfill.forEach(filterItem => {
						$(filterItem).prop('checked', false);
					});
					break;
				}
				default: {
					//statements;
					break;
				}
			}
		}
	}

	/**
	 * Change Filteritems depending on there filtertyp and the active filter to checked, selected or filled with content
	 *
	 * @param {Object} oneFilterZone - The Element (Filterarea) in which the Input-Items should get the checked , elected or filled with content status.
	 *
	 */
	fillFilterItems(oneFilterZone) {
		if (
			oneFilterZone.hasAttribute('data-js-filtertyp') &&
			oneFilterZone.hasAttribute('data-js-id')
		) {
			let filtertyp = oneFilterZone.getAttribute('data-js-filtertyp');
			let filterid = oneFilterZone.getAttribute('data-js-id');
			let activeFilterItems = this.getActiveFilterItems(filterid);

			switch (filtertyp.toUpperCase()) {
				case 'ONECHECKBOX': {
					if (activeFilterItems.length > 0) {
						activeFilterItems.forEach(oneActiveFilterItem => {
							let filterZoneItemFill = oneFilterZone.querySelector(
								'input[id=' +
									oneActiveFilterItem.getAttribute('data-js-itemId') +
									']'
							);
							$(filterZoneItemFill).prop('checked', true);
						});
					} else {
						let filterZoneItemFill = oneFilterZone.querySelector(
							'input[id=' + filterid + '_all]'
						);
						$(filterZoneItemFill).prop('checked', true);
					}
					break;
				}
				default: {
					//statements;
					break;
				}
			}
		}
	}

	/**
	 * Check for the specific Filter the Items
	 *
	 * @param {Object} oneFilterZone - the specific filter zone element
	 *
	 * @return {Boolean} reloadList - True or false if a reload with new Parameters for the List is necessary
	 *
	 */
	checkFilterItems(oneFilterZone) {
		let reloadlist = false;
		if (oneFilterZone.hasAttribute('data-js-filtertyp')) {
			let filtertyp = oneFilterZone.getAttribute('data-js-filtertyp');
			switch (filtertyp.toUpperCase()) {
				case 'ONECHECKBOX': {
					reloadlist = this.checkCheckboxItems(oneFilterZone);
					this.manageActiveFilterAreaView();
					this.closeFilterZones();
					break;
				}
				default: {
					//statements;
					break;
				}
			}
		}
		return reloadlist;
	}

	/**
	 * Check for the specific checkboxes of the filter area
	 *
	 * @param {Object} oneFilterZone - the specific filter zone element
	 *
	 * @return {Boolean} reloadList - True or false if a reload with new Parameters for the List is necessary
	 */
	checkCheckboxItems(oneFilterZone) {
		let reloadList = false;
		if (oneFilterZone.hasAttribute('data-js-id')) {
			reloadList = true;
			let checkboxesCheckedInFilter = [].slice.call(
				oneFilterZone.querySelectorAll('input[type=checkbox]:checked')
			);
			let filterZoneId = oneFilterZone.getAttribute('data-js-id');
			let filterCheckedAllId = filterZoneId + '_all';
			// get active checked Items
			let aktFilterItemsForFilterZone = this.getActiveFilterItems(filterZoneId);
			if (
				checkboxesCheckedInFilter.length == 0 ||
				(checkboxesCheckedInFilter.length == 1 &&
					checkboxesCheckedInFilter[0].id == filterCheckedAllId)
			) {
				$(oneFilterZone.querySelector('[id=' + filterCheckedAllId + ']')).prop(
					'checked',
					true
				);
				if (aktFilterItemsForFilterZone.length > 0) {
					this.deleteAktivFilterItems(aktFilterItemsForFilterZone);
				} else {
					reloadList = false;
				}
			} else {
				let revcheckboxesCheckedInFilter = checkboxesCheckedInFilter.reverse();
				this.deleteAktivFilterItems(aktFilterItemsForFilterZone);

				revcheckboxesCheckedInFilter.forEach(checkbox => {
					let activeFilterZonehtml = this.options.activeFilterZone.innerHTML;
					let buttonPlaceholder = this.options.buttonPlaceholderArea.querySelector(
						'[data-js-item="js-filter-degree-programs-oneFilterButton"]'
					);
					buttonPlaceholder.setAttribute('data-js-itemId', checkbox.id);
					buttonPlaceholder.setAttribute('data-js-zoneId', filterZoneId);
					let activeFilterItemName = checkbox.parentNode.querySelector(
						'label[for=' + checkbox.id + ']'
					).innerHTML;
					buttonPlaceholder.innerHTML = activeFilterItemName;
					this.options.activeFilterZone.innerHTML =
						this.options.buttonPlaceholderArea.innerHTML + activeFilterZonehtml;
				});
			}
		}
		return reloadList;
	}

	/**
	 * Get the active filter for a special filterarea
	 *
	 * @param {String} filterZoneId - the specific filterareaid or 'all'
	 *
	 * @return {Array} - activeFilterZone Array with active Filter Elements
	 */
	getActiveFilterItems(filterZoneId) {
		filterZoneId = typeof filterZoneId !== 'undefined' ? filterZoneId : 'all';
		let activeFilterItems = [];
		if (filterZoneId == 'all') {
			activeFilterItems = [].slice.call(
				this.options.activeFilterZone.querySelectorAll(
					'[data-js-item="js-filter-degree-programs-oneFilterButton"]'
				)
			);
		} else {
			activeFilterItems = [].slice.call(
				this.options.activeFilterZone.querySelectorAll(
					'[data-js-zoneId=' + filterZoneId + ']'
				)
			);
		}

		return activeFilterItems;
	}

	/**
	 * Delete all active filter items (buttons) from AktivFilterzone
	 *
	 * @param {Array} activeFilterItems - the specific active filter items to delete
	 */
	deleteAktivFilterItems(activeFilterItems) {
		if (activeFilterItems.length > 0) {
			activeFilterItems.forEach(oneActiveFilterItem => {
				$(oneActiveFilterItem).remove();
			});
		}
	}

	/**
	 * Reset all FilterItems in the different Filterareas
	 */
	resetAllAktivFilterItems() {
		let activeFilterItems = [].slice.call(
			this.options.activeFilterZone.querySelectorAll(
				'[data-js-item="js-filter-degree-programs-oneFilterButton"]'
			)
		);
		this.deleteAktivFilterItems(activeFilterItems);
		this.options.filterZones.forEach(oneFilterZone => {
			this.unfillFilterItems(oneFilterZone);
			this.fillFilterItems(oneFilterZone);
		});
	}

	/**
	 * Check if a active filter area dropdown must be shown and handle it
	 */
	manageActiveFilterAreaView() {
		let activeFilterItems = this.getActiveFilterItems('all');
		let nrAktivFilterItems = activeFilterItems.length;
		let activeFilterArea = document.querySelector(
			'[data-js-item="js-filter-degree-programs-activeFilterArea"]'
		);
		let resultfiltertextArea = document.querySelector(
			'[data-js-item="js-filter-degree-programs-resultFilterText"]'
		);
		if (nrAktivFilterItems > 0) {
			if ($(activeFilterArea).hasClass(this.options.classes.hideFilter)) {
				$(activeFilterArea).removeClass(this.options.classes.hideFilter);
				$(activeFilterArea).addClass(this.options.classes.showFilter);
				this.setAriaExpanded(activeFilterArea, true);
				$(resultfiltertextArea).addClass(this.options.classes.showFilteredInfo);
			}
			this.addClickHandler(activeFilterItems);
		} else {
			if ($(activeFilterArea).hasClass(this.options.classes.showFilter)) {
				$(activeFilterArea).removeClass(this.options.classes.showFilter);
				$(activeFilterArea).addClass(this.options.classes.hideFilter);
				this.setAriaExpanded(activeFilterArea, false);
			}
			if ($(resultfiltertextArea).hasClass(this.options.classes.showFilteredInfo)) {
				$(resultfiltertextArea).removeClass(this.options.classes.showFilteredInfo);
			}
		}
	}

	/**
	 * Add a Click eventhandler to the activeFilterItems
	 */
	addClickHandler(activeFilterItems) {
		if (activeFilterItems.length > 0) {
			activeFilterItems.forEach(oneActiveFilterItem => {
				oneActiveFilterItem.addEventListener('click', event => {
					let arr_activeFilterItem = [];
					let length_activeFilterItem = arr_activeFilterItem.push(oneActiveFilterItem);
					this.deleteAktivFilterItems(arr_activeFilterItem);
					this.unfillOneFilterItem(oneActiveFilterItem);
					this.manageActiveFilterAreaView();
					this.reloadEventList();
				});
			});
		}
	}

	/**
	 * Change One Activefilteritem to inactive
	 *
	 * @param {Object} activeFilterItem - The activeFilterItem get unchecked , unselected or empty.
	 *
	 */
	unfillOneFilterItem(activeFilterItem) {
		if (
			activeFilterItem.hasAttribute('data-js-itemId') &&
			activeFilterItem.hasAttribute('data-js-zoneId')
		) {
			let filterItemId = activeFilterItem.getAttribute('data-js-itemId');
			let filterZoneId = activeFilterItem.getAttribute('data-js-zoneId');
			let filterZone = this.options.filterArea.querySelector(
				'[data-js-id="' + filterZoneId + '"]'
			);
			if (filterZone.hasAttribute('data-js-filtertyp')) {
				let filtertyp = filterZone.getAttribute('data-js-filtertyp');
				switch (filtertyp.toUpperCase()) {
					case 'ONECHECKBOX': {
						let filterIteminFilter = filterZone.querySelector(
							'[id=' + filterItemId + ']'
						);
						$(filterIteminFilter).prop('checked', false);
						let checkboxesCheckedInFilter = [].slice.call(
							filterZone.querySelectorAll('input[type=checkbox]:checked')
						);
						if (checkboxesCheckedInFilter.length == 0) {
							let filterCheckedAllId = filterZoneId + '_all';
							$(filterZone.querySelector('[id=' + filterCheckedAllId + ']')).prop(
								'checked',
								true
							);
						}
						break;
					}
					default: {
						//statements;
						break;
					}
				}
			}
		}
	}

	/**
	 * Reload the eventlist with new Filter
	 */
	reloadEventList() {
		console.info('reload');
	}
}

export default FilterDegreePrograms;