filterFinderFunction (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-finder-function

Fields

filter-finder-function.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-finder-function:

filter-finder-function.hjson

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

				"filterselect": [
					{
						"id": "sel_Type_value",
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-s-12 is-col-tablet-p-6 is-col-tablet-l-3",
							"inputClasses": "is-submit",
							"id": "sel_Type_value",
							"typeOf": "select",
							"disabled": true,
							"jsModule": true,
							"attributes" : [
								{
									"attrKey": "class",
									"attrValue": "form__select-input"
								}
							]
						},
						"content": {
							"label": "Type",
							"formSubmit": "Default Option",
							"placeholder": "Select Option...",
							"options": [
								{
									"settings": {
										"selected": true,
										"disabled": false
									},
									"content": {
										"name": "Please choose..."
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "Hauptfach",
										"name": "Hauptfach"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "Didaktikfach",
										"name": "Didaktikfach"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "Erweiterungsfach",
										"name": "Erweiterungsfach"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "Unterrichtsfach",
										"name": "Unterrichtsfach"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "Nebenfach",
										"name": "Nebenfach"
									}
								}
							]
						}
					},
					{
						"id": "sel_schooltyp",
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-s-12 is-col-tablet-p-6 is-col-tablet-l-3",
							"inputClasses": "is-submit",
							"id": "sel_schooltyp",
							"typeOf": "select",
							"disabled": true,
							"jsModule": true,
							"attributes" : [
								{
									"attrKey": "class",
									"attrValue": "form__select-input"
								}
							]
						},
						"content": {
							"label": "Select Label",
							"formSubmit": "Default Option",
							"placeholder": "Select Option...",
							"options": [
								{
									"settings": {
										"selected": true,
										"disabled": false
									},
									"content": {
										"name": "Please choose..."
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "option_1",
										"name": "Option-1"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "option_2",
										"name": "Option-2"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "option_3",
										"name": "Option-3"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "option_4",
										"name": "Option-4"
									}
								}
							]
						}
					}
				],

				"filterselectmultiple": [
					{
						"id": "mul_Type_value",
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-s-12 is-col-tablet-p-6",
							"inputClasses": "is-submit",
							"id": "mul_Type_value",
							"required": false,
							"typeOf": "select-multiple",
							"disabled": true,
							"jsModule": true
						},
						"content": {
							"label": "Type",
							"formSubmit": "Default Option",
							"placeholder": "Select Option...",
							"options": [
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"id": "mul_Type_value→all",
										"val": "all",
										"name": "Select All",
										"data": "select-multiple__all"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"id": "mul_Type_value→Hauptfach",
										"val": "Hauptfach",
										"name": "Hauptfach"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"id": "mul_Type_value→Didaktikfach",
										"val": "Didaktikfach",
										"name": "Didaktikfach"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": true
									},
									"content": {
										"id": "mul_Type_value→Erweiterungsfach",
										"val": "Erweiterungsfach",
										"name": "Erweiterungsfach"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"id": "mul_Type_value→Unterrichtsfach",
										"val": "Unterrichtsfach",
										"name": "Unterrichtsfach"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"id": "mul_Type_value→Nebenfach",
										"val": "Nebenfach",
										"name": "Nebenfach"
									}
								}
							]
						}
					},
					{
						"id": "mul_Name_value",
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-s-12 is-col-tablet-p-6",
							"inputClasses": "is-submit",
							"id": "mul_Name_value",
							"required": false,
							"typeOf": "select-multiple",
							"disabled": true,
							"jsModule": true
						},
						"content": {
							"label": "Dropdown 100%",
							"formSubmit": "Default Option",
							"placeholder": "Select Option...",
							"options": [
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"id": "mul_Name_value→all",
										"val": "all",
										"name": "Select All",
										"data": "select-multiple__all"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"id": "mul_Name_value→Option1",
										"val": "Option1",
										"name": "Option name 1"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"id": "mul_Name_value→Option2",
										"val": "Option2",
										"name": "Option name 2"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": true
									},
									"content": {
										"id": "mul_Name_value→Option3",
										"val": "Option3",
										"name": "Option name 3"
									}
								}
							]
						}
					}
				],

				"sorting": [
					{
						"id": "sorting",
						"settings": {
							"colClasses": "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→asc",
										"name": "A bis Z"
									}
								},
								{
									"settings": {
										"selected": false,
										"disabled": false
									},
									"content": {
										"val": "sorting→desc",
										"name": "Z bis A"
									}
								}
							]
						}
					}
				],

				"filterinput": [
					{
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-s-12 is-col-tablet-p-6 is-col-tablet-l-3",
							"id": "query",
							"type": "text",
							"typeOf": "input"
						},
						"content": {
							"label": "Query",
							"placeholder": "Enter a search term..."
						}
					}
				],

				"filtercheckbox": [
					{
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-s-12 is-col-tablet-p-6 is-col-tablet-l-3",
							"typeOf": "checkbox",
							"required": false,
							"inputClasses": "is-checkboxes"
						},
						"content": {
							"label": "Status",
							"checkboxes": [
								{
									"settings": {
										"wrapperClass": "is-wrapper",
										"inputClass": false,
										"required": false,
										"dataAttr": true,
										"id": "cbx_enrol_for_the_first_time",
										"labelClasses": "is-label",
										"attributes" : [
											{
												"attrKey": "value",
												"attrValue": "enrol_for_the_first_time"
											}
										]
									},
									"content": {
										"label": "Enrol for the first time"
									}
								}
							],
							"placeholder": "Suchbegriff eingeben"
						}
					},
					{
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-s-12 is-col-tablet-p-5",
							"typeOf": "checkbox",
							"required": true,
							"inputClasses": "is-checkboxes"
						},
						"content": {
							"label": "Start of Studies",
							"checkboxes": [
								{
									"settings": {
										"wrapperClass": "is-wrapper",
										"inputClass": false,
										"required": false,
										"dataAttr": true,
										"id": "cbx_Start_of_studies_value→auch_im_Sommersemester",
										"labelClasses": "is-label",
										"attributes" : [
											{
												"attrKey": "value",
												"attrValue": "auch im Sommersemester"
											}
										]
									},
									"content": {
										"label": "Auch im Sommersemester"
									}
								},
								{
									"settings": {
										"wrapperClass": "is-wrapper",
										"inputClass": false,
										"required": false,
										"dataAttr": true,
										"id": "cbx_Start_of_studies_value→Studienbeginn_WiSe",
										"labelClasses": "is-label",
										"attributes" : [
											{
												"attrKey": "value",
												"attrValue": "Studienbeginn WiSe"
											}
										]
									},
									"content": {
										"label": "Studienbeginn WiSe"
									}
								}
							]
						}
					}
				],

				"filterradio": [
					{
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-s-12 is-col-tablet-p-7",
							"inputClasses": "is-radios",
							"id": "language-of-study",
							"required": true,
							"typeOf": "radio"
						},
						"content": {
							"label": "Admission Modality Value",
							"radios": [
								{
									"settings": {
										"wrapperClass": "is-radio-wrapper",
										"inputClass": false,
										"required": true,
										"dataAttr": false,
										"id": "Admission_modality_value→Mit_Zulassungsbeschränkung",
										"name": "rad_Admission_modality_value",
										"labelClasses": "is-label",
										"attributes" : [
											{
												"attrKey": "data-value",
												"attrValue": "mit Zulassungsbeschränkung"
											}
										]
									},
									"content": {
										"label": "Mit Zulassungsbeschränkung"
									}
								},
								{
									"settings": {
										"wrapperClass": "is-radio-wrapper",
										"inputClass": false,
										"required": true,
										"dataAttr": false,
										"id": "Admission_modality_value→Keine_Zulassungsbeschränkung",
										"name": "rad_Admission_modality_value",
										"labelClasses": "is-label",
										"attributes" : [
											{
												"attrKey": "data-value",
												"attrValue": "keine Zulassungsbeschränkung"
											}
										]
									},
									"content": {
										"label": "Keine Zulassungsbeschränkung"
									}
								}

							]
						}
					},
					{
						"settings": {
							"colClasses": "is-grid-col is-col-tablet-p-12",
							"inputClasses": "is-radios",
							"id": "rad_1",
							"required": false,
							"typeOf": "radio"
						},
						"content": {
							"label": "Type of School",
							"radios": [
								{
									"settings": {
										"wrapperClass": "is-radio-wrapper",
										"inputClass": false,
										"required": false,
										"dataAttr": false,
										"id": "Type_of_school_value→",
										"name": "rad_Type_of_school_value",
										"labelClasses": "is-label",
										"attributes" : [
											{
												"attrKey": "data-value",
												"attrValue": "Gymnasium"
											}
										]
									},
									"content": {
										"label": "Gymnasium"
									}
								},
								{
									"settings": {
										"wrapperClass": "is-radio-wrapper",
										"inputClass": false,
										"required": false,
										"dataAttr": false,
										"id": "Type_of_school_value→Realschule",
										"name": "rad_Type_of_school_value",
										"labelClasses": "is-label",
										"attributes" : [
											{
												"attrKey": "data-value",
												"attrValue": "Realschule"
											}
										]
									},
									"content": {
										"label": "Realschule"
									}
								},
								{
									"settings": {
										"wrapperClass": "is-radio-wrapper",
										"inputClass": false,
										"required": false,
										"dataAttr": false,
										"id": "Type_of_school_value→Grundschule",
										"name": "rad_Type_of_school_value",
										"labelClasses": "is-label",
										"attributes" : [
											{
												"attrKey": "data-value",
												"attrValue": "Grundschule"
											}
										]
									},
									"content": {
										"label": "Grundschule"
									}
								},
								{
									"settings": {
										"wrapperClass": "is-radio-wrapper",
										"inputClass": false,
										"required": false,
										"dataAttr": false,
										"id": "Type_of_school_value→Mittelschule",
										"name": "rad_Type_of_school_value",
										"labelClasses": "is-label",
										"attributes" : [
											{
												"attrKey": "data-value",
												"attrValue": "Mittelschule"
											}
										]
									},
									"content": {
										"label": "Mittelschule"
									}
								}
							]
						}
					}
				],

				"filtersubmit": [
					{
						"settings": {
							"colClasses": "is-grid-col is-col-mobile-s-12",
							"inputClasses": "is-submit",
							"submitClass": "filter-finder-function__submit",
							"id": "submit",
							"required": false,
							"typeOf": "submit",
							"disabled": false,
							"attributes" : [
								{
									"attrKey": "data-js-item",
									"attrValue": "js-filter-course-finder-results-sorting"
								}
							]
						},
						"content": {
							"legend": "Submit",
							"label": "Label for submit",
							"formSubmit": "Absenden"
						}
					}
				]
			}
		}
	}
}

