filterNewsroomEvent (component)

Description

This blueprint is based on the blueprint of Veams.

JIRA

• LMU-408

Requirements

• Veams#5.0.0
• @veams/component-Form - LMU spezifische Form-Element component in Veams.

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/filter-newsroom-event

Fields

filter-newsroom-event.hbs

Settings

Content

filter-newsroom-event__box.hbs

Settings

Content

filter-newsroom-event__select.hbs

Content

SASS

Variables

There are multiple variables which you can change:

Modifier Classes

There are modifier classes you can add to c-filter-newsroom-event:

filter-newsroom-event.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"filterNewsroomEventContextClass": "default",
				"filterNewsroomEventClasses": ""
			},
			"content": {
				"filter": [
					{
						"settings": {
							"filterid": "fl_1",
							"filtertyp": "onecheckbox"
						},
						"content": {
							"filtertitle": "Thema",
							"filterselecttext": "Thema auswählen",
							"filterdropdownrole": "Filterbereich für Themenauswahl",
							"filterdropdown":  [
								{
									"content": {
										"fieldsets": [
											{
												"settings": {
													"fieldsetClasses": "is-small",
													"legendClasses": "is-col-mobile-p-12"
												},
												"content": {
													"rows": [
														{
															"settings": {
																"rowClasses": "filter-newsroom-event__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-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Alle Themen"
																					}
																				},
																				{
																					"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-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Geowissenschaft & Umwelt"
																					}
																				},
																				{
																					"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-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Geschichte"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_03",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "1_03"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Gesellschaft, Wirtschaft, Recht, Politik"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_04",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "1_04"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Kultur, Literatur, Kunst, Musik"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_05",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "1_05"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Life Sciences, Biologie, Chemie"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_06",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "1_06"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Mathematik, Informatik, Technik"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_07",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "1_07"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Medizin, Pharmazie"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_08",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "1_08"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Pädagogik, Psychologie"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_09",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "1_09"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Physik, Nanowissenschaft"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_10",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "1_10"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Religion und Philosophie"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_11",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "1_11"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Studieninformationen"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_12",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "1_12"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Studium"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_1_13",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "1_13"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Job & Beruf"
																					}
																				}
																			]
																		}
																	}
																]
															}
														}
													]
												}
											}
										]
									}
								},
								{
									"content": {
										"submitbutton": {
											"settings": {
												"buttonid": "fl_b_1"
											},
											"content": {
												"buttontext": "Anwenden"
											}
										}
									}
								}
							]
						}
					},
					{
						"settings": {
							"filterid": "fl_2",
							"filtertyp": "period",
							"filterlng": "de"
						},
						"content": {
							"filtertitle": "Zeitraum",
							"filterselecttext": "Zeitraum auswählen",
							"filterdropdownrole": "Filterbereich für Zeitraumauswahl",
							"filterdropdown":  [
								{
									"content": {
										"filterbutton": {
											"settings": {
												"buttonid": "fl_fb_2_1",
												"buttonjstype": "Period",
												"buttonjsinfo": "7"
											},
											"content": {
												"buttontext": "Nächsten 7 Tage"
											}
										}
									}
								},
								{
									"content": {
										"filterbutton": {
											"settings": {
												"buttonid": "fl_fb_2_2",
												"buttonjstype": "Period",
												"buttonjsinfo": "30"
											},
											"content": {
												"buttontext": "Nächsten 30 Tage"
											}
										}
									}
								},
								{
									"content": {
										"fieldsets": [
											{
												"settings": {
													"fieldsetClasses": "filter-newsroom-event__date",
													"legendClasses": ""
												},
												"content": {
													"rows": [
														{
															"settings": {
																"rowClasses": "filter-newsroom-event__datearea"
															},
															"content": {
																"cols": [
																	{
																		"settings": {
																			"colClasses": "",
																			"typeOf": "datepicker",
																			"dateLng": "DE"
																		},
																		"content": {
																			"datepickers": [
																				{
																					"settings": {
																						"datepickerItemClasses": "is-daterange",
																						"id": "fl_2_1",
																						"required": false,
																						"type": "text","attributes" : [
																							{
																								"attrKey": "data-js-datetyp",
																								"attrValue": "Start"
																							}
																						]
																					},
																					"content": {
																						"label": "Start",
																						"placeholder": "Datum"
																					}
																				},
																				{
																					"settings": {
																						"datepickerItemClasses": "is-daterange",
																						"id": "fl_2_2",
																						"required": false,
																						"type": "text",
																						"attributes" : [
																							{
																								"attrKey": "data-js-datetyp",
																								"attrValue": "Stop"
																							}
																						]
																					},
																					"content": {
																						"label": "Ende",
																						"placeholder": "Datum"
																					}
																				}
																			],
																			"errorMessage": ""
																		}
																	}
																]
															}
														}
													]
												}
											}
										]
									}
								},
								{
									"content": {
										"errortext": {
											"content": {
												"text": "Bitte prüfen Sie ob ein korrektes Datum eingegeben wurde und ob das Startdatum vor dem Enddatum liegt."
											}
										}
									}
								},
								{
									"content": {
										"submitbutton": {
											"settings": {
												"buttonid": "fl_b_2"
											},
											"content": {
												"buttontext": "Anwenden"
											}
										}
									}
								}
							]
						}
					},
					{
						"settings": {
							"filterid": "fl_3",
							"filtertyp": "onecheckbox"
						},
						"content": {
							"filtertitle": "Standort",
							"filterselecttext": "Standort auswählen",
							"filterdropdownrole": "Filterbereich für Standortauswahl",
							"filterdropdown":  [
								{
									"content": {
										"fieldsets": [
											{
												"settings": {
													"fieldsetClasses": "is-small",
													"legendClasses": "is-col-mobile-p-12"
												},
												"content": {
													"rows": [
														{
															"settings": {
																"rowClasses": "filter-newsroom-event__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-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Alle Standorte"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "is-empty",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_3_01",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "3_01"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Innenstadt-Campus"
																					}
																				},
																				{
																					"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-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Hightec-Campus Großhadern"
																					}
																				},
																				{
																					"settings": {
																						"wrapperClass": "",
																						"inputClass": false,
																						"required": false,
																						"dataAttr": true,
																						"id": "fl_3_03",
																						"labelClasses": "",
																						"attributes" : [
																							{
																								"attrKey": "value",
																								"attrValue": "3_03"
																							},
																							{
																								"attrKey": "data-js-item",
																								"attrValue": "js-filter-newsroom-event-checkbox"
																							}
																						],
																						"labelAttributes" : []
																					},
																					"content": {
																						"label": "Campus Oberschleißheim"
																					}
																				}
																			]
																		}
																	}
																]
															}
														}
													]
												}
											}
										]
									}
								},
								{
									"content": {
										"submitbutton": {
											"settings": {
												"buttonid": "fl_b_3"
											},
											"content": {
												"buttontext": "Anwenden"
											}
										}
									}
								}
							]
						}
					}
				],
				"aktivFilterClose" : "Filter zurücksetzen",
				"aktivFilterTitle" : "Ihre Filterauswahl:",
				"resultnumber" : "XX",
				"resulttext" : "Ergebnisse",
				"resultfiltertext" : "zur getroffenen Filterauswahl"
			}
		}
	}
}

