\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t`\n\n\t\t\t// insert wrap container inside container (aside-gallery-modal) that is already in the DOM\n\t\t\tdocument.querySelector('.aside-date-picker__slider').insertAdjacentHTML('beforeend', cardEventOnSlider)\n\n\t\t\t// do a loop in data variable in order to get each content inside array\n\t\t\tdata.map(el => {\n\t\t\t\t// get selector swiper wrapper that is inside modal and insert node element\n\t\t\t\tdocument.querySelector('.aside-date-picker__slider-wrap .swiper-wrapper').innerHTML +=\n\t\t\t\t\t`\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t`\n\t\t\t})\n\t\t\tsetTimeout(() => loadEventSliders.fxInitSlider(document.querySelector('.js-slider')), 1)\n\t\t}\n\t},\n\n\tfxHandleGetEventInfoFromUniqueDay(data, submissionType) {\n\n\t\t// save in a variable the day that user is on page\n\t\tlet findSelectedDateOnLoadPage\n\n\t\t// save in a variable the day that user clicked on datepicker\n\t\tlet findSelectedDateOnFilterItems\n\n\t\t// save in a variable parameter that goes with apiEndPoint\n\t\tlet getApiParameter\n\n\t\t// save endPoint that will be used to call api\n\t\tlet apiEndPoint\n\n\t\t// get attributes in order to call api\n\t\tconst actionAttribute = this.el.asideDatePickerContainer.getAttribute('data-action-news-cards')\n\n\t\t// check if page has been load or user clicked on datepicker\n\t\tif (submissionType === 'load') {\n\t\t\t// get atribute from element that has class today - it returns a string with date \"YYYY-MM-DD\"\n\t\t\tfindSelectedDateOnLoadPage = document.querySelector('.today') && document.querySelector('.today').getAttribute('aria-label')\n\n\t\t\t// we loop through response from api and find which event date is equal atribute saved before\n\t\t\tgetApiParameter = data.items.find(el => el.eventDate === findSelectedDateOnLoadPage)\n\n\t\t\t// if we don´t find any date that is equal to atribute saved before we return a card saying that there are no events\n\t\t\tif (!getApiParameter) {\n\t\t\t\tthis.fxBuildCardWhenThereIsNoEvent()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t} else {\n\t\t\t// get atribute from element that has class selected - it returns a string with date \"YYYY-MM-DD\"\n\t\t\tfindSelectedDateOnFilterItems = document.querySelector('.selected').getAttribute('aria-label')\n\n\t\t\t// we loop through response from api and find which event date is equal atribute saved before\n\t\t\tgetApiParameter = data.items.find(el => el.eventDate === findSelectedDateOnFilterItems)\n\n\t\t\t// if we don´t find any date that is equal to atribute saved before we return a card saying that there are no events\n\t\t\tif (!getApiParameter) {\n\t\t\t\tthis.fxBuildCardWhenThereIsNoEvent()\n\t\t\t\treturn\n\t\t\t}\n\t\t}\n\n\t\t// get apiEndPoint \n\t\tapiEndPoint = `${actionAttribute}${getApiParameter.eventDate} `\n\n\t\t// get language that has to be sent to api\n\t\tconst languageParameter = this.el.body.getAttribute('data-language')\n\n\t\t// set variables let (let it change)\n\t\tlet filterRegion\n\t\tlet filterLocation\n\n\t\t// populate variables\n\t\tfilterRegion = this.fxGetFilterID('regionEvents')\n\t\tfilterLocation = this.fxGetFilterID('locationEvents')\n\n\t\t// set formData\n\t\tconst formData = {\n\t\t\teventDate: getApiParameter.eventDate,\n\t\t\tregion: filterRegion ? filterRegion : 'allRegions',\n\t\t\tlocation: filterLocation ? filterLocation : 'allLocations'\n\t\t}\n\n\t\t// callback function \n\t\tconst callback = (response, data) => {\n\t\t\t// call function that will build cards\n\t\t\tthis.fxBuildSliderWithCards(response, data)\n\t\t}\n\n\t\t// GET function - from @http.js file\n\t\thttp.fxPost(apiEndPoint, formData, callback, languageParameter)\n\t},\n\n\tfxInitFlatpickr(el, response, data) {\n\n\t\tif (response.status === 200) {\n\t\t\t// function responsible for color each date picker that has an event\n\t\t\tconst fxHandleColorPickerDate = (data, submissionType) => {\n\t\t\t\t// first we loop through all the dates that are in the response\n\t\t\t\tdata.items.forEach(cardEvent => {\n\t\t\t\t\t// then we loop through all the dates that are in the flatpickr date picker\n\t\t\t\t\tdocument.querySelectorAll('.flatpickr-day').forEach(el => {\n\t\t\t\t\t\t// we save in a variable the atribute value of the date picker - it comes like this: \"YYYY-MM-DD\" - you can change it ate ariaDateFormat inside flatpickrOptions\n\t\t\t\t\t\tconst dateOnPicker = el.getAttribute('aria-label')\n\n\t\t\t\t\t\t// check if date on response is equal to date on flatpickr date picker\n\t\t\t\t\t\tif (cardEvent.eventDate === dateOnPicker) {\n\t\t\t\t\t\t\t// if yes we add class active on the date picker\n\t\t\t\t\t\t\tel.classList.add('is-active')\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t})\n\n\t\t\t\t// than we call this function in order to build cards\n\t\t\t\tthis.fxHandleGetEventInfoFromUniqueDay(data, submissionType)\n\t\t\t}\n\n\t\t\tconst flatpickrOptions = {\n\t\t\t\tlocale: el.dataset.language,\n\t\t\t\tinline: true,\n\t\t\t\tdateFormat: 'Y-m-d',\n\t\t\t\tariaDateFormat: 'Y-m-d',\n\n\t\t\t\tonReady: () => {\n\t\t\t\t\tfxHandleColorPickerDate(data, 'load')\n\t\t\t\t},\n\n\t\t\t\tonChange: () => {\n\t\t\t\t\tfxHandleColorPickerDate(data, 'filter')\n\t\t\t\t},\n\n\t\t\t\tonMonthChange: () => {\n\t\t\t\t\tfxHandleColorPickerDate(data, 'load')\n\t\t\t\t},\n\n\t\t\t\tonYearChange: () => {\n\t\t\t\t\tfxHandleColorPickerDate(data, 'load')\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tflatpickr(el, flatpickrOptions)\n\t\t}\n\n\t},\n\n\tfxHandleFilterOnChangeSelectOrInput(el) {\n\t\t// check if element exists\n\t\tif (!el) return\n\n\t\t// Responsible for set values of radio buttons and select elements on data attribute called \"data filter id\" and make sure that when user select mobile version, the desktop version is selected as well\n\t\ttoggleEventsFilterModal.fxHandleSelectAndInputValue(el)\n\n\t\t// filter results on change of radio button or select\n\t\tthis.fxFilterEvents(this.el.mainContainer)\n\t},\n\n\tfxGetSelectedFilterForSummaryResults(filterId) {\n\t\t// get selected filter type\n\t\tconst typeSelected = document.querySelector(`[data-filter-type=\"${filterId}\"`)\n\t\t// save which select option has been selected\n\t\tconst optionSelected = typeSelected.querySelector('select').options.selectedIndex\n\t\t// return text from this option selected - this way we make sure that we return the exact same value as the one in select element\n\t\treturn typeSelected.querySelector('select').options[optionSelected].text\n\t},\n\n\tfxRenderSummaryEventsResults(response, data) {\n\t\tif (response.status === 200) {\n\n\t\t\t// set the number of results with data.length\n\t\t\tdocument.querySelector('.js-filter-summary-counter').textContent = data.totalRecords\n\n\t\t\t// save variables for later use\n\t\t\tlet filterRegion\n\t\t\tlet filterLocation\n\n\t\t\t// populate variables \n\t\t\tfilterRegion = this.fxGetSelectedFilterForSummaryResults('regionEvents')\n\t\t\tfilterLocation = this.fxGetSelectedFilterForSummaryResults('locationEvents')\n\n\t\t\t// set each result with variables created above\n\t\t\tdocument.querySelector('.js-filter-summary-first-selected').textContent = filterRegion\n\t\t\tdocument.querySelector('.js-filter-summary-second-selected').textContent = filterLocation\n\t\t}\n\t},\n\n\tfxGetFilterID(filterId) {\n\t\t// find filter type from parameter and get filter ID\n\t\treturn document.querySelector(`[data-filter-type=\"${filterId}\"`).getAttribute('data-filter-id')\n\t},\n\n\tevents() {\n\t\t// Responsible for first time initialization of the flatpickr date picker and call api\n\t\tthis.fxFilterEvents(this.el.asideDatePickerContainer)\n\n\t\t//update calendar on input/select change according to region/location\n\t\tthis.el.mainContainer.querySelectorAll('.js-filter-change-listener').forEach((el) => {\n\t\t\tel.addEventListener('change', (e) => {\n\t\t\t\tthis.fxHandleFilterOnChangeSelectOrInput(e)\n\t\t\t})\n\t\t})\n\t},\n\n\tinit() {\n\t\tif (!this.el.mainContainer) return\n\t\tthis.events()\n\t}\n}\n\nserviceFilterEventsAsideDatePicker.init()","/* global http toggleEventsFilterModal */\nconst serviceFilterJobOffers = {\n\tel: {\n\t\tbody: document.body,\n\t\tmainContainer: document.querySelector('.js-filter-jobs'),\n\t\tfilterInputAndSelectListener: document.querySelectorAll('.js-filter-change-listener'),\n\t\tloadMoreButton: document.querySelector('.js-filter-loadmore-listener')\n\t},\n\n\tvars: {\n\t\tcurrentPage: 1\n\t},\n\n\tfxHandleFilterOnChangeSelectOrInput(el) {\n\t\t// check if element exists\n\t\tif (!el) return\n\n\t\t// reset pagination\n\t\tthis.vars.currentPage = 1\n\n\t\t// Responsible for set values of radio buttons and select elements on data attribute called \"data filter id\" and make sure that when user select mobile version, the desktop version is selected as well\n\t\ttoggleEventsFilterModal.fxHandleSelectAndInputValue(el)\n\n\t\t// filter results on change of radio button or select\n\t\tthis.fxFilterRoutes(this.el.mainContainer)\n\t},\n\n\tfxUpdatePagination() {\n\t\t// increase the current page\n\t\tthis.vars.currentPage += 1\n\n\t\t// filter results on pagination selected\n\t\tthis.fxFilterRoutes(this.el.mainContainer)\n\t},\n\n\tfxRenderCards(response, data) {\n\t\tif (response.status === 200) {\n\n\t\t\t// this condition is needed to make sure that when user select a new filter, the results are filtered again\n\t\t\tif (this.vars.currentPage === 1) {\n\t\t\t\t// remove all the cards\n\t\t\t\tdocument.querySelectorAll('.cards-container__item').forEach(el => el.remove())\n\t\t\t}\n\n\t\t\t//set variables for later use\n\t\t\tlet card\n\n\t\t\t//then we need to render the new results looping through the data\n\t\t\tdata.items.map(el => {\n\n\t\t\t\t//save card structure in a variable\n\t\t\t\tcard =\n\t\t\t\t\t`\n\t\t\t\t\t
\n\t\t\t\t`\n\t\t\t\t// insert wrap container inside container (list-content__list) that is already in the DOM\n\t\t\t\tdocument.querySelector('.cards-container__grid').insertAdjacentHTML('beforeend', card)\n\t\t\t})\n\n\t\t\tif (!data.loadMore) {\n\t\t\t\tthis.el.loadMoreButton.style.display = 'none'\n\t\t\t}\n\t\t}\n\t},\n\n\tfxGetSelectedFilterForSummaryResults(filterId) {\n\t\t// get selected filter type\n\t\tconst typeSelected = document.querySelector(`[data-filter-type=\"${filterId}\"`)\n\t\t// save which select option has been selected\n\t\tconst optionSelected = typeSelected.querySelector('select').options.selectedIndex\n\t\t// return text from this option selected - this way we make sure that we return the exact same value as the one in select element\n\t\treturn typeSelected.querySelector('select').options[optionSelected].text\n\t},\n\n\tfxRenderSummaryRouteResults(response, data) {\n\t\tif (response.status === 200) {\n\n\t\t\t// set the number of results with data.length\n\t\t\tdocument.querySelector('.js-filter-summary-counter').textContent = data.totalRecords\n\n\t\t\t// save variables for later use\n\t\t\tlet filterRegion\n\t\t\tlet filterLocation\n\n\t\t\t// populate variables \n\t\t\tfilterRegion = this.fxGetSelectedFilterForSummaryResults('region')\n\t\t\tfilterLocation = this.fxGetSelectedFilterForSummaryResults('hostel')\n\n\t\t\t// set each result with variables created above\n\t\t\tdocument.querySelector('.js-filter-summary-first-selected').textContent = filterRegion\n\t\t\tdocument.querySelector('.js-filter-summary-second-selected').textContent = filterLocation\n\t\t}\n\t},\n\n\tfxGetFilterID(filterId) {\n\t\t// find filter type from parameter and get filter ID\n\t\treturn document.querySelector(`[data-filter-type=\"${filterId}\"`).getAttribute('data-filter-id')\n\t},\n\n\tfxFilterRoutes(el) {\n\t\t// check if element exists\n\t\tif (!el) return\n\n\t\t// set variables let (let it change)\n\t\tlet filterRegion\n\t\tlet filterHostel\n\n\t\t// populate variables\n\t\tfilterRegion = this.fxGetFilterID('region')\n\t\tfilterHostel = this.fxGetFilterID('hostel')\n\n\t\t// get endpoint\n\t\tconst endpoint = el.getAttribute('data-action-job-cards')\n\n\t\t// get language that has to be sent to api\n\t\tconst languageParameter = this.el.body.getAttribute('data-language')\n\n\t\t// set formData\n\t\tconst formData = {\n\t\t\tregion: filterRegion ? filterRegion : 'all',\n\t\t\thostel: filterHostel ? filterHostel : 'all',\n\t\t\tpage: this.vars.currentPage\n\t\t}\n\n\t\t// callback function \n\t\tconst callback = (response, data) => {\n\t\t\t// call function that will build cards\n\t\t\tthis.fxRenderCards(response, data)\n\n\t\t\t// call function that will fill summary results\n\t\t\tthis.fxRenderSummaryRouteResults(response, data)\n\t\t}\n\n\t\t// call api\n\t\thttp.fxPost(endpoint, formData, callback, languageParameter)\n\t},\n\n\tevents() {\n\t\t// check if element exists\n\t\tif (!this.el.mainContainer) return\n\n\t\t// Responsible for all events on select and radio buttons\n\t\tthis.el.filterInputAndSelectListener.forEach(el => el.addEventListener('change', e => this.fxHandleFilterOnChangeSelectOrInput(e)))\n\n\t\t// Responsible for pagination \n\t\tthis.el.loadMoreButton && this.el.loadMoreButton.addEventListener('click', () => this.fxUpdatePagination())\n\n\t\t// Responsible for filter on load page\n\t\tthis.fxFilterRoutes(this.el.mainContainer)\n\t},\n\n\tinit() {\n\t\tthis.events()\n\t}\n}\n\nserviceFilterJobOffers.init()","/* global http */\nconst serviceFilterNews = {\n\tel: {\n\t\tbody: document.body,\n\t\tmainContainer: document.querySelector('.js-filter-loadmore'),\n\t\tloadMoreButton: document.querySelector('.js-filter-loadmore-listener')\n\t},\n\n\tvars: {\n\t\tcurrentPage: 1\n\t},\n\n\tfxUpdatePagination() {\n\n\t\t// increase the current page\n\t\tthis.vars.currentPage += 1\n\n\t\t// filter results on pagination selected\n\t\tthis.fxFilterNews(this.el.mainContainer)\n\t},\n\n\tfxRenderCards(response, data) {\n\t\tif (response.status === 200) {\n\n\t\t\t//set variables for later use\n\t\t\tlet cardsBetaGrid\n\n\t\t\t//then we need to render the new results looping through the data\n\t\t\tdata.items.map(el => {\n\n\t\t\t\t//save card structure in a variable\n\t\t\t\tcardsBetaGrid =\n\t\t\t\t\t`\n\t\t\t\t\t
\n\t\t\t\t\t`\n\t\t\t\t// insert wrap container inside container (cards-container__grid) that is already in the DOM\n\t\t\t\tdocument.querySelector('.cards-container__grid').insertAdjacentHTML('beforeend', cardsBetaGrid)\n\n\t\t\t})\n\n\t\t\tif (!data.loadMore) {\n\t\t\t\tthis.el.loadMoreButton.style.display = 'none'\n\t\t\t}\n\t\t}\n\t},\n\n\tfxFilterNews(el) {\n\t\t// check if element exists\n\t\tif (!el) return\n\n\t\t// get endpoint\n\t\tconst endpoint = el.getAttribute('data-action-loadmore')\n\n\t\t// get language that has to be sent to api\n\t\tconst languageParameter = this.el.body.getAttribute('data-language')\n\n\t\t// set formData\n\t\tconst formData = {\n\t\t\tpage: this.vars.currentPage\n\t\t}\n\n\t\t// callback function \n\t\tconst callback = (response, data) => {\n\t\t\t// call function that will build cards\n\t\t\tthis.fxRenderCards(response, data)\n\t\t}\n\n\t\t// call api\n\t\thttp.fxPost(endpoint, formData, callback, languageParameter)\n\t},\n\n\tevents() {\n\t\t// check if element exists\n\t\tif (!this.el.loadMoreButton) return\n\n\t\t// Responsible for pagination \n\t\tthis.el.loadMoreButton && this.el.loadMoreButton.addEventListener('click', () => this.fxUpdatePagination())\n\n\t\t// Responsible for filter on load page\n\t\tthis.fxFilterNews(this.el.mainContainer)\n\t},\n\n\tinit() {\n\t\tthis.events()\n\t}\n}\n\nserviceFilterNews.init()","/* global http toggleEventsFilterModal */\nconst serviceFilterRoutes = {\n\tel: {\n\t\tbody: document.body,\n\t\tmainContainer: document.querySelector('.js-filter-route'),\n\t\tfilterInputAndSelectListener: document.querySelectorAll('.js-filter-change-listener'),\n\t\tloadMoreButton: document.querySelector('.js-filter-loadmore-listener')\n\t},\n\n\tvars: {\n\t\tcurrentPage: 1\n\t},\n\n\tfxHandleFilterOnChangeSelectOrInput(el) {\n\t\t// check if element exists\n\t\tif (!el) return\n\n\t\t// reset pagination\n\t\tthis.vars.currentPage = 1\n\n\t\t// Responsible for set values of radio buttons and select elements on data attribute called \"data filter id\" and make sure that when user select mobile version, the desktop version is selected as well\n\t\ttoggleEventsFilterModal.fxHandleSelectAndInputValue(el)\n\n\t\t// filter results on change of radio button or select\n\t\tthis.fxFilterRoutes(this.el.mainContainer)\n\t},\n\n\tfxUpdatePagination() {\n\t\t// increase the current page\n\t\tthis.vars.currentPage += 1\n\n\t\t// filter results on pagination selected\n\t\tthis.fxFilterRoutes(this.el.mainContainer)\n\t},\n\n\tfxRenderCards(response, data) {\n\t\tif (response.status === 200) {\n\n\t\t\t// this condition is needed to make sure that when user select a new filter, the results are filtered again\n\t\t\tif (this.vars.currentPage === 1) {\n\t\t\t\t// remove all the cards\n\t\t\t\tdocument.querySelectorAll('.cards-container__item').forEach(el => el.remove())\n\t\t\t}\n\n\t\t\t//set variables for later use\n\t\t\tlet card\n\n\t\t\t//then we need to render the new results looping through the data\n\t\t\tdata.items.map(el => {\n\n\t\t\t\t//save card structure in a variable\n\t\t\t\tcard =\n\t\t\t\t\t`\n\t\t\t\t\t
\n\t\t\t\t`\n\t\t\t\t// insert wrap container inside container (list-content__list) that is already in the DOM\n\t\t\t\tdocument.querySelector('.cards-container__grid').insertAdjacentHTML('beforeend', card)\n\t\t\t})\n\n\t\t\tif (!data.loadMore) {\n\t\t\t\tthis.el.loadMoreButton.style.display = 'none'\n\t\t\t}\n\t\t}\n\t},\n\n\tfxGetSelectedFilterForSummaryResults(filterId) {\n\t\t// get selected filter type\n\t\tconst typeSelected = document.querySelector(`[data-filter-type=\"${filterId}\"`)\n\t\t// save which select option has been selected\n\t\tconst optionSelected = typeSelected.querySelector('select').options.selectedIndex\n\t\t// return text from this option selected - this way we make sure that we return the exact same value as the one in select element\n\t\treturn typeSelected.querySelector('select').options[optionSelected].text\n\t},\n\n\tfxRenderSummaryRouteResults(response, data) {\n\t\tif (response.status === 200) {\n\n\t\t\t// set the number of results with data.length\n\t\t\tdocument.querySelector('.js-filter-summary-counter').textContent = data.totalRecords\n\n\t\t\t// save variables for later use\n\t\t\tlet filterRegion\n\t\t\tlet filterLocation\n\n\t\t\t// populate variables \n\t\t\tfilterRegion = this.fxGetSelectedFilterForSummaryResults('region')\n\t\t\tfilterLocation = this.fxGetSelectedFilterForSummaryResults('location')\n\n\t\t\t// set each result with variables created above\n\t\t\tdocument.querySelector('.js-filter-summary-first-selected').textContent = filterRegion\n\t\t\tdocument.querySelector('.js-filter-summary-second-selected').textContent = filterLocation\n\t\t}\n\t},\n\n\tfxGetFilterID(filterId) {\n\t\t// find filter type from parameter and get filter ID\n\t\treturn document.querySelector(`[data-filter-type=\"${filterId}\"`).getAttribute('data-filter-id')\n\t},\n\n\tfxFilterRoutes(el) {\n\t\t// check if element exists\n\t\tif (!el) return\n\n\t\t// set variables let (let it change)\n\t\tlet filterRegion\n\t\tlet filterLocation\n\n\t\t// populate variables\n\t\tfilterRegion = this.fxGetFilterID('region')\n\t\tfilterLocation = this.fxGetFilterID('location')\n\n\t\t// get endpoint\n\t\tconst endpoint = el.getAttribute('data-action-route-cards')\n\n\t\t// get language that has to be sent to api\n\t\tconst languageParameter = this.el.body.getAttribute('data-language')\n\n\t\t// set formData\n\t\tconst formData = {\n\t\t\tregion: filterRegion ? filterRegion : 'all',\n\t\t\tlocation: filterLocation ? filterLocation : 'all',\n\t\t\tpage: this.vars.currentPage\n\t\t}\n\n\t\t// callback function \n\t\tconst callback = (response, data) => {\n\t\t\t// call function that will build cards\n\t\t\tthis.fxRenderCards(response, data)\n\n\t\t\t// call function that will fill summary results\n\t\t\tthis.fxRenderSummaryRouteResults(response, data)\n\t\t}\n\n\t\t// call api\n\t\thttp.fxPost(endpoint, formData, callback, languageParameter)\n\t},\n\n\tevents() {\n\t\t// check if element exists\n\t\tif (!this.el.mainContainer) return\n\n\t\t// Responsible for all events on select and radio buttons\n\t\tthis.el.filterInputAndSelectListener.forEach(el => el.addEventListener('change', e => this.fxHandleFilterOnChangeSelectOrInput(e)))\n\n\t\t// Responsible for pagination\n\t\tthis.el.loadMoreButton && this.el.loadMoreButton.addEventListener('click', () => this.fxUpdatePagination())\n\n\t\t// Responsible for filter on load page\n\t\tthis.fxFilterRoutes(this.el.mainContainer)\n\t},\n\n\tinit() {\n\t\tthis.events()\n\t}\n}\n\nserviceFilterRoutes.init()","/* global http toggleEventsFilterModal scrollEventStickyNav */\nconst serviceFilterTourism = {\n\tel: {\n\t\tbody: document.body,\n\t\tmainContainer: document.querySelector('.js-filter-tourism'),\n\t\tfilterInputAndSelectListener: document.querySelectorAll('.js-filter-change-listener'),\n\t\tloadMoreButton: document.querySelector('.js-filter-loadmore-listener'),\n\t\tfilterTabs: document.querySelectorAll('[data-filter-tab]')\n\t},\n\n\tvars: {\n\t\tcurrentPage: 1\n\t},\n\n\tfxHandleFilterOnChangeSelectOrInput(el) {\n\t\t// check if element exists\n\t\tif (!el) return\n\n\t\t// reset pagination\n\t\tthis.vars.currentPage = 1\n\n\t\t// Responsible for set values of radio buttons and select elements on data attribute called \"data filter id\" and make sure that when user select mobile version, the desktop version is selected as well\n\t\ttoggleEventsFilterModal.fxHandleSelectAndInputValue(el)\n\n\t\t// filter results on change of radio button or select\n\t\tthis.fxFilterTourism(this.el.mainContainer)\n\t},\n\n\tfxUpdatePagination() {\n\t\t// increase the current page\n\t\tthis.vars.currentPage += 1\n\n\t\t// filter results on pagination selected\n\t\tthis.fxFilterTourism(this.el.mainContainer)\n\t},\n\n\tfxRenderCards(response, data) {\n\t\tif (response.status === 200) {\n\n\t\t\t// this condition is needed to make sure that when user select a new filter, the results are filtered again\n\t\t\tif (this.vars.currentPage === 1) {\n\t\t\t\t// remove all the cards\n\t\t\t\tdocument.querySelectorAll('.cards-container__item').forEach(el => el.remove())\n\t\t\t}\n\n\t\t\t//set variables for later use\n\t\t\tlet card\n\n\t\t\t//then we need to render the new results looping through the data\n\t\t\tdata.items.map(el => {\n\n\t\t\t\t//save card structure in a variable\n\t\t\t\tcard =\n\t\t\t\t\t`\n\t\t\t\t\t
\n\t\t\t\t`\n\t\t\t\t// insert wrap container inside container (list-content__list) that is already in the DOM\n\t\t\t\tdocument.querySelector('.cards-container__grid').insertAdjacentHTML('beforeend', card)\n\t\t\t})\n\n\t\t\tif (!data.loadMore) {\n\t\t\t\tthis.el.loadMoreButton.style.display = 'none'\n\t\t\t}\n\n\t\t\t// this must be here in order to sticky nav work. Just in case we have sticky nav after filtering\n\t\t\tscrollEventStickyNav.fxHandleStickyElementOnScroll()\n\t\t}\n\t},\n\n\tfxGetSelectedFilterForSummaryResults(filterId) {\n\t\t// get selected filter type\n\t\tconst typeSelected = document.querySelector(`[data-filter-type=\"${filterId}\"`)\n\t\t// save which select option has been selected\n\t\tconst optionSelected = typeSelected.querySelector('select').options.selectedIndex\n\t\t// return text from this option selected - this way we make sure that we return the exact same value as the one in select element\n\t\treturn typeSelected.querySelector('select').options[optionSelected].text\n\t},\n\n\tfxRenderSummaryRouteResults(response, data) {\n\t\tif (response.status === 200) {\n\n\t\t\t// set the number of results with data.length\n\t\t\tdocument.querySelector('.js-filter-summary-counter').textContent = data.totalRecords\n\n\t\t\t// set variables let (let it change)\n\t\t\tlet categories\n\t\t\tlet subCategories\n\n\t\t\t// populate variables\n\t\t\tcategories = this.fxGetSelectedFilterForSummaryResults('category')\n\n\t\t\tsubCategories = this.fxGetSelectedFilterForSummaryResults('subCategory')\n\n\t\t\t// set each result with variables created above\n\t\t\tdocument.querySelector('.js-filter-summary-first-selected').textContent = categories\n\n\t\t\t// set each result with variables created above\n\t\t\tdocument.querySelector('.js-filter-summary-second-selected').textContent = subCategories\n\n\t\t}\n\t},\n\n\tfxGetFilterID(filterId) {\n\t\t// find filter type from parameter and get filter ID\n\t\treturn document.querySelector(`[data-filter-type=\"${filterId}\"`).getAttribute('data-filter-id')\n\t},\n\n\tfxFilterTourism(el) {\n\t\t// check if element exists\n\t\tif (!el) return\n\n\t\t// set variables let (let it change)\n\t\tlet category\n\t\tlet subCategory\n\n\t\t// populate variables\n\t\tcategory = this.fxGetFilterID('category')\n\t\tsubCategory = this.fxGetFilterID('subCategory')\n\n\t\t// get endpoint\n\t\tconst endpoint = el.getAttribute('data-action-tourism-cards')\n\n\t\t// get language that has to be sent to api\n\t\tconst languageParameter = this.el.body.getAttribute('data-language')\n\n\t\t// set formData\n\t\tconst formData = {\n\t\t\tcategory: category ? category : 'allCategories',\n\t\t\tsubcategory: subCategory ? subCategory : 'allSubCategories',\n\t\t\tpage: this.vars.currentPage\n\t\t}\n\n\t\t// callback function \n\t\tconst callback = (response, data) => {\n\t\t\t// call function that will build cards\n\t\t\tthis.fxRenderCards(response, data)\n\n\t\t\t// call function that will fill summary results\n\t\t\tthis.fxRenderSummaryRouteResults(response, data)\n\t\t}\n\n\t\t// call api\n\t\thttp.fxPost(endpoint, formData, callback, languageParameter)\n\t},\n\n\tevents() {\n\t\t// check if element exists\n\t\tif (!this.el.mainContainer) return\n\n\t\t// Responsible for all events on select and radio buttons\n\t\tthis.el.filterInputAndSelectListener.forEach(el => el.addEventListener('change', e => this.fxHandleFilterOnChangeSelectOrInput(e)))\n\n\t\t// Responsible for pagination \n\t\tthis.el.loadMoreButton && this.el.loadMoreButton.addEventListener('click', () => this.fxUpdatePagination())\n\n\t\t// Responsible for filter on load page\n\t\tthis.fxFilterTourism(this.el.mainContainer)\n\t},\n\n\tinit() {\n\t\tthis.events()\n\t}\n}\n\nserviceFilterTourism.init()","/* global http loadEventSliderWithThumbnail*/\nconst serviceModalGallery = {\n\tel: {\n\t\tbody: document.querySelector('body'),\n\t\tmainWrapperPage: document.querySelector('.wrapper'),\n\t\tmodalContainer: document.querySelector('.aside-gallery-modal'),\n\t\ttoggleModal: document.querySelectorAll('.js-modal-gallery-toggle')\n\t},\n\n\tfxToggleModal(e, index) {\n\t\t// check if parent element has class that opens modal\n\t\tif (e.currentTarget.closest('.aside-gallery').classList.contains('modal-opened')) {\n\t\t\t// if yes we remove class and class that hide scrollbar\n\t\t\te.currentTarget.closest('.aside-gallery').classList.remove('modal-opened')\n\t\t\tthis.el.body.classList.remove('no-scroll-hidden')\n\n\t\t}\n\t\telse {\n\t\t\t// if not we add class on parent / hide scrollbar and call api\n\t\t\te.currentTarget.closest('.aside-gallery').classList.add('modal-opened')\n\t\t\tthis.el.body.classList.add('no-scroll-hidden')\n\n\t\t\t// we receive index in order to check which image on gallery has been clicked\n\t\t\tthis.fxHandleApiCall(index)\n\t\t}\n\t},\n\n\tfxHandleApiCall(index) {\n\t\t// get attributes in order to call api\n\t\tconst apiEndPoint = this.el.mainWrapperPage.getAttribute('data-action-modal-gallery')\n\t\tconst hostelId = this.el.mainWrapperPage.getAttribute('data-hostel-id')\n\n\t\t// concat attributes\n\t\tconst finalEndPoint = `${apiEndPoint}${hostelId} `\n\n\t\t// get language that has to be sent to api\n\t\tconst languageParameter = this.el.body.getAttribute('data-language')\n\n\t\t// set formData\n\t\tconst formData = {\n\t\t\thostelId\n\t\t}\n\n\t\t// callback function \n\t\tconst callback = (response, data) => this.fxBuildModalGallery(response, data, index)\n\n\t\t// GET function - from @http.js file\n\t\thttp.fxPost(finalEndPoint, formData, callback, languageParameter)\n\t},\n\n\tfxBuildModalGallery(response, data, index) {\n\t\t// check if response is success\n\t\tif (response.status === 200) {\n\n\t\t\t// check if user already opened gallery, if yes we remove everything inside modal\n\t\t\tdocument.querySelector('.aside-gallery-modal__wrap') && document.querySelector('.aside-gallery-modal__wrap').remove()\n\n\t\t\t// save container that goes inside aside-gallery-modal\n\t\t\tconst modalGalleryContent =\n\t\t\t\t`\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t${data[index].figCaptionHeading}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t${data[index].figCaptionCopy}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
![\"{{caption}}\"](\"{{image}}\" "\\"{{caption}}\\"")
\n\t\t\t\t\t\t\t