filterCourseFinder (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-course-finder

Fields

filter-course-finder.hbs

The partial is a wrapWith partial. This means that you can access all properties and hashes via props. See Mangony Handlebars Helper - wrapWith for detailed instructions.

Settings

Content

SASS

Variables

There are multiple variables which you can change:

Modifier Classes

There are modifier classes you can add to c-filter-course-finder:

filter-course-finder.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"formClasses": "c-filter-course-finder",
				"formContextClass": "",
				"yzContextClass": "default",
				"filterCourseFinderClasses": "",
				"formJsItem": "js-filter-course-finder-area"
			},
			"content": {

				"filterselect": [
					{
						"id": "graduation",
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-p-12 is-col-tablet-p-6 is-col-tablet-l-4",
							"inputClasses": "is-submit",
							"id": "graduation",
							"typeOf": "select",
							"disabled": true,
							"jsModule": true,
							"attributes" : [
								{
									"attrKey": "class",
									"attrValue": "form__select-input"
								}
							]
						},
						"content": {
							"label": "Abschluss",
							"formSubmit": "Default Option",
							"placeholder": "Select Option...",
							"options": [
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"id": "graduation→Bachelor",
										"val": "graduation→Bachelor",
										"name": "Bachelor"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "graduation→Lehramt",
										"name": "Lehramt"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "graduation→Staatsexamen",
										"name": "Staatsexamen"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "graduation→Master",
										"name": "Master"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "graduation→Aufbau_und_Promotionsstudiengänge",
										"name": "Aufbau- und Promotionsstudiengänge"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "graduation→Theologische_Abschlüsse",
										"name": "Theologische Abschlüsse"
									}
								}
							]
						}
					},
					{
						"id": "subjecttyp",
						"settings": {
							"colClasses": "dependent-filter is-hideFilter is-grid-col is-col-mobile-p-12 is-col-tablet-p-6 is-col-tablet-l-4",
							"inputClasses": "is-submit",
							"id": "subjecttyp",
							"typeOf": "select",
							"disabled": true,
							"jsModule": true
						},
						"content": {
							"label": "Fachtyp",
							"formSubmit": "Default Option",
							"placeholder": "Select Option...",
							"options": [
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "subjecttyp→Hauptfach",
										"name": "Hauptfach"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "subjecttyp→Nebenfach",
										"name": "Nebenfach"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "subjecttyp→Unterrichtsfach",
										"name": "Unterrichtsfach"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "subjecttyp→Erweiterungsfach",
										"name": "Erweiterungsfach"
									}
								}
							]
						}
					},
					{
						"id": "courseLanguage",
						"settings": {
							"colClasses": "dependent-filter is-hideFilter is-grid-col is-col-mobile-p-12 is-col-tablet-p-6 is-col-tablet-l-4",
							"inputClasses": "is-submit",
							"id": "courseLanguage",
							"typeOf": "select",
							"disabled": true,
							"jsModule": true
						},
						"content": {
							"label": "Sprache",
							"formSubmit": "Default Option",
							"placeholder": "Select Option...",
							"options": [
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "courseLanguage→Englisch",
										"name": "Englisch"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "courseLanguage→Deutsch",
										"name": "Deutsch"
									}
								}
							]
						}
					},
					{
						"id": "schooltyp",
						"settings": {
							"colClasses": "dependent-filter is-hideFilter is-grid-col is-col-mobile-p-12 is-col-tablet-p-6 is-col-tablet-l-4",
							"inputClasses": "is-submit",
							"id": "schooltyp",
							"typeOf": "select",
							"disabled": true,
							"jsModule": true
						},
						"content": {
							"label": "Schulart",
							"formSubmit": "Default Option",
							"placeholder": "Select Option...",
							"options": [
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "schooltyp→Mittelschule",
										"name": "Mittelschule"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "schooltyp→Grundschule",
										"name": "Grundschule"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "schooltyp→Realschule",
										"name": "Realschule"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "schooltyp→Gymnasium",
										"name": "Gymnasium"
									}
								}
							]
						}
					},
					{
						"id": "admissionmodality",
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-p-12 is-col-tablet-p-6 is-col-tablet-l-4",
							"inputClasses": "is-submit",
							"id": "admissionmodality",
							"typeOf": "select",
							"disabled": true,
							"jsModule": true,
							"attributes" : [
								{
									"attrKey": "data-has-reset-option",
									"attrValue": "false"
								}
							]
						},
						"content": {
							"label": "Zulassungsmodus",
							"formSubmit": "Default Option",
							"placeholder": "Select Option...",
							"options": [
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "admissionmodality→Örtliche Zulassungsbeschränkung",
										"name": "MitteÖrtliche Zulassungsbeschränkunglschule"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "admissionmodality→Keine Zulassungsbeschränkung - aber Eignungsfeststellungsverfahren",
										"name": "Keine Zulassungsbeschränkung - aber Eignungsfeststellungsverfahren"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "admissionmodality→örtliches Auswahlverfahren durch die Fakultät",
										"name": "örtliches Auswahlverfahren durch die Fakultät"
									}
								}
							]
						}
					}
				],

				"sorting": [
					{
						"id": "sorting",
						"settings": {
							"colClasses": "dependent-filter is-hideFilter is-grid-col is-col-mobile-s-12",
							"inputClasses": "is-submit",
							"id": "sorting",
							"typeOf": "select",
							"disabled": true,
							"jsModule": true,
							"attributes" : [
								{
									"attrKey": "data-js-item",
									"attrValue": "js-filter-course-finder-results-sorting"
								}
							]
						},
						"content": {
							"label": "Sortierung",
							"formSubmit": "Default Option",
							"placeholder": "Select Option...",
							"options": [
								{
									"settings": {
										"selected": true,
										"disabled": false
									},
									"content": {
										"val": "sorting→score",
										"name": "by Score"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "sorting→by_name_asc",
										"name": "A bis Z"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "sorting→by_name_desc",
										"name": "Z bis A"
									}
								}
							]
						}
					}
				],

				"filterinput": [
					{
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-s-12 is-col-tablet-p-12",
							"id": "query",
							"type": "text",
							"required": false,
							"typeOf": "input-group",
							"buttonId": "input-group-button",
							"buttonType": "submit",
							"buttonJsItem": "js-filter-course-finder-submit-button"
						},
						"content": {
							"placeholder": "Suchbegriff eingeben",
							"button": "Search"
						}
					}
				],

				"filtercheckbox": [
					{
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-s-12 is-col-mobile-p-6 is-col-tablet-l-4",
							"typeOf": "checkbox",
							"required": false,
							"inputClasses": "is-checkboxes"
						},
						"content": {
							"label": "Studienbeginn",
							"checkboxes": [
								{
									"settings": {
										"wrapperClass": "is-wrapper",
										"inputClass": false,
										"required": false,
										"dataAttr": true,
										"id": "startofstudies",
										"labelClasses": "is-label",
										"attributes" : [
											{
												"attrKey": "data-value",
												"attrValue": "startofstudies→nur im Sommersemester||im Winter- und Sommersemester"
											}
										]
									},
									"content": {
										"label": "Auch im Sommersemester "
									}
								}
							],
							"placeholder": "Suchbegriff eingeben"
						}
					}
				],

				"cta": [
					{
						"settings": {
							"ctaIcon": false,
							"ctaButton": true,
							"jsItem": "js-filter-course-finder-adjustment-cta",
							"jsModule": "filter-course-finder-cta",
							"jsOptions": {
								"globalEvent": "cta:toggleMoreAnchorNavLinks",
								"closedLabel": "Erweiterte Suche",
								"openedLabel": "Schließen"
							},
							"attributes": [
								{
									"name": "aria-expanded",
									"value": "false"
								}
							]
						},
						"content": {
							"ctaTitle": "Erweiterte Suche",
							"ctaContent": "Erweiterte Suche"
						}
					}
				],

				"showmore": [
					{
						"settings": {
							"ctaIcon": false,
							"ctaButton": true,
							"ctaContextClass": "filter-course-finder__showmore",
							"jsItem": "js-filter-course-finder-showmore-cta",
							"jsModule": "filter-course-finder-showmore"
						},
						"content": {
							"ctaTitle": "weitere Ergebnisse anzeigen",
							"ctaContent": "weitere Ergebnisse anzeigen"
						}
					}
				],

				"filterlist": [
					{
						"settings": {
							"isLoading": "is-loading",
							"ctaContextClass": "",
							"ctaJsItem": ""
						},
						"content": {
							"titleLink": "Title",
							"titleDescription": "( Lehramt / Grundschule / Erweiterungsfach )",
							"subtitle": "Subtitle",
							"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam...",
							"detailLink": "Details anzeigen"
						}
					}
				]
			}
		}
	}
}