filter-finder-function.js

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

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

class FilterFinderFunction extends Component {
	/**
	* Class Properties
	*/
	$el = $(this.el);
	$filterForm = $(this.options.selectors.filterForm, this.el);
	$filterList = $(this.options.selectors.filterList, this.el);

	$fields = $('input', this.$filterForm);
	$selects = $('select', this.$filterForm);

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

	$query = '';
	$queryHaupia = '';
	$sort = 'asc';

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

	/**
	 * 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: {
				filterForm: '[data-js-item="js-filter-finder-function-filter-form"]',
				filterList: '[data-js-item="js-filter-finder-function-filter-list"]',
				filterReset: '[data-js-item="js-filter-finder-function-filter-reset"]',
				resultArea: '[data-js-item="js-filter-finder-function-result-area"]',
				resultPerPage: '[data-js-item="js-filter-finder-function__result-per-page"]',
				paginationArea: '[data-js-item="js-filter-finder-function-pagination-area"]',

				formSelectElement: '.form__select-element',
				filterListSuffix: '__filter-list',

				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: {
				isSelected: 'is-selected',
				activeFilterItem: 'is-active',
				isSuccess: 'is-success',
				isError: 'is-error',
				isLoading: 'is-loading'
			}
		};

		super(obj, options);
	}

	/**
	* Lifecycle Hooks
	*/
	willMount() {
		console.log('Component FilterFinderFunction will mount!');
	}