filter-newsroom-event.js

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

// Imports
import $ from 'jquery';
import Component from '@veams/component';
//import { createDeflate } from 'zlib';

class FilterNewsroomEvent 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: [],
			dateFilterButtons: [],
			dateFilterInputs: [],
			activeFilterZone: '',
			buttonPlaceholderArea: '',
			resultfiltertextArea: [],
			filterSearchInput: '',
			filterlng: ''
		};

		super(obj, options);
	}

	/**
	 * Event handling
	 */

	// Local Handlers
	get events() {}

	/**
	 * Bind events
	 *
	 */
	bindEvents() {
		this.options.filterArea = document.querySelector(
			'[data-js-item="js-filter-newsroom-event-area"]'
		);
		this.options.selFilterButtons = [].slice.call(
			this.options.filterArea.querySelectorAll(
				'[data-js-item="js-filter-newsroom-event-select"]'
			)
		);
		this.options.filterZones = [].slice.call(
			this.options.filterArea.querySelectorAll(
				'[data-js-item="js-filter-newsroom-event-zone"]'
			)
		);
		this.options.selFilterButtons.forEach(opt => {
			opt.addEventListener('click', () => {
				this.toogleFilter(opt);
			});
		});

		// Click-Handler for closing 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-newsroom-event-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-newsroom-event-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-newsroom-event-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-newsroom-event-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-newsroom-event-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-newsroom-event-filterDeleteButton"]'
		);
		this.options.delFilterButton.addEventListener('click', event => {
			this.resetAllAktivFilterItems();
			this.manageActiveFilterAreaView();
			this.closeFilterZones();
			this.reloadEventList();
		});

		this.options.dateFilterButtons = [].slice.call(
			this.options.filterArea
				.querySelector('[data-js-filtertyp="period"]')
				.querySelectorAll('[data-js-item="js-filter-newsroom-event-filterButton"]')
		);
		if (this.options.dateFilterButtons.length > 0) {
			this.options.dateFilterButtons.forEach(datefilterbutton => {
				datefilterbutton.addEventListener('click', event => {
					this.generateAndFillDates(datefilterbutton);
				});
			});
		}

		this.options.dateFilterInputs = [].slice.call(
			this.options.filterArea
				.querySelector('[data-js-filtertyp="period"]')
				.querySelectorAll('[data-js-item="js-form-datepicker"]')
		);
		if (this.options.dateFilterInputs.length == 2) {
			this.options.dateFilterInputs.forEach(oneDateFilterInput => {
				oneDateFilterInput.addEventListener('input', event => {
					let jq_oneFilterZone = $(oneDateFilterInput).closest(
						'[data-js-item="js-filter-newsroom-event-zone"]'
					);
					let filterItemError = jq_oneFilterZone[0].querySelector(
						'[data-js-item="js-filter-newsroom-event-errortext"]'
					);
					this.hideElement(filterItemError);
					this.options.dateFilterButtons.forEach(oneDateFilterButton => {
						this.setInactive(oneDateFilterButton);
					});
				});
				oneDateFilterInput.addEventListener('click', event => {
					let topPos = oneDateFilterInput.offsetTop;
					let jq_oneFilterZoneScroll = $(oneDateFilterInput).closest(
						'[data-js-item="js-filter-newsroom-event-zonecontent-scroll"]'
					);
					jq_oneFilterZoneScroll[0].scrollTop = topPos;
				});
				oneDateFilterInput.addEventListener('blur', event => {
					let jq_oneFilterZone = $(oneDateFilterInput).closest(
						'[data-js-item="js-filter-newsroom-event-zone"]'
					);
					let dateLng = 'DE';
					if (jq_oneFilterZone[0].hasAttribute('data-js-lng')) {
						dateLng = jq_oneFilterZone[0].getAttribute('data-js-lng');
					}
					this.checkDateForFilterButton(
						this.options.dateFilterInputs[0].value,
						this.options.dateFilterInputs[1].value,
						dateLng
					);
				});
			});
		}
		this.options.activeFilterZone = document.querySelector(
			'[data-js-item="js-filter-newsroom-event-activeFilterZone"]'
		);
		this.options.buttonPlaceholderArea = document.querySelector(
			'[data-js-item="js-filter-newsroom-event-buttonPlaceholder"]'
		);
		this.options.filterSearchInput = document.querySelector(
			'[data-js-item="js-filter-newsroom-event-filtersearchinput"]'
		);
	}

	didMount() {
		/* console.info('Javascript in use'); */
	}

	/**
	 * 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-newsroom-event-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);
			if (jq_oneFilterZone[0].hasAttribute("data-js-lng") && this.options.filterlng == "") {
				this.options.filterlng = jq_oneFilterZone[0].getAttribute('data-js-lng');
			}
			this.setAriaExpanded(oneSelFilterButton, true);
		}
	}

	/**
	 * Handle the hide of an element
	 *
	 * @param {Object} oneElement- Element to be hidden
	 */
	hideElement(oneElement) {
		let jq_oneElement = $(oneElement);
		if (!jq_oneElement.hasClass(this.options.classes.hideFilter)) {
			if (jq_oneElement.hasClass(this.options.classes.showFilter)) {
				jq_oneElement.removeClass(this.options.classes.showFilter);
				jq_oneElement.addClass(this.options.classes.hideFilter);
			} else {
				jq_oneElement.addClass(this.options.classes.hideFilter);
			}
		}
	}

	/**
	 * Handle the show of an element
	 *
	 * @param {Object} oneElement- Element to be shown
	 */
	showElement(oneElement) {
		let jq_oneElement = $(oneElement);
		if (!jq_oneElement.hasClass(this.options.classes.showFilter)) {
			if (jq_oneElement.hasClass(this.options.classes.hideFilter)) {
				jq_oneElement.removeClass(this.options.classes.hideFilter);
				jq_oneElement.addClass(this.options.classes.showFilter);
			} else {
				jq_oneElement.addClass(this.options.classes.showFilter);
			}
		}
	}

	/**
	 * Set the active class 'is-active' to one Element
	 *
	 * @param {Object} oneElement- Element to be set to 'is-active'
	 */
	setActive(oneElement) {
		let jq_oneElement = $(oneElement);
		if (!jq_oneElement.hasClass(this.options.classes.activeFilterItem)) {
			jq_oneElement.addClass(this.options.classes.activeFilterItem);
		}
	}

	/**
	 * remove the css-class 'is-active from the specific element
	 *
	 * @param {Object} oneElement- Element
	 */
	setInactive(oneElement) {
		let jq_oneElement = $(oneElement);
		if (jq_oneElement.hasClass(this.options.classes.activeFilterItem)) {
			jq_oneElement.removeClass(this.options.classes.activeFilterItem);
		}
	}

	/**
	 * 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-newsroom-event-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;
				}
				case 'PERIOD': {
					this.unfillDateItems(oneFilterZone);
					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;
				}
				case 'PERIOD': {
					if (activeFilterItems.length > 0) {
						activeFilterItems.forEach(oneActiveFilterItem => {
							if (oneActiveFilterItem.hasAttribute('data-js-itemId')) {
								let oneFilterItemId = oneActiveFilterItem.getAttribute(
									'data-js-itemId'
								);
								if (oneFilterItemId.indexOf('__')) {
									oneFilterItemId = oneFilterItemId.split('__');
									if (oneFilterItemId.length == 2) {
										let startDate = '';
										let endDate = '';
										oneFilterItemId.forEach(oneId => {
											let filterZoneDate = oneFilterZone.querySelector(
												'input[id="' + oneId + '"]'
											);
											let activeFilterDate = oneActiveFilterItem.querySelector(
												'span[data-js-itemId="' + oneId + '"]'
											);
											filterZoneDate.value = activeFilterDate.innerHTML;
											if (oneId == filterid + '_1') {
												startDate = activeFilterDate.innerHTML;
											} else {
												endDate = activeFilterDate.innerHTML;
											}
										});
										let dateLng = 'DE';
										if (oneFilterZone.hasAttribute('data-js-lng')) {
											dateLng = oneFilterZone.getAttribute('data-js-lng');
										}
										this.checkDateForFilterButton(startDate, endDate, dateLng);
									}
								}
							}
						});
					}
					/* Set a check class for the Datepicker */
					this.options.dateFilterInputs.forEach(oneInputDatepicker => {
						let jq_oneInputDatepicker = $(oneInputDatepicker);
						if (
							jq_oneInputDatepicker.hasClass(
								this.options.classes.checkInputAfterChange
							)
						) {
						} else {
							jq_oneInputDatepicker.addClass(
								this.options.classes.checkInputAfterChange
							);
						}
					});
					break;
				}
				default: {
					//statements;
					break;
				}
			}
		}
	}

	/**
	 * Check Dates in inputfields of the Datepicker/Daterange for setting the Datefilterbuttons active or inactive
	 *
	 * @param {String} startDate - Date to start with
	 * @param {String} endDate - Date to end with
	 * @param {String} dateLng - language of the date
	 *
	 */
	checkDateForFilterButton(startDate, endDate, dateLng) {
		let currentDate = new Date();
		let resetFilterButton = false;
		startDate = this.getDateElement(startDate, dateLng.toUpperCase());
		if (startDate !== null) {
			if (
				startDate.getFullYear() === currentDate.getFullYear() &&
				startDate.getMonth() === currentDate.getMonth() &&
				startDate.getDate() === currentDate.getDate()
			) {
				endDate = this.getDateElement(endDate, dateLng.toUpperCase());
				if (endDate !== null) {
					let daysBetween = this.checkDaysBetweenDates(startDate, endDate);
					if (daysBetween >= 0 && this.options.dateFilterButtons.length > 0) {
						this.options.dateFilterButtons.forEach(oneDateFilterButton => {
							if (
								oneDateFilterButton.hasAttribute('data-js-info') &&
								oneDateFilterButton.getAttribute('data-js-info') == daysBetween
							) {
								this.setActive(oneDateFilterButton);
							} else {
								this.setInactive(oneDateFilterButton);
							}
						});
					} else {
						resetFilterButton = true;
					}
				} else {
					resetFilterButton = true;
				}
			} else {
				resetFilterButton = true;
			}
		} else {
			resetFilterButton = true;
		}
		if (resetFilterButton) {
			this.options.dateFilterButtons.forEach(oneDateFilterButton => {
				this.setInactive(oneDateFilterButton);
			});
		}
	}

	/**
	 * 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;
				}
				case 'PERIOD': {
					if (oneFilterZone.hasAttribute('data-js-id')) {
						let filterZoneId = oneFilterZone.getAttribute('data-js-id');
						let aktFilterItemsForFilterZone = this.getActiveFilterItems(filterZoneId);
						let correctDatePeriod = this.checkDateItems(oneFilterZone);
						if (correctDatePeriod) {
							this.manageActiveFilterAreaView();
							this.closeFilterZones();
							reloadlist = true;
							if (!aktFilterItemsForFilterZone.length > 0) {
								let inputDateStartValue = oneFilterZone.querySelector(
									'input[id="' + filterZoneId + '_1"]'
								).value;
								let inputDateStopValue = oneFilterZone.querySelector(
									'input[id="' + filterZoneId + '_2"]'
								).value;
								if (inputDateStartValue === '' && inputDateStopValue === '') {
									reloadlist = false;
								}
							}
						}
					}
					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-newsroom-event-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;
	}

	/**
	 * Check for the specific input-fields of the filter area
	 *
	 * @param {Object} oneFilterZone - the specific filter zone element
	 *
	 * @return {Boolean} dateperiod - true or false
	 *
	 */
	checkDateItems(oneFilterZone) {
		let correctDatePeriod = true;
		let filterItemError = oneFilterZone.querySelector(
			'[data-js-item="js-filter-newsroom-event-errortext"]'
		);
		if (oneFilterZone.hasAttribute('data-js-id')) {
			let filterZoneId = oneFilterZone.getAttribute('data-js-id');
			let aktFilterItemsForFilterZone = this.getActiveFilterItems(filterZoneId);
			let inputDateStart = oneFilterZone.querySelector('input[id="' + filterZoneId + '_1"]');
			let inputDateStop = oneFilterZone.querySelector('input[id="' + filterZoneId + '_2"]');
			if (inputDateStart !== null && inputDateStop !== null) {
				let startdate = inputDateStart.value;
				let enddate = inputDateStop.value;
				if (startdate != '' && enddate != '') {
					let dateLng = 'DE';
					if (oneFilterZone.hasAttribute('data-js-lng')) {
						dateLng = oneFilterZone.getAttribute('data-js-lng');
						if (dateLng.toUpperCase() == 'EN') {
							dateLng = 'EN';
						} else {
							dateLng = 'DE';
						}
					}
					if (this.checkDate(startdate, dateLng) && this.checkDate(enddate, dateLng)) {
						let startDateElement = this.getDateElement(startdate, dateLng);
						let stopDateElement = this.getDateElement(enddate, dateLng);
						if (startDateElement !== null && stopDateElement !== null) {
							let daysBetween = this.checkDaysBetweenDates(
								startDateElement,
								stopDateElement
							);
							if (daysBetween >= 0) {
								// Hier dann weiter da Eingabe korrekt
								if (aktFilterItemsForFilterZone.length > 0) {
									this.deleteAktivFilterItems(aktFilterItemsForFilterZone);
								}
								let activeFilterZonehtml = this.options.activeFilterZone.innerHTML;
								let buttonPlaceholder = this.options.buttonPlaceholderArea.querySelector(
									'[data-js-item="js-filter-newsroom-event-oneFilterButton"]'
								);
								buttonPlaceholder.setAttribute(
									'data-js-itemId',
									filterZoneId + '_1__' + filterZoneId + '_2'
								);
								buttonPlaceholder.setAttribute('data-js-zoneId', filterZoneId);
								let activeFilterItemName =
									'<span data-js-itemId="' +
									filterZoneId +
									'_1">' +
									startdate +
									'</span> - <span data-js-itemId="' +
									filterZoneId +
									'_2">' +
									enddate +
									'</span>';
								buttonPlaceholder.innerHTML = activeFilterItemName;
								this.options.activeFilterZone.innerHTML =
									this.options.buttonPlaceholderArea.innerHTML +
									activeFilterZonehtml;
								correctDatePeriod = true;
							} else {
								correctDatePeriod = false;
							}
						} else {
							correctDatePeriod = false;
						}
					} else {
						correctDatePeriod = false;
					}
				} else {
					if (startdate === '' && enddate === '') {
						correctDatePeriod = true;
						if (aktFilterItemsForFilterZone.length > 0) {
							this.deleteAktivFilterItems(aktFilterItemsForFilterZone);
						}
					} else {
						correctDatePeriod = false;
					}
				}

				if (!correctDatePeriod) {
					this.showElement(filterItemError);
				}
			}
		}
		return correctDatePeriod;
	}

	/**
	 * Reset the date filter to the standard
	 *
	 * @param {Object} oneFilterZone - the specific active filter zone of the date filter
	 */
	unfillDateItems(oneFilterZone) {
		let arrayItemsUnfill = [].slice.call(oneFilterZone.querySelectorAll('input[type=text]'));
		arrayItemsUnfill.forEach(filterItem => {
			filterItem.value = '';
		});
		if (this.options.dateFilterButtons.length > 0) {
			this.options.dateFilterButtons.forEach(oneDateFilterButton => {
				this.setInactive(oneDateFilterButton);
			});
		}
		let filterItemError = oneFilterZone.querySelector(
			'[data-js-item="js-filter-newsroom-event-errortext"]'
		);
		this.hideElement(filterItemError);
	}

	/**
	 * 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();
			});
		}
	}

	/**
	 * 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-newsroom-event-oneFilterButton"]'
				)
			);
		} else {
			activeFilterItems = [].slice.call(
				this.options.activeFilterZone.querySelectorAll(
					'[data-js-zoneId=' + filterZoneId + ']'
				)
			);
		}

		return activeFilterItems;
	}

	/**
	 * Reset all FilterItems in the different Filterareas
	 */
	resetAllAktivFilterItems() {
		let activeFilterItems = [].slice.call(
			this.options.activeFilterZone.querySelectorAll(
				'[data-js-item="js-filter-newsroom-event-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-newsroom-event-activeFilterArea"]'
		);
		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);
			}
			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);
			}
		}

	}

	/**
	 * 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;
					}
					case 'PERIOD': {
						this.unfillDateItems(filterZone);
						break;
					}
					default: {
						//statements;
						break;
					}
				}
			}
		}
	}

	/**
	 * Depending on the Filterbutton Attributes generating the start and the end date in a specific Language-Format and write it in the input-fields
	 *
	 * @param {Object} datefilterbutton - The datefilterbutton clicked on.
	 *
	 */
	generateAndFillDates(dateFilterButton) {
		if (
			dateFilterButton.hasAttribute('data-js-type') &&
			dateFilterButton.hasAttribute('data-js-info')
		) {
			let filterButtonType = dateFilterButton.getAttribute('data-js-type');
			let filterButtonInfo = dateFilterButton.getAttribute('data-js-info');
			let jq_oneFilterZone = $(dateFilterButton).closest(
				'[data-js-item="js-filter-newsroom-event-zone"]'
			);
			if (
				filterButtonType.toUpperCase() == 'PERIOD' &&
				!isNaN(filterButtonInfo) &&
				jq_oneFilterZone[0].hasAttribute('data-js-id')
			) {
				let filterZoneId = jq_oneFilterZone[0].getAttribute('data-js-id');
				let filterItemDateStart = jq_oneFilterZone[0].querySelector(
					'input[id="' + filterZoneId + '_1"]'
				);
				let filterItemDateStop = jq_oneFilterZone[0].querySelector(
					'input[id="' + filterZoneId + '_2"]'
				);
				let filterItemError = jq_oneFilterZone[0].querySelector(
					'[data-js-item="js-filter-newsroom-event-errortext"]'
				);
				this.hideElement(filterItemError);

				if ($(dateFilterButton).hasClass(this.options.classes.activeFilterItem)) {
					this.unfillDateItems(jq_oneFilterZone[0]);
				} else {
					if (this.options.dateFilterButtons.length > 0) {
						this.options.dateFilterButtons.forEach(oneDateFilterButton => {
							this.setInactive(oneDateFilterButton);
						});
					}
					const today = new Date();
					let dateLng = 'DE';
					if (jq_oneFilterZone[0].hasAttribute('data-js-lng')) {
						dateLng = jq_oneFilterZone[0].getAttribute('data-js-lng').toUpperCase();
					}
					let dateDayStart = this.createDate(today, dateLng);

					let datePeriod = isNaN(parseInt(filterButtonInfo))
						? 0
						: parseInt(filterButtonInfo);
					let endDay = new Date(new Date().getTime() + datePeriod * 24 * 60 * 60 * 1000);

					let dateDayStop = this.createDate(endDay, dateLng);

					let daysBetweenDates = this.checkDaysBetweenDates(today, endDay);
					if (daysBetweenDates >= 0) {
						//Eintrag in die Inputfelder
						if (filterItemDateStart !== null && filterItemDateStop !== null) {
							filterItemDateStart.value = dateDayStart;
							filterItemDateStop.value = dateDayStop;
							this.setActive(dateFilterButton);
						}
					} else {
						this.showElement(filterItemError);
					}
				}

				this.options.dateFilterInputs.forEach(oneInputDatepicker => {
					let jq_oneInputDatepicker = $(oneInputDatepicker);
					if (
						jq_oneInputDatepicker.hasClass(this.options.classes.checkInputAfterChange)
					) {
					} else {
						jq_oneInputDatepicker.addClass(this.options.classes.checkInputAfterChange);
					}
				});
			}
		}
	}

	/**
	 * Check if the startdate is not after the enddate
	 *
	 * @param {Date} startDate - The date to start the search
	 * @param {Date} endDate - The date to stop the search
	 *
	 * @return {Integer} - Number of Days between startDate and endDate
	 *
	 */
	checkDaysBetweenDates(startDate, endDate) {
		const millisecondsPerDay = 24 * 60 * 60 * 1000;
		return (this.treatAsUTC(endDate) - this.treatAsUTC(startDate)) / millisecondsPerDay;
	}

	/**
	 * Set the Date to Midnight UTC
	 *
	 * @param {Date} date - The date to set to midnight UTC
	 *
	 * @return {Date} - Return the Date with set to Midnight UTC
	 *
	 */
	treatAsUTC(date) {
		var result = new Date(date);
		result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
		return result;
	}

	/**
	 * Transform a date string to a javascript Date-element or a JSon-Date_String
	 *
	 * @param {String} dateString - The String to be transformed
	 * @param {String} dateLng - String with the LNG-Key of the filterzone
	 * @param {Boolean} dateJSon - true or false : Give back a json-formatted Date-String
	 * @param {Boolean} dateEndTime - false standard, true: End of Day (23 Stunden.59 Minuten.59Sekunden )
	 *
	 * @return {Date} - Return Date-Element or null or a Json-Date-String
	 *
	 */
	getDateElement(dateString, dateLng, dateJson = false, dateEndTime = false) {
		let dateElement = null;
		if (dateString) {
			dateString = dateString.toString();
			let dateDelimiter = this.getDateDelimiter(dateLng);
			dateString = dateString.split(dateDelimiter);
			if (dateString.length == 3) {
				if (dateLng == "EN") {
					dateString[0] = parseInt(dateString[0], 10);
					dateString[1] = parseInt(dateString[1], 10) - 1;
				} else {
					dateString[0] = parseInt(dateString[0], 10);
					dateString[1] = parseInt(dateString[1], 10) - 1;
				}

				if (dateString[2].length == 2) dateString[2] = '20' + dateString[2];
				if (dateString[2].length == 4) {
					dateElement = new Date(dateString[2], dateString[1], dateString[0]);

					if (dateJson) {
						let dateMonth = String(dateString[1] + 1);
						if (dateMonth.length == 1) dateMonth = '0' + dateMonth;
						let dateDays = String(dateString[0]);
						if (dateDays.length == 1) dateDays = '0' + dateDays;
						if (dateEndTime) {
							dateElement = dateString[2] + "-" + dateMonth + "-" + dateDays + "T23:59:59Z";
						} else {
							dateElement = dateString[2] + "-" + dateMonth + "-" + dateDays + "T00:00:00Z";
						}
					}
				}
			}
		}
		return dateElement;
	}

	/**
	 * Check if a string is a correct Date
	 *
	 * @param {String} dateString - The String to be checked
	 * @param {String} dateLng - String with the LNG-Key of the filterzone
	 *
	 * @return {Boolean} - Return true or false
	 *
	 */
	checkDate(dateString, dateLng) {
		if (!dateString) return false;
		dateString = dateString.toString();
		let dateDelimiter = this.getDateDelimiter(dateLng);
		dateString = dateString.split(dateDelimiter);
		if (dateString.length != 3) return false;

		if ( dateLng == "EN") {
			dateString[0] = parseInt(dateString[0], 10);
			dateString[1] = parseInt(dateString[1], 10) - 1;
		} else {
			dateString[0] = parseInt(dateString[0], 10);
			dateString[1] = parseInt(dateString[1], 10) - 1;
		}
		if (dateString[2].length == 2) dateString[2] = '20' + dateString[2];
		if (dateString[2].length != 4) return false;
		let controldate = new Date(dateString[2], dateString[1], dateString[0]);

		if (
			controldate.getDate() == dateString[0] &&
			controldate.getMonth() == dateString[1] &&
			controldate.getFullYear() == dateString[2]
		) {
			return true;
		} else {
			return false;
		}
	}

	/**
	 * Check the Language of the Filterzone and return a Delimitercode for the Date
	 *
	 * @param {String} dateLng - String which contain the filterzone Language
	 *
	 * @return {String} - Return the datedelimiter value
	 *
	 */
	getDateDelimiter(dateLng) {
		let dateDelimiter = '.';
		switch (dateLng.toUpperCase()) {
			case 'EN': {
				dateDelimiter = '/';
				break;
			}

			default: {
				dateDelimiter = '.';
				break;
			}
		}
		return dateDelimiter;
	}

	/**
	 * Check the Language of the Filterzone and return a Delimitercode for the Date
	 *
	 * @param {Date} date - Javascript Date
	 * @param {String} dateLng - Languageformat for the creation of the Date
	 *
	 * @return {String} - Return the date in the specific Language
	 *
	 */
	createDate(date, dateLng) {
		let dateInLng = '';
		if (dateLng == undefined) {
			dateLng = 'DE';
		}

		let dateDelimiter = this.getDateDelimiter(dateLng);
		switch (dateLng.toUpperCase()) {
			case 'EN': {
				dateInLng =
				date.getDate() +
				dateDelimiter +
				(date.getMonth() + 1) +
				dateDelimiter +
				date.getFullYear();
				break;
			}

			default: {
				dateInLng =
					date.getDate() +
					dateDelimiter +
					(date.getMonth() + 1) +
					dateDelimiter +
					date.getFullYear();
				break;
			}
		}
		return dateInLng;
	}

	/**
	 * Reload the eventlist with new Filter
	 */
	reloadEventList() {
		// Auslesen der Formularwerte und setzen einer Rest-Abfrage

		let str_filter_event="";
		let count_aktivfilter = 0;
		/* Check of the Filter with the Themes as Checkbox-Solution and creating a Rest Api Search-String */
		let filterTheme = this.options.filterArea.querySelector('[data-js-id="fl_1"]');
		let filterThemecheckboxes = [].slice.call(
			filterTheme.querySelectorAll(
				'[data-js-item="js-filter-newsroom-event-checkbox"]'
			)
		);
		let themenum = filterThemecheckboxes.length;
		let checkthemeitem = [];
		for (var i=0; i<themenum; i++) {
			if (filterThemecheckboxes[i].checked === true && filterThemecheckboxes[i].value != "1_all") {
				checkthemeitem.push(filterThemecheckboxes[i].value);
			}
		}
		if (checkthemeitem.length > 0){
			if (checkthemeitem.length == 1){
				str_filter_event += '{"topics":"' + checkthemeitem[0] + '"}';
			} else {
				str_filter_event += ' { "$or": [';
				for (var j=0; j<checkthemeitem.length; j++) {
					if (j > 0){
						str_filter_event += ',';
					}
					str_filter_event += '{"topics":"' + checkthemeitem[j] + '"}';
				}
				str_filter_event += ']}';
			}
			count_aktivfilter++;
		}
		/* Check of the Filter with the Time Elements and creating a Rest Api Search-String */
		let filterTime = this.options.dateFilterInputs;
		if (filterTime.length == 2) {
			let startDateFilter=filterTime[0].value;
			let endDateFilter=filterTime[1].value;
			let dateLng = "DE";
			if(this.options.filterlng != ""){
				dateLng = this.options.filterlng;
			}
			if(startDateFilter != "" && endDateFilter != ""){
				let strStartDateFilter = this.getDateElement(startDateFilter, dateLng.toUpperCase(), true, false);
				let strEndDateFilter = this.getDateElement(endDateFilter, dateLng.toUpperCase(), true, true);
				if(count_aktivfilter > 0){
					str_filter_event += ','
				}
				/* Compare Date as a JSON-Date-String */
				str_filter_event += '{ "$or": [';
					str_filter_event += '{"$and":[';
					str_filter_event += '{"date_start":{"$gte":{"$date":"' + strStartDateFilter + '"}}}';
					str_filter_event += ',{"date_start":{"$lte":{"$date":"' + strEndDateFilter + '"}}}';
					str_filter_event += ']}';
					str_filter_event += ',{"$and":[';
					str_filter_event += '{"date_end":{"$lte":{"$date":"' + strEndDateFilter + '"}}}';
					str_filter_event += ',{"date_end":{"$gte":{"$date":"' + strStartDateFilter + '"}}}';
					str_filter_event += ']}';
					str_filter_event += ',{"$and":[';
					str_filter_event += '{"date_start":{"$lt":{"$date":"' + strStartDateFilter + '"}}}';
					str_filter_event += ',{"date_end":{"$gt":{"$date":"' + strEndDateFilter + '"}}}';
					str_filter_event += ']}';
				str_filter_event += ']}';
				count_aktivfilter++;
			}
		}
		/* Check of the Filter with the Locations as Checkbox-Solution and creating a Rest Api Search-String */
		let filterLocation = this.options.filterArea.querySelector('[data-js-id="fl_3"]');
		let filterLocationcheckboxes = [].slice.call(
			filterLocation.querySelectorAll(
				'[data-js-item="js-filter-newsroom-event-checkbox"]'
			)
		);
		let locationnum = filterLocationcheckboxes.length;
		let checklocationitem = [];
		for (var i=0; i<locationnum; i++) {
			if (filterLocationcheckboxes[i].checked === true && filterLocationcheckboxes[i].value != "3_all") {
				checklocationitem.push(filterLocationcheckboxes[i].value);
			}
		}
		if (checklocationitem.length > 0){
			if(count_aktivfilter > 0){
				str_filter_event += ','
			}
			if (checklocationitem.length == 1){
				str_filter_event += '{"locationFacility":"' + checklocationitem[0] + '"}';
			} else {
				str_filter_event += ' { "$or": [';
				for (var j=0; j<checklocationitem.length; j++) {
					if (j > 0){
						str_filter_event += ',';
					}
					str_filter_event += '{"locationFacility":"' + checklocationitem[j] + '"}';
				}
				str_filter_event += ']}';
			}
			count_aktivfilter++;
		}
		if (count_aktivfilter > 1) {
			str_filter_event = '{"$and":['+ str_filter_event + ']}';
		}
		/* Check if request is the same as last one and if not fill in the result rest-api filter String in an input field and fire an event for the vue.js Application */
		if (this.options.filterSearchInput.value != str_filter_event){
			this.options.filterSearchInput.value = str_filter_event;
			this.options.filterSearchInput.dispatchEvent(new CustomEvent('change'));
		}
	}
}

export default FilterNewsroomEvent;