filter-course-finder.js

/**
 * Description of FilterCourseFinder.
 * Class properties and decorators are supported.
 *
 * @module FilterCourseFinder
 * @version v1.0.0
 *
 * @author Ognjen Jukanovic
 */

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

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

	$haupiaQuery = '';
	$paginationNumberOfPage = '';
	$paginationCurrentPage = '';

	$lang = document.getElementsByTagName("HTML")[0].getAttribute("lang") ? document.getElementsByTagName("HTML")[0].getAttribute("lang") : 'de';

	/**
	 * 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: {
				filterArea: '[data-js-item="js-filter-course-finder-area"]',
				dependentFilter: '.dependent-filter',
				filterAdjustment: '.filter-course-finder__adjustment',
				ctaFilterAdjustment: '[data-js-item="js-filter-course-finder-adjustment-cta"]',
				ctaShowMore: '[data-js-item="js-filter-course-finder-showmore-cta"]',
				formCheckboxInput: '.form__checkbox-input',
				formSelectField: '.form__select-field',
				formSelectElement: '.form__select-element',
				formSelectPlaceholder: '.form__select-placeholder',
				formSelectWrapper: '.form__select-wrapper',
				filterList: '[data-js-item="js-filter-course-finder-filter-list"]',
				filterListSuffix: '__filter-list',
				filterListPrefix: 'filter-list__',
				filterReset: '[data-js-item="js-filter-course-finder-filter-reset"]',
				submitButton: '[data-js-item="js-filter-course-finder-submit-button"]',
				paginationArea: '[data-js-item="js-filter-course-finder-pagination-area"]',
				resultArea: '[data-js-item="js-filter-course-finder-result-area"]',
				resultPerPage: '.filter-course-finder__result-per-page a',
				resultSorting: '[data-js-item="js-filter-course-finder-results-sorting"]',

				// searchQuery: 'searchquery',
				searchQuery: 'query',
				graduation: 'graduation',
				courseLanguage: 'courseLanguage',
				subjectType: 'subjecttyp',
				schoolType: 'schooltyp',
				studiesStart: 'startofstudies',
				approvalMode: 'admissionmodality',

				majorSubject: 'Hauptfach',
				minorSubject: 'Nebenfach',
				teachingSubject: 'Unterrichtsfach',
				didacticSubject: 'Didaktikfach',
				extensionSubject: 'Erweiterungsfach',

				graduationBachelor: 'Bachelor',
				graduationMaster: 'Master',
				graduationStaExamTeachQual: 'Lehramt',
				graduationStaExam: 'Staatsexamen',

				paginationItem: 'pagination__item-',
				paginationFirsPage: 'pagination__firs-page',
				paginationPrevPage: 'pagination__prev-page',
				paginationNextPage: 'pagination__next-page',
				paginationLastPage: 'pagination__last-page',
				paginationNoOfPage: 'pagination__numbers-of-page'
			},
			classes: {
				showFilter: 'is-showFilter',
				hideFilter: 'is-hideFilter',
				isSelected: 'is-selected',
				activeFilterItem: 'is-active',
				isDisabled: 'is-disabled',
				isSuccess: 'is-success',
				isError: 'is-error',
				isLoading: 'is-loading'
			},

			filterArea: [],
			resultArea: [],
			resultPerPage: [],
			resultSorting: [],

			closedLabel: '',
			openedLabel: '',

			tagTxt: [],
			tagSel: [],
			tagCbx: [],

			filterAdjustment: [],
			ctaFilterAdjustment: [],
			ctaShowMore: [],
			dependentFilters: [],
			selDependentFilters: [],

			searchQuery: [],
			graduationDropdown: [],
			subjectTypeDropdown: [],
			filterChechboxs: [],
			selFilterChechboxs: [],
			filterDropdowns: [],
			selFilterDropdowns: [],
			filterList: [],
			filterReset: [],
			submitButton: [],
			paginationArea: [],

			autocompleteFocus: -1,
			autocompleteLimit: 10
		};

		super(obj, options);

	}

	/**
	 * Lifecycle Hooks
	 */
	willMount() {
	}

	didMount() {
	}

	/**
	 * @desc Bind events
	 */
	bindEvents() {
		this.options.filterArea = document.querySelector(
			this.options.selectors.filterArea
		);

		this.options.selFilterChechboxs = [].slice.call(
			this.options.filterArea.querySelectorAll(
				this.options.selectors.formCheckboxInput
			)
		);

		this.options.selFilterDropdowns = [].slice.call(
			this.options.filterArea.querySelectorAll(
				this.options.selectors.formSelectElement
			)
		);

		this.options.selDependentFilters = [].slice.call(
			this.options.filterArea.querySelectorAll(
				this.options.selectors.dependentFilter
			)
		);

		this.options.resultArea = document.querySelector(
			this.options.selectors.resultArea
		);

		this.options.resultSorting = document.querySelector(
			this.options.selectors.resultSorting
		);

		this.options.resultPerPage = [].slice.call(
			this.options.resultArea.querySelectorAll(
				this.options.selectors.resultPerPage
			)
		);

		this.options.tagTxt = [this.options.selectors.searchQuery];
		this.options.tagSel = [this.options.selectors.graduation, this.options.selectors.courseLanguage, this.options.selectors.subjectType, this.options.selectors.schoolType, this.options.selectors.approvalMode];
		this.options.tagCbx = [this.options.selectors.studiesStart];

		this.options.filterAdjustment = document.querySelector(
			this.options.selectors.filterAdjustment
		);

		this.options.ctaFilterAdjustment = document.querySelector(
			this.options.selectors.ctaFilterAdjustment
		);

		this.options.paginationArea = document.querySelector(
			this.options.selectors.paginationArea
		);

		this.options.ctaShowMore = document.querySelector(
			this.options.selectors.ctaShowMore
		);

		this.options.searchQuery = document.getElementById(
			this.options.selectors.searchQuery
		);

		this.options.graduationDropdown = document.getElementById(
			this.options.selectors.graduation
		);

		this.options.subjectTypeDropdown = document.getElementById(
			this.options.selectors.subjectType
		);

		this.options.filterList = document.querySelector(
			this.options.selectors.filterList
		);

		this.options.filterReset = document.querySelector(
			this.options.selectors.filterReset
		);

		this.options.submitButton = document.querySelector(
			this.options.selectors.submitButton
		);

		// Fill from URL
		const urlOptions = decodeURI(window.location.href.split('?')[1]).split('&');
		let haupiaSorting;
		let haupiaQueryFromUrl = `?query=`;

		//Workaround due to an bug where even if there is no graduation, the first one (bachelor) is selected
		let isGraduationEmpty = true;

		if (urlOptions[0] !== 'undefined') {
			urlOptions.forEach((o) => {
				const option = o.split('=');

				if (this.options.tagSel.indexOf(option[0]) !== -1 || this.options.tagCbx.indexOf(option[0]) !== -1) {

					this.options.filterAdjustment.style.display = 'flex';
					this.options.ctaFilterAdjustment.classList.add(this.options.classes.activeFilterItem);

					let ctaFilterAdjustmentTitle = JSON.parse(this.options.ctaFilterAdjustment.getAttribute('data-js-options')).openedLabel;

					this.options.ctaFilterAdjustment.classList.add(this.options.classes.activeFilterItem);
					this.options.ctaFilterAdjustment.setAttribute('title', ctaFilterAdjustmentTitle);
					this.options.ctaFilterAdjustment.setAttribute('aria-expanded', true);

					this.options.ctaFilterAdjustment.children[0].innerHTML = ctaFilterAdjustmentTitle;
				}

				// Tag type Text
				if (this.options.tagTxt.indexOf(option[0]) !== -1) {
					this.options.searchQuery.value = `${option[1]}`;
					haupiaQueryFromUrl += option[1] ? option[1] : '*';
				}

				// Tag type Select
				if (this.options.tagSel.indexOf(option[0]) !== -1) {
					let id = `[data-value="${option[0]}→${option[1]}"]`;
					let element = document.querySelector(id);

					element.classList.add(this.options.classes.isSelected);
					element.closest(this.options.selectors.formSelectField).firstChild.innerHTML = element.textContent;
					document.getElementById(option[0]).firstElementChild.removeAttribute('selected');
					document.querySelector(`[value='${option[0]}→${option[1]}']`).setAttribute('selected', 'selected');
					this.addToFilterList(`${option[0]}`, document.getElementById(option[0]).nextElementSibling.firstChild.textContent);
					haupiaQueryFromUrl += `&${option[0]}=${option[1]}%22`;
				}

				// Tag type Checkbox
				if (this.options.tagCbx.indexOf(option[0]) !== -1) {
					document.getElementById(`${option[0]}`).checked = `${option[1]}`;
					this.addToFilterList(`${option[0]}`, document.getElementById(option[0]).nextElementSibling.textContent);
					haupiaQueryFromUrl += `&${option[0]}=${option[1]}%22`;
				}

				if (option[0] === 'graduation' && option[1].length){
					isGraduationEmpty = false;
				}

				// language
				if (option[0] === 'language') {
					haupiaQueryFromUrl += `&language=${option[1]}`;
				}

				// page
				if (option[0] === 'page') {
					haupiaQueryFromUrl += `&page=${option[1]}`;
					this.$paginationCurrentPage = option[1];
				}

				// numRows
				if (option[0] === 'numRows') {
					haupiaQueryFromUrl += `&numRows=${option[1]}`;
					// Add class
					this.options.resultPerPage.forEach(item => {
						item.classList.remove(this.options.classes.isSelected);
						if ($(item).hasClass(`results-per-page__${option[1]}`)) {
							item.classList.add(this.options.classes.isSelected);
						}
					});
				}

				// sorting
				if (option[0] === 'sorting') {
					haupiaSorting = option[1];
					let id = `[data-value="${option[0]}→${option[1]}"]`;
					let element = document.querySelector(id);
					element.classList.add(this.options.classes.isSelected);
					element.closest(this.options.selectors.formSelectField).firstChild.innerHTML = element.textContent;
					document.getElementById(option[0]).firstElementChild.removeAttribute('selected');
					document.querySelector(`[value='${option[0]}→${option[1]}']`).setAttribute('selected', 'selected');
				}
			});

			haupiaQueryFromUrl = haupiaQueryFromUrl
				.replace(`${this.options.selectors.graduation}=`,'facet.filter.Graduation_value=%22')
				.replace(`${this.options.selectors.subjectType}=`,'facet.filter.Type_value=%22')
				.replace(`${this.options.selectors.courseLanguage}=`,'facet.filter.Language_value=%22')
				.replace(`${this.options.selectors.schoolType}=`,'facet.filter.Type_of_school_value=%22')
				.replace(`${this.options.selectors.approvalMode}=`,'facet.filter.admissionRestriction1stSemester_value=%22')
				.replace(`${this.options.selectors.studiesStart}=`,'facet.filter.Start_of_studies_value=%22')
				.replaceAll(`${this.options.selectors.studiesStart}:`,'Start_of_studies_value_facet_string:%22')

			this.getAndFillMyResults(haupiaQueryFromUrl, haupiaSorting);
			if(!isGraduationEmpty) this.showDependentFilter(this.options.graduationDropdown.value, false);
		}

		this.toggleVisibilityFilterList();

		// Init close buttons for every dropdown
		this.options.selFilterChechboxs.forEach((checkbox) => {
			checkbox.addEventListener('click', (ev) => {
				let event = ev.target;
				if (checkbox.checked === true) {
					this.addToFilterList(`${event.id}`, event.nextElementSibling.textContent);
				} else {
					this.removeFromFilterList(`${event.id}`);
				}

				this.toggleVisibilityFilterList();
				this.writeQueryUrl(true);
				this.getAndFillMyResults(this.$haupiaQuery);
			});
		});

		// Init close buttons for every dropdown
		this.options.selFilterDropdowns.forEach(dropdown => {
			dropdown.addEventListener('click', (ev) => {

				let event = ev.target;
				let elementDropDown = event.parentElement.getAttribute('data-value').split('→')[0];
				let elementFilterList = document.getElementById(`${elementDropDown}${this.options.selectors.filterListSuffix}`);
				let elementSelectTag = event.closest(this.options.selectors.formSelectWrapper).firstElementChild;

				// Dependent Filter
				if (elementSelectTag.getAttribute('id') === 'graduation') {
					this.resetDependentFilters();

					const subjectTypOptions = [].slice.call(
						this.options.subjectTypeDropdown.nextElementSibling.lastChild.lastChild.childNodes
					);
					subjectTypOptions.forEach((option) => {
						option.classList.remove(this.options.classes.hideFilter);
					});

					// Show hide dependent filter
					this.showDependentFilter(this.options.graduationDropdown.value, true);
				}

				if (elementDropDown.length) {
					if (elementFilterList) {
						this.removeFromFilterList(`${elementDropDown}`);
					}
					this.addToFilterList(`${elementDropDown}`, event.textContent);
				} else {
					if (elementSelectTag.getAttribute('id')) {
						this.removeFromFilterList(elementSelectTag.getAttribute('id'));
					}
				}

				this.toggleVisibilityFilterList();
				this.writeQueryUrl(true);
				this.getAndFillMyResults(this.$haupiaQuery);
			});
		});

		// Click on Submit Button
		this.options.submitButton.addEventListener('click', () => {
			this.writeQueryUrl(true);
			this.getAndFillMyResults(this.$haupiaQuery);
		});

		// Delete element form filter list
		this.options.filterList.addEventListener('click', (ev) => {
			this.filterListHandler(ev);
		});

		// Click on Filter Reset
		this.options.filterReset.addEventListener('click', (ev) => {
			// Reset Checkbox
			this.options.selFilterChechboxs.forEach((checkbox) => {
				if (checkbox.checked === true) {
					checkbox.checked = false;
					this.removeFromFilterList(`${checkbox.id}`);
				}
			});

			// Reset Dropdown
			const selectsElement = [].slice.call(
				this.options.filterArea.querySelectorAll('select')
			);
			selectsElement.forEach((select) => {
				
				select.selectedIndex = 0;
				let selectParentElement = [].slice.call(select.parentElement.lastChild.querySelectorAll('li'));

				selectParentElement.forEach((li, index) => {
					if (index === 0) {
						li.classList.add(this.options.classes.isSelected);
						select.parentElement.querySelector(this.options.selectors.formSelectPlaceholder).innerHTML 
						= this._getPlaceholderText(select, li);
						if (select.id === this.options.selectors.graduation) {
							this.showDependentFilter(this.options.graduationDropdown.value, true);
							this.resetDependentFilters();
							this.removeFromFilterList(`${select.id}`);
						}else if(select.id === this.options.selectors.approvalMode){
							this.removeFromFilterList(`${select.id}`);
						}
					} else {
						li.classList.remove(this.options.classes.isSelected);
					}
				});
			});

			this.toggleVisibilityFilterList();
			this.writeQueryUrl(true);
			this.getAndFillMyResults(this.$haupiaQuery);
		});

		// Click on Result Per Page
		this.options.resultPerPage.forEach(element => {
			element.addEventListener('click', (ev) => {
				this.options.resultPerPage.forEach(item => {
					item.classList.remove(this.options.classes.isSelected);
				});
				element.classList.add(this.options.classes.isSelected);

				this.$paginationCurrentPage = 1;
				this.writeQueryUrl(true);
				this.getAndFillMyResults(this.$haupiaQuery);
			});
		});

		// Click on Sorting
		this.options.resultSorting.nextElementSibling.lastChild.addEventListener('click', (ev) => {
			let event = ev.target;
			let haupiaSorting = event.parentElement.getAttribute('data-value').split('→')[1];
			this.$paginationCurrentPage = 1;
			this.writeQueryUrl(true);
			this.getAndFillMyResults(this.$haupiaQuery, haupiaSorting);
		});

		// Click on Pagination Area Define Style
		const paginationDivs = [].slice.call(this.options.paginationArea.querySelector('div').childNodes);
		paginationDivs.forEach(element => {
			element.addEventListener('click', (ev) => {
				let elementParentElementChildNodes = [].slice.call(element.parentElement.childNodes);
				elementParentElementChildNodes.forEach(item => {
					item ? item[0].classList.remove(this.options.classes.activeFilterItem) : '';
				});
				element.classList.add(this.options.classes.activeFilterItem);
			});
		});

		// Click on Pagination Area Filter Logic
		const paginationItems = [].slice.call(this.options.paginationArea.childNodes);
		paginationItems.forEach(element => {
			element.addEventListener('click', (ev) => {

				if (element.id === this.options.selectors.paginationFirsPage) {
					this.$paginationCurrentPage = 1;
				} else if (element.id === this.options.selectors.paginationPrevPage) {
					this.$paginationCurrentPage = Number(this.options.paginationArea.querySelector(`.${this.options.classes.activeFilterItem}`).innerHTML) - 1;
					this.$paginationCurrentPage = this.$paginationCurrentPage >= 1 ? this.$paginationCurrentPage : '1';
				} else if (element.id === this.options.selectors.paginationNextPage) {
					this.$paginationCurrentPage = Number(this.options.paginationArea.querySelector(`.${this.options.classes.activeFilterItem}`).innerHTML) + 1;
					this.$paginationCurrentPage = this.$paginationCurrentPage <= this.$paginationNumberOfPage ? this.$paginationCurrentPage : this.$paginationNumberOfPage;
				} else if (element.id === this.options.selectors.paginationLastPage) {
					this.$paginationCurrentPage = Number(this.$paginationNumberOfPage);
				} else if (element.id === this.options.selectors.paginationNoOfPage) {
					let elementChildNodes = [].slice.call(element.childNodes);
					elementChildNodes.forEach(item => {
						item.classList.remove(this.options.classes.activeFilterItem);
					});
					ev.srcElement.classList.add(this.options.classes.activeFilterItem);
					this.$paginationCurrentPage = ev.srcElement.innerHTML;
				}

				this.writeQueryUrl();
				this.getAndFillMyResults(this.$haupiaQuery);

				window.scrollTo({
					top: this.getElementDistance(this.options.ctaFilterAdjustment),
					behavior: 'smooth'
				});
			});
		});

		// reduce space below Course Input Field if possible
		this.toggleSpaceBelowCourseInput();

		// On click button filter adjustment
		this.options.ctaFilterAdjustment.addEventListener('click', (ev) => {
			ev.preventDefault();
			this.slideToggle(this.options.filterAdjustment, 500);
		});
		
		this.options.searchQuery.addEventListener('input', (ev) => {
			ev.preventDefault();
			const input = ev.target.value;
			this.autocomplete(input);
		});

		this.options.searchQuery.addEventListener('focus', ev => {
			const input = ev.target.value;
			this.autocomplete(input);
		})

		this.options.searchQuery.addEventListener('keydown', ev => {
			let x = ev.target.parentNode.querySelector('.autocomplete');
			if (x) {
				x = x.querySelectorAll('.autocomplete__item');
			} 
			if (ev.keyCode == 40) {
				this.autocompleteFocus++;
				this.addActive(x);
			} else if (ev.keyCode == 38) { 
				this.autocompleteFocus--;
				this.addActive(x);
			} else if (ev.keyCode == 13) {
				ev.preventDefault();
			if (this.autocompleteFocus > 0) {
          		if (x) x[this.autocompleteFocus - 1 ].click();
        	}else if (this.autocompleteFocus == 0){
				this.options.submitButton.click();
			}
			}
		});

		document.addEventListener('click', ev => {
			if (this.options.searchQuery.parentNode.querySelector('.autocomplete') && ev.target.id !== 'query') {
				this.closeAllLists()
			}
		})
	}

	/**
	 * @desc Print pagination on the bottom page
	 * @param {Boolean} maxNum - Maximum number of Items
	 * @param {Boolean} activeNum - Active item
	 */
	paginationPrintItem(maxNum, activeNum) {

		let maxNumOfItems = Number(maxNum);
		let activeNumItem = Number(activeNum);

		this.options.paginationArea.querySelector(`#${this.options.selectors.paginationFirsPage}`).classList.remove(this.options.classes.isDisabled);
		this.options.paginationArea.querySelector(`#${this.options.selectors.paginationPrevPage}`).classList.remove(this.options.classes.isDisabled);
		this.options.paginationArea.querySelector(`#${this.options.selectors.paginationNextPage}`).classList.remove(this.options.classes.isDisabled);
		this.options.paginationArea.querySelector(`#${this.options.selectors.paginationLastPage}`).classList.remove(this.options.classes.isDisabled);

		this.options.paginationArea.querySelector('div').innerHTML = '';

		if (maxNumOfItems < 6) {
			for (let i = 1; i <= maxNumOfItems; i++) {
				this.paginationCreateItem(i);
			}
		} else {
			activeNumItem > 2 ? this.paginationCreateItem(1) : '';
			activeNumItem > 3 ? this.paginationCreateItem('...') : '';
			activeNumItem > 1 ? this.paginationCreateItem(activeNumItem-1) : '';
			this.paginationCreateItem(activeNumItem);
			activeNumItem < maxNumOfItems ? this.paginationCreateItem(activeNumItem+1) : '';
			activeNumItem < maxNumOfItems-2 ? this.paginationCreateItem('...') : '';
			activeNumItem < maxNumOfItems-1 ? this.paginationCreateItem(maxNumOfItems) : '';
		}
		if (maxNumOfItems > 0) {
			document.getElementById(`${this.options.selectors.paginationItem}${activeNumItem}`).classList.add(this.options.classes.activeFilterItem);
		}

		if (Number(this.$paginationCurrentPage) === 1) {
			this.options.paginationArea.querySelector(`#${this.options.selectors.paginationFirsPage}`).classList.add(this.options.classes.isDisabled);
			this.options.paginationArea.querySelector(`#${this.options.selectors.paginationPrevPage}`).classList.add(this.options.classes.isDisabled);
		}
		if (Number(this.$paginationCurrentPage) === Number(this.$paginationNumberOfPage)) {
			this.options.paginationArea.querySelector(`#${this.options.selectors.paginationNextPage}`).classList.add(this.options.classes.isDisabled);
			this.options.paginationArea.querySelector(`#${this.options.selectors.paginationLastPage}`).classList.add(this.options.classes.isDisabled);
		}
	}

	/**
	 * @desc Create item for pagination
	 * @param {Boolean|String} item - Current item
	 */
	paginationCreateItem(item) {
		let element = '';
		if(isNaN(item)){
			element = document.createElement("SPAN");
		} else {
			element = document.createElement("A");
			element.setAttribute("id", `${this.options.selectors.paginationItem}${item}`);
		}
		element.appendChild(document.createTextNode(item));
		this.options.paginationArea.querySelector('div').appendChild(element);
	}

	/**
	 * @desc Get data from JSON and fill in function initializationForm
	 */
	getAndFillMyResults(query, order, autocomplete) {
		// Haupia Credentials
		let haupiaUri = [];
		const haupiaUriLocalhost = {
			hpLink: 'https://cms-search.uni-muenchen.de/search-dev/',
			hpUser: 'haupia_search_proxy@lmu.de',
			hpPass: 'haupia_search_proxy'
		};

		typeof haupiaUriFirstSpirit !== 'undefined' && haupiaUriFirstSpirit ? haupiaUri = haupiaUriFirstSpirit : haupiaUri = haupiaUriLocalhost;

		const sort = order ? order : this.options.resultSorting.value.split('→')[1];
		const uri = `${haupiaUri.hpLink}courses_${autocomplete ? 'autocomplete_' : ''}${sort}/execute${query}`;

		if (!autocomplete) {
			this.el.classList.remove(this.options.classes.isSuccess, this.options.classes.isError);
			this.el.classList.add(this.options.classes.isLoading);
		}
		this.toggleSpaceBelowCourseInput();
		let dataLogin = [{name: "Authorization", value: 'Basic ' + Buffer.from(haupiaUri.hpUser + ':' + haupiaUri.hpPass).toString('base64')}]
		this.getJSON(uri, (data) => {
			const results = data.results;
			if (typeof results !== 'undefined') {
				if (autocomplete) {
					this.fillAutocomplete(data);
				} else {
					this.populateResults(data);
				}
			}
		}, dataLogin);
	}

	/**
	 * @desc Populate results
	 * @param {Array} data - Results from JSON file
	 */
	populateResults(data) {
		this.$paginationNumberOfPage = Math.ceil(data.numRows / data.rows);
		this.$paginationCurrentPage <= 0 ? this.$paginationCurrentPage = 1 : this.$paginationCurrentPage;
		this.$paginationCurrentPage >= this.$paginationNumberOfPage ? this.$paginationCurrentPage = this.$paginationNumberOfPage : this.$paginationCurrentPage;

		this.paginationPrintItem(this.$paginationNumberOfPage, this.$paginationCurrentPage);

		this.options.resultArea.querySelector('.filter-course-finder__total-item-count').textContent = data.numRows;

		const totalItemText = this.options.resultArea.querySelector('.filter-course-finder__total-item-text');
		data.numRows > 1 ? totalItemText.textContent = totalItemText.dataset.plural : totalItemText.textContent = totalItemText.dataset.singular;

		let template = this.options.resultArea.querySelector('[data-js-item="js-filter-course-finder-result-template"]');
		let resultList = this.options.resultArea.querySelector('[data-js-item="js-filter-course-finder-result-list"]');

		resultList.innerHTML = '';

		this.objectOrArrayToArray(data.results).forEach((item) => {
			const result = template.cloneNode(true);
			result.removeAttribute('data-js-item');
			//use highlighting if availible
			if(data.highlighting[item.id]){
				let name = this.arrayToString( ( data.highlighting[item.id].Name_value && data.highlighting[item.id].Name_value.length ) ? data.highlighting[item.id].Name_value : item.Name_value);
				name = name.replaceAll('<strong>', '<span class="highlighting">');
				name = name.replaceAll('</strong>', '</span>');
				result.querySelector('.filter-course-finder__result-title a').innerHTML = name;

				let description = this.arrayToString( (data.highlighting[item.id].Description_value && data.highlighting[item.id].Description_value.length ) ? data.highlighting[item.id].Description_value : item.Description_value);
				description = description.replaceAll('<strong>', '<span class="highlighting">');
				description = description.replaceAll('</strong>', '</span>');
				result.querySelector('.filter-course-finder__result-description').innerHTML = description;
			}else{
				result.querySelector('.filter-course-finder__result-title a').textContent = this.arrayToString(item.Name_value);
				result.querySelector('.filter-course-finder__result-description').textContent = this.arrayToString(item.Description_value);
			}
			result.querySelector('.filter-course-finder__result-title-description').textContent =
				this.arrayToString(item.Graduation_value) + ' / ' +
				this.arrayToString(item.Type_of_school_value) + (item.Type_of_school_value ? ' / ' : '') +
				this.arrayToString(item.Type_value);

			let admissionModalityValue = (this.arrayToString(item.admissionRestriction1stSemester_value).length) ? (', ' + this.arrayToString(item.admissionRestriction1stSemester_value)) : '';
			result.querySelector('.filter-course-finder__result-subtitle').textContent = this.arrayToString(item.Start_of_studies_value) + admissionModalityValue;
			result.querySelector('.filter-course-finder__result-title-link').setAttribute('href', item.detailpage_link);
			result.querySelector('.filter-course-finder__result-detail-link').setAttribute('href', item.detailpage_link);

			resultList.appendChild(result);
		});

		this.el.classList.remove(this.options.classes.isLoading);
		data.numRows > 0 ? this.el.classList.add(this.options.classes.isSuccess) : this.el.classList.add(this.options.classes.isError);

	}

	/**
	 * @desc Write query to URL
	 * @param {Boolean} resetPagination - Resrt pagination yes (true) or no (false)
	 */
	writeQueryUrl(resetPagination, autocomplete) {
		const options = [].slice.call(
			this.options.filterArea.querySelectorAll(
				`${this.options.selectors.formSelectElement}.${this.options.classes.isSelected}`
			)
		);
		const optUrlFilters = [];
		options.forEach((option) => {
			let dataValue = option.getAttribute('data-value').replace('→', '=');
			if (dataValue.length) {
				optUrlFilters.push(dataValue);
			}
		});

		const checkboxes = [].slice.call(
			this.options.filterArea.querySelectorAll(
				`${this.options.selectors.formCheckboxInput}:checked`
			)
		);
		const cbxUrlFilters = [];
		checkboxes.forEach((checkboxe) => {
			let dataValue = checkboxe.getAttribute('data-value').replace('→', '=');
			if (dataValue.length) {
				if(dataValue.includes('||')){
					let dataName = dataValue.split('=',2)[0].toString();
					let dataValues = dataValue.split('=',2)[1].toString();
					dataValues = dataValues.split('||');
					dataValue = 'fq=';
					dataValues.forEach(value => {
						dataValue = dataValue + dataName + ':' + value + '" OR ';
					});
					dataValue = dataValue.slice(0, -5) + '';
				}
				cbxUrlFilters.push(dataValue);
			}
		});

		let itemPerPage = '';
		this.options.resultPerPage.forEach(element => {
			if ($(element).hasClass(this.options.classes.isSelected)) {
				itemPerPage = element.innerHTML;
			}
		});

		let sorOutput = this.options.resultSorting.value.replace('→', '=');

		let optOutput = optUrlFilters.join('&');
		let chbOutput = cbxUrlFilters.join('&');

		let optOutputHaupia = (optOutput ? '&' : '') + encodeURI(optOutput)
			.replace(`${this.options.selectors.graduation}=`,'facet.filter.Graduation_value=%22')
			.replace(`${this.options.selectors.subjectType}=`,'facet.filter.Type_value=%22')
			.replace(`${this.options.selectors.courseLanguage}=`,'facet.filter.Language_value=%22')
			.replace(`${this.options.selectors.schoolType}=`,'facet.filter.Type_of_school_value=%22')
			.replace(`${this.options.selectors.approvalMode}=`,'facet.filter.admissionRestriction1stSemester_value=%22') 
			.replace(/&/g, '%22&');
		optOutputHaupia.length ? optOutputHaupia += `%22` : '';

		let chbOutputHaupia = (chbOutput ? '&' : '') + encodeURI(chbOutput)
			.replace(`${this.options.selectors.studiesStart}=`,'facet.filter.Start_of_studies_value=%22')
			.replaceAll(`${this.options.selectors.studiesStart}:`,'Start_of_studies_value_facet_string:%22')
			.replace(/&/g, '%22&');
		chbOutputHaupia.length ? chbOutputHaupia += `%22` : '';

		optOutput = optOutput.length ? `&${optOutput}` : '';
		chbOutput = chbOutput.length ? `&${chbOutput}` : '';
		sorOutput = sorOutput.length ? `&${sorOutput}` : '';

		let query = this.options.searchQuery.value ? this.options.searchQuery.value : '*';
		let page = resetPagination ? '1' : this.$paginationCurrentPage;
		let queryLang = (this.$lang === 'de') ? `&language=de&language=en` : `&language=${this.$lang}`;
		let output = `${this.options.selectors.searchQuery}=${this.options.searchQuery.value}${optOutput}${chbOutput}${sorOutput}${queryLang}&page=${page}&numRows=${itemPerPage}`;

		history.pushState(output, 'Search history', `${window.location.href.split('?')[0]}?${output}`);

		if (autocomplete) {
			// necessary, because when matching several words in Haupia the brackets are necessary
			// query=(Biologie)(Bachelor)(Hauptfach)
			query = query.replace(/[\/\(\)]/g, '').split(' ').filter(x => x !== '').map(x => `(${x})`).join('');
		}

		this.$haupiaQuery = `?query=${query}${chbOutputHaupia}${optOutputHaupia}&language=${this.$lang}&page=${page}&numRows=${itemPerPage}`;
	}

	/**
	 * @desc AUTOCOMPLETE
	 */
	autocomplete(inputQuery) {
		if (inputQuery.length > 2) {
			this.autocompleteFocus = 0;
			this.writeQueryUrl(true, true);
			this.getAndFillMyResults(this.$haupiaQuery, 'by_name_asc', true);
		} else {
			this.closeAllLists();
		}
	};

	/**
	 * @desc Autocomplete values
	 */

	fillAutocomplete (data) {
		this.closeAllLists();
		const autocomplete = document.createElement('DIV');
		autocomplete.setAttribute('class', 'autocomplete');
		this.options.searchQuery.parentNode.appendChild(autocomplete);
		
		const autocompleteList = data.results.slice(0,this.options.autocompleteLimit);
		autocompleteList.forEach(elem => {
			const item = document.createElement('a');
			item.setAttribute('class', 'autocomplete__item');
			item.setAttribute('href', elem.detailpage_link);

			item.innerHTML = `${this.arrayToString(elem.Name_value)} (${this.arrayToString(elem.Graduation_value)} / ${this.arrayToString(elem.Type_of_school_value)} ${this.arrayToString(elem.Type_of_school_value) && '/'} ${this.arrayToString(elem.Type_value)})`;

			autocomplete.appendChild(item);
		});

		if (autocomplete) {
			this.addActive(autocomplete.querySelectorAll('.autocomplete__item'));
		}
	}

	/**
	 * @desc AUTOCOMPLETE - helper functions
	 */
	 addActive (elem) {
		if (!elem) return false;
		this.removeActive(elem);
		if (this.autocompleteFocus > elem.length) this.autocompleteFocus = 0;
		if (this.autocompleteFocus < 0) this.autocompleteFocus = elem.length;
		if (elem[this.autocompleteFocus - 1 ]) elem[this.autocompleteFocus - 1].classList.add("autocomplete__item--active");
	}
	
  removeActive (elem) {
    for (var i = 0; i < elem.length; i++) {
      elem[i].classList.remove("autocomplete__item--active");
    }
	}
	
	closeAllLists (elmnt) {
		/*close all autocomplete lists in the document,
		except the one passed as an argument:*/
		var x = document.getElementsByClassName("autocomplete");
		for (var i = 0; i < x.length; i++) {
			if (elmnt != x[i]) {
				x[i].parentNode.removeChild(x[i]);
			}
		}
	}

	_getPlaceholderText(element, li) {
		const el = element.querySelector('[data-placeholder]');
		let placeholderText = li.textContent;
		if (el && el.dataset) {
			placeholderText = el.dataset.placeholder;
		} else if (element.dataset) {
			placeholderText = element.dataset.placeholder;
		}		

		return placeholderText === undefined ? li.textContent : placeholderText;
	}


	/**
	 * @desc Reset dependent filters
	 */
	resetDependentFilters() {
		this.options.selDependentFilters.forEach(element => { 
			element.classList.add(this.options.classes.hideFilter);
			
			// Reset select tag
			$(element).find('select')[0].selectedIndex = 0;
			let liElements = [].slice.call(
				element.querySelectorAll(
					this.options.selectors.formSelectElement
				)
			);
					
			liElements.forEach((li, index) => {
				if (index === 0) {
					li.classList.add(this.options.classes.isSelected);					
					element.querySelector(this.options.selectors.formSelectPlaceholder).innerHTML = this._getPlaceholderText(element, li);
				} else {
					li.classList.remove(this.options.classes.isSelected);
				}
			});
		});
	}

	/**
	 * @desc Add to filter list
	 * @param {String} id - Attribute id
	 * @param {String} text - Inner text
	 */
	addToFilterList(id, text) {
		const listItemId = `${id}${this.options.selectors.filterListSuffix}`;
		const listItem = `<div id="${listItemId}">${text} <button></button></div>`;
		this.options.filterList.innerHTML += listItem;
	}

	/**
	 * @desc Remove from filter list
	 * @param {String} id - Attribute id
	 */
	removeFromFilterList(id) {
		let item = `${id}${this.options.selectors.filterListSuffix}`;
		let element = document.getElementById(item);
		if(element) return element.parentNode.removeChild(element);
	}

	/**
	 * @desc Show dependent filter
	 * @param {String} graduationValue - Value of graduation select tag
	 * @param {Boolean} fillFromUrl - Fill from URL yes (true) or no (flase)
	 */
	showDependentFilter(graduationValue, fillFromUrl) {
		if (fillFromUrl) {
			this.removeFilterListDependentFilter([
				`${this.options.selectors.courseLanguage}`,
				`${this.options.selectors.subjectType}`,
				`${this.options.selectors.schoolType}`
			]);
		}

		if (graduationValue === `${this.options.selectors.graduation}→${this.options.selectors.graduationBachelor}` || graduationValue === `${this.options.selectors.graduation}→${this.options.selectors.graduationMaster}`) {
			this.removeClassDependentFilter([this.options.selectors.courseLanguage, this.options.selectors.subjectType]);
			this.addClassDependentFilter([
				`${this.options.selectors.subjectType}→${this.options.selectors.teachingSubject}`,
				`${this.options.selectors.subjectType}→${this.options.selectors.extensionSubject}`,
				`${this.options.selectors.subjectType}→${this.options.selectors.didacticSubject}`
			]);
		} else if (graduationValue === `${this.options.selectors.graduation}→${this.options.selectors.graduationStaExamTeachQual}`) {
			this.removeClassDependentFilter([this.options.selectors.subjectType, this.options.selectors.schoolType]);
			this.addClassDependentFilter([
				`${this.options.selectors.subjectType}→${this.options.selectors.majorSubject}`,
				`${this.options.selectors.subjectType}→${this.options.selectors.minorSubject}`
			]);
		}
	}

	/**
	 * @desc Remove filter list dependent filter
	 * @param {Object} items - Elements
	 */
	removeFilterListDependentFilter(items) {
		items.forEach((item) => {
			document.getElementById(`${item}${this.options.selectors.filterListSuffix}`) ? this.removeFromFilterList(item) : '';
		});
	}

	/**
	 * @desc Add class from dependent filter
	 * @param {Object} items - Elements
	 */
	addClassDependentFilter(items) {
		items.forEach((item) => {
			if(this.el.querySelector('li[data-value=' + item + ']')) this.el.querySelector('li[data-value=' + item + ']').classList.add(this.options.classes.hideFilter);
		});
	}

	/**
	 * @desc Remove class from dependent filter
	 * @param {Object} items - Elements
	 */
	removeClassDependentFilter(items) {
		items.forEach((item) => {
			document.getElementById(item).closest('.filter-course-finder__col').classList.remove(this.options.classes.hideFilter);
		});
	}

	/**
	 * @desc Slick handler element added
	 * @param {Object} event - Element
	 */
	filterListHandler(event) {
		event.preventDefault();
		if (event.srcElement.tagName === 'BUTTON') {

			let id = event.target.parentElement.id.replace(this.options.selectors.filterListSuffix, '');
			let element = document.getElementById(id);

			element.selectedIndex = 0;
			event.target.parentElement.parentNode.removeChild(event.target.parentElement);

			// Tag type Select
			if (this.options.tagSel.indexOf(id) !== -1) {
				const liElements = [].slice.call(
					element.parentElement.querySelectorAll(this.options.selectors.formSelectElement)
				);
				liElements.forEach((li, index) => {
					if (index === 0) {
						li.classList.add(this.options.classes.isSelected);
						element.parentElement.querySelector(this.options.selectors.formSelectPlaceholder).innerHTML 
							= this._getPlaceholderText(element, li);
						if (element.id === this.options.selectors.graduation) {
							this.showDependentFilter(this.options.graduationDropdown.value, true);
							this.resetDependentFilters();
						}
					} else {
						li.classList.remove(this.options.classes.isSelected);
					}
				});
			}

			// Tag type Checkbox
			if (this.options.tagCbx.indexOf(id) !== -1) {
				element.checked = false;
			}

			this.writeQueryUrl(true);
			this.getAndFillMyResults(this.$haupiaQuery);
			this.toggleVisibilityFilterList();
		}
	}

	/**
	 * @desc Toggle visibility filter list
	 */
	toggleVisibilityFilterList() {
		if (this.options.filterList.childNodes.length <= 1) {
			this.options.filterList.parentElement.style.display = 'none';
			this.options.filterReset.parentElement.style.display = 'none';
		} else {
			this.options.filterList.parentElement.style.display = 'flex';
			this.options.filterReset.parentElement.style.display = 'inline-block';
		}
	}

	/**
	 * @desc Get element distance from top
	 * @param {Object} element - Tag for calculate distance
	 * @return {Boolean} location - Distance from top
	 */
	getElementDistance(element) {
		let location = 0;
		if (element.offsetParent) {
			do {
				location += element.offsetTop;
				element = element.offsetParent;
			} while (element);
		}
		return location >= 0 ? location : 0;
	};

	/**
	 * @desc Smooth slide up
	 * @param {Object} target - Target for slide
	 * @return {Boolean} duration - Duration of smooth slide
	 */
	slideUp = (target, duration=500) => {
		target.style.transitionProperty = 'height, margin, padding';
		target.style.transitionDuration = duration + 'ms';
		target.style.height = target.offsetHeight + 'px';
		target.offsetHeight;
		target.style.overflow = 'hidden';
		target.style.height = 0;
		window.setTimeout( () => {
			target.style.display = 'none';
			target.style.removeProperty('height');
			target.style.removeProperty('overflow');
			target.style.removeProperty('transition-duration');
			target.style.removeProperty('transition-property');
		}, duration);
	};

	/**
	 * @desc Smooth slide down
	 * @param {Object} target - Target for slide
	 * @return {Boolean} duration - Duration of smooth slide
	 */
	slideDown = (target, duration=500) => {
		target.style.removeProperty('display');
		let display = window.getComputedStyle(target).display;
		if (display === 'none')
			display = 'block';
		target.style.display = display;
		let height = target.offsetHeight;
		target.style.overflow = 'hidden';
		target.style.height = 0;
		target.offsetHeight;
		target.style.transitionProperty = "height, margin, padding";
		target.style.transitionDuration = duration + 'ms';
		target.style.height = height + 'px';
		window.setTimeout( () => {
			target.style.removeProperty('height');
			target.style.removeProperty('overflow');
			target.style.removeProperty('transition-duration');
			target.style.removeProperty('transition-property');
		}, duration);
	};

	/**
	 * @desc Smooth slide toggle
	 * @param {Object} target - Target for slide
	 * @param {Boolean} duration - Duration of smooth slide
	 */
	slideToggle = (target, duration = 500) => {
		if (window.getComputedStyle(target).display === 'none') {
			return this.slideDown(target, duration);
		} else {
			return this.slideUp(target, duration);
		}
	};

	/**
	 * @desc Convert Array to String
	 * @param {Array} item - Array
	 * @return {String} - String
	 */
	arrayToString = (item) => {
		item = item ? item.toString() : '';
		return item;
	}

	/**
	 * @desc Convert Object or Array to Array
	 * @param {Object} item - Object or Array
	 * @return {Array} - Array
	 */
	objectOrArrayToArray = (item) => {
		if (typeof item === 'undefined' || Array.isArray(item)) {
			return item;
		}
		return [item];
	};

	/**
	 * @desc JSON request
	 * @param {String} url - Link to JSON file
	 * @param {Object} callback - For results
	 * @param {Object} requestHeader - For request with Header like user, pass, type...
	 * @return {callback} - Return callback
	 */
	getJSON = (url, callback, requestHeader) => {
		const xhr = new XMLHttpRequest();
		xhr.open('GET', url, true);
		if (requestHeader) {
			requestHeader.forEach((element) => {
				xhr.setRequestHeader(element.name, element.value);
			});
		}
		xhr.onload = () => {
			if (xhr.readyState === 4 && xhr.status === 200) {
				const res = xhr.responseText;
				callback(JSON.parse(res));
			} else {
				console.error(xhr.statusText);
			}
		};
		xhr.send(null);
	};

	/**
	 * @desc reduce spacing Below Course Input Field if there are no advanced options or no results.
	*/
	toggleSpaceBelowCourseInput(){
		if(this.el.classList.length <= 1){
			this.options.resultArea.style.display = 'none';
			if(!this.options.ctaFilterAdjustment){
				this.options.filterArea.children[0].children[0].style.marginBottom = '0px';
			}
		}else{
			this.options.filterArea.children[0].children[0].style.marginBottom = '';
			this.options.resultArea.style.display = '';
		}
	}

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

export default FilterCourseFinder;