	didMount() {
		console.log('Component FilterFinderFunction mounted!');
	}

	/**
	 * @desc Debounce a function for a specific time
	 */
	bindEvents() {
		this.options.filterForm = document.querySelector(
			this.options.selectors.filterForm
		);

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

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

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

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

		this.options.resultsPerPage = [].slice.call(
			this.options.resultArea.querySelectorAll('.filter-finder-function__result-per-page a')
		);

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

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

		if (urlOptions[0] !== 'undefined') {

			urlOptions.forEach((o, index) => {
				const option = o.split('=');
				const id = `[name=${option[0]}]`;
				const type = option[0].split('_')[0];

				// Query
				if (index === 0) {
					if (option[0] === 'query') {
						const element = document.querySelector(id);
						element.value = option[1];
						this.$queryHaupia += `?query=${option[1]}`;
					} else {
						this.$queryHaupia += '?query=*';
					}
				}

				// Checkbox
				if (type === 'cbx') {
					const element = document.querySelector(id);
					element.checked = true;
					// Add item to filter list
					this.addToFilterList(option[0], element.nextElementSibling.textContent);
					this.$queryHaupia += `&${option[0].replace('cbx_', 'facet.filter.').split('→')[0]}=${option[1]}`;
				}

				// Radio
				if (type === 'rad') {
					const elements = document.querySelectorAll(id);
					elements.forEach((element) => {
						if (element.dataset.value === option[1].slice(1,-1)) {
							element.checked = true;
							// Add item to filter list
							this.addToFilterList(element.id, element.nextElementSibling.textContent, option[0]);
							this.$queryHaupia += `&${option[0].replace('rad_', 'facet.filter.').split('→')[0]}=${option[1]}`;
						}
					});
				}

				// Select
				if (type === 'sel') {
					const element = document.querySelector(id);
					const elementWrapper = $(element).closest('.form__select-wrapper');
					$(element).val(option[1].slice(1,-1));
					elementWrapper.find(`[data-value="${option[1].slice(1,-1)}"]`).addClass('is-selected');
					elementWrapper.find('span.form__select-placeholder').html(
						elementWrapper.find(`[data-value="${option[1].slice(1,-1)}"] span`).html()
					);
					// Add item to filter list
					this.addToFilterList(element.id, elementWrapper.find(`[data-value="${option[1].slice(1,-1)}"]`)[0].textContent);
					this.$queryHaupia += `&${option[0].replace('sel_', 'facet.filter.').split('→')[0]}=${option[1]}`;
				}

				// Select-Multiple
				if (type === 'mul') {
					const element = document.querySelector(id);
					const items = option[1].slice(1,-1).split('~');

					element.querySelectorAll('option').forEach((item) => {
						item.removeAttribute('selected');
						$(element).closest('.select-multiple__overlay').find(`input#${item.id}_checkbox`).prop('checked', false);
					});

					if (items.toString() === 'all') {
						element.querySelectorAll('option').forEach((opt, index) => {
							if (opt.disabled === false) {
								opt.setAttribute('selected', 'selected');
								$(element).closest('.select-multiple__overlay').find(`input#${opt.id}_checkbox`).prop('checked', true);
								if (index > 0) {
									// Add item to filter list
									this.addToFilterList(`${opt.id}_checkbox`, opt.textContent)
									// Haupia query
									this.$queryHaupia += `&${option[0].replace('mul_', 'facet.filter.')}="${opt.id.split('→')[1]}"`;
								}
							}
						});
					} else {
						items.forEach((item) => {
							item = $(element).find(`[value="${item}"]`);
							item.attr('selected', 'selected');
							$(element).closest('.select-multiple__overlay').find(`input#${item[0].id}_checkbox`).prop('checked', true);
							// Add item to filter list
							this.addToFilterList(`${item[0].id}_checkbox`, item[0].textContent);
						});
						// Haupia query
						option[1].slice(1,-1).split('~').forEach((key) => {
							this.$queryHaupia += `&${option[0].replace('mul_', 'facet.filter.')}="${key}"`;
						});
					}
				}

				// Sorting
				if (option[0] === 'sorting') {
					const element = document.querySelector(id);
					const elementWrapper = $(element).closest('.form__select-wrapper');
					$(element).val(`${option[0]}→${option[1]}`);
					elementWrapper.find(`[data-value="${option[0]}→${option[1]}"]`).addClass('is-selected');
					elementWrapper.find('span.form__select-placeholder').html(
						elementWrapper.find(`[data-value="${option[0]}→${option[1]}"] span`).html()
					);
					this.$query += `&sorting=${option[1]}`;
				}

				// Language
				if (option[0] === 'language') {
					this.$query += `&language=${option[1]}`;
					this.$queryHaupia += `&language=${option[1]}`;
				}

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

				// Number of rows
				if (option[0] === 'numRows') {
					this.$query += `&numRows=${option[1]}`;
					this.$queryHaupia += `&numRows=${option[1]}`;
					this.options.resultsPerPage.forEach(item => {
						item.classList.remove(this.options.classes.isSelected);
						if ($(item).hasClass(`results-per-page__${option[1]}`)) {
							item.classList.add(this.options.classes.isSelected);
						}
					});
				}
			});

			this.getAndFillMyResults(this.$queryHaupia);
			this.toggleVisibilityFilterList();
		}

		let fnInputHandler = this.inputHandler.bind(this);
		this.$filterForm.find('input[type="radio"]').on(this.context.EVENTS.click, fnInputHandler);
		this.$filterForm.find('input[type="checkbox"]').on(this.context.EVENTS.click, fnInputHandler);

		let fnSelectHandler = this.selectHandler.bind(this);
		this.$filterForm.find('li.form__select-element').on(this.context.EVENTS.click, fnSelectHandler);

		let fnButtonHandler = this.buttonHandler.bind(this);
		this.$filterForm.find('button.form__submit').on(this.context.EVENTS.click, fnButtonHandler);

		let fnRemoveFromFilterListHandler = this.removeFromFilterListHandler.bind(this);
		this.$filterList.on(this.context.EVENTS.click, fnRemoveFromFilterListHandler);

		let fnFilterReset = this.filterResetHandler.bind(this);
		this.$filterForm.find('div.filter-finder-function__filter-reset').on(this.context.EVENTS.click, fnFilterReset);

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

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

		// Click on Pagination Area Define Style
		const paginationDivs = [].slice.call(this.options.paginationArea.querySelector('div').childNodes);
		paginationDivs.forEach(element => {
			element.addEventListener('click', () => {
				let items = [].slice.call(element.parentElement.childNodes);
				items.forEach(item => {
					item ? item.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.toggleVisibilityFilterList();
				this.writeQueryUrl();
				this.getAndFillMyResults(this.$queryHaupia);
			});
		});
	}

	/**
	 * @desc Get data from JSON and fill in function initializationForm
	 */
	getAndFillMyResults(query) {
	// Haupia Credentials
		let haupiaUri = [];
		const haupiaUriLocalhost = {
			hpLink: 'https://haupia-lmu.asiososys.com/rest/api/v1/prepared_search/',
			hpUser: 'ognjen.jukanovic@asioso.com',
			hpPass: 'ognjen123'
		};
		typeof haupiaUriFirstSpirit !== 'undefined' && haupiaUriFirstSpirit ? haupiaUri = haupiaUriFirstSpirit : haupiaUri = haupiaUriLocalhost;

		//add ?query=* if there is no text input field
		if(query.slice(0,7) !== '?query=') query = '?query=*' + query;

		const uri = haupiaUri.hpLink + this.$sort  + '/execute' + query;

		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') this.populateResults(data);
		}, dataLogin);
	}

	/**
	 * @desc Populate results
	 * @param {Array} data - Results from JSON file
	 */
	populateResults(data) {

		let settingForResults = [];
		const resultConfigLH = {
			resultTitle : 'Name_value',
			resultDesc : 'Description_value' 
		}
		typeof resultConfig !== 'undefined' && resultConfig ? settingForResults = resultConfig  : settingForResults = resultConfigLH;

		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);

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

		resultList.innerHTML = '';
		this.options.resultArea.querySelector('.filter-finder-function__total-item-count').textContent = data.numRows;

		this.objectOrArrayToArray(data.results).forEach((item) => {
			const result = template.cloneNode(true);
			result.removeAttribute('data-js-item');
			//get variables from FS
			if(resultConfig.resultTitle){
				result.querySelector('.filter-finder-function__results-item-link').textContent = this.arrayToString(item[resultConfig.resultTitle]);
			}
			if(resultConfig.resultDesc){
				result.querySelector('.filter-finder-function__results-item-description').textContent = this.arrayToString(item[resultConfig.resultDesc]);
			}else{
				result.querySelector('.filter-finder-function__results-item-description').textContent = '';
			}
			result.querySelector('.filter-finder-function__results-item-link').setAttribute('href', item.detailpage_link);
			resultList.appendChild(result);
		});

		window.setTimeout( () => {
			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);
		}, 125);
	}

	/**
	 * @desc Remove from filter list
	 * @param {Array} ev - Attribute event
	 */
	removeFromFilterListHandler(ev) {
		ev.preventDefault();
		if (ev.target.tagName === 'BUTTON') {
			let id = ev.target.parentElement.id.replace(this.options.selectors.filterListSuffix, '');
			let element = this.options.filterForm.querySelector(`#${id}`);
			let name = element.getAttribute('name');

			ev.target.parentElement.remove();

			// Checkbox
			if (id.split('_')[0] === 'cbx') {
				element.checked = false;
			}

			// Radio
			if (name.split('_')[0] === 'rad') {
				element.checked = false;
			}

			// Select
			if (id.split('_')[0] === 'sel') {
				element.selectedIndex = 0;
				const items = [].slice.call(
					element.nextElementSibling.querySelectorAll(this.options.selectors.formSelectElement)
				);
				items.forEach((item, index) => {
					if (index === 0) {
						item.classList.add(this.options.classes.isSelected);
						element.nextElementSibling.firstElementChild.innerHTML = item.textContent;
					} else {
						item.classList.remove(this.options.classes.isSelected);
					}
				});
			}

			// Select-Multiple
			if (id.split('_')[0] === 'mul') {
				let select = $(element).closest('div.select-multiple__overlay').find('select');
				if (select.find('option').length === select.find('option:checked').length + select.find('option:disabled').length) {
					select.find(`option#${id.split('→')[0]}→all`)[0].removeAttribute('selected', 'selected');
					$(element).closest('div.select-multiple__results').find(`input#${id.split('→')[0]}→all_checkbox`)[0].checked = false;
				}
				element.checked = false;
				select.find(`option#${element.id.replace('_checkbox', '')}`)[0].removeAttribute('selected', 'selected');
			}

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

	/**
	 * @desc Filter reset handler
	 */
	filterResetHandler() {
		// Fields
		Object.values(this.$fields).forEach((item, index) => {
			if(item.tagName && item.tagName.toLowerCase() === "input") {

				// Type text
				if(item.type.toLowerCase() === "text" && item.classList.contains('form__input-text')) {
					item.value = '';
				}

				// Type radio
				if(item.type.toLowerCase() === "radio" && item.classList.contains('form__radio-input') && item.checked === true) {
					item.checked = false;
					this.removeFromFilterList(`${item.id}`);
				}

				// Type checkbox
				if(item.type.toLowerCase() === "checkbox" && item.classList.contains('form__checkbox-input') && item.checked === true) {
					item.checked = false;
					this.removeFromFilterList(`${item.id}`);
				}

				// Type checkbox select-multiple
				if(item.type.toLowerCase() === "checkbox" && item.classList.contains('select-multiple__checkbox') && item.checked) {
					item.checked = false;
					if (item.id.split('→')[1].replace('_checkbox', '') !== 'all') {
						this.removeFromFilterList(`${item.id}`);
					}
				}
			}
		});

		// Selects
		Object.values(this.$selects).forEach((item, index) => {
			if(item.tagName && item.tagName.toLowerCase() === "select") {
				// Type select-one
				if(item.type.toLowerCase() === "select-one" && item.classList.contains('form__select-input')) {
					if (item.value) {
						this.removeFromFilterList(`${item.id}`);
					}

					item.selectedIndex = 0;

					let selectParentElement = [].slice.call(item.parentElement.lastChild.querySelectorAll('li'));
					selectParentElement.forEach((li, index) => {
						if (index === 0) {
							li.classList.add(this.options.classes.isSelected);
							item.nextElementSibling.firstElementChild.innerHTML = li.textContent;
						} else {
							li.classList.remove(this.options.classes.isSelected);
						}
					});
				}

				// Type select-multiple
				if(item.type.toLowerCase() === "select-multiple" && item.classList.contains('select-multiple__filter-select')) {
					item.selectedIndex = -1;
					for (let i = 0; i< item.options.length; i++){
						item.options[i].removeAttribute('selected', 'selected');
					}
				}
			}
		});

		this.toggleVisibilityFilterList();
		window.setTimeout( () => {
			this.writeQueryUrl(true);
			this.getAndFillMyResults(this.$queryHaupia);
		}, 125);
	}

	/**
	 * @desc Input handler
	 * @param {Array} ev - Attribute event
	 */
	inputHandler(ev) {
		if (ev.target.checked) {
			if (ev.target.id.split('→')[1] === 'all_checkbox') {
				ev.srcElement.offsetParent.querySelectorAll('div.select-multiple__checkbox-container').forEach((item, index) => {
					if (index > 0 && item.firstElementChild.disabled === false) {
						this.addToFilterList(item.firstElementChild.id, item.lastElementChild.textContent)
					}
				});
			} else {
				this.addToFilterList(ev.target.id, ev.target.nextElementSibling.textContent, ev.target.name);
			}
		} else {
			if (ev.target.id.split('→')[1] === 'all_checkbox') {
				ev.srcElement.offsetParent.querySelectorAll('div.select-multiple__checkbox-container').forEach((item, index) => {
					if (index > 0 && item.firstElementChild.disabled === false) {
						this.removeFromFilterList(item.firstElementChild.id);
					}
				});
			} else {
				this.removeFromFilterList(ev.target.id);
			}
		}

		this.toggleVisibilityFilterList();
		window.setTimeout( () => {
			this.writeQueryUrl(true);
			this.getAndFillMyResults(this.$queryHaupia);
		}, 125);
	}

	/**
	 * @desc Select handler
	 * @param {Array} ev - Attribute event
	 */
	selectHandler(ev) {
		if  (ev.target.parentElement.getAttribute('data-value').split('→')[0] === 'sorting') {
			this.$sort = ev.target.parentElement.getAttribute('data-value').split('→')[1];
		} else {
			if (ev.target.parentElement.getAttribute('data-value')) {
				this.addToFilterList(ev.target.offsetParent.parentElement.previousElementSibling.id, ev.target.textContent);
			} else {
				this.removeFromFilterList(ev.target.offsetParent.parentElement.previousElementSibling.id);
			}
		}

		this.toggleVisibilityFilterList();
		window.setTimeout( () => {
			this.writeQueryUrl(true);
			this.getAndFillMyResults(this.$queryHaupia);
		}, 125);
	}

	/**
	 * @desc Button handler
	 * @param {Array} ev - Attribute event
	 */
	buttonHandler(ev) {
		ev.preventDefault();
		ev.stopPropagation();

		this.toggleVisibilityFilterList();
		window.setTimeout( () => {
			this.writeQueryUrl(true);
			this.getAndFillMyResults(this.$queryHaupia);
		}, 125);
	}

	/**
	 * @desc Write query to URL
	 * @param {Boolean} resetPagination - Resrt pagination yes (true) or no (false)
	 */
	writeQueryUrl(resetPagination) {
		this.$query = '';
		this.$queryHaupia = '';

		Object.values(this.$fields).forEach((item, index) => {
			if(item.tagName && item.tagName.toLowerCase() === "input") {

				// Type text
				if (item.type.toLowerCase() === "text" && item.classList.contains('form__input-text')) {
					if (item.value !== '' && item.value !== item.defaultValue && item.value.length !== 0) {
						this.$query += `?${item.name}=${item.value}`;
						this.$queryHaupia += `?${item.name}=${item.value}`;
					} else {
						this.$queryHaupia += '?query=*';
					}
				}

				// Type radio
				if (item.type.toLowerCase() === "radio" && item.classList.contains('form__radio-input') && item.checked) {
					this.$query += `&${item.name}="${item.dataset.value}"`;
					this.$queryHaupia += `&${item.name.replace('rad_', 'facet.filter.').split('→')[0]}="${item.dataset.value}"`;
				}

				// Type checkbox
				if (item.type.toLowerCase() === "checkbox" && item.classList.contains('form__checkbox-input') && item.checked) {
					this.$query += `&${item.name}="${item.value}"`;
					this.$queryHaupia += `&${item.name.replace('cbx_', 'facet.filter.').split('→')[0]}="${item.value}"`;
				}
			}
		});

		Object.values(this.$selects).forEach((item, index) => {
			if(item.tagName && item.tagName.toLowerCase() === "select") {
				// Type select-one
				if (item.type.toLowerCase() === "select-one" && item.classList.contains('form__select-input')) {
					if (item.value !== '' && item.value !== item.defaultValue && item.value.length !== 0) {
						this.$query += `&${item.name}="${item.value}"`;
						this.$queryHaupia += `&${item.name.replace('sel_', 'facet.filter.').split('→')[0]}="${item.value}"`;
					}
				}

				// Type select-multiple
				if (item.type.toLowerCase() === "select-multiple" && item.classList.contains('select-multiple__filter-select')) {
					let selectedValues = [].map.call(item.selectedOptions, input => input.value);
					if (selectedValues.length) {
						if (item.value === 'all') {
							this.$query += `&${item.name.split('→')[0]}="${item.value}"`;
						} else {
							this.$query += `&${item.name.split('→')[0]}="${selectedValues.toString().replace(/,/g, '~')}"`;
						}
						this.objectOrArrayToArray(selectedValues).forEach((key) => {
							key !== 'all' ? this.$queryHaupia += `&${item.name.replace('mul_', 'facet.filter.').split('→')[0]}="${key}"` : '';
						});
					}
				}
			}
		});

		// Page
		let page = resetPagination ? '1' : this.$paginationCurrentPage;

		// Item per page
		let itemPerPage = '';
		this.options.resultsPerPage.forEach(element => {
			if ($(element).hasClass(this.options.classes.isSelected)) {
				itemPerPage = element.innerHTML;
			}
		});

		this.$query += `&sorting=${this.$sort}&language=${this.$lang}&numRows=${itemPerPage}&page=${page}&numRows=${itemPerPage}`;
		this.$query = this.$query.substr(1);

		this.$queryHaupia += `&language=${this.$lang}&page=${page}&numRows=${itemPerPage}`;

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

	/**
	 * @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 Add to filter list
	 * @param {String} id - Attribute id
	 * @param {String} text - Inner text
	 */
	addToFilterList(id, text, name) {
		const itemId = `${id}${this.options.selectors.filterListSuffix}`;
		const itemName = name ? `name="${name}"` : '';
		const item = `<div id="${itemId}" ${itemName}>${text} <button></button></div>`;
		this.options.filterList.querySelectorAll('div').forEach((item) => {
			if (item.id.replace(this.options.selectors.filterListSuffix, '') === id) {
				this.removeFromFilterList(id);
			} else if (item.getAttribute('name') === name) {
				this.removeFromFilterList(item.id.replace(this.options.selectors.filterListSuffix, ''));
			}
		});
		this.options.filterList.innerHTML += item;
	}

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

	/**
	 * @desc Toggle visibility filter list
	 */
	toggleVisibilityFilterList() {
		this.el.classList.remove(this.options.classes.isSuccess, this.options.classes.isError);
		this.el.classList.add(this.options.classes.isLoading);
		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 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);
	};

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

export default FilterFinderFunction;