\r\n
\r\n
\r\n
\r\n `;\r\n if (tab.areaResults.length > 0) {\r\n destinationContentData += `Areas
`\r\n }\r\n ` `\r\n for (let i = 0; i < tab.areaResults.length; i++) {\r\n destinationContentData += `\r\n \r\n ${tab.areaResults[i].title} \r\n `\r\n }\r\n destinationContentData += ` \r\n
\r\n
`\r\n tabContent.innerHTML = `${destinationContentData}`;\r\n }\r\n contentContainer.appendChild(tabContent);\r\n }\r\n });\r\n showTab(resultsData[0].id, 0);\r\n this.AttachCardsToAnalytics();\r\n this.AttachViewAllButtonsToAnalytics();\r\n }\r\n\r\n function showTab(tabId, tabIndex) {\r\n var tabs = document.getElementsByClassName('tab');\r\n for (var i = 0; i < tabs.length; i++) {\r\n tabs[i].classList.remove('active-tab');\r\n }\r\n\r\n document.getElementById(tabId).classList.add('active-tab');\r\n\r\n var tabButtons = document.getElementsByClassName('tab-button');\r\n for (var i = 0; i < tabButtons.length; i++) {\r\n tabButtons[i].classList.remove('active-tab-button');\r\n }\r\n\r\n tabButtons[tabIndex].classList.add('active-tab-button');\r\n }\r\n }\r\n\r\n AttachViewAllButtonsToAnalytics() {\r\n var btnContainer = document.querySelector(\"#tab-content-container\");\r\n\r\n var tabsCollection = btnContainer.querySelectorAll(\".tab\");\r\n tabsCollection.forEach(tab => {\r\n var tabParentBtn = tab.querySelector(\".sd-view-results-button\");\r\n var btnCategory = tabParentBtn.id;\r\n var tabBtn = tabParentBtn.querySelector(\"a\");\r\n tabBtn.addEventListener(\"click\", (event) => this.UpdateEventTracking(event, btnCategory));\r\n });\r\n }\r\n\r\n AttachCardsToAnalytics() {\r\n var cards = document.querySelectorAll('.onsite-card>a');\r\n\r\n cards.forEach(card => {\r\n card.addEventListener('click', (event) => this.UpdateEventTracking(event, \"suggestion\"));\r\n });\r\n }\r\n\r\n UpdateEventTracking(event, strBtnCategory) {\r\n event.preventDefault();\r\n var convertedTitle;\r\n\r\n if (strBtnCategory == \"suggestion\") {\r\n var targetItem = event.currentTarget;\r\n var targetContent = targetItem.querySelector(\".onsite-card-content\");\r\n var targetTitle = targetContent.querySelector(\".onsite-card-text>.onsite-card-title\").innerHTML;\r\n\r\n convertedTitle = this.ConvertStringToSuggestionName(targetTitle);\r\n } else {\r\n convertedTitle = strBtnCategory.replace(/\\s+/g, '-') + \"-View-All-Results\";\r\n }\r\n\r\n //processing to get all the required fields/info\r\n GATracking.customObjectEventTracking('searchAutocomplete', 'header', 'search', { 'search_suggestion': convertedTitle, 'page_title': document.title });\r\n window.location.href = event.currentTarget.href;\r\n }\r\n\r\n ConvertStringToSuggestionName(input) {\r\n let selectedTabItem = document.querySelector('.active-tab-button').innerHTML;\r\n let selectedTabVal = selectedTabItem.replace(/\\s*\\(\\d+\\)/, '') + \" - \" + input;\r\n\r\n var result = selectedTabVal\r\n .replace(\"-\", '')\r\n .replace(/,/g, '')\r\n .replace(/\\s+/g, '-');\r\n\r\n return result;\r\n }\r\n\r\n // Transforming function\r\n transformData(originalData) {\r\n const transformedData = [];\r\n if (originalData[0].noPropTourMessage != null) {\r\n this.noPropTourMessage = originalData[0].noPropTourMessage;\r\n return;\r\n }\r\n originalData.forEach(item => {\r\n const tabs = Object.keys(item).filter(key => key.startsWith('filter'));\r\n this.noResultFlag = 0;\r\n this.noPropTourMessage = \"\";\r\n tabs.forEach((tab, index) => {\r\n const filter = item[tab];\r\n if (filter.resultsCount == 0) {\r\n this.noResultFlag += 1;\r\n this.noResultContent = \"\";\r\n\r\n if (this.noResultFlag == 7) {\r\n this.noResultContent = (originalData[0].notFoundMessage);\r\n }\r\n return;\r\n }\r\n const transformedTab = {\r\n id: `tab${index}`,\r\n title: filter.title,\r\n resultsCount: filter.resultsCount,\r\n filterId: filter.filterId\r\n };\r\n\r\n if (tab === 'filtersDestination') {\r\n transformedTab.countryResults = filter.countryResults.map(country => ({\r\n title: country.title,\r\n itemUrl: country.itemUrl,\r\n country: country.country,\r\n area: country.area,\r\n nights: country.nights,\r\n imageurl: null\r\n }));\r\n transformedTab.areaResults = filter.areaResults.map(area => ({\r\n title: area.title,\r\n itemUrl: area.itemUrl,\r\n country: area.country,\r\n area: area.area,\r\n nights: area.nights,\r\n imageurl: null\r\n }));\r\n transformedTab.viewAllResults = filter.viewAllResults;\r\n } else if (tab === 'filterTours') {\r\n transformedTab.tourResults = filter.results.map(tour => ({\r\n title: tour.title,\r\n itemUrl: tour.itemUrl,\r\n country: tour.country,\r\n area: tour.area,\r\n nights: tour.nights,\r\n imageurl: tour.imageurl,\r\n badge: tour.bagde || false,\r\n location: tour.location\r\n\r\n }));\r\n transformedTab.viewAllResults = filter.viewAllResults;\r\n } else if (tab === 'filterHotels') {\r\n transformedTab.hotelResults = filter.results.map(hotel => ({\r\n title: hotel.title,\r\n itemUrl: hotel.itemUrl,\r\n country: hotel.country,\r\n area: hotel.area,\r\n nights: hotel.nights,\r\n imageurl: hotel.imageurl,\r\n location: hotel.location\r\n }));\r\n transformedTab.viewAllResults = filter.viewAllResults;\r\n } else if (tab === 'filterOffer') {\r\n transformedTab.offerResults = filter.results.map(offer => ({\r\n title: offer.title,\r\n itemUrl: offer.itemUrl,\r\n country: offer.country,\r\n area: offer.area,\r\n nights: offer.nights,\r\n imageurl: offer.imageurl,\r\n offerTitle: offer.offerTitle\r\n }));\r\n transformedTab.viewAllResults = filter.viewAllResults;\r\n } else if (tab === 'filterThingsToDo') {\r\n transformedTab.thingsToDoResults = filter.results.map(thing => ({\r\n title: thing.title,\r\n itemUrl: thing.itemUrl,\r\n country: thing.country,\r\n area: thing.area,\r\n nights: thing.nights,\r\n imageurl: thing.imageurl,\r\n location: thing.location\r\n }));\r\n transformedTab.viewAllResults = filter.viewAllResults;\r\n } else if (tab === 'filterInspiration') {\r\n transformedTab.inspirationResults = filter.results.map(inspiration => ({\r\n title: inspiration.title,\r\n itemUrl: inspiration.itemUrl,\r\n country: inspiration.country,\r\n area: inspiration.area,\r\n nights: inspiration.nights,\r\n imageurl: inspiration.imageurl,\r\n publishDate: inspiration.publishDate\r\n }));\r\n transformedTab.viewAllResults = filter.viewAllResults;\r\n } else if (tab === 'filterTeam') {\r\n transformedTab.teamResults = filter.results.map(team => ({\r\n title: team.title,\r\n itemUrl: team.itemUrl,\r\n country: team.country,\r\n area: team.area,\r\n nights: team.nights,\r\n imageurl: team.imageurl,\r\n teamExpert: team.teamExpert\r\n }));\r\n transformedTab.viewAllResults = filter.viewAllResults;\r\n }\r\n transformedData.push(transformedTab);\r\n });\r\n });\r\n\r\n return transformedData;\r\n }\r\n\r\n\r\n removeResults = () => {\r\n const resultItems = this.results.querySelectorAll('li');\r\n resultItems.forEach(item => item.parentElement.removeChild(item));\r\n }\r\n}\r\n\r\n\r\nexport default AutoComplete;","import AutoComplete from \"./AutoComplete\";\r\n\r\nexport const autoComplete = {\r\n init: (domElement) => {\r\n if (domElement) {\r\n const resultContainer = domElement.querySelector(\".sd-autocomplete__results\");\r\n new AutoComplete(domElement, resultContainer)\r\n }\r\n },\r\n}\r\n\r\nexport default autoComplete;","import HttpClient from \"../client/httpclient\";\r\nimport Loader from \"../loading/loader\";\r\nimport 'regenerator-runtime/runtime';\r\n\r\nclass DynamicFilter {\r\n constructor(DOMelement) {\r\n try {\r\n this.el = DOMelement.parentElement;\r\n this.input = this.el.querySelector(\".sd-input\");\r\n this.button = this.el.querySelector(\"button\");\r\n this.results = DOMelement;\r\n document.addEventListener(\"click\", this.removeResults);\r\n this.loaderEl = document.querySelector(\".sd-searchbar > .sd-loading\");\r\n this.loader = new Loader(this.loaderEl);\r\n\r\n this.filtersContainer = this.el.querySelector(\"#filters-container-desktop\");\r\n this.selectedFiltersContainer = this.el.querySelector(\"#selected-filters1\");\r\n this.selectedFiltersMobileContainer = this.el.querySelector(\"#selected-filters\");\r\n this.filtersContainerMobile = this.el.querySelector(\"#filters-container\");\r\n\r\n const filterDrawer = this.el.querySelector(\"#filter-drawer\");\r\n const openFiltersBtn = this.el.querySelector(\"#open-filters-btn\");\r\n const closeFiltersBtn = this.el.querySelector(\"#close-filters-btn\");\r\n this.applyFiltersBtn = this.el.querySelector(\"#apply-filters-btn\");\r\n this.dynamicFilterApiUrl = this.el.querySelector(\"#dynamicFilterApiUrl\");\r\n this.dynamicFilterDataUrl = this.dynamicFilterApiUrl.getAttribute(\"data-dynamic-filters\");\r\n this.dynamicFilterListUrl = this.dynamicFilterApiUrl.getAttribute(\"data-action-dynamic-filter\");\r\n this.dynamicFilterDsId = this.dynamicFilterApiUrl.getAttribute(\"data-dsId\");\r\n this.dynamicFilterPageId = this.dynamicFilterApiUrl.getAttribute(\"data-pageId\");\r\n\r\n this.currentPageNumber = 2;\r\n\r\n if (process.env.NODE_ENV === \"development\") {\r\n this.URL = '../src/components/room-card/room-card.html?p=';\r\n }\r\n\r\n this.el.querySelectorAll(\".load-more-filter-button button\").forEach(button => {\r\n button.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n this.loadMoreResults(button);\r\n });\r\n this.URL = button.getAttribute(\"data-action\");\r\n });\r\n\r\n this.headers = document.querySelectorAll(\".filter-group h4\");\r\n this.removeFilterBtn = document.querySelectorAll(\".remove-filter\");\r\n\r\n this.updateSelectedFilters = this.updateSelectedFilters.bind(this);\r\n this.handleFilterChange = this.handleFilterChange.bind(this);\r\n this.enableDisableFilters = this.enableDisableFilters.bind(this);\r\n this.selectedFiltersGloblal;\r\n\r\n // Open drawer on mobile\r\n openFiltersBtn.addEventListener(\"click\", () => {\r\n filterDrawer.classList.add(\"open\");\r\n });\r\n\r\n // Close drawer on mobile\r\n closeFiltersBtn.addEventListener(\"click\", () => {\r\n filterDrawer.classList.remove(\"open\");\r\n });\r\n\r\n this.applyFiltersBtn.addEventListener(\"click\", () => {\r\n this.updateSelectedMobileFilters();\r\n this.callApiWithSelectedFilters();\r\n filterDrawer.classList.remove(\"open\");\r\n });\r\n\r\n this.removeFilterBtn.forEach(el => {\r\n el.addEventListener(\"click\", function () {\r\n filter.checkbox.checked = false;\r\n this.handleFilterChange();\r\n });\r\n });\r\n\r\n this.method = \"GET\";\r\n if (process.env.NODE_ENV === \"development\") {\r\n this.url = this.dynamicFilterDataUrl;\r\n this.listUrl = this.dynamicFilterListUrl;\r\n }\r\n else {\r\n this.url = this.dynamicFilterDataUrl;\r\n this.listUrl = this.dynamicFilterListUrl;\r\n }\r\n\r\n this.getFilterData();\r\n\r\n this.noResultFlag = 0;\r\n this.noResultContent = \"\";\r\n this.noPropTourMessage = \"\";\r\n\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n }\r\n\r\n createFilters(filters) {\r\n if (filters.length > 0) {\r\n filters.forEach((filter) => {\r\n const filterGroup = document.createElement(\"div\");\r\n filterGroup.className = \"filter-group\";\r\n filterGroup.dataset.group = filter.Name.split('|')[0];\r\n\r\n const dropdown = document.createElement(\"div\");\r\n dropdown.className = \"dropdown\";\r\n\r\n const dropdownBtn = document.createElement(\"button\");\r\n dropdownBtn.className = \"dropdown-btn\";\r\n dropdownBtn.textContent = filter.Name.split('|')[0];\r\n\r\n const filterCountElement = document.createElement(\"span\");\r\n filterCountElement.className = `filter-count ${filter.Name.split('|').pop().replace(/\\s+/g, '')}`;\r\n dropdownBtn.appendChild(filterCountElement);\r\n\r\n const dropdownContent = document.createElement(\"div\");\r\n dropdownContent.className = \"dropdown-content\";\r\n\r\n filter.Options.forEach((option) => {\r\n const label = document.createElement(\"label\");\r\n const checkbox = document.createElement(\"input\");\r\n const labelName = document.createElement(\"span\");\r\n checkbox.type = \"checkbox\";\r\n checkbox.className = \"filter-checkbox\";\r\n checkbox.value = option.split('|').pop();\r\n checkbox.dataset.displayValue = option.split('|')[0];\r\n checkbox.dataset.filterName = filter.Name.split('|').pop();\r\n checkbox.addEventListener(\"change\", this.handleFilterChange);\r\n labelName.appendChild(document.createTextNode(option.split('|')[0]))\r\n label.appendChild(checkbox);\r\n label.appendChild(labelName);\r\n dropdownContent.appendChild(label);\r\n });\r\n\r\n dropdown.appendChild(dropdownBtn);\r\n dropdown.appendChild(dropdownContent);\r\n filterGroup.appendChild(dropdown);\r\n this.filtersContainer.appendChild(filterGroup);\r\n });\r\n this.el.querySelectorAll('.dropdown-btn').forEach(button => {\r\n button.addEventListener('click', function () {\r\n const dropdownContent = this.nextElementSibling;\r\n const parent = this.closest(\".filter-group\");\r\n document.querySelectorAll('.dropdown-content').forEach(content => {\r\n if (content !== dropdownContent) {\r\n content.closest(\".filter-group\").classList.remove('active');\r\n content.style.display = 'none';\r\n }\r\n });\r\n\r\n if (dropdownContent.style.display === 'block') {\r\n dropdownContent.style.display = 'none';\r\n parent.classList.remove('active');\r\n } else {\r\n dropdownContent.style.display = 'block';\r\n parent.classList.add('active');\r\n }\r\n });\r\n });\r\n this.el.addEventListener('click', function (event) {\r\n if (!event.target.closest('.filter-group')) {\r\n const dropdowns = document.querySelectorAll('.dropdown-content');\r\n const parentsdropDowns = document.querySelectorAll('.filter-group');\r\n dropdowns.forEach(dropdown => {\r\n dropdown.style.display = 'none';\r\n });\r\n parentsdropDowns.forEach(parentsdropDowns => {\r\n parentsdropDowns.classList.remove('active');\r\n });\r\n }\r\n });\r\n } else {\r\n this.el.querySelector(\".on-site-filter\")?.remove();\r\n }\r\n this.updateResultsLine();\r\n this.enableDisableFilters();\r\n }\r\n\r\n createMobileFilters(filters) {\r\n filters.forEach((filter) => {\r\n const filterGroup = document.createElement(\"div\");\r\n filterGroup.className = \"filter-group\";\r\n filterGroup.dataset.group = filter.Name.split('|')[0];\r\n\r\n const filterTitle = document.createElement(\"h4\");\r\n filterTitle.textContent = filter.Name.split('|')[0];\r\n filterTitle.addEventListener(\"click\", function () {\r\n const dropdownContent = this.nextElementSibling;\r\n const parent = this.closest(\".filter-group\");\r\n\r\n document.querySelectorAll('.filter-group-content').forEach(content => {\r\n if (content !== dropdownContent) {\r\n content.closest(\".filter-group\").classList.remove('active');\r\n content.style.maxHeight = 0;\r\n }\r\n });\r\n if (parent.classList.contains('active')) {\r\n parent.classList.remove('active');\r\n dropdownContent.style.maxHeight = 0;\r\n } else {\r\n parent.classList.add('active');\r\n let elHeight = dropdownContent.scrollHeight;\r\n dropdownContent.style.maxHeight = elHeight + 'px';\r\n\r\n }\r\n });\r\n\r\n filterGroup.appendChild(filterTitle);\r\n const filterWrapper = document.createElement(\"div\");\r\n filterWrapper.className = 'filter-group-content';\r\n filterGroup.appendChild(filterWrapper);\r\n\r\n filter.Options.forEach((option) => {\r\n const label = document.createElement(\"label\");\r\n const checkbox = document.createElement(\"input\");\r\n checkbox.type = \"checkbox\";\r\n checkbox.className = \"filter-checkbox\";\r\n checkbox.value = option.split('|').pop();\r\n checkbox.dataset.displayValue = option.split('|')[0];\r\n checkbox.dataset.filterName = filter.Name.split('|').pop();\r\n checkbox.addEventListener(\"change\", this.handleFilterChange);\r\n\r\n label.appendChild(checkbox);\r\n label.appendChild(document.createTextNode(option.split('|')[0]));\r\n filterWrapper.appendChild(label);\r\n\r\n\r\n });\r\n this.filtersContainerMobile.appendChild(filterGroup);\r\n });\r\n this.enableDisableFilters();\r\n }\r\n\r\n updateResultsLine(totalresultsFromAPI) {\r\n // Number of results functionality\r\n let finalCount = this.el.querySelectorAll(\".itinerary-list__content__tour-list\").length;\r\n if (this.el.querySelectorAll(\".page-number-OSS\")) {\r\n this.el.querySelectorAll('.page-number-OSS').forEach(e => e.remove());\r\n }\r\n\r\n const pageNumberOSS = document.createElement(\"div\");\r\n pageNumberOSS.classList.add(\"page-number-OSS\");\r\n if (totalresultsFromAPI) {\r\n var totalResults = totalresultsFromAPI;\r\n } else {\r\n var totalResults = this.dynamicFilterApiUrl.getAttribute(\"data-totalresults\");\r\n }\r\n let resultsString = totalResults > 1 ? 'results' : 'result';\r\n pageNumberOSS.innerHTML = `1 - ${finalCount} of ${totalResults} ${resultsString} `;\r\n var child1 = document.querySelector('.on-site-filter');\r\n this.el.querySelector('.dynamicFilter').appendChild(pageNumberOSS, child1);\r\n var pageNumberOSS1 = pageNumberOSS.cloneNode(true);\r\n this.el.querySelector('.product__container').appendChild(pageNumberOSS1);\r\n // Number of results functionality\r\n }\r\n\r\n handleFilterChange() {\r\n this.updateSelectedFilters();\r\n this.updateUrlWithFilters();\r\n this.callApiWithSelectedFilters();\r\n this.enableDisableFilters();\r\n }\r\n\r\n enableDisableFilters() {\r\n this.el.querySelectorAll('.filter-checkbox').forEach(checkbox => {\r\n checkbox.disabled = false;\r\n\r\n checkbox.addEventListener('change', function () {\r\n this.dataGroup = this.closest('[data-group]');\r\n\r\n if (this.checked) {\r\n this.dataGroup.querySelectorAll('.filter-checkbox').forEach(cb => {\r\n cb.disabled = true;\r\n });\r\n this.disabled = false;\r\n } else {\r\n this.dataGroup.querySelectorAll('.filter-checkbox').forEach(cb => {\r\n cb.disabled = false;\r\n });\r\n }\r\n });\r\n });\r\n }\r\n\r\n updateSelectedFilters() {\r\n this.el.querySelector(\"#selected-filters1\").innerHTML = \"\"; // Clear previous selected filters\r\n\r\n const checkboxes = this.el.querySelectorAll(\".filter-checkbox\");\r\n const selectedFilters = Array.from(checkboxes)\r\n .filter((checkbox) => checkbox.checked)\r\n .map((checkbox) => ({\r\n name: checkbox.dataset.filterName,\r\n value: checkbox.value,\r\n checkbox: checkbox,\r\n path: `${checkbox.dataset.filterName.split('|').pop()}=${checkbox.value}`,\r\n displayValue: `${checkbox.dataset.displayValue}`\r\n }));\r\n this.selectedFiltersGloblal = selectedFilters;\r\n\r\n selectedFilters.forEach((filter) => {\r\n const filterTag = document.createElement(\"div\");\r\n filterTag.className = \"selected-filter\";\r\n\r\n const filterName = document.createElement(\"span\");\r\n filterName.textContent = `${filter.displayValue}`;\r\n\r\n const removeBtn = document.createElement(\"span\");\r\n removeBtn.className = \"remove-filter\";\r\n removeBtn.textContent = \"x\";\r\n\r\n removeBtn.addEventListener(\"click\", function () {\r\n filter.checkbox.checked = false;\r\n });\r\n removeBtn.addEventListener(\"click\", this.handleFilterChange.bind(this));\r\n\r\n filterTag.appendChild(filterName);\r\n filterTag.appendChild(removeBtn);\r\n this.el.querySelector(\"#selected-filters1\").appendChild(filterTag);\r\n this.countSelectedFilters(selectedFilters);\r\n });\r\n\r\n if (selectedFilters.length === 0) {\r\n const allFilters = this.el.querySelectorAll(\".filter-count\");\r\n allFilters.forEach(filter => {\r\n filter.style.display = \"none\"\r\n })\r\n }\r\n }\r\n\r\n countSelectedFilters(filters) {\r\n const counts = {};\r\n filters.forEach(filter => {\r\n if (!counts[filter.name.replace(/\\s+/g, '')]) {\r\n counts[(filter.name.split('|')[0]).replace(/\\s+/g, '')] = 0;\r\n }\r\n counts[(filter.name.split('|')[0]).replace(/\\s+/g, '')]++;\r\n });\r\n\r\n const allFilters = this.el.querySelectorAll(\".filter-count\");\r\n allFilters.forEach(filter => {\r\n filter.style.display = \"none\"\r\n })\r\n\r\n var currentElement = this.el; // required as the following forEach contains a Regular Function which makes it's own \"this\" state, without the .el field.\r\n Object.keys(counts).forEach(function (key) {\r\n currentElement.querySelector(`.${key}`).textContent = `${counts[key]}`;\r\n if (counts[key] == 0) {\r\n currentElement.querySelector(`.${key}`).style.display = \"none\";\r\n } else {\r\n currentElement.querySelector(`.${key}`).style.display = \"inline-flex\";\r\n }\r\n });\r\n }\r\n\r\n updateSelectedMobileFilters() {\r\n this.el.querySelector(\"#selected-filters\").innerHTML = \"\"; // Clear previous selected filters\r\n\r\n const checkboxes = this.el.querySelectorAll(\".filter-checkbox\");\r\n const selectedFilters = Array.from(checkboxes)\r\n .filter((checkbox) => checkbox.checked)\r\n .map((checkbox) => ({\r\n name: checkbox.dataset.filterName,\r\n value: checkbox.value,\r\n checkbox: checkbox,\r\n path: `${checkbox.dataset.filterName.split('|').pop()}=${checkbox.value}`,\r\n displayValue: `${checkbox.dataset.displayValue}`\r\n }));\r\n this.selectedFiltersGloblal = selectedFilters;\r\n\r\n selectedFilters.forEach((filter) => {\r\n const filterTag = document.createElement(\"div\");\r\n filterTag.className = \"selected-filter\";\r\n\r\n const filterName = document.createElement(\"span\");\r\n filterName.textContent = `${filter.displayValue}`;\r\n\r\n const removeBtn = document.createElement(\"span\");\r\n removeBtn.className = \"remove-filter\";\r\n removeBtn.textContent = \"x\";\r\n removeBtn.addEventListener(\"click\", function () {\r\n filter.checkbox.checked = false;\r\n });\r\n removeBtn.addEventListener(\"click\", this.handleFilterChange.bind(this));\r\n\r\n removeBtn.addEventListener(\"click\", this.callApiWithSelectedFilters.bind(this));\r\n removeBtn.addEventListener(\"click\", this.updateSelectedMobileFilters.bind(this));\r\n\r\n filterTag.appendChild(filterName);\r\n filterTag.appendChild(removeBtn);\r\n this.el.querySelector(\"#selected-filters\").appendChild(filterTag);\r\n });\r\n\r\n if (selectedFilters.length === 0) {\r\n const allFilters = this.el.querySelectorAll(\".filter-count\");\r\n allFilters.forEach(filter => {\r\n filter.style.display = \"none\"\r\n })\r\n }\r\n }\r\n\r\n // Function to get the selected category\r\n getSelectedCategory() {\r\n const radioButtons = document.querySelectorAll('.sd-tabs input[type=\"radio\"]');\r\n const selectedRadio = Array.from(radioButtons).find(radio => radio.checked);\r\n return selectedRadio ? selectedRadio.dataset.category : null;\r\n }\r\n\r\n async callApiWithSelectedFilters() {\r\n const currentPage = 1;\r\n var button = document.querySelector(\".product__container\");\r\n\r\n const checkboxes = this.el.querySelectorAll(\".filter-checkbox\");\r\n const selectedFilters = Array.from(checkboxes)\r\n .filter((checkbox) => checkbox.checked)\r\n .map((checkbox) => ({\r\n name: checkbox.dataset.filterName,\r\n value: checkbox.value,\r\n })).reduce((acc, { name, value }) => {\r\n if (!acc[name]) {\r\n acc[name] = { value };\r\n } else {\r\n acc[name].value += `, ${value}`;\r\n }\r\n return acc;\r\n }, {});\r\n selectedFilters[\"page\"] = currentPage;\r\n selectedFilters[\"dsId\"] = this.dynamicFilterDsId;\r\n selectedFilters[\"pageId\"] = this.dynamicFilterPageId;\r\n selectedFilters[\"selectedTab\"] = this.getSelectedCategory();\r\n\r\n let URLAJAX = `${this.listUrl}?data=${encodeURI(JSON.stringify(selectedFilters))}&page=1 `;\r\n this.currentPageNumber = 2;\r\n await HttpClient.AsyncGetRequest(URLAJAX, this.method)\r\n .then(response => {\r\n let selectedTab = this.getSelectedCategory().toLowerCase();\r\n let resultData = JSON.parse(response)\r\n this.loadMoreButton = document.getElementById(`load-more-filter-button-${selectedTab}`);\r\n\r\n\r\n if (!resultData.result.trim()) {\r\n this.el.querySelectorAll(\".page-number-OSS\")[0].innerHTML = \"\";\r\n this.el.querySelectorAll(\".page-number-OSS\")[1].innerHTML = \"\";\r\n document.querySelector(`.tab-${selectedTab} .product-list-cards`).innerHTML = \"
No results found. Please try another filter. \";\r\n if (this.loadMoreButton) {\r\n this.loadMoreButton.style.display = \"none\";\r\n this.el.getElementsByClassName(\"load-more-filter-button\")[0].style.display = \"none\";\r\n }\r\n }\r\n if (resultData.result.trim()) {\r\n document.querySelector(`.tab-${selectedTab} .product-list-cards`).innerHTML = resultData.result;\r\n\r\n this.el.querySelectorAll(\".page-number-OSS\")[0].innerHTML = \"\";\r\n this.updateResultsLine(resultData.totalresults, resultData.totalpages);\r\n if (this.loadMoreButton) {\r\n if (resultData.totalpages == 1) {\r\n this.loadMoreButton.style.display = \"none\";\r\n document.getElementsByClassName(\"load-more-filter-button\")[0].style.display = \"none\";\r\n\r\n } else {\r\n this.loadMoreButton.style.display = \"block\";\r\n document.getElementsByClassName(\"load-more-filter-button\")[0].style.display = \"block\";\r\n }\r\n }\r\n\r\n }\r\n const observer = lozad();\r\n observer.observe();\r\n })\r\n .catch((error) => console.error(\"Error applying filters:\", error));\r\n }\r\n\r\n updateUrlWithFilters() {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n let newPathParams = this.getPathValues(this.selectedFiltersGloblal)\r\n const params = new URLSearchParams(window.location.search);\r\n params.set('filters', newPathParams);\r\n history.pushState(null, '', '?' + params.toString());\r\n }\r\n\r\n getPathValues(arr) {\r\n return arr.map(item => item.path).join('&');\r\n }\r\n\r\n async loadMoreResults() {\r\n var button = this.el.querySelector(\".product__container\");\r\n let selectedTab = this.getSelectedCategory().toLowerCase();\r\n const checkboxes = this.el.querySelectorAll(\".filter-checkbox\");\r\n this.loadMoreButton = document.getElementById(`load-more-filter-button-${selectedTab}`);\r\n this.totalpage = this.loadMoreButton.getAttribute(\"data-totalpages\");\r\n\r\n const selectedFilters = Array.from(checkboxes)\r\n .filter((checkbox) => checkbox.checked)\r\n .map((checkbox) => ({\r\n name: checkbox.dataset.filterName,\r\n value: checkbox.value,\r\n })).reduce((acc, { name, value }) => {\r\n if (!acc[name]) {\r\n acc[name] = { value };\r\n } else {\r\n acc[name].value += `, ${value}`;\r\n }\r\n return acc;\r\n }, {});\r\n selectedFilters[\"page\"] = this.currentPageNumber;\r\n selectedFilters[\"dsId\"] = this.dynamicFilterDsId;\r\n selectedFilters[\"pageId\"] = this.dynamicFilterPageId;\r\n selectedFilters[\"selectedTab\"] = this.getSelectedCategory();\r\n\r\n let URLAJAX = `${this.listUrl}?data=${encodeURI(JSON.stringify(selectedFilters))}`;\r\n\r\n if (this.currentPageNumber <= this.totalpage) {\r\n var button = document.querySelector(`.tab-${selectedTab} .product-list-cards`);\r\n await HttpClient.AsyncGetRequest(URLAJAX, this.method)\r\n .then(card => {\r\n let resultData = JSON.parse(card);\r\n button.insertAdjacentHTML(\"beforeend\", resultData.result);\r\n\r\n const observer = lozad();\r\n observer.observe();\r\n\r\n if (resultData.totalpages == 1 || this.currentPageNumber >= resultData.totalpages) {\r\n this.loadMoreButton.style.display = \"none\";\r\n document.getElementById(`load-more-filter-button-${selectedTab}`).style.display = \"none\";\r\n } else {\r\n this.loadMoreButton.style.display = \"block\";\r\n document.getElementById(`load-more-filter-button-${selectedTab}`).style.display = \"block\";\r\n }\r\n this.updateResultsLine(resultData.totalresults, resultData.totalpages);\r\n\r\n\r\n }).catch(error => {\r\n console.error(error)\r\n });\r\n }\r\n this.currentPageNumber = this.currentPageNumber + 1;\r\n };\r\n\r\n getTabforFilters() {\r\n var formattedString\r\n if (this.el) {\r\n const parentClasses = Array.from(this.el.classList);\r\n\r\n const tabClass = parentClasses.find(cls => cls.startsWith(\"tab-\") && cls !== \"tab-content\");\r\n\r\n if (tabClass) {\r\n // Extract the dynamic part after \"tab-\"\r\n const dynamicPart = tabClass.substring(4);\r\n formattedString = dynamicPart.charAt(0).toUpperCase() + dynamicPart.slice(1);\r\n\r\n return formattedString;\r\n }\r\n }\r\n return formattedString;\r\n }\r\n\r\n async getFilterData() {\r\n const url = `${this.url}?dsId=${this.dynamicFilterDsId}&pageId=${this.dynamicFilterPageId}&tab=${this.getTabforFilters()}`;\r\n\r\n var resultsData = await HttpClient.AsyncGetRequest(url, this.method)\r\n .then(result => {\r\n result = JSON.parse(result);\r\n this.createFilters(result);\r\n this.createMobileFilters(result);\r\n }).catch(error => {\r\n console.error(error);\r\n });\r\n }\r\n\r\n async getListItems() {\r\n var resultsData = await HttpClient.AsyncGetRequest(this.listUrl, this.method)\r\n .then(result => {\r\n let productList = document.querySelector(\"#product-list\");\r\n productList.innerHTML = \"\";\r\n productList.insertAdjacentHTML(\"beforeend\", result);\r\n const observer = lozad();\r\n observer.observe();\r\n })\r\n .catch(error => {\r\n console.error(error);\r\n });\r\n }\r\n}\r\nexport default DynamicFilter;","import DynamicFilter from \"./dynamicFilter\";\r\n\r\nexport const dynamicFilter = {\r\n init: () => {\r\n const resultContainer = document.querySelectorAll(\".dynamicFilter\");\r\n if (resultContainer != null) {\r\n [...resultContainer].forEach((result) => new DynamicFilter(result));\r\n }\r\n },\r\n}\r\n\r\nexport default dynamicFilter;","import HttpClient from \"../../client/httpclient\";\r\nimport Loader from \"../../loading/loader\";\r\nimport 'regenerator-runtime/runtime';\r\n\r\nclass CruiseDynamicFilter {\r\n constructor(DOMelement, resultContainer) {\r\n try {\r\n this.el = DOMelement;\r\n this.input = this.el.querySelector(\".sd-input\");\r\n this.button = this.el.querySelector(\"button\");\r\n this.results = resultContainer;\r\n document.addEventListener(\"click\", this.removeResults);\r\n this.loaderEl = document.querySelector(\".sd-searchbar > .sd-loading\");\r\n this.loader = new Loader(this.loaderEl);\r\n\r\n this.filtersContainer = document.getElementById(\"filters-container-desktop\");\r\n this.selectedFiltersContainer = document.getElementById(\"selected-filters1\");\r\n this.selectedFiltersMobileContainer = document.getElementById(\"selected-filters\");\r\n this.filtersContainerMobile = document.getElementById(\"filters-container\");\r\n\r\n const filterDrawer = document.getElementById(\"filter-drawer\");\r\n const openFiltersBtn = document.getElementById(\"open-filters-btn\");\r\n const closeFiltersBtn = document.getElementById(\"close-filters-btn\");\r\n this.applyFiltersBtn = document.getElementById(\"apply-filters-btn\");\r\n this.dynamicFilterApiUrl = document.getElementById(\"dynamicFilterApiUrl\");\r\n this.dynamicFilterDataUrl = this.dynamicFilterApiUrl.getAttribute(\"data-dynamic-filters\");\r\n this.dynamicFilterListUrl = this.dynamicFilterApiUrl.getAttribute(\"data-action-dynamic-filter\");\r\n this.dynamicFilterDsId = this.dynamicFilterApiUrl.getAttribute(\"data-dsId\");\r\n\r\n this.loadMoreButton = document.getElementById(\"load-more-filter-button\");\r\n this.currentPage = this.loadMoreButton.getAttribute(\"data-current-page\");\r\n this.currentPageNumber = 2;\r\n\r\n if (this.loadMoreButton) {\r\n this.URL = this.loadMoreButton.getAttribute(\"data-action\");\r\n this.totalpage = this.loadMoreButton.getAttribute(\"data-totalpages\");\r\n }\r\n\r\n if (process.env.NODE_ENV === \"development\") {\r\n this.URL = '../src/components/room-card/room-card.html?p=';\r\n }\r\n\r\n this.loadMoreButton.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n this.loadMoreResults();\r\n })\r\n\r\n this.headers = document.querySelectorAll(\".filter-group h4\");\r\n this.removeFilterBtn = document.querySelectorAll(\".remove-filter\");\r\n\r\n this.updateSelectedFilters = this.updateSelectedFilters.bind(this);\r\n this.handleFilterChange = this.handleFilterChange.bind(this);\r\n this.enableDisableFilters = this.enableDisableFilters.bind(this);\r\n this.selectedFiltersGloblal;\r\n\r\n // Open drawer on mobile\r\n openFiltersBtn.addEventListener(\"click\", () => {\r\n filterDrawer.classList.add(\"open\");\r\n });\r\n\r\n // Close drawer on mobile\r\n closeFiltersBtn.addEventListener(\"click\", () => {\r\n filterDrawer.classList.remove(\"open\");\r\n });\r\n\r\n this.applyFiltersBtn.addEventListener(\"click\", () => {\r\n this.updateSelectedMobileFilters();\r\n this.callApiWithSelectedFilters();\r\n filterDrawer.classList.remove(\"open\");\r\n });\r\n\r\n this.removeFilterBtn.forEach(el => {\r\n el.addEventListener(\"click\", function () {\r\n filter.checkbox.checked = false;\r\n this.handleFilterChange();\r\n });\r\n });\r\n\r\n this.method = \"GET\";\r\n if (process.env.NODE_ENV === \"development\") {\r\n this.url = this.dynamicFilterDataUrl;\r\n this.listUrl = this.dynamicFilterListUrl;\r\n }\r\n else {\r\n this.url = this.dynamicFilterDataUrl;\r\n this.listUrl = this.dynamicFilterListUrl;\r\n }\r\n\r\n this.getFilterData();\r\n\r\n this.noResultFlag = 0;\r\n this.noResultContent = \"\";\r\n this.noPropTourMessage = \"\";\r\n\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n }\r\n\r\n createFilters(filters) {\r\n filters.forEach((filter) => {\r\n const filterGroup = document.createElement(\"div\");\r\n filterGroup.className = \"filter-group\";\r\n filterGroup.dataset.group = filter.Name.split('|')[0];\r\n\r\n const dropdown = document.createElement(\"div\");\r\n dropdown.className = \"dropdown\";\r\n\r\n const dropdownBtn = document.createElement(\"button\");\r\n dropdownBtn.className = \"dropdown-btn\";\r\n dropdownBtn.textContent = filter.Name.split('|')[0];\r\n\r\n const filterCountElement = document.createElement(\"span\");\r\n filterCountElement.className = `filter-count ${filter.Name.split('|').pop().replace(/\\s+/g, '')}`;\r\n dropdownBtn.appendChild(filterCountElement);\r\n // (0 selected) \r\n\r\n const dropdownContent = document.createElement(\"div\");\r\n dropdownContent.className = \"dropdown-content\";\r\n\r\n filter.Options.forEach((option) => {\r\n const label = document.createElement(\"label\");\r\n const checkbox = document.createElement(\"input\");\r\n const labelName = document.createElement(\"span\");\r\n checkbox.type = \"checkbox\";\r\n checkbox.className = \"filter-checkbox\";\r\n checkbox.value = option.split('|').pop();\r\n checkbox.dataset.displayValue = option.split('|')[0];\r\n checkbox.dataset.filterName = filter.Name.split('|').pop();\r\n checkbox.addEventListener(\"change\", this.handleFilterChange);\r\n labelName.appendChild(document.createTextNode(option.split('|')[0]))\r\n label.appendChild(checkbox);\r\n label.appendChild(labelName);\r\n dropdownContent.appendChild(label);\r\n });\r\n\r\n dropdown.appendChild(dropdownBtn);\r\n dropdown.appendChild(dropdownContent);\r\n filterGroup.appendChild(dropdown);\r\n this.filtersContainer.appendChild(filterGroup);\r\n });\r\n this.updateReultsLine();\r\n document.querySelectorAll('.dropdown-btn').forEach(button => {\r\n button.addEventListener('click', function () {\r\n const dropdownContent = this.nextElementSibling;\r\n const parent = this.closest(\".filter-group\");\r\n document.querySelectorAll('.dropdown-content').forEach(content => {\r\n if (content !== dropdownContent) {\r\n content.closest(\".filter-group\").classList.remove('active');\r\n content.style.display = 'none';\r\n }\r\n });\r\n\r\n if(dropdownContent.style.display === 'block') {\r\n dropdownContent.style.display = 'none';\r\n parent.classList.remove('active');\r\n }else{\r\n dropdownContent.style.display = 'block';\r\n parent.classList.add('active');\r\n }\r\n });\r\n });\r\n document.addEventListener('click', function (event) {\r\n if (!event.target.closest('.filter-group')) {\r\n const dropdowns = document.querySelectorAll('.dropdown-content');\r\n const parentsdropDowns = document.querySelectorAll('.filter-group');\r\n dropdowns.forEach(dropdown => {\r\n dropdown.style.display = 'none';\r\n });\r\n parentsdropDowns.forEach(parentsdropDowns => {\r\n parentsdropDowns.classList.remove('active');\r\n });\r\n }\r\n });\r\n\r\n this.enableDisableFilters();\r\n }\r\n\r\n createMobileFilters(filters) {\r\n filters.forEach((filter) => {\r\n const filterGroup = document.createElement(\"div\");\r\n filterGroup.className = \"filter-group\";\r\n filterGroup.dataset.group = filter.Name.split('|')[0];\r\n\r\n const filterTitle = document.createElement(\"h4\");\r\n filterTitle.textContent = filter.Name.split('|')[0];\r\n filterTitle.addEventListener(\"click\", function () {\r\n const dropdownContent = this.nextElementSibling;\r\n const parent = this.closest(\".filter-group\");\r\n\r\n document.querySelectorAll('.filter-group-content').forEach(content => {\r\n if (content !== dropdownContent) {\r\n content.closest(\".filter-group\").classList.remove('active');\r\n content.style.maxHeight = 0;\r\n }\r\n });\r\n if ( parent.classList.contains('active')) {\r\n parent.classList.remove('active');\r\n dropdownContent.style.maxHeight = 0;\r\n } else {\r\n parent.classList.add('active');\r\n let elHeight = dropdownContent.scrollHeight;\r\n dropdownContent.style.maxHeight = elHeight+'px';\r\n \r\n }\r\n });\r\n\r\n filterGroup.appendChild(filterTitle);\r\n const filterWrapper = document.createElement(\"div\");\r\n filterWrapper.className = 'filter-group-content';\r\n filterGroup.appendChild(filterWrapper);\r\n\r\n filter.Options.forEach((option) => {\r\n const label = document.createElement(\"label\");\r\n const checkbox = document.createElement(\"input\");\r\n checkbox.type = \"checkbox\";\r\n checkbox.className = \"filter-checkbox\";\r\n checkbox.value = option.split('|').pop();\r\n checkbox.dataset.displayValue = option.split('|')[0];\r\n checkbox.dataset.filterName = filter.Name.split('|').pop();\r\n checkbox.addEventListener(\"change\", this.handleFilterChange);\r\n\r\n label.appendChild(checkbox);\r\n label.appendChild(document.createTextNode(option.split('|')[0]));\r\n filterWrapper.appendChild(label);\r\n\r\n\r\n });\r\n this.filtersContainerMobile.appendChild(filterGroup);\r\n });\r\n this.enableDisableFilters();\r\n }\r\n\r\n updateReultsLine(totalresultsFromAPI, totalpagesFromAPI) {\r\n // Number of results functionality\r\n let finalCount = document.getElementsByClassName(\"itinerary-list__content__tour-list\").length;\r\n if (document.getElementsByClassName(\"page-number-OSS\")) {\r\n document.querySelectorAll('.page-number-OSS').forEach(e => e.remove());\r\n }\r\n\r\n const pageNumberOSS = document.createElement(\"div\");\r\n pageNumberOSS.classList.add(\"page-number-OSS\");\r\n if (totalresultsFromAPI) {\r\n var totalpage = totalresultsFromAPI;\r\n } else {\r\n var totalpage = this.dynamicFilterApiUrl.getAttribute(\"data-totalresults\");\r\n }\r\n let resultsString = totalpage > 1 ? 'results' : 'result';\r\n pageNumberOSS.innerHTML = `1 - ${finalCount} of ${totalpage} ${resultsString} `;\r\n var child1 = document.querySelector('.on-site-filter');\r\n document.querySelector('#dynamicFilter').appendChild(pageNumberOSS, child1);\r\n var pageNumberOSS1 = pageNumberOSS.cloneNode(true);\r\n document.querySelector('.cruise__container').appendChild(pageNumberOSS1);\r\n // Number of results functionality\r\n }\r\n\r\n handleFilterChange() {\r\n this.updateSelectedFilters();\r\n this.updateUrlWithFilters();\r\n this.callApiWithSelectedFilters();\r\n this.enableDisableFilters();\r\n }\r\n\r\n enableDisableFilters(){\r\n document.querySelectorAll('.filter-checkbox').forEach(checkbox => {\r\n checkbox.disabled = false; \r\n\r\n checkbox.addEventListener('change', function () {\r\n this.dataGroup = this.closest('[data-group]');\r\n \r\n if (this.checked) {\r\n this.dataGroup.querySelectorAll('.filter-checkbox').forEach(cb => {\r\n cb.disabled = true;\r\n });\r\n this.disabled = false;\r\n } else {\r\n this.dataGroup.querySelectorAll('.filter-checkbox').forEach(cb => {\r\n cb.disabled = false;\r\n });\r\n }\r\n });\r\n });\r\n }\r\n\r\n updateSelectedFilters() {\r\n document.getElementById(\"selected-filters1\").innerHTML = \"\"; // Clear previous selected filters\r\n\r\n const checkboxes = document.querySelectorAll(\".filter-checkbox\");\r\n const selectedFilters = Array.from(checkboxes)\r\n .filter((checkbox) => checkbox.checked)\r\n .map((checkbox) => ({\r\n name: checkbox.dataset.filterName,\r\n value: checkbox.value,\r\n checkbox: checkbox,\r\n path: `${checkbox.dataset.filterName.split('|').pop()}=${checkbox.value}`,\r\n displayValue: `${checkbox.dataset.displayValue}`\r\n }));\r\n this.selectedFiltersGloblal = selectedFilters;\r\n\r\n selectedFilters.forEach((filter) => {\r\n const filterTag = document.createElement(\"div\");\r\n filterTag.className = \"selected-filter\";\r\n\r\n const filterName = document.createElement(\"span\");\r\n filterName.textContent = `${filter.displayValue}`;\r\n\r\n const removeBtn = document.createElement(\"span\");\r\n removeBtn.className = \"remove-filter\";\r\n removeBtn.textContent = \"x\";\r\n\r\n removeBtn.addEventListener(\"click\", function () {\r\n filter.checkbox.checked = false;\r\n });\r\n removeBtn.addEventListener(\"click\", this.handleFilterChange.bind(this));\r\n \r\n filterTag.appendChild(filterName);\r\n filterTag.appendChild(removeBtn);\r\n document.getElementById(\"selected-filters1\").appendChild(filterTag);\r\n this.countSelectedFilters(selectedFilters); \r\n });\r\n\r\n if (selectedFilters.length === 0) {\r\n const allFilters = document.querySelectorAll(\".filter-count\");\r\n allFilters.forEach(filter => {\r\n filter.style.display = \"none\"\r\n })\r\n }\r\n }\r\n\r\n countSelectedFilters(filters) {\r\n const counts = {};\r\n filters.forEach(filter => {\r\n if (!counts[filter.name.replace(/\\s+/g, '')]) {\r\n counts[(filter.name.split('|')[0]).replace(/\\s+/g, '')] = 0;\r\n }\r\n counts[(filter.name.split('|')[0]).replace(/\\s+/g, '')]++;\r\n });\r\n\r\n const allFilters = document.querySelectorAll(\".filter-count\");\r\n allFilters.forEach(filter => {\r\n filter.style.display = \"none\"\r\n })\r\n\r\n Object.keys(counts).forEach(function (key, index) {\r\n document.querySelector(`.${key}`).textContent = `${counts[key]}`;\r\n if (counts[key] == 0) {\r\n document.querySelector(`.${key}`).style.display = \"none\";\r\n } else {\r\n document.querySelector(`.${key}`).style.display = \"inline-flex\";\r\n }\r\n });\r\n }\r\n\r\n updateSelectedMobileFilters() {\r\n document.getElementById(\"selected-filters\").innerHTML = \"\"; // Clear previous selected filters\r\n\r\n const checkboxes = document.querySelectorAll(\".filter-checkbox\");\r\n const selectedFilters = Array.from(checkboxes)\r\n .filter((checkbox) => checkbox.checked)\r\n .map((checkbox) => ({\r\n name: checkbox.dataset.filterName,\r\n value: checkbox.value,\r\n checkbox: checkbox,\r\n path: `${checkbox.dataset.filterName.split('|').pop()}=${checkbox.value}`,\r\n displayValue: `${checkbox.dataset.displayValue}`\r\n }));\r\n this.selectedFiltersGloblal = selectedFilters;\r\n\r\n selectedFilters.forEach((filter) => {\r\n const filterTag = document.createElement(\"div\");\r\n filterTag.className = \"selected-filter\";\r\n\r\n const filterName = document.createElement(\"span\");\r\n filterName.textContent = `${filter.displayValue}`;\r\n\r\n const removeBtn = document.createElement(\"span\");\r\n removeBtn.className = \"remove-filter\";\r\n removeBtn.textContent = \"x\";\r\n removeBtn.addEventListener(\"click\", function () {\r\n filter.checkbox.checked = false;\r\n });\r\n removeBtn.addEventListener(\"click\", this.handleFilterChange.bind(this));\r\n\r\n removeBtn.addEventListener(\"click\", this.callApiWithSelectedFilters.bind(this));\r\n removeBtn.addEventListener(\"click\", this.updateSelectedMobileFilters.bind(this));\r\n\r\n filterTag.appendChild(filterName);\r\n filterTag.appendChild(removeBtn);\r\n document.getElementById(\"selected-filters\").appendChild(filterTag);\r\n });\r\n\r\n if (selectedFilters.length === 0) {\r\n const allFilters = document.querySelectorAll(\".filter-count\");\r\n allFilters.forEach(filter => {\r\n filter.style.display = \"none\"\r\n })\r\n }\r\n }\r\n\r\n async callApiWithSelectedFilters() {\r\n const currentPage = 1;\r\n var button = document.querySelector(\".cruise__container\");\r\n\r\n const checkboxes = document.querySelectorAll(\".filter-checkbox\");\r\n const selectedFilters = Array.from(checkboxes)\r\n .filter((checkbox) => checkbox.checked)\r\n .map((checkbox) => ({\r\n name: checkbox.dataset.filterName,\r\n value: checkbox.value,\r\n })).reduce((acc, { name, value }) => {\r\n if (!acc[name]) {\r\n acc[name] = { value };\r\n } else {\r\n acc[name].value += `, ${value}`;\r\n }\r\n return acc;\r\n }, {});\r\n selectedFilters[\"page\"] = currentPage;\r\n\r\n let URLAJAX = `${this.listUrl}?data=${encodeURI(JSON.stringify(selectedFilters))}&page=1 `;\r\n this.currentPageNumber = 2;\r\n await HttpClient.AsyncGetRequest(URLAJAX, this.method)\r\n .then(response => {\r\n let resultData = JSON.parse(response)\r\n\r\n if (!resultData.result.trim()) {\r\n document.querySelectorAll(\".page-number-OSS\")[0].innerHTML = \"\";\r\n document.querySelectorAll(\".page-number-OSS\")[1].innerHTML = \"\";\r\n document.querySelector(\".cruise-list-cards\").innerHTML = \"No results found. Please try another filter. \";\r\n this.loadMoreButton.style.display = \"none\";\r\n document.getElementsByClassName(\"load-more-filter-button\")[0].style.display = \"none\";\r\n }\r\n if (resultData.result.trim()) {\r\n document.querySelector(\".cruise-list-cards\").innerHTML = resultData.result;\r\n document.querySelectorAll(\".page-number-OSS\")[0].innerHTML = \"\";\r\n this.updateReultsLine(resultData.totalresults, resultData.totalpages);\r\n if (resultData.totalpages == 1) {\r\n this.loadMoreButton.style.display = \"none\";\r\n document.getElementsByClassName(\"load-more-filter-button\")[0].style.display = \"none\";\r\n } else {\r\n this.loadMoreButton.style.display = \"block\";\r\n document.getElementsByClassName(\"load-more-filter-button\")[0].style.display = \"block\";\r\n }\r\n\r\n }\r\n const observer = lozad();\r\n observer.observe();\r\n })\r\n .catch((error) => console.error(\"Error applying filters:\", error));\r\n }\r\n\r\n updateUrlWithFilters() {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n let newPathParams = this.getPathValues(this.selectedFiltersGloblal)\r\n const params = new URLSearchParams(window.location.search);\r\n params.set('filters', newPathParams);\r\n history.pushState(null, '', '?' + params.toString());\r\n }\r\n\r\n getPathValues(arr) {\r\n return arr.map(item => item.path).join('&');\r\n }\r\n\r\n async loadMoreResults() {\r\n var button = document.querySelector(\".cruise__container\");\r\n const checkboxes = document.querySelectorAll(\".filter-checkbox\");\r\n const selectedFilters = Array.from(checkboxes)\r\n .filter((checkbox) => checkbox.checked)\r\n .map((checkbox) => ({\r\n name: checkbox.dataset.filterName,\r\n value: checkbox.value,\r\n })).reduce((acc, { name, value }) => {\r\n if (!acc[name]) {\r\n acc[name] = { value };\r\n } else {\r\n acc[name].value += `, ${value}`;\r\n }\r\n return acc;\r\n }, {});\r\n selectedFilters[\"page\"] = this.currentPageNumber;\r\n\r\n let URLAJAX = `${this.listUrl}?data=${encodeURI(JSON.stringify(selectedFilters))}`;\r\n\r\n if (this.currentPageNumber < this.totalpage) {\r\n var button = document.querySelector('.cruise-list-cards');\r\n await HttpClient.AsyncGetRequest(URLAJAX, this.method)\r\n .then(card => {\r\n let resultData = JSON.parse(card);\r\n button.insertAdjacentHTML(\"beforeend\", resultData.result);\r\n\r\n const observer = lozad();\r\n observer.observe();\r\n\r\n if (resultData.totalpages == 1 || this.currentPageNumber >= resultData.totalpages) {\r\n this.loadMoreButton.style.display = \"none\";\r\n document.getElementsByClassName(\"load-more-filter-button\")[0].style.display = \"none\";\r\n } else {\r\n this.loadMoreButton.style.display = \"block\";\r\n document.getElementsByClassName(\"load-more-filter-button\")[0].style.display = \"block\";\r\n }\r\n // this.updateReultsLine(resultData.totalresults);\r\n this.updateReultsLine(resultData.totalresults, resultData.totalpages);\r\n\r\n\r\n }).catch(error => {\r\n console.error(error)\r\n });\r\n }\r\n this.currentPageNumber = this.currentPageNumber + 1;\r\n };\r\n\r\n async getFilterData() {\r\n const url = `${this.url}?dsId=${this.dynamicFilterDsId}`;\r\n\r\n var resultsData = await HttpClient.AsyncGetRequest(url, this.method)\r\n .then(result => {\r\n result = JSON.parse(result);\r\n this.createFilters(result);\r\n this.createMobileFilters(result);\r\n }).catch(error => {\r\n console.error(error);\r\n });\r\n }\r\n\r\n async getListItems() {\r\n var resultsData = await HttpClient.AsyncGetRequest(this.listUrl, this.method)\r\n .then(result => {\r\n let cruiseList = document.querySelector(\"#cruise-list\");\r\n cruiseList.innerHTML = \"\";\r\n cruiseList.insertAdjacentHTML(\"beforeend\", result);\r\n const observer = lozad();\r\n observer.observe();\r\n })\r\n .catch(error => {\r\n console.error(error);\r\n });\r\n }\r\n}\r\nexport default CruiseDynamicFilter;","import CruiseDynamicFilter from \"./CruiseDynamicFilter\";\r\n\r\nexport const cruiseDynamicFilter = {\r\n init: (domElement) => {\r\n if (domElement) {\r\n const resultContainer = domElement.querySelector(\"#dynamicFilter\");\r\n new CruiseDynamicFilter(domElement, resultContainer)\r\n }\r\n },\r\n}\r\n\r\nexport default cruiseDynamicFilter;","\r\nimport HttpClient from \"../client/httpclient\";\r\nimport 'regenerator-runtime/runtime';\r\nclass TravelRestrictions {\r\n constructor(DOMelement) {\r\n try {\r\n this.el = DOMelement;\r\n this.origin = this.el.querySelector(\"#sd-input__origin\");\r\n this.destination = this.el.querySelector(\"#sd-input__destination\");\r\n this.travelDate = document.getElementById(\"sd-input__travelDate\");\r\n this.originList = document.querySelector(\"#OriginDataList\");\r\n this.destinationList = document.querySelector(\"#DestinationDataList\");\r\n this.origin.addEventListener(\"keyup\", this.setValues);\r\n this.destination.addEventListener(\"keyup\", this.setValues);\r\n this.button = this.el.querySelector(\".check__restrictions-button\");\r\n this.searchURL = this.el.querySelector(\".sd-form__inputs\").getAttribute(\"data-action\");\r\n this.submitFormURL = this.el.getAttribute(\"action\");\r\n\r\n this.travelDate.addEventListener(\"input\", function (e) {\r\n e.target.classList.remove(\"sd-input--error\");\r\n e.target.parentElement.parentElement.childNodes[1].classList.remove(\"sd-tooltip--error\")\r\n });\r\n\r\n this.button.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n this.submitForm();\r\n });\r\n\r\n this.method = \"GET\";\r\n this.submitMethod = \"POST\";\r\n\r\n if (process.env.NODE_ENV === \"development\") {\r\n this.searchURL = \"/src/api/origin-api-response.json\";\r\n this.submitFormURL = '/src/api/travel-safe-result.html';\r\n }\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n }\r\n\r\n removeErrors = (element) => {\r\n element.classList.remove('sd-input--error');\r\n element.parentElement.parentElement.childNodes[1].classList.remove(\"sd-tooltip--error\");\r\n }\r\n\r\n setValues = async (e) => {\r\n let input = e.target;\r\n let value = input.value;\r\n let dataListContainer = e.target.nextElementSibling;\r\n let dID = dataListContainer.id;\r\n\r\n input.focus();\r\n this.removeDataListOptions(dataListContainer);\r\n this.removeErrors(input);\r\n\r\n let resultsData;\r\n if (value.length > 2) {\r\n resultsData = await HttpClient.AsyncGetRequest(this.searchURL + \"?q=\" + value, this.method)\r\n .then(result => JSON.parse(result))\r\n .catch(error => {\r\n console.error(error)\r\n });\r\n\r\n if (resultsData) {\r\n resultsData.forEach(({ airport, cityName, country, cityCode }) => {\r\n const airports = `${airport} `\r\n dataListContainer.insertAdjacentHTML('beforeend', airports);\r\n\r\n let combineNameAndCode = `${cityName} - ${cityCode}`\r\n var exist = document.querySelectorAll(\"#\" + dID + \" option[value='\" + combineNameAndCode + \"']\").length > 0;\r\n\r\n if (!exist) {\r\n const cities = `${combineNameAndCode} `\r\n dataListContainer.insertAdjacentHTML('beforeend', cities);\r\n }\r\n\r\n // country\r\n var existCountry = document.querySelectorAll(\"#\" + dID + \" option[value='\" + country + \"']\").length > 0;\r\n if (!existCountry) {\r\n const countries = `${country} `\r\n dataListContainer.insertAdjacentHTML('beforeend', countries);\r\n }\r\n })\r\n }\r\n }\r\n }\r\n\r\n removeDataListOptions = (dataList) => {\r\n const resultItems = dataList.querySelectorAll('option');\r\n resultItems.forEach(item => {\r\n item.parentElement.removeChild(item)\r\n });\r\n }\r\n\r\n displayErrors = (o, d, t) => {\r\n if (o.value === \"\") {\r\n o.classList.add(\"sd-input--error\");\r\n o.parentElement.parentElement.childNodes[1].classList.add(\"sd-tooltip--error\")\r\n }\r\n if (d.value === \"\") {\r\n d.classList.add(\"sd-input--error\");\r\n d.parentElement.parentElement.childNodes[1].classList.add(\"sd-tooltip--error\")\r\n }\r\n if (t.value === \"\") {\r\n t.classList.add(\"sd-input--error\");\r\n t.parentElement.parentElement.childNodes[1].classList.add(\"sd-tooltip--error\")\r\n }\r\n }\r\n loadSherpa = (data) => {\r\n const result = JSON.parse(data);\r\n var tabsContainer = document.querySelector('#travel-restrictions-results');\r\n tabsContainer.innerHTML = result.message;\r\n const elementConfig = {\r\n placement: \"mmb\",\r\n selected: {\r\n segment: 0,\r\n extended: false\r\n },\r\n features: {\r\n showResults: true,\r\n showSegments: true,\r\n showTitle: false,\r\n enableSegmentEditor: false,\r\n showFilterConnection: false,\r\n },\r\n segments: this.GetSegments(result),\r\n \"travellers\": [\r\n {\r\n \"vaccinations\": [\r\n {\r\n \"type\": \"COVID_19\",\r\n \"status\": \"FULLY_VACCINATED\", // <---- COVID-19 vaccination\r\n }\r\n ],\r\n \"nationality\": result.nationality,\r\n }\r\n ]\r\n }\r\n //Register the onSherpaEvent under the globnal window scope before the script is loaded\r\n $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');\r\n\r\n }\r\n\r\n GetSegments=(result)=>{ \r\n //conditional\r\n var originType = result.isOriginCity === true ? \"airportCode\" : \"countryCode\";\r\n var destiType = result.isDestCity === true ? \"airportCode\" : \"countryCode\";\r\n const settings = [\r\n {\r\n segmentType: 'OUTBOUND',\r\n origin: {\r\n [originType] : result.origin \r\n },\r\n destination: {\r\n [destiType]: result.destination \r\n },\r\n departureDate: result.traveldate,\r\n },\r\n // Return Segment\r\n {\r\n segmentType: 'RETURN',\r\n origin: {\r\n [destiType] : result.destination \r\n },\r\n destination: {\r\n [originType]: result.origin\r\n },\r\n departureDate: result.returndate,\r\n }\r\n ]//end of settings \r\n return settings; \r\n }\r\n\r\n\r\n submitForm = async () => {\r\n let o = this.origin;\r\n let d = this.destination;\r\n let t = this.travelDate;\r\n\r\n if (o.value !== \"\" && d.value !== \"\" && t.value !== \"\") {\r\n const data = new FormData(this.el);\r\n await HttpClient.AsyncPostRequest(this.submitFormURL, data, this.submitMethod)\r\n .then(tab => {\r\n this.loadSherpa(tab);\r\n if (tab === \"\") {\r\n tabsContainer.innerHTML = \"No results found \";\r\n }\r\n const observer = lozad();\r\n observer.observe();\r\n })\r\n .catch(error => {\r\n console.error(error)\r\n });\r\n } else {\r\n this.displayErrors(o, d, t);\r\n }\r\n };\r\n\r\n}\r\n\r\n\r\n\r\nexport default TravelRestrictions;\r\n","import TravelRestrictions from \"./TravelRestrictions\";\r\n\r\nexport const travelRestrictions = {\r\n init: () => { \r\n const el = document.querySelectorAll(\".travel-restrictions__form\");\r\n [...el].forEach((travel) => new TravelRestrictions(travel));\r\n },\r\n}\r\n\r\nexport default travelRestrictions;","import Map from \"../map/Map\";\r\nimport { getPopup } from \"./popup\";\r\n\r\nclass PlacesToVisit {\r\n constructor(DOMelement, store) {\r\n try {\r\n this.el = DOMelement;\r\n this.store = store;\r\n this.listWrapper = this.el.querySelector(\".locations-list\");\r\n this.mapEl = this.el.querySelector('[id^=\"places-to-visit-sd-map\"]');\r\n \r\n this.closeAllPopUps = this.closeAllPopUps.bind(this);\r\n this.onMarkerClick = this.onMarkerClick.bind(this);\r\n this.onLocationClick = this.onLocationClick.bind(this);\r\n this.map = new Map(this.mapEl, store, this.onMarkerClick);\r\n \r\n this.data_geo_attr = this.mapEl.getAttribute(\"data-geo\");\r\n this.scriptID = document.querySelector(`#${this.data_geo_attr}`); \r\n this.scriptData = this.scriptID.innerText;\r\n this.mapData = JSON.parse(this.scriptData);\r\n this.locationsData = this.mapData.geolocations;\r\n \r\n this.locations = this.el.querySelectorAll(\".locations-place\");\r\n this.locations.forEach((item, i) => {\r\n item.addEventListener(\"click\", (e) =>\r\n this.onLocationClick(e.currentTarget, this.locationsData[i])\r\n )\r\n })\r\n \r\n this.addCounterToList();\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n }\r\n\r\n addCounterToList() {\r\n let listItems = this.listWrapper.querySelectorAll(\".locations-place\");\r\n for(const [i, item] of listItems.entries()) {\r\n item.setAttribute(\"data-list-counter\", i + 1)\r\n }\r\n }\r\n\r\n closeAllPopUps() {\r\n if (this.map.popUps.length) {\r\n this.map.popUps.forEach((item) => item.remove());\r\n }\r\n }\r\n\r\n onMarkerClick(data, idx) {\r\n this.closeAllPopUps();\r\n this.locations.forEach((item) => item.classList.remove(\"active\"));\r\n this.locations[idx].classList.add(\"active\");\r\n const popupHtml = getPopup(data);\r\n const popup = new this.map.mapbox.Popup({ closeOnClick: false })\r\n .setLngLat([data.longitude, data.latitude])\r\n .setHTML(popupHtml);\r\n this.map.popUps.push(popup);\r\n popup.addTo(this.map.map);\r\n popup._closeButton.addEventListener(\"click\", () => {\r\n this.locations.forEach((item) => item.classList.remove(\"active\"));\r\n })\r\n this.map.map.flyTo({\r\n center: [data.longitude, data.latitude],\r\n essential: true,\r\n });\r\n }\r\n\r\n onLocationClick(el, locationData) {\r\n this.locations.forEach((item) => item.classList.remove(\"active\"));\r\n el.classList.add(\"active\");\r\n let idx = this.locationsData.findIndex(item => item.imageId === locationData.imageId);\r\n this.onMarkerClick(locationData, idx);\r\n }\r\n\r\n}\r\n\r\nexport default PlacesToVisit;\r\n","export const getPopup = ({ title, geolocation, imageurl, link }) => `\r\n \r\n
\r\n
\r\n
\r\n ${title}, \r\n ${geolocation} \r\n
\r\n
Discover \r\n
\" + \"No results found. Try removing filters to show results.\" + \"
\";\r\n } else {\r\n paginationData = document.querySelector(\".sd-pagination-content\");\r\n let resultsPage = paginationData.querySelector(\".result-page-tab\");\r\n resultsPage.innerHTML = \"\" + \"No results found. Try removing filters to show results.\" + \"
\";\r\n }\r\n this.contentEl.classList.add(\"no-results\");\r\n if (resultCountDiv) {\r\n resultCountDiv.parentElement.style.display = 'none';\r\n }\r\n } else {\r\n if (this.result && data.filterOptions == null) {\r\n this.result.innerHTML = \"\";\r\n this.result.insertAdjacentHTML(\"beforeend\", data.result);\r\n const observer = lozad();\r\n observer.observe();\r\n var searchSettings = JSON.parse(data.searchSettings);\r\n\r\n contentId = resultCountDiv.getAttribute(\"data-pagination-id\");\r\n const itemsPerPageElement = document.querySelector('[data-itemsperpage]');\r\n let itemsPerPage = 0;\r\n if (itemsPerPageElement != null) {\r\n itemsPerPage = parseInt(itemsPerPageElement.getAttribute('data-itemsperpage'));\r\n }\r\n\r\n this.pagination && this.pagination.setAttribute(\"data-current-page-no\", searchSettings.Page);\r\n const currentPageNo = searchSettings.Page;\r\n\r\n this.pagination && this.pagination.setAttribute(\"data-totalpages\", data.totalpages);\r\n resultCountDiv.parentElement.style.display = '';\r\n this.pagination && this.pagination.setAttribute(\"data-totalresults\", data.totalresults);\r\n this.pagination && this.pagination.setAttribute(\"data-resulttype\", data.resulttype);\r\n\r\n this.pagination = document.querySelector(\".pager-\" + this.currentTab);\r\n\r\n PaginatedData.updatePagination(searchSettings.Page, itemsPerPage, data.totalpages, data.resulttype);\r\n PaginatedData.getFilteredResultCount(data.totalresults, data.resulttype, contentId, parseInt(currentPageNo));\r\n } else {\r\n paginationData = document.querySelector(\".onsite-container-local-1 .sd-pagination-content\");\r\n paginationData.innerHTML = \"\";\r\n paginationData.insertAdjacentHTML(\"beforeend\", data.result);\r\n const observer = lozad();\r\n observer.observe();\r\n this.UpdateSelectedFilters();\r\n }\r\n if (this.contentEl) {\r\n this.contentEl.classList.remove(\"no-results\");\r\n }\r\n }\r\n })\r\n .catch(error => {\r\n console.error(error);\r\n });\r\n }\r\n\r\n //Update the selected filter values after a call is made to fetch new filter results (mainly used in the keyword search functionality of functionality that \r\n //requires to re-attach after new elements are generated)\r\n UpdateSelectedFilters() {\r\n let areas = [];\r\n let types = [];\r\n let grades = [];\r\n let themes = [];\r\n let levels = [];\r\n let durations = [];\r\n let familys = [];\r\n let activityLevels = [];\r\n let travelConsultants = [];\r\n let destinations = [];\r\n\r\n this.checkboxes.forEach((checkbox) => {\r\n if (checkbox.checked && checkbox.parentNode.parentNode.classList == \"by-grade\") {\r\n grades.push({ Title: checkbox.value });\r\n }\r\n if (checkbox.checked && checkbox.parentNode.parentNode.classList == \"by-type\") {\r\n types.push({ Title: checkbox.value });\r\n }\r\n if (checkbox.checked && checkbox.parentNode.parentNode.classList == \"by-area\") {\r\n areas.push({ Title: checkbox.value });\r\n }\r\n if (checkbox.checked && checkbox.parentNode.parentNode.classList == \"by-theme\") {\r\n themes.push({ Title: checkbox.value });\r\n }\r\n if (checkbox.checked && checkbox.parentNode.parentNode.classList == \"by-level\") {\r\n levels.push({ Title: checkbox.value });\r\n }\r\n if (checkbox.checked && checkbox.parentNode.parentNode.classList == \"by-duration\") {\r\n durations.push({ Title: checkbox.value });\r\n }\r\n if (checkbox.checked && checkbox.parentNode.parentNode.classList == \"by-family\") {\r\n familys.push({ Title: checkbox.value });\r\n }\r\n if (checkbox.checked && checkbox.parentNode.parentNode.classList == \"by-activity-level\") {\r\n activityLevels.push({ Title: checkbox.value });\r\n }\r\n if (checkbox.checked && checkbox.parentNode.parentNode.classList == \"by-travel-consultant\") {\r\n travelConsultants.push({ Title: checkbox.value });\r\n }\r\n if (checkbox.checked && checkbox.parentNode.parentNode.classList == \"by-destination\") {\r\n destinations.push({ Title: checkbox.value });\r\n }\r\n });\r\n\r\n this.SetFilterCountSpans(areas.length, types.length, grades.length, themes.length, levels.length, durations.length, familys.length, activityLevels.length, travelConsultants.length, destinations.length, areas.length + types.length + grades.length + themes.length + levels.length + durations.length + familys.length + activityLevels.length + travelConsultants.length + destinations.length);\r\n\r\n this.appendFilters(areas, this.containerArea);\r\n this.appendFilters(types, this.containerType);\r\n this.appendFilters(grades, this.containerGrade);\r\n this.appendFilters(themes, this.containerTheme);\r\n this.appendFilters(levels, this.containerLevel);\r\n this.appendFilters(durations, this.containerDuration);\r\n this.appendFilters(familys, this.containerFamily);\r\n this.appendFilters(activityLevels, this.containerActivityLevel);\r\n if (this.containerTravelConsultant) {\r\n this.appendFilters(travelConsultants, this.containerTravelConsultant);\r\n }\r\n if (this.containerDestination) {\r\n this.appendFilters(destinations, this.containerDestination);\r\n }\r\n }\r\n //Update the filter field elements to contain the count of filters per type of filter (area, type and grade) eg. area has Paris selected therefore we show a count of 1 in the dropdown.\r\n SetFilterCountSpans(totalAreas, totalTypes, totalGrades, totalThemes, totalLevels, totalDurations, totalFamilys, totalActivityLevels, totalTravelConsultants, totalDestinations, totalFilters) {\r\n const filterMapping = [\r\n { count: totalAreas, selector: \".sd-filter-dd.area-dd > span\", button: this.filterButtonArea },\r\n { count: totalTypes, selector: \".sd-filter-dd.type-dd > span\", button: this.filterButtonType },\r\n { count: totalGrades, selector: \".sd-filter-dd.grade-dd > span\", button: this.filterButtonGrade },\r\n { count: totalThemes, selector: \".sd-filter-dd.theme-dd > span\", button: this.filterButtonTheme },\r\n { count: totalLevels, selector: \".sd-filter-dd.level-dd > span\", button: this.filterButtonLevel },\r\n { count: totalDurations, selector: \".sd-filter-dd.duration-dd > span\", button: this.filterButtonDuration },\r\n { count: totalFamilys, selector: \".sd-filter-dd.family-dd > span\", button: this.filterButtonFamily },\r\n { count: totalActivityLevels, selector: \".sd-filter-dd.activity-level-dd > span\", button: this.filterButtonActivityLevel },\r\n { count: totalTravelConsultants, selector: \".sd-filter-dd.travel-consultant-dd > span\", button: this.filterButtonTravelConsultant },\r\n { count: totalDestinations, selector: \".sd-filter-dd.destination-dd > span\", button: this.filterButtonDestination },\r\n { count: totalFilters, selector: \"#hotelFilterButton > #SetFilterCountSpans\", button: totalFilters }\r\n ];\r\n\r\n filterMapping.forEach(filter => {\r\n const element = document.querySelector(filter.selector);\r\n if (filter.button && element) {\r\n element.innerHTML = filter.count > 0 ? `${filter.count} ` : \"\";\r\n }\r\n });\r\n }\r\n\r\n async applyFilter(event) {\r\n this.areas = this.grabAreas();\r\n this.types = this.grabTypes();\r\n this.grades = this.grabGrades();\r\n this.themes = this.grabThemes();\r\n this.levels = this.grabLevels();\r\n this.durations = this.grabDurations();\r\n this.familys = this.grabFamilys();\r\n this.activityLevels = this.grabActivityLevels();\r\n this.travelConsultants = this.grabTravelConsultants();\r\n this.destinations = this.grabDestinations();\r\n const tab = PaginatedData.getTab();\r\n const currentPage = 1;\r\n\r\n this.SetFilterCountSpans(this.areas.length, this.types.length, this.grades.length, this.themes.length, this.levels.length, this.durations.length, this.familys.length, this.activityLevels.length, this.travelConsultants.length, this.destinations.length, this.areas.length + this.types.length + this.grades.length + this.themes.length + this.levels.length + this.durations.length + this.familys.length + this.activityLevels.length + this.travelConsultants.length + this.destinations.length);\r\n\r\n const data = {\r\n pageid: this.itemId,\r\n page: currentPage,\r\n tab: tab,\r\n currenturl: location.href.toLowerCase(),\r\n areas: this.areas,\r\n tags: this.types,\r\n grades: this.grades,\r\n themes: this.themes,\r\n levels: this.levels,\r\n durations: this.durations,\r\n familys: this.familys,\r\n activityLevels: this.activityLevels,\r\n travelConsultants: this.travelConsultants,\r\n destinations: this.destinations,\r\n filter: PaginatedData.getFilter(),\r\n q: PaginatedData.getURLqueryString(),\r\n category: PaginatedData.getOnsiteSearchCategory(),\r\n };\r\n\r\n this.AddUrlFilterParams(data);\r\n\r\n if (process.env.NODE_ENV === \"development\") {\r\n const url = `${this.url}?data=${encodeURIComponent(JSON.stringify(data))}`;\r\n await this.getDataFromAPI(url, this.method);\r\n } else {\r\n const url = `${this.url}?data=${encodeURIComponent(JSON.stringify(data))}`;\r\n await this.getDataFromAPI(url, this.method);\r\n }\r\n\r\n if (document.getElementById(\"multiple-list\") !== null) {\r\n // Number of results functionality\r\n const pageNumberOSS = document.createElement(\"div\");\r\n pageNumberOSS.classList.add(\"page-number-OSS\");\r\n var totalpage = this.numberOfResultsAfterFiltersApplied;\r\n var currentPageNumber = document.getElementsByClassName(\"itinerary-list__content__tour-list\").length;\r\n\r\n var urlParamsCountry = new URLSearchParams(window.location.search);\r\n var myParamCountry = urlParamsCountry.get('q');\r\n var myParamCatagory = urlParamsCountry.get('t');\r\n if (myParamCatagory.slice(-1) === 's') {\r\n myParamCatagory = myParamCatagory.slice(0, -1);\r\n }\r\n let resultsString = totalpage > 1 ? 'results' : 'result';\r\n pageNumberOSS.innerHTML = `1 - ${currentPageNumber} of ${totalpage} ${myParamCatagory} ${resultsString} for \"${myParamCountry}\" `;\r\n var child1 = document.querySelector('.itinerary-list__content')\r\n document.querySelector('.result-page-tab-content').insertBefore(pageNumberOSS, child1);\r\n var pageNumberOSS1 = pageNumberOSS.cloneNode(true);\r\n document.querySelector('#result-page-tab1').appendChild(pageNumberOSS1);\r\n // Number of results functionality\r\n }\r\n }\r\n}\r\n\r\nexport default Filter;\r\n","import HttpClient from \"../../client/httpclient\";\r\nimport { paginatedContent } from \"../../paginated-content\";\r\nimport PaginatedData from \"../../client/PaginatedData\";\r\nimport HashCheckToScroll from \"../../helper/hash-check-to-scroll\";\r\nimport \"regenerator-runtime/runtime\";\r\n\r\nclass MobileFilter {\r\n constructor(DOMelement) {\r\n try {\r\n this.el = DOMelement;\r\n this.areas = [];\r\n this.types = [];\r\n this.grades = [];\r\n this.themes = [];\r\n this.levels = [];\r\n this.activityLevels = [];\r\n this.travelConsultants = [];\r\n this.destinations = [];\r\n this.durations = [];\r\n this.familys = [];\r\n this.paginatedContent = paginatedContent;\r\n this.mobileFilterMenu = document.querySelector(\".mobile-filter-menu\");\r\n this.hotelFilterButton = document.getElementById(\"hotelFilterButton\");\r\n this.exitFilterButton = document.querySelector(\"#exit-close__filter\");\r\n this.checkboxes = this.mobileFilterMenu.querySelectorAll(\".sd-checkbox > .sd-checkbox__input\");\r\n this.tabFilterProperties = document.querySelector(\".tab-properties\");\r\n this.currentUrl = new URL(window.location.href);\r\n this.keywordSearchPage = document.querySelector(\".keyword-search-filter > .on-site-filter\");\r\n\r\n this.tabsContainer = document.getElementById('tabs-container-for-select');\r\n\r\n this.tabItems = document.querySelectorAll(\".sd-tabs > ul.tabs >.tab\");\r\n this.numberOfResultsAfterFiltersApplied;\r\n\r\n\r\n if (this.tabItems.length > 1) {\r\n this.containerArea = this.tabFilterProperties.querySelector(\"#mobile-selected-area\");\r\n this.containerType = this.tabFilterProperties.querySelector(\"#mobile-selected-type\");\r\n this.containerGrade = this.tabFilterProperties.querySelector(\"#mobile-selected-grad\");\r\n this.containerTheme = this.tabFilterProperties.querySelector(\"#mobile-selected-theme\");\r\n this.containerLevel = this.tabFilterProperties.querySelector(\"#mobile-selected-level\");\r\n this.containerActivityLevel = this.tabFilterProperties.querySelector(\"#mobile-selected-activity-level\");\r\n this.containerTravelConsultant = this.tabFilterProperties.querySelector(\"#mobile-selected-travel-consultant\");\r\n this.containerDestination = this.tabFilterProperties.querySelector(\"#mobile-selected-destination\");\r\n this.containerDuration = this.tabFilterProperties.querySelector(\"#mobile-selected-duration\");\r\n this.containerFamily = this.tabFilterProperties.querySelector(\"#mobile-selected-family\");\r\n } else {\r\n this.containerArea = document.querySelector(\"#mobile-selected-area\");\r\n this.containerType = document.querySelector(\"#mobile-selected-type\");\r\n this.containerGrade = document.querySelector(\"#mobile-selected-grad\");\r\n this.containerTheme = document.querySelector(\"#mobile-selected-theme\");\r\n this.containerLevel = document.querySelector(\"#mobile-selected-level\");\r\n this.containerActivityLevel = document.querySelector(\"#mobile-selected-activity-level\");\r\n this.containerTravelConsultant = document.querySelector(\"#mobile-selected-travel-consultant\");\r\n this.containerDestination = document.querySelector(\"#mobile-selected-destination\");\r\n this.containerDuration = document.querySelector(\"#mobile-selected-duration\");\r\n this.containerFamily = document.querySelector(\"#mobile-selected-family\");\r\n }\r\n\r\n this.filterButtonArea = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.area-dd\");\r\n this.filterButtonType = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.type-dd\");\r\n this.filterButtonGrade = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.grade-dd\");\r\n this.filterButtonTheme = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.theme-dd\");\r\n this.filterButtonLevel = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.activity-level-dd\");\r\n this.filterButtonDestination = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.destination-dd\");\r\n this.filterButtonTravelConsultant = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.travel-consultant-dd\");\r\n this.filterButtonDuration = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.duration-dd\");\r\n this.filterButtonFamily = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.family-dd\");\r\n\r\n this.applyButton = document.getElementById(\"mobile-apply__filter\");\r\n this.url = this.applyButton.getAttribute(\"data-action\");\r\n this.method = \"GET\";\r\n this.itemId = this.applyButton.getAttribute(\"data-item\");\r\n\r\n this.filterOptions = document.querySelectorAll(\".sd-mobile-filter-item-title\");\r\n this.bindButtons(this.filterOptions);\r\n\r\n const toggleFilterMenu = () => {\r\n this.toggleMobileFilterMenu();\r\n };\r\n\r\n this.hotelFilterButton.addEventListener(\"click\", toggleFilterMenu);\r\n this.exitFilterButton.addEventListener(\"click\", toggleFilterMenu);\r\n\r\n\r\n this.getElementsAndSetData();\r\n\r\n if (process.env.NODE_ENV === \"development\") {\r\n this.url = \"/src/api/product-search-result.json\";\r\n }\r\n\r\n this.grabFilters = this.grabFilters.bind(this);\r\n this.appendFilter = this.appendFilter.bind(this);\r\n this.appendFilterByType = this.appendFilterByType.bind(this);\r\n this.appendFilterByAreas = this.appendFilterByAreas.bind(this);\r\n this.appendFilterByGrades = this.appendFilterByGrades.bind(this);\r\n this.appendFilterByThemes = this.appendFilterByThemes.bind(this);\r\n this.appendFilterByLevels = this.appendFilterByLevels.bind(this);\r\n this.appendFilterByActivityLevels = this.appendFilterByActivityLevels.bind(this);\r\n this.appendFilterByTravelConsultants = this.appendFilterByTravelConsultants.bind(this);\r\n this.appendFilterByDestinations = this.appendFilterByDestinations.bind(this);\r\n this.appendFilterByDurations = this.appendFilterByDurations.bind(this);\r\n this.appendFilterByFamilys = this.appendFilterByFamilys.bind(this);\r\n this.removeFilter = this.removeFilter.bind(this);\r\n this.applyFilter = this.applyFilter.bind(this);\r\n this.toggleMobileFilterMenu = this.toggleMobileFilterMenu.bind(this);\r\n\r\n // Initialize checkboxes and set up event listeners\r\n this.filterHandlers = {\r\n \"by-type\": this.appendFilterByType,\r\n \"by-area\": this.appendFilterByAreas,\r\n \"by-grade\": this.appendFilterByGrades,\r\n \"by-theme\": this.appendFilterByThemes,\r\n \"by-level\": this.appendFilterByLevels,\r\n \"by-activity-level\": this.appendFilterByActivityLevels,\r\n \"by-travel-consultant\": this.appendFilterByTravelConsultants,\r\n \"by-destination\": this.appendFilterByDestinations,\r\n \"by-duration\": this.appendFilterByDurations,\r\n \"by-family\": this.appendFilterByFamilys\r\n };\r\n\r\n this.checkboxes = this.mobileFilterMenu.querySelectorAll(\".sd-checkbox > .sd-checkbox__input\");\r\n [...this.checkboxes].forEach((checkbox) => {\r\n checkbox.checked = false;\r\n const parentClass = checkbox.parentNode.parentNode.classList[0];\r\n if (this.filterHandlers[parentClass]) {\r\n checkbox.addEventListener(\"change\", this.filterHandlers[parentClass]);\r\n }\r\n });\r\n\r\n this.applyButton.addEventListener(\"click\", this.applyFilter);\r\n this.applyButton.addEventListener(\"click\", toggleFilterMenu);\r\n\r\n\r\n const radios = document.querySelectorAll(\"input[type=radio][name=\\\"css-tabs\\\"]\");\r\n\r\n radios.forEach(radio => {\r\n radio.addEventListener(\"click\", () => {\r\n this.getElementsAndSetData();\r\n });\r\n });\r\n\r\n this.reAttachMobileFilterOptions = this.reAttachMobileFilterOptions.bind(this);\r\n PaginatedData.SetReAttachMobileFilterOptions(this.reAttachMobileFilterOptions);\r\n\r\n if (window.innerWidth < 1024) {\r\n // we are in the Mobile viewport bucket \r\n this.queryParams = new URLSearchParams(window.location.search);\r\n if (this.queryParams) {\r\n this.queryParamsValue = Object.fromEntries(this.queryParams.entries());\r\n\r\n switch (this.queryParamsValue.t) {\r\n case \"hotels\":\r\n this.keywordSearchPage.style.display = \"block\";\r\n break;\r\n case \"things to do\":\r\n this.keywordSearchPage.style.display = \"block\";\r\n break;\r\n case \"tours\":\r\n this.keywordSearchPage.style.display = \"block\";\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n this.CheckUrlFilterParams();\r\n this.GetSelectedTab()\r\n }\r\n\r\n\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n }\r\n\r\n UpdateSelectedFilters() {\r\n let areas = [];\r\n let types = [];\r\n let grades = [];\r\n let themes = [];\r\n let levels = [];\r\n let activityLevels = [];\r\n let travelConsultants = [];\r\n let destinations = [];\r\n let durations = [];\r\n let familys = [];\r\n\r\n const filterMap = {\r\n 'by-grade': grades,\r\n 'by-type': types,\r\n 'by-area': areas,\r\n 'by-theme': themes,\r\n 'by-level': levels,\r\n 'by-activity-level': activityLevels,\r\n 'by-travel-consultant': travelConsultants,\r\n 'by-destination': destinations,\r\n 'by-duration': durations,\r\n 'by-family': familys,\r\n };\r\n\r\n //process each checkbox\r\n this.checkboxes.forEach((checkbox) => {\r\n if (checkbox.checked) {\r\n const classList = checkbox.parentNode.parentNode.classList;\r\n\r\n // Iterate over the filterMap object\r\n Object.entries(filterMap).forEach(([key, array]) => {\r\n if (classList.contains(key)) {\r\n array.push({ Title: checkbox.value });\r\n }\r\n });\r\n }\r\n });\r\n\r\n this.SetFilterCountSpans(areas.length, types.length, grades.length, themes.length, levels.length, activityLevels.length, travelConsultants.length, destinations.length, durations.length, familys.length,\r\n areas.length + types.length + grades.length + themes.length + levels.length + activityLevels.length + travelConsultants.length + destinations.length + durations.length + familys.length);\r\n\r\n this.appendFilters(areas, this.containerArea);\r\n this.appendFilters(types, this.containerType);\r\n this.appendFilters(grades, this.containerGrade);\r\n this.appendFilters(themes, this.containerTheme);\r\n this.appendFilters(levels, this.containerLevel);\r\n this.appendFilters(activityLevels, this.containerActivityLevel);\r\n if (this.containerTravelConsultant) {\r\n this.appendFilters(travelConsultants, this.containerTravelConsultant);\r\n }\r\n if (this.containerDestination) {\r\n this.appendFilters(destinations, this.containerDestination);\r\n }\r\n this.appendFilters(durations, this.containerDuration);\r\n this.appendFilters(familys, this.containerFamily);\r\n }\r\n\r\n //Method used as a callback for instances of the filter dropdown being generated through JS and losing the eventListeners from the elements.\r\n //We need to select these new elements returned from the back end in order to be able to use them again.\r\n //This is used in \"SearchFilter.js\"\r\n reAttachMobileFilterOptions() {\r\n\r\n this.toggleMobileFilterMenu = this.toggleMobileFilterMenu.bind(this);\r\n this.mobileFilterMenu = document.querySelector(\".mobile-filter-menu\");\r\n this.el = document.querySelectorAll(\".sd-filter-button\");\r\n\r\n this.hotelFilterButton = document.querySelector(\"#hotelFilterButton\");\r\n this.exitFilterButton = document.querySelector(\"#exit-close__filter\");\r\n this.tabFilterProperties = document.querySelector(\".tab-properties\");\r\n\r\n //reset the slected filter values in order to re-attach and run this filter functionality as per usual.\r\n this.areas = [];\r\n this.types = [];\r\n this.grades = [];\r\n this.themes = [];\r\n this.levels = [];\r\n this.activityLevels = [];\r\n this.travelConsultants = [];\r\n this.destinations = [];\r\n this.durations = [];\r\n this.familys = [];\r\n\r\n //Selected filter containers\r\n this.containerArea = document.querySelector(\"#mobile-selected-area\");\r\n this.containerType = document.querySelector(\"#mobile-selected-type\");\r\n this.containerGrade = document.querySelector(\"#mobile-selected-grad\");\r\n this.containerTheme = document.querySelector(\"#mobile-selected-theme\");\r\n this.containerLevel = document.querySelector(\"#mobile-selected-level\");\r\n this.containerActivityLevel = document.querySelector(\"#mobile-selected-activity-level\");\r\n this.containerTravelConsultant = document.querySelector(\"#mobile-selected-travel-consultant\");\r\n this.containerDestination = document.querySelector(\"#mobile-selected-destination\");\r\n this.containerDuration = document.querySelector(\"#mobile-selected-duration\");\r\n this.containerFamily = document.querySelector(\"#mobile-selected-family\");\r\n\r\n //Dropdowns\r\n this.filterButtonArea = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.area-dd\");\r\n this.filterButtonType = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.type-dd\");\r\n this.filterButtonGrade = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.grade-dd\");\r\n this.filterButtonTheme = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.theme-dd\");\r\n this.filterButtonLevel = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.level-dd\");\r\n this.filterButtonActivityLevel = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.activity-level-dd\");\r\n this.filterButtonTravelConsultant = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.travel-consultant-dd\");\r\n this.filterButtonDestination = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.destination-dd\");\r\n this.filterButtonDuration = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.duration-dd\");\r\n this.filterButtonFamily = document.querySelector(\".sd-mobile-filter-item-title.sd-filter-dd.family-dd\");\r\n\r\n this.filterButton = document.querySelectorAll(\".sd-filter-dd\");\r\n\r\n this.filterButton.forEach((button) => {\r\n button.addEventListener(\"click\", this.toggleFilter);\r\n });\r\n\r\n //Checkboxes\r\n\r\n this.applyButton = document.getElementById(\"mobile-apply__filter\");\r\n\r\n this.filterOptions = document.querySelectorAll(\".sd-mobile-filter-item-title\");\r\n this.bindButtons(this.filterOptions);\r\n\r\n const toggleFilterMenu = () => {\r\n this.toggleMobileFilterMenu();\r\n };\r\n\r\n this.applyButton.addEventListener(\"click\", this.applyFilter);\r\n this.applyButton.addEventListener(\"click\", toggleFilterMenu);\r\n\r\n this.getElementsAndSetData();\r\n\r\n this.hotelFilterButton.addEventListener(\"click\", toggleFilterMenu);\r\n this.exitFilterButton.addEventListener(\"click\", toggleFilterMenu);\r\n\r\n this.checkboxes = this.mobileFilterMenu.querySelectorAll(\".sd-checkbox > .sd-checkbox__input\");\r\n [...this.checkboxes].forEach((checkbox) => {\r\n if (checkbox.parentNode.parentNode.classList == \"by-type\") {\r\n checkbox.addEventListener(\"change\", this.appendFilterByType);\r\n } else if (checkbox.parentNode.parentNode.classList == \"by-area\") {\r\n checkbox.addEventListener(\"change\", this.appendFilterByAreas);\r\n } else if (checkbox.parentNode.parentNode.classList == \"by-grade\") {\r\n checkbox.addEventListener(\"change\", this.appendFilterByGrades);\r\n } else if (checkbox.parentNode.parentNode.classList == \"by-theme\") {\r\n checkbox.addEventListener(\"change\", this.appendFilterByThemes);\r\n } else if (checkbox.parentNode.parentNode.classList == \"by-level\") {\r\n checkbox.addEventListener(\"change\", this.appendFilterByLevels);\r\n } else if (checkbox.parentNode.parentNode.classList == \"by-activity-level\") {\r\n checkbox.addEventListener(\"change\", this.appendFilterByActivityLevels);\r\n } else if (checkbox.parentNode.parentNode.classList == \"by-travel-consultant\") {\r\n checkbox.addEventListener(\"change\", this.appendFilterByTravelConsultants);\r\n } else if (checkbox.parentNode.parentNode.classList == \"by-destination\") {\r\n checkbox.addEventListener(\"change\", this.appendFilterByDestinations);\r\n } else if (checkbox.parentNode.parentNode.classList == \"by-duration\") {\r\n checkbox.addEventListener(\"change\", this.appendFilterByDurations);\r\n } else if (checkbox.parentNode.parentNode.classList == \"by-family\") {\r\n checkbox.addEventListener(\"change\", this.appendFilterByFamilys);\r\n }\r\n });\r\n }\r\n\r\n\r\n\r\n async CheckUrlFilterParams() {\r\n this.areas = [];\r\n this.grades = [];\r\n this.types = [];\r\n this.themes = [];\r\n this.levels = [];\r\n this.activityLevels = [];\r\n this.travelConsultants = [];\r\n this.destinations = [];\r\n this.durations = [];\r\n this.familys = [];\r\n\r\n if (this.queryParamsValue[\"area\"] || this.queryParamsValue[\"grade\"] || this.queryParamsValue[\"tag\"]\r\n || this.queryParamsValue[\"theme\"] || this.queryParamsValue[\"level\"] || this.queryParamsValue[\"activitylevel\"] || this.queryParamsValue[\"travelconsultant\"] || this.queryParamsValue[\"destination\"]\r\n || this.queryParamsValue[\"duration\"] || this.queryParamsValue[\"family\"]) {\r\n if (this.queryParamsValue[\"area\"]) {\r\n let areaUrlParamsList = this.queryParamsValue[\"area\"].split(\"|\");\r\n for (var i = 0; i < areaUrlParamsList.length; i++) {\r\n this.areas.push({ Title: areaUrlParamsList[i] });\r\n }\r\n }\r\n if (this.queryParamsValue[\"tag\"]) {\r\n let typeUrlParamsList = this.queryParamsValue[\"tag\"].split(\"|\");\r\n for (var i = 0; i < typeUrlParamsList.length; i++) {\r\n this.types.push({ Title: typeUrlParamsList[i] });\r\n }\r\n }\r\n if (this.queryParamsValue[\"grade\"]) {\r\n let gradeUrlParamsList = this.queryParamsValue[\"grade\"].split(\"|\");\r\n for (var i = 0; i < gradeUrlParamsList.length; i++) {\r\n this.grades.push({ Title: gradeUrlParamsList[i] });\r\n }\r\n }\r\n if (this.queryParamsValue[\"theme\"]) {\r\n let themeUrlParamsList = this.queryParamsValue[\"theme\"].split(\"|\");\r\n for (var i = 0; i < themeUrlParamsList.length; i++) {\r\n this.themes.push({ Title: themeUrlParamsList[i] });\r\n }\r\n }\r\n if (this.queryParamsValue[\"level\"]) {\r\n let levelUrlParamsList = this.queryParamsValue[\"level\"].split(\"|\");\r\n for (var i = 0; i < levelUrlParamsList.length; i++) {\r\n this.levels.push({ Title: levelUrlParamsList[i] });\r\n }\r\n }\r\n\r\n if (this.queryParamsValue[\"activitylevel\"]) {\r\n let activitylevelUrlParamsList = this.queryParamsValue[\"activitylevel\"].split(\"|\");\r\n for (var i = 0; i < activitylevelUrlParamsList.length; i++) {\r\n this.activityLevels.push({ Title: activitylevelUrlParamsList[i] });\r\n }\r\n }\r\n if (this.queryParamsValue[\"travelconsultant\"]) {\r\n let travelconsultantUrlParamsList = this.queryParamsValue[\"travelconsultant\"].split(\"|\");\r\n for (var i = 0; i < travelconsultantUrlParamsList.length; i++) {\r\n this.travelconsultants.push({ Title: travelconsultantUrlParamsList[i] });\r\n }\r\n }\r\n if (this.queryParamsValue[\"destination\"]) {\r\n let destinationUrlParamsList = this.queryParamsValue[\"destination\"].split(\"|\");\r\n for (var i = 0; i < destinationUrlParamsList.length; i++) {\r\n this.destinations.push({ Title: destinationUrlParamsList[i] });\r\n }\r\n }\r\n\r\n if (this.queryParamsValue[\"duration\"]) {\r\n let durationUrlParamsList = this.queryParamsValue[\"duration\"].split(\"|\");\r\n for (var i = 0; i < durationUrlParamsList.length; i++) {\r\n this.durations.push({ Title: durationUrlParamsList[i] });\r\n }\r\n }\r\n\r\n if (this.queryParamsValue[\"family\"]) {\r\n let familyUrlParamsList = this.queryParamsValue[\"family\"].split(\"|\");\r\n for (var i = 0; i < familyUrlParamsList.length; i++) {\r\n this.familys.push({ Title: familyUrlParamsList[i] });\r\n }\r\n }\r\n if (this.queryParamsValue[\"t\"]) {\r\n var urlCategory = this.queryParamsValue[\"t\"];\r\n this.SetFilterTabCategoryFromURL(urlCategory);\r\n }\r\n\r\n var currentPage = 1;\r\n if (this.queryParamsValue[\"page\"]) {\r\n currentPage = this.queryParamsValue[\"page\"];\r\n }\r\n\r\n this.FetchSelectedFilterFromUrlParams();\r\n\r\n const data = {\r\n pageid: this.itemId,\r\n page: currentPage,\r\n currenturl: location.href.toLowerCase(),\r\n areas: this.areas,\r\n tags: this.types,\r\n tab: PaginatedData.getTab(),\r\n grades: this.grades,\r\n themes: this.themes,\r\n levels: this.levels,\r\n activityLevels: this.activityLevels,\r\n travelConsultants: this.travelConsultants,\r\n destinations: this.destinations,\r\n durations: this.durations,\r\n familys: this.familys,\r\n filter: PaginatedData.getFilter(),\r\n q: PaginatedData.getURLqueryString(),\r\n category: PaginatedData.getOnsiteSearchCategory(),\r\n };\r\n\r\n this.AddUrlFilterParams(data);\r\n\r\n if (process.env.NODE_ENV === \"development\") {\r\n const url = `${this.url}?data=${encodeURIComponent(JSON.stringify(data))}`;\r\n await this.getDataFromAPI(url, this.method);\r\n } else {\r\n const url = `${this.url}?data=${encodeURIComponent(JSON.stringify(data))}`;\r\n await this.getDataFromAPI(url, this.method);\r\n }\r\n\r\n }\r\n }\r\n\r\n SetFilterTabCategoryFromURL(urlCategory) {\r\n const selectElement = document.getElementById('multiple-list');\r\n Array.from(selectElement.options).forEach(function (option) {\r\n let splitValue = option.value.split(\"%\");\r\n let category = splitValue[1].toLowerCase();\r\n\r\n option.selected = (category == urlCategory);\r\n });\r\n\r\n\r\n var tabHeaders = this.tabsContainer.querySelectorAll('.tab-header-for-select');\r\n tabHeaders.forEach(function (tabHeader) {\r\n var tabHeaderValue = tabHeader.getAttribute(\"data-value\");\r\n let splitValue = tabHeaderValue.split(\"%\");\r\n let category = splitValue[1].toLowerCase();\r\n if (category != urlCategory) {\r\n tabHeader.classList.remove('active-select');\r\n } else {\r\n tabHeader.classList.add('active-select');\r\n }\r\n });\r\n }\r\n\r\n GetSelectedTab() {\r\n const selectElement = document.getElementById('multiple-list');\r\n var currentTabFromCategory;\r\n\r\n if (selectElement) {\r\n const selectedOption = selectElement.options[selectElement.selectedIndex];\r\n let splitValue = selectedOption.value.split(\"%\");\r\n\r\n PaginatedData.setFilter(splitValue[0]);\r\n PaginatedData.setOnsiteSearchCategory(splitValue[1].toLowerCase());\r\n\r\n switch (splitValue[1].toLowerCase()) {\r\n case \"hotels\":\r\n currentTabFromCategory = \"properties\";\r\n break;\r\n case \"tours\":\r\n currentTabFromCategory = \"itineraries\";\r\n break;\r\n case \"things to do\":\r\n currentTabFromCategory = \"experiences\";\r\n break;\r\n default:\r\n currentTabFromCategory = splitValue[1].toLowerCase();\r\n break;\r\n }\r\n }\r\n\r\n return currentTabFromCategory;\r\n }\r\n\r\n FetchSelectedFilterFromUrlParams() {\r\n // Fetch the selected tab to request it's required data\r\n const selectElement = document.getElementById('multiple-list');\r\n const checkboxes = document.querySelectorAll('.sd-checkbox');\r\n var currentTabFromCategory;\r\n\r\n if (selectElement) {\r\n // Find the selected option\r\n currentTabFromCategory = this.GetSelectedTab();\r\n } else {\r\n let findProperty = document.querySelector(\".sd-tabs > .tab-properties\");\r\n let findItin = document.querySelector(\".sd-tabs > .tab-itineraries\");\r\n let findExp = document.querySelector(\".sd-tabs > .tab-experiences\");\r\n\r\n if (findProperty) {\r\n currentTabFromCategory = \"properties\";\r\n } else if (findItin) {\r\n currentTabFromCategory = \"itineraries\";\r\n } else if (findExp) {\r\n currentTabFromCategory = \"experiences\";\r\n }\r\n }\r\n\r\n // Loop through the checkboxes\r\n checkboxes.forEach(function (checkbox) {\r\n const value = checkbox.querySelector('.sd-checkbox__input').value.toLowerCase().trim();\r\n const collections = [\r\n this.areas, this.grades, this.types, this.themes,\r\n this.levels, this.durations, this.familys,\r\n this.activityLevels, this.travelConsultants, this.destinations\r\n ];\r\n\r\n if (collections.some(collection => collection.some(obj => value.includes(obj.Title.toLowerCase())))) {\r\n checkbox.querySelector('.sd-checkbox__input').checked = true;\r\n }\r\n }.bind(this));\r\n\r\n\r\n PaginatedData.setTab(currentTabFromCategory);\r\n PaginatedData.setSearchflag(true);\r\n\r\n this.UpdateSelectedFilters();\r\n }\r\n\r\n AddUrlFilterParams(data) {\r\n var newQueryParams = new URLSearchParams();\r\n //Add the query and tab to the search query params\r\n if (this.queryParamsValue && this.queryParamsValue[\"q\"] && this.queryParamsValue[\"t\"]) {\r\n newQueryParams.append(\"q\", this.queryParamsValue.q);\r\n newQueryParams.append(\"t\", this.queryParamsValue.t);\r\n }\r\n\r\n //add any of the filters if there are any selected\r\n const filterMapping = {\r\n area: data.areas,\r\n tag: data.tags,\r\n grade: data.grades,\r\n theme: data.themes,\r\n level: data.levels,\r\n activitylevel: data.activityLevels,\r\n travelconsultant: data.travelConsultants,\r\n destination: data.destinations,\r\n duration: data.durations,\r\n family: data.familys,\r\n };\r\n\r\n Object.keys(filterMapping).forEach(key => {\r\n if (filterMapping[key].length > 0) {\r\n newQueryParams.append(key, this.BuildFilterParamString(filterMapping[key]));\r\n }\r\n });\r\n\r\n if (data.page > 1) {\r\n newQueryParams.append(\"page\", data.page);\r\n }\r\n\r\n //grab a hash if there is one (this is for auto-scrolling when being redirected eg. #tours or #best-time-to-visit)\r\n var hash = new URL(data.currenturl).hash;\r\n if (hash) {\r\n new HashCheckToScroll(hash);\r\n } else {\r\n hash = \"\";\r\n }\r\n\r\n //Set the current url without reloading the screen\r\n const newUrl = `${this.currentUrl.origin}${this.currentUrl.pathname}?${newQueryParams}${hash}`;\r\n history.pushState({ path: newUrl }, null, newUrl);\r\n }\r\n\r\n //builds a string with the listed items being filtered, This comma separates the items in the list to make a single string\r\n BuildFilterParamString(dataItems) {\r\n return dataItems.map(item => item.Title).join('|');\r\n }\r\n\r\n //the only way to enforce this popup loads correctly on mobile IOS is to force a scroll.\r\n toggleMobileFilterMenu() {\r\n this.mobileFilterMenu.classList.toggle(\"active\");\r\n this.exitFilterButton.classList.toggle(\"active\");\r\n\r\n }\r\n\r\n bindButtons(buttons) {\r\n for (let i = 0; i < buttons.length; i++) {\r\n buttons[i].addEventListener(\"click\", function () {\r\n if (this.classList.contains(\"activeFilter\")) {\r\n // If the clicked element is already active, deactivate it\r\n this.classList.remove(\"activeFilter\");\r\n var filter = this.nextElementSibling;\r\n filter.style.maxHeight = null;\r\n } else {\r\n // Deactivate all elements\r\n for (let j = 0; j < buttons.length; j++) {\r\n buttons[j].classList.remove(\"activeFilter\");\r\n var filter = buttons[j].nextElementSibling;\r\n filter.style.maxHeight = null;\r\n }\r\n\r\n // Activate the clicked element\r\n this.classList.add(\"activeFilter\");\r\n var filter = this.nextElementSibling;\r\n filter.style.maxHeight = filter.scrollHeight + \"px\";\r\n }\r\n });\r\n }\r\n }\r\n\r\n getElementsAndSetData() {\r\n this.currentTab = PaginatedData.getTab();\r\n this.contentEl = document.querySelector(\".tab-\" + this.currentTab);\r\n this.result = document.getElementsByClassName(\"sd-pagination-content\")[0];\r\n this.pagination = document.querySelector(\".pager-\" + this.currentTab);\r\n }\r\n\r\n // Method to grab filter data based on the type and class name\r\n grabFilters(filterType, className) {\r\n const filterList = [];\r\n this.checkboxes.forEach((checkbox) => {\r\n if (checkbox.checked && checkbox.parentNode.parentNode.classList.contains(className)) {\r\n filterList.push({ Title: checkbox.value });\r\n }\r\n });\r\n\r\n // Update the PaginatedData based on the filter type\r\n switch (filterType) {\r\n case 'type': PaginatedData.setSelectedTags(filterList); break;\r\n case 'grade': PaginatedData.setSelectedGrades(filterList); break;\r\n case 'area': PaginatedData.setSelectedAreas(filterList); break;\r\n case 'theme': PaginatedData.setSelectedThemes(filterList); break;\r\n case 'level': PaginatedData.setSelectedLevels(filterList); break;\r\n case 'activity-level': PaginatedData.setSelectedActivityLevels(filterList); break;\r\n case 'travel-consultant': PaginatedData.setSelectedTravelConsultants(filterList); break;\r\n case 'destination': PaginatedData.setSelectedDestinations(filterList); break;\r\n case 'duration': PaginatedData.setSelectedDurations(filterList); break;\r\n case 'family': PaginatedData.setSelectedFamilys(filterList); break;\r\n }\r\n\r\n // Return the filtered list\r\n return filterList;\r\n }\r\n // Method to append filters to a container\r\n appendFilter(filterType, container) {\r\n const filters = this.grabFilters(filterType, `by-${filterType}`);\r\n container.innerHTML = \"\";\r\n this.appendFilters(filters, container);\r\n }\r\n\r\n // Methods to append filters to specific containers\r\n appendFilterByType() {\r\n this.appendFilter('type', this.containerType);\r\n }\r\n\r\n appendFilterByAreas() {\r\n this.appendFilter('area', this.containerArea);\r\n }\r\n\r\n appendFilterByGrades() {\r\n this.appendFilter('grade', this.containerGrade);\r\n }\r\n\r\n appendFilterByThemes() {\r\n this.appendFilter('theme', this.containerTheme);\r\n }\r\n\r\n appendFilterByLevels() {\r\n this.appendFilter('level', this.containerLevel);\r\n }\r\n\r\n appendFilterByActivityLevels() {\r\n this.appendFilter('activity-level', this.containerActivityLevel);\r\n }\r\n appendFilterByTravelConsultants() {\r\n if (this.containerTravelConsultant) {\r\n this.appendFilter('travel-consultant', this.containerTravelConsultant);\r\n }\r\n }\r\n appendFilterByDestinations() {\r\n if (this.containerDestination) {\r\n this.appendFilter('destination', this.containerDestination);\r\n }\r\n this.appendFilter('destination', this.containerDestination);\r\n }\r\n\r\n appendFilterByDurations() {\r\n this.appendFilter('duration', this.containerDuration);\r\n }\r\n\r\n appendFilterByFamilys() {\r\n this.appendFilter('family', this.containerFamily);\r\n }\r\n\r\n // Method to append filters to a node\r\n appendFilters(data, node) {\r\n data.forEach((value) => {\r\n const label = document.createElement(\"label\");\r\n const span = document.createElement(\"span\");\r\n span.innerHTML = \"X\";\r\n span.classList.add(\"removeFilterClose\");\r\n label.setAttribute(\"for\", value.Title);\r\n const textNode = document.createTextNode(value.Title);\r\n label.appendChild(textNode);\r\n label.appendChild(span);\r\n node.append(label);\r\n span.addEventListener(\"click\", this.removeFilter);\r\n });\r\n\r\n // Update filter counts\r\n this.SetFilterCountSpans(\r\n this.grabFilters('area', 'by-area').length,\r\n this.grabFilters('type', 'by-type').length,\r\n this.grabFilters('grade', 'by-grade').length,\r\n this.grabFilters('theme', 'by-theme').length,\r\n this.grabFilters('level', 'by-level').length,\r\n this.grabFilters('activity-level', 'by-activity-level').length,\r\n this.grabFilters('travel-consultant', 'by-travel-consultant').length,\r\n this.grabFilters('destination', 'by-destination').length,\r\n this.grabFilters('duration', 'by-duration').length,\r\n this.grabFilters('family', 'by-family').length,\r\n this.grabFilters('area', 'by-area').length +\r\n this.grabFilters('type', 'by-type').length +\r\n this.grabFilters('grade', 'by-grade').length +\r\n this.grabFilters('theme', 'by-theme').length +\r\n this.grabFilters('level', 'by-level').length +\r\n this.grabFilters('activity-level', 'by-activity-level').length +\r\n this.grabFilters('travel-consultant', 'by-travel-consultant').length +\r\n this.grabFilters('destination', 'by-destination').length +\r\n this.grabFilters('duration', 'by-duration').length +\r\n this.grabFilters('family', 'by-family').length\r\n );\r\n }\r\n\r\n\r\n async getDataFromAPI(url, method) {\r\n\r\n this.getElementsAndSetData();\r\n this.currentTab = PaginatedData.getTab();\r\n let resultCountDiv;\r\n if (this.currentTab !== \"\") {\r\n resultCountDiv = this.contentEl.querySelector(`.pager-${this.currentTab}`) ?? document.querySelector(`.pager-${this.currentTab}`);\r\n }\r\n let paginationData;\r\n\r\n //retrieve the contentID to only update the correct tabs fields. This prevents filters of 1 tab affecting results/pagination of other tabs.\r\n var contentId;\r\n\r\n await HttpClient.AsyncGetRequest(url, method)\r\n .then(result => {\r\n let data = JSON.parse(result);\r\n this.currentTab = PaginatedData.getTab();\r\n this.numberOfResultsAfterFiltersApplied = data.totalresults;\r\n\r\n if (data.totalpages == 0) {\r\n if (this.result && data.filterOptions == null) {\r\n this.result.innerHTML = \"\" + \"No results found. Try removing filters to show results.\" + \"
\";\r\n } else {\r\n paginationData = document.querySelector(\".sd-pagination-content\");\r\n let resultsPage = paginationData.querySelector(\".result-page-tab\");\r\n resultsPage.innerHTML = \"\" + \"No results found. Try removing filters to show results.\" + \"
\";\r\n }\r\n this.contentEl.classList.add(\"no-results\");\r\n resultCountDiv.parentElement.style.display = 'none';\r\n } else {\r\n if (this.result && data.filterOptions == null) {\r\n this.result.innerHTML = \"\";\r\n this.result.insertAdjacentHTML(\"beforeend\", data.result);\r\n\r\n var searchSettings = JSON.parse(data.searchSettings);\r\n const observer = lozad();\r\n observer.observe();\r\n //retrieve the contentID to only update the correct tabs fields. This prevents filters of 1 tab affecting results/pagination of other tabs.\r\n contentId = resultCountDiv.getAttribute(\"data-pagination-id\");\r\n \r\n const itemsPerPageElement = document.querySelector('[data-itemsperpage]');\r\n let itemsPerPage = 0;\r\n if (itemsPerPageElement != null) {\r\n itemsPerPage = parseInt(itemsPerPageElement.getAttribute('data-itemsperpage'));\r\n }\r\n\r\n this.pagination && this.pagination.setAttribute(\"data-totalpages\", data.totalpages);\r\n resultCountDiv.parentElement.style.display = '';\r\n this.pagination && this.pagination.setAttribute(\"data-totalresults\", data.totalresults);\r\n this.pagination && this.pagination.setAttribute(\"data-resulttype\", data.resulttype);\r\n\r\n this.pagination = document.querySelector(\".pager-\" + this.currentTab);\r\n\r\n this.pagination && this.pagination.setAttribute(\"data-current-page-no\", searchSettings.Page);\r\n const currentPageNo = searchSettings.Page;\r\n\r\n //Run callback to update the pagination navigation\r\n PaginatedData.updatePagination(searchSettings.Page, itemsPerPage, data.totalpages, data.resulttype);\r\n PaginatedData.getFilteredResultCount(data.totalresults, data.resulttype, contentId, parseInt(currentPageNo));\r\n } else {\r\n paginationData = document.querySelector(\".sd-pagination-content\");\r\n paginationData.innerHTML = \"\";\r\n paginationData.insertAdjacentHTML(\"beforeend\", data.result);\r\n\r\n const observer = lozad();\r\n observer.observe();\r\n\r\n this.UpdateSelectedFilters();\r\n }\r\n this.contentEl.classList.remove(\"no-results\");\r\n }\r\n })\r\n .catch(error => {\r\n console.error(error);\r\n });\r\n }\r\n\r\n removeFilter(e) {\r\n\r\n const filterLabel = e.target.parentElement;\r\n const value = filterLabel.htmlFor;\r\n\r\n this.checkboxes.forEach((item) => {\r\n if (item.value === value) {\r\n item.checked = false;\r\n }\r\n });\r\n filterLabel.remove();\r\n\r\n // Use the generalized method to grab all filters\r\n this.areas = this.grabFilters('area', 'by-area');\r\n this.types = this.grabFilters('type', 'by-type');\r\n this.grades = this.grabFilters('grade', 'by-grade');\r\n this.themes = this.grabFilters('theme', 'by-theme');\r\n this.levels = this.grabFilters('level', 'by-level');\r\n this.activityLevels = this.grabFilters('activity-level', 'by-activity-level');\r\n this.travelConsultants = this.grabFilters('travel-consultant', 'by-travel-consultant');\r\n this.destinations = this.grabFilters('destination', 'by-destination');\r\n this.durations = this.grabFilters('duration', 'by-duration');\r\n this.familys = this.grabFilters('family', 'by-family');\r\n\r\n this.SetFilterCountSpans(this.areas.length, this.types.length, this.grades.length, this.themes.length, this.levels.length, this.activityLevels.length, this.travelConsultants.length, this.destinations.length, this.durations.length, this.familys.length,\r\n this.areas.length + this.types.length + this.grades.length + this.themes.length + this.levels.length + this.activityLevels.length + this.travelConsultants.length + this.destinations.length + this.durations.length + this.familys.length);\r\n this.applyFilter();\r\n }\r\n\r\n //Update the filter field elements to contain the count of filters per type of filter (area, type and grade) eg. area has Paris selected therefore we show a count of 1 in the dropdown.\r\n SetFilterCountSpans(totalAreas, totalTypes, totalGrades, totalThemes, totalLevels, totalActivityLevels, totalTravelConsultants, totalDestinations, totalDurations, totalFamilys, totalFilters) {\r\n const filterMapping = [\r\n { count: totalAreas, selector: \".sd-mobile-filter-item-title.sd-filter-dd.area-dd > span\", button: this.filterButtonArea },\r\n { count: totalTypes, selector: \".sd-mobile-filter-item-title.sd-filter-dd.type-dd > span\", button: this.filterButtonType },\r\n { count: totalGrades, selector: \".sd-mobile-filter-item-title.sd-filter-dd.grade-dd > span\", button: this.filterButtonGrade },\r\n { count: totalThemes, selector: \".sd-mobile-filter-item-title.sd-filter-dd.theme-dd > span\", button: this.filterButtonTheme },\r\n { count: totalLevels, selector: \".sd-mobile-filter-item-title.sd-filter-dd.level-dd > span\", button: this.filterButtonLevel },\r\n { count: totalActivityLevels, selector: \".sd-mobile-filter-item-title.sd-filter-dd.activity-level-dd > span\", button: this.filterButtonActivityLevel },\r\n { count: totalTravelConsultants, selector: \".sd-mobile-filter-item-title.sd-filter-dd.travel-consultant-dd > span\", button: this.filterButtonTravelConsultant },\r\n { count: totalDestinations, selector: \".sd-mobile-filter-item-title.sd-filter-dd.destination-dd > span\", button: this.filterButtonDestination },\r\n { count: totalDurations, selector: \".sd-mobile-filter-item-title.sd-filter-dd.duration-dd > span\", button: this.filterButtonDuration },\r\n { count: totalFamilys, selector: \".sd-mobile-filter-item-title.sd-filter-dd.family-dd > span\", button: this.filterButtonFamily },\r\n ];\r\n\r\n // Update individual filter counts\r\n filterMapping.forEach(filter => {\r\n const element = document.querySelector(filter.selector);\r\n if (filter.button && element) {\r\n element.innerHTML = filter.count > 0 ? `${filter.count} ` : \"\";\r\n }\r\n });\r\n\r\n // Update total filters count and visibility\r\n const filterCount = document.querySelector(\"#hotelFilterButton > #hotelFilterButtonCount\");\r\n const filterIcon = document.querySelector(\"#hotelFilterButton > #hotelFilterButtonIcon\");\r\n\r\n if (filterCount && filterIcon) {\r\n if (totalFilters > 0) {\r\n filterCount.innerHTML = `${totalFilters} `;\r\n if (filterCount.classList.contains(\"filter-count-hide\")) {\r\n filterCount.classList.remove(\"filter-count-hide\");\r\n filterIcon.classList.add(\"filter-count-hide\");\r\n }\r\n } else {\r\n filterCount.innerHTML = \"\";\r\n if (!filterCount.classList.contains(\"filter-count-hide\")) {\r\n filterCount.classList.add(\"filter-count-hide\");\r\n filterIcon.classList.remove(\"filter-count-hide\");\r\n }\r\n }\r\n }\r\n }\r\n\r\n\r\n async applyFilter(event) {\r\n // Use the generalized method to grab all filters\r\n this.areas = this.grabFilters('area', 'by-area');\r\n this.types = this.grabFilters('type', 'by-type');\r\n this.grades = this.grabFilters('grade', 'by-grade');\r\n this.themes = this.grabFilters('theme', 'by-theme');\r\n this.levels = this.grabFilters('level', 'by-level');\r\n this.destinations = this.grabFilters('destination', 'by-destination');\r\n this.activityLevels = this.grabFilters('activity-level', 'by-activity-level');\r\n this.travelConsultants = this.grabFilters('travel-consultant', 'by-travel-consultant');\r\n this.durations = this.grabFilters('duration', 'by-duration');\r\n this.familys = this.grabFilters('family', 'by-family');\r\n const tab = PaginatedData.getTab();\r\n const currentPage = 1;\r\n\r\n const data = {\r\n pageid: this.itemId,\r\n page: currentPage,\r\n tab: tab,\r\n currenturl: location.href.toLowerCase(),\r\n areas: this.areas,\r\n tags: this.types,\r\n grades: this.grades,\r\n themes: this.themes,\r\n levels: this.levels,\r\n activityLevels: this.activityLevels,\r\n travelConsultants: this.travelConsultants,\r\n destinations: this.destinations,\r\n durations: this.durations,\r\n familys: this.familys,\r\n filter: PaginatedData.getFilter(),\r\n q: PaginatedData.getURLqueryString(),\r\n category: PaginatedData.getOnsiteSearchCategory(),\r\n };\r\n\r\n this.AddUrlFilterParams(data);\r\n\r\n if (process.env.NODE_ENV === \"development\") {\r\n const url = `${this.url}?data=${encodeURIComponent(JSON.stringify(data))}`;\r\n await this.getDataFromAPI(url, this.method);\r\n } else {\r\n const url = `${this.url}?data=${encodeURIComponent(JSON.stringify(data))}`;\r\n await this.getDataFromAPI(url, this.method);\r\n }\r\n\r\n if (document.getElementById(\"multiple-list\") !== null) {\r\n // Number of results functionality\r\n const pageNumberOSS = document.createElement(\"div\");\r\n pageNumberOSS.classList.add(\"page-number-OSS\");\r\n var totalpage = this.numberOfResultsAfterFiltersApplied;\r\n var currentPageNumber = document.getElementsByClassName(\"itinerary-list__content__tour-list\").length;\r\n\r\n var urlParamsCountry = new URLSearchParams(window.location.search);\r\n var myParamCountry = urlParamsCountry.get('q');\r\n var myParamCatagory = urlParamsCountry.get('t');\r\n if (myParamCatagory.slice(-1) === 's') {\r\n myParamCatagory = myParamCatagory.slice(0, -1);\r\n }\r\n let resultsString = totalpage > 1 ? 'results' : 'result';\r\n pageNumberOSS.innerHTML = `1 - ${currentPageNumber} of ${totalpage} ${myParamCatagory} ${resultsString} for \"${myParamCountry}\" `;\r\n var child1 = document.querySelector('.itinerary-list__content')\r\n document.querySelector('.result-page-tab-content').insertBefore(pageNumberOSS, child1);\r\n var pageNumberOSS1 = pageNumberOSS.cloneNode(true);\r\n document.querySelector('#result-page-tab1').appendChild(pageNumberOSS1);\r\n // Number of results functionality\r\n }\r\n\r\n }\r\n}\r\n\r\nexport default MobileFilter;\r\n","import Filter from \"./Filter\";\r\nimport MobileFilter from \"./mobile-filter/MobileFilter\";\r\n\r\nexport const filter = {\r\n init: () => {\r\n const optionLists = document.querySelectorAll(\".checkbox-list\");\r\n [...optionLists].forEach((list) => new Filter(list));\r\n },\r\n \r\n};\r\n\r\nexport default filter;\r\n","import { TabInput } from \"./TabInput\";\r\nimport { TabLabel } from \"./TabLabel\";\r\nimport Carousel from \"../carousel/Carousel\";\r\nimport { carouselOptions } from \"../../config\";\r\nimport 'regenerator-runtime/runtime';\r\n\r\nclass TabSlider {\r\n constructor(DOMelement, index, store) {\r\n try {\r\n this.el = DOMelement;\r\n this.index = index;\r\n this.tabs = this.el.querySelectorAll(\".tab-slider-content\");\r\n this.createTabs = this.createTabs.bind(this); \r\n this.labelUl = `
`;\r\n\r\n if(this.tabs.length == 1){\r\n this.tabs[0].style.display = \"block\";\r\n }\r\n \r\n if(this.tabs.length > 1){\r\n this.tabs.forEach(async (tab) => {\r\n await this.createTabs(tab);\r\n });\r\n const input = this.el.querySelectorAll(\"input\");\r\n input[0].checked = \"true\";\r\n }\r\n \r\n const carousels = document.querySelectorAll(\".sd-tab-carousel\"); \r\n [...carousels].forEach(carousel => {\r\n carousel.insertAdjacentHTML(\"afterbegin\", '${labelText}\r\n`;","export const TabInput = (labelId, index) => `\"${myParamCountry}\" `;\r\n var child1 = document.querySelector('.itinerary-list__content')\r\n document.querySelector('.result-page-tab-content').insertBefore(pageNumberOSS, child1);\r\n var pageNumberOSS1 = pageNumberOSS.cloneNode(true);\r\n document.querySelector('#result-page-tab1').appendChild(pageNumberOSS1);\r\n // Number of results functionality\r\n\r\n document.querySelector(\".onsite-results-title strong\").innerText = `\"${myParamCountry}\"`;\r\n\r\n if (document.getElementById('tabs-container-for-select').scrollLeft == 0) {\r\n document.getElementsByClassName('left')[1].style.display = 'none';\r\n } else {\r\n document.getElementsByClassName('left')[1].style.display = 'block';\r\n }\r\n document.getElementById(\"tabs-container-for-select\").addEventListener(\"scroll\", scrollDetect);\r\n\r\n function scrollDetect() {\r\n // document.getElementsByClassName('left')[1].style.display = 'block';\r\n if (document.getElementById('tabs-container-for-select').scrollLeft == 0) {\r\n document.getElementsByClassName('left')[1].style.display = 'none';\r\n } else {\r\n document.getElementsByClassName('left')[1].style.display = 'block';\r\n }\r\n }\r\n\r\n // Back To Top functionality\r\n let backToTopButton = document.getElementById(\"scroll-to-top\");\r\n\r\n const footer = document.querySelector('.sd-footer');\r\n const offsetFromFooter = 20;\r\n\r\n window.addEventListener('scroll', scrollToTopListPage);\r\n window.addEventListener('touchmove', scrollToTopListPage);\r\n\r\n backToTopButton.addEventListener('click', () => {\r\n window.scrollTo({\r\n top: 0,\r\n behavior: 'smooth'\r\n });\r\n });\r\n\r\n function scrollToTopListPage() {\r\n\r\n if (window.scrollY > 100) {\r\n backToTopButton.classList.add('show');\r\n } else {\r\n backToTopButton.classList.remove('show');\r\n }\r\n\r\n const footerRect = footer.getBoundingClientRect();\r\n const buttonRect = backToTopButton.getBoundingClientRect();\r\n\r\n if (footerRect.top < window.innerHeight) {\r\n const newBottom = (window.innerHeight - footerRect.top) + offsetFromFooter;\r\n backToTopButton.style.bottom = `${newBottom}px`;\r\n } else {\r\n backToTopButton.style.bottom = '70px';\r\n }\r\n }\r\n // Back To Top functionality ends\r\n }\r\n});\r\n\r\nclass SearchFilter {\r\n constructor(DOMelement) {\r\n try {\r\n this.el = DOMelement;\r\n this.paginatedContent = paginatedContent;\r\n this.pagination = document.querySelector('.pager-properties');\r\n this.el.addEventListener(\"change\", this.getFilterInputValue);\r\n this.applyFilter = this.applyFilter.bind(this);\r\n this.url = this.el.getAttribute(\"data-action\");\r\n this.method = \"GET\";\r\n this.itemId = this.el.getAttribute(\"data-item\");\r\n this.category = null;\r\n this.filterOptions = null;\r\n\r\n this.pageCounter = 2;\r\n\r\n this.loadMoreButton = document.getElementById(\"load__more__results\");\r\n this.onsiteFilter = document.querySelector(\".on-site-filter\");\r\n\r\n this.displayOnsiteFilter = this.displayOnsiteFilter.bind(this);\r\n this.displayOnsiteFilter(\"\");\r\n\r\n this.queryString = new URLSearchParams(window.location.search);\r\n this.queryStringValue = Object.fromEntries(this.queryString.entries());\r\n PaginatedData.setURLqueryString(this.queryStringValue.q);\r\n\r\n this.hostPath = window.location.protocol + \"//\" + window.location.host + window.location.pathname;\r\n this.regex = /\\/$/;\r\n\r\n if (process.env.NODE_ENV === \"development\") {\r\n this.url = \"/src/api/search-filter-api-response.json\";\r\n }\r\n this.keywordSearchPage = document.querySelector(\".keyword-search-filter > .on-site-filter\");\r\n\r\n if (!document.getElementById('load__more__results')) {\r\n const emptyLoadMore = document.createElement('div');\r\n emptyLoadMore.innerHTML = `Load More `\r\n document.querySelector('#blog__cards').appendChild(emptyLoadMore);\r\n }\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n }\r\n\r\n getFilterInputValue = (e) => {\r\n let filteredValue = e.target.value;\r\n let splitValue = filteredValue.split(\"%\");\r\n this.category = splitValue[1].toLowerCase();\r\n\r\n if (this.queryString.has('page')) {\r\n this.queryString.delete('page');\r\n }\r\n if (this.queryString.has('t')) {\r\n this.queryString.set('t', this.category);\r\n\r\n } else {\r\n this.queryString.append('t', this.category);\r\n }\r\n this.queryStringValue = Object.fromEntries(this.queryString.entries());\r\n var url = '?' + this.queryString.toString();\r\n\r\n window.history.pushState({ path: url }, '', url);\r\n\r\n var currentTabFromCategory;\r\n\r\n switch (this.category.toLowerCase()) {\r\n case \"hotels\":\r\n currentTabFromCategory = \"properties\";\r\n break;\r\n case \"things to do\":\r\n currentTabFromCategory = \"itineraries\";\r\n break;\r\n case \"tours\":\r\n currentTabFromCategory = \"experiences\";\r\n break;\r\n default:\r\n currentTabFromCategory = this.category.toLowerCase();\r\n break;\r\n }\r\n\r\n PaginatedData.setTab(currentTabFromCategory);\r\n PaginatedData.setSearchflag(true);\r\n PaginatedData.setFilter(splitValue[0]);\r\n this.applyFilter();\r\n }\r\n\r\n async getDataFromAPI(url, method) {\r\n await HttpClient.AsyncGetRequest(url, method)\r\n .then(result => {\r\n let resultData = JSON.parse(result);\r\n if (resultData.filterOptions)\r\n this.filterOptions = JSON.parse(resultData.filterOptions);\r\n\r\n // resets the filter checkboxes to ensure they only match what the current tab contains\r\n let paginationData = document.querySelector(\".onsite-container-local-1 > .sd-pagination-content\");\r\n paginationData.innerHTML = \"\";\r\n paginationData.insertAdjacentHTML(\"beforeend\", resultData.result);\r\n\r\n let filterData = document.querySelector(\".keyword-search-filter\");\r\n filterData.innerHTML = \"\";\r\n filterData.insertAdjacentHTML(\"beforeend\", resultData.filterOptionResult);\r\n\r\n const observer = lozad();\r\n observer.observe();\r\n\r\n PaginatedData.resetFiltersOnTabChange();\r\n\r\n //Run callback to update the pagination navigation\r\n if (resultData.filterOptionResult.length > 0) {\r\n PaginatedData.UpdateReAttachFilterOptions();\r\n PaginatedData.UpdateReAttachMobileFilterOptions();\r\n }\r\n\r\n this.displayOnsiteFilter(resultData.searchCategory);\r\n })\r\n .catch(error => {\r\n console.error(error)\r\n });\r\n\r\n if (document.getElementById('load__more__results')) {\r\n var pos = document.getElementById('load__more__results').href.indexOf('search');\r\n var str = document.getElementById('load__more__results').href.substring(pos);\r\n var str1 = window.location.origin + '/' + str;\r\n document.getElementById('load__more__results').href = str1;\r\n document.getElementById('load__more__results').removeAttribute(\"rel\");\r\n document.getElementById('load__more__results').setAttribute(\"rel\", \"next\");\r\n }\r\n // Number of results functionality\r\n const pageNumberOSS = document.createElement(\"div\");\r\n pageNumberOSS.classList.add(\"page-number-OSS\");\r\n var totalpage = Number(document.getElementsByClassName('active-select')[0].textContent.match(/\\(([^)]+)\\)/)[1]);\r\n var currentPageNumber = document.getElementsByClassName(\"itinerary-list__content__tour-list\").length;\r\n\r\n var urlParamsCountry = new URLSearchParams(window.location.search);\r\n var myParamCountry = urlParamsCountry.get('q');\r\n var myParamCatagory = urlParamsCountry.get('t');\r\n if (myParamCatagory.slice(-1) === 's') {\r\n myParamCatagory = myParamCatagory.slice(0, -1);\r\n }\r\n\r\n let resultsString = totalpage > 1 ? 'results' : 'result';\r\n pageNumberOSS.innerHTML = `1 - ${currentPageNumber} of ${totalpage} ${myParamCatagory} ${resultsString} for \"${myParamCountry}\" `;\r\n var child1 = document.querySelector('.itinerary-list__content')\r\n document.querySelector('.result-page-tab-content').insertBefore(pageNumberOSS, child1);\r\n var pageNumberOSS1 = pageNumberOSS.cloneNode(true);\r\n document.querySelector('#result-page-tab1').appendChild(pageNumberOSS1);\r\n // Number of results functionality\r\n\r\n // Back To Top functionality\r\n let backToTopButton = document.getElementById(\"scroll-to-top\");\r\n\r\n const footer = document.querySelector('.sd-footer');\r\n const offsetFromFooter = 20;\r\n\r\n window.addEventListener('scroll', scrollToTopListPage);\r\n window.addEventListener('touchmove', scrollToTopListPage);\r\n\r\n backToTopButton.addEventListener('click', () => {\r\n window.scrollTo({\r\n top: 0,\r\n behavior: 'smooth'\r\n });\r\n });\r\n\r\n function scrollToTopListPage() {\r\n if (window.scrollY > 100) {\r\n backToTopButton.classList.add('show');\r\n } else {\r\n backToTopButton.classList.remove('show');\r\n }\r\n\r\n const footerRect = footer.getBoundingClientRect();\r\n const buttonRect = backToTopButton.getBoundingClientRect();\r\n\r\n if (footerRect.top < window.innerHeight) {\r\n const newBottom = (window.innerHeight - footerRect.top) + offsetFromFooter;\r\n backToTopButton.style.bottom = `${newBottom}px`;\r\n } else {\r\n backToTopButton.style.bottom = '70px';\r\n }\r\n }\r\n // Back To Top functionality ends\r\n\r\n }\r\n\r\n //displays the onsite search filter depending on the category of search (\"Destinations\", \"Things to Do\", \"Tours\" etc.)\r\n displayOnsiteFilter(tab) {\r\n this.onsiteFilter = document.querySelector(\".on-site-filter\");\r\n\r\n if (tab) {\r\n PaginatedData.setOnsiteSearchCategory(this.category);\r\n }\r\n if (this.onsiteFilter) {\r\n if (tab === \"tours\" || tab === \"hotels\" || tab === \"things to do\") {\r\n this.onsiteFilter.style.display = \"block\";\r\n } else {\r\n this.onsiteFilter.style.display = \"none\";\r\n }\r\n }\r\n }\r\n\r\n async applyFilter() {\r\n const currentPage = 1;\r\n\r\n const data = {\r\n pageid: this.itemId,\r\n page: currentPage,\r\n filter: PaginatedData.getFilter(),\r\n isSearchPage: PaginatedData.getSearchflag(),\r\n q: PaginatedData.getURLqueryString(),\r\n category: this.category,\r\n tab: PaginatedData.getTab()\r\n }\r\n\r\n if (process.env.NODE_ENV === \"development\") {\r\n const url = `${this.url}?data=${encodeURI(JSON.stringify(data))}`;\r\n await this.getDataFromAPI(url, this.method);\r\n } else {\r\n const url = `${this.url}?data=${encodeURI(JSON.stringify(data))}`;\r\n await this.getDataFromAPI(url, this.method);\r\n }\r\n }\r\n}\r\n\r\n\r\nexport default SearchFilter","import SearchFilter from './SearchFilter';\r\nexport const searchFilter = {\r\n init: () => {\r\n const searchValues = document.querySelectorAll(\".search-filter\");\r\n [...searchValues].forEach((el) => new SearchFilter(el));\r\n },\r\n};\r\n\r\nexport default searchFilter;","const sections = [];\r\nconst offsets = [];\r\n\r\nconst getOffsetTop = element => {\r\n let offsetTop = 0;\r\n while(element) {\r\n offsetTop += element.offsetTop;\r\n element = element.offsetParent;\r\n }\r\n return offsetTop;\r\n}\r\n\r\nconst animateSec = (offsets, sections) => {\r\n var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;\r\n offsets.forEach((offsetH, index) => {\r\n if (offsetH <= scrollPosition + (screen.height - 120)) {\r\n sections[index].classList.add(\"animate__animated\");\r\n }\r\n })\r\n}\r\n\r\nexport const Scrollspy = (ele) => { \r\n if ('scrollRestoration' in history) {\r\n history.scrollRestoration = 'manual';\r\n } \r\n sections.push(ele);\r\n sections.forEach(section => {\r\n if(offsets.indexOf(getOffsetTop(section)) == -1){\r\n offsets.push(getOffsetTop(section));\r\n }\r\n });\r\n \r\n animateSec(offsets, sections);\r\n window.onscroll = () => {\r\n animateSec(offsets, sections);\r\n }\r\n}\r\nexport default Scrollspy;","import Scrollspy from \"./scrollspy\";\r\nexport const scrollspy = {\r\n init: () => {\r\n const scrollspyEle = document.querySelectorAll(\".animate\");\r\n [...scrollspyEle].forEach((el) => Scrollspy(el));\r\n },\r\n};\r\n\r\nexport default scrollspy;","class Itinerary {\r\n constructor(element) {\r\n try{\r\n this.itinContent = element.querySelector(\".sd-itin-body\");\r\n this.scrollBar = element.querySelector('.progress-bar');\r\n this.itinContent.addEventListener(\"scroll\",(e)=>{\r\n var winScroll = e.target.scrollTop || e.target.scrollTop;\r\n var height = e.target.scrollHeight - e.target.clientHeight;\r\n var scrolled = (winScroll / height) * 100; \r\n this.scrollBar.style.width = scrolled + \"%\";\r\n }); \r\n } catch (error) {\r\n console.log(error);\r\n }\r\n }\r\n}\r\n\r\nexport default Itinerary;","import Itinerary from \"./Itinerary\";\r\n\r\nexport const itinerary = {\r\n init: () => {\r\n const elements = document.querySelectorAll('.sd-florence-itinerary');\r\n if (elements) {\r\n elements.forEach(element => {\r\n new Itinerary(element)\r\n })\r\n }\r\n },\r\n}\r\n\r\nexport default itinerary;","import HttpClient from \"../client/httpclient\";\r\nimport {readMore} from \"../read-more\";\r\nimport 'regenerator-runtime/runtime';\r\nclass RoomCard {\r\n constructor(DOMelement, openButtonsDOMlist) {\r\n try {\r\n this.el = DOMelement;\r\n this.openButtons = openButtonsDOMlist;\r\n this.method = \"GET\";\r\n this.counter = 1;\r\n this.URL = '../src/components/room-card/room-card.html?p=';\r\n this.loadMoreButton = document.getElementById(\"property__rooms-button\");\r\n \r\n if(this.loadMoreButton) {\r\n this.URL = this.loadMoreButton.getAttribute(\"data-action\");\r\n this.totalpage = this.loadMoreButton.getAttribute(\"data-totalpages\");\r\n }\r\n\r\n if (process.env.NODE_ENV === \"development\") {\r\n this.URL = '../src/components/room-card/room-card.html?p=';\r\n }\r\n\r\n [...openButtonsDOMlist].forEach((button) =>\r\n button.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n this.loadMoreRooms();\r\n })\r\n );\r\n } catch (error) {\r\n console.log(error);\r\n } \r\n }\r\n\r\n stringToHTML(str) { \r\n const support = (function () {\r\n if (!window.DOMParser) return false;\r\n var parser = new DOMParser();\r\n try {\r\n parser.parseFromString('x', 'text/html');\r\n } catch(err) {\r\n return false;\r\n }\r\n return true;\r\n })();\r\n \r\n if (support) {\r\n var parser = new DOMParser();\r\n var doc = parser.parseFromString(str, 'text/html');\r\n return doc.body;\r\n }\r\n \r\n var dom = document.createElement('div');\r\n dom.innerHTML = requestedCard.responseText;\r\n return dom; \r\n };\r\n\r\n async loadMoreRooms () { \r\n if(this.counter < this.totalpage) {\r\n const url = `${this.URL}&page=${this.counter}`;\r\n var button = document.querySelector('.property__rooms-button');\r\n await HttpClient.AsyncGetRequest(url, this.method)\r\n .then(card => {\r\n var room = this.stringToHTML(card);\r\n for (var i = 0; i < room.childNodes.length; i++) {\r\n button.insertAdjacentElement(\"beforebegin\", room.childNodes[i]);\r\n readMore.init();\r\n const observer = lozad();\r\n observer.observe();\r\n } \r\n if(this.counter == this.totalpage - 1) { \r\n this.loadMoreButton.style.display = \"none\";\r\n } \r\n }).catch(error => {\r\n console.error(error)\r\n });\r\n }\r\n this.counter = this.counter + 1; \r\n }; \r\n }\r\nexport default RoomCard","import RoomCard from \"./RoomCard\";\r\n\r\nexport const roomCard = {\r\n init: () => {\r\n const loadMoreButton = document.querySelectorAll(\".view__rooms\");\r\n const cardContainer = document.getElementById(\"property__rooms\");\r\n [...loadMoreButton].forEach(() => new RoomCard(cardContainer, loadMoreButton));\r\n }\r\n}\r\n\r\nexport default roomCard;","import HttpClient from \"../client/httpclient\";\r\nimport 'regenerator-runtime/runtime';\r\n\r\nclass BlogCard {\r\n constructor(DOMelement, openButtonsDOMlist) {\r\n try { \r\n this.PageTitle = document.title;\r\n this.el = DOMelement;\r\n this.openButtons = openButtonsDOMlist;\r\n this.method = \"GET\";\r\n this.counter = 2;\r\n this.URL = '../src/components/room-card/blog-card.html?p=';\r\n this.loadMoreButton = document.getElementById(\"load__more__blogs\");\r\n this.loadMoreButton.setAttribute(\"rel\", \"next\");\r\n /*\r\n window.onpopstate = function(event) {\r\n console.log(event); \r\n document.querySelector(\"link[rel='canonical']\").href = event.state.path;\r\n var arrPageURL = event.state.path.split(\"=\"); \r\n var arrDocumentTitle = document.title.split('|');\r\n if(arrDocumentTitle.length >1)\r\n this.PageTitle=arrDocumentTitle[1].trim();\r\n else\r\n this.PageTitle = arrDocumentTitle[0].trim();\r\n if(arrPageURL.length > 1){\r\n document.title = \"Page \" + arrPageURL[1] + \" | \" + this.PageTitle;\r\n this.counter = parseInt(arrPageURL[1]) + 1;\r\n HttpClient.AsyncGetRequest(this.URL, this.method)\r\n .then(card => {\r\n var blogCard = this.stringToHTML(card);\r\n for (var i = 0; i < blogCard.childNodes.length; i++) {\r\n button.insertAdjacentElement(\"beforebegin\", blogCard.childNodes[i]);\r\n const observer = lozad();\r\n observer.observe();\r\n }\r\n if(this.counter == this.totalpage - 1) { \r\n this.loadMoreButton.style.display = \"none\";\r\n }\r\n }).catch(error => {\r\n console.error(error)\r\n });\r\n this.counter = parseInt(arrPageURL[1]) + 1;\r\n }\r\n else{\r\n document.title = this.PageTitle;\r\n this.counter=2;\r\n }\r\n };*/\r\n \r\n\r\n this.loadMoreButton.href = window.location.href;\r\n \r\n function getParameterByName(name, url = window.location.href) {\r\n name = name.replace(/[\\[\\]]/g, '\\\\$&');\r\n var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),\r\n results = regex.exec(url);\r\n if (!results) return null;\r\n if (!results[2]) return '';\r\n return decodeURIComponent(results[2].replace(/\\+/g, ' '));\r\n }\r\n\r\n var queryStringVal = getParameterByName('page');\r\n if(queryStringVal == null){\r\n var newurl = window.location.href;\r\n window.history.pushState({path:newurl},'',newurl);\r\n newurl = window.location.protocol + \"//\" + window.location.host + window.location.pathname + \"?page=2\";\r\n this.loadMoreButton.href = newurl;\r\n }\r\n if(this.loadMoreButton) {\r\n this.URL = this.loadMoreButton.getAttribute(\"data-action\");\r\n this.totalpage = this.loadMoreButton.getAttribute(\"data-totalpages\");\r\n \r\n }\r\n\r\n\r\n if(queryStringVal && isNumeric(queryStringVal) && queryStringVal != '1'){\r\n document.querySelector(\"link[rel='canonical']\").href = window.location.href;\r\n //document.title = \"Page \" + queryStringVal + \" | \" + this.PageTitle;\r\n var newurl = window.location.protocol + \"//\" + window.location.host + window.location.pathname + \"?page=\" + queryStringVal;\r\n window.history.pushState({path:newurl},'',newurl);\r\n newurl = window.location.protocol + \"//\" + window.location.host + window.location.pathname + \"?page=\" + (parseInt(queryStringVal) + 1);\r\n this.loadMoreButton.href = newurl;\r\n \r\n var button = document.querySelector('.blog__cards-button');\r\n // HttpClient.AsyncGetRequest(this.URL, this.method)\r\n // .then(card => {\r\n // var blogCard = this.stringToHTML(card);\r\n // for (var i = 0; i < blogCard.childNodes.length; i++) {\r\n // button.insertAdjacentElement(\"beforebegin\", blogCard.childNodes[i]);\r\n // const observer = lozad();\r\n // observer.observe();\r\n // }\r\n if(this.counter == this.totalpage ) { \r\n this.loadMoreButton.style.display = \"none\";\r\n this.loadMoreButton.removeAttribute(\"href\");\r\n this.loadMoreButton.removeAttribute(\"rel\");\r\n }\r\n else\r\n this.loadMoreButton.setAttribute(\"rel\", \"next\");\r\n // }).catch(error => {\r\n // console.error(error)\r\n // });\r\n\r\n this.counter = parseInt(queryStringVal) + 1;\r\n if(parseInt(queryStringVal) >= (parseInt(this.totalpage)))\r\n {\r\n this.loadMoreButton.style.display = \"none\";\r\n this.loadMoreButton.removeAttribute(\"href\");\r\n this.loadMoreButton.removeAttribute(\"rel\");\r\n }\r\n else\r\n this.loadMoreButton.setAttribute(\"rel\", \"next\");\r\n }\r\n\r\n if(this.totalpage == 1 )\r\n {\r\n this.loadMoreButton.style.display = \"none\";\r\n this.loadMoreButton.removeAttribute(\"href\");\r\n this.loadMoreButton.removeAttribute(\"rel\");\r\n }\r\n\r\n function isNumeric(str) {\r\n if (typeof str != \"string\") return false // we only process strings! \r\n return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...\r\n !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail\r\n }\r\n \r\n \r\n \r\n /* \r\n // 404 redirection\r\n if(parseInt(this.totalpage) < parseInt(this.counter))\r\n {\r\n let regex = /\\/$/;\r\n var hostPath = window.location.host + window.location.pathname;\r\n let result = hostPath.replace(regex, \"\");\r\n window.location.href = window.location.protocol + \"//\" + result + \"/404\";\r\n return;\r\n }*/\r\n\r\n if (process.env.NODE_ENV === \"development\") {\r\n this.URL = '../src/components/blog-card/blog-card.html?p=';\r\n }\r\n\r\n [...openButtonsDOMlist].forEach((button) =>\r\n button.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n this.loadMoreBlogs();\r\n this.updateString();\r\n })\r\n ); \r\n } catch (error) {\r\n console.log(error);\r\n } \r\n }\r\n\r\n stringToHTML(str) { \r\n const support = (function () {\r\n if (!window.DOMParser) return false;\r\n var parser = new DOMParser();\r\n try {\r\n parser.parseFromString('x', 'text/html');\r\n } catch(err) {\r\n return false;\r\n }\r\n return true;\r\n })();\r\n \r\n if (support) {\r\n var parser = new DOMParser();\r\n var doc = parser.parseFromString(str, 'text/html');\r\n return doc.body;\r\n }\r\n \r\n var dom = document.createElement('div');\r\n dom.innerHTML = requestedCard.responseText;\r\n return dom;\r\n \r\n };\r\n updateString = function () { \r\n if(this.counter < this.totalpage +1) {\r\n \r\n var url = `?page=${this.counter}`;\r\n var button = document.querySelector('.blog__cards-button');\r\n var hostPath = window.location.host + window.location.pathname;\r\n let regex = /\\/$/;\r\n let result = hostPath.replace(regex, \"\");\r\n\r\n var newurl = window.location.protocol + \"//\" + result + url;\r\n \r\n document.querySelector(\"link[rel='canonical']\").href = newurl;\r\n var arrPageTitle = this.PageTitle.split('|');\r\n if(arrPageTitle[0].indexOf('Page')>=0){arrPageTitle.shift()} \r\n document.title = \"Page \" + this.counter + \" | \" + arrPageTitle.join(\"|\");//\r\n //document.title = \"Page \" + this.counter + \" | \" + this.PageTitle;\r\n window.history.pushState({path:newurl},'',newurl);\r\n url = \"?page=\" + (parseInt(this.counter) + 1);\r\n newurl = window.location.protocol + \"//\" + result + url;\r\n this.loadMoreButton.href = newurl;\r\n if((parseInt(this.counter) + 1) > this.totalpage){\r\n this.loadMoreButton.removeAttribute(\"href\"); \r\n this.loadMoreButton.removeAttribute(\"rel\"); \r\n }\r\n else\r\n this.loadMoreButton.setAttribute(\"rel\", \"next\");\r\n }\r\n }\r\n\r\n loadMoreBlogs = async () => { \r\n if(this.counter < this.totalpage +1) {\r\n const url = `${this.URL}&page=${this.counter}`;\r\n var button = document.querySelector('.blog__cards-button');\r\n await HttpClient.AsyncGetRequest(url, this.method)\r\n .then(card => {\r\n var blogCard = this.stringToHTML(card);\r\n for (var i = 0; i < blogCard.childNodes.length; i++) {\r\n var currentBlogcard = button.insertAdjacentElement(\"beforebegin\", blogCard.childNodes[i]);\r\n //currentBlogcard.setAttribute(\"PageNumber\", this.counter); \r\n if(i==0){\r\n currentBlogcard.setAttribute(\"tabindex\", 0);\r\n var x = window.scrollX, y = window.scrollY;\r\n currentBlogcard.focus();\r\n window.scrollTo(x, y + 450);\r\n \r\n }\r\n const observer = lozad();\r\n observer.observe();\r\n }\r\n if(this.counter == this.totalpage) { \r\n this.loadMoreButton.style.display = \"none\";\r\n this.loadMoreButton.removeAttribute(\"href\");\r\n this.loadMoreButton.removeAttribute(\"rel\");\r\n }\r\n else\r\n this.loadMoreButton.setAttribute(\"rel\", \"next\");\r\n \r\n }).catch(error => {\r\n console.error(error)\r\n });\r\n \r\n }\r\n this.counter = this.counter + 1; \r\n \r\n }; \r\n }\r\nexport default BlogCard\r\n","import BlogCard from \"./BlogCard\";\r\n\r\nexport const blogCard = {\r\n init: () => {\r\n const loadMoreButton = document.querySelectorAll(\".load__more__blogs\");\r\n const cardContainer = document.getElementById(\"blog__cards\");\r\n [...loadMoreButton].forEach(() => new BlogCard(cardContainer, loadMoreButton));\r\n }\r\n}\r\n\r\nexport default blogCard;","class Store {\r\n constructor(reducer, initialState = {}) {\r\n this.state = initialState;\r\n this.reducer = reducer;\r\n this.listeners = [];\r\n this.valueListeners = [];\r\n }\r\n\r\n getState() {\r\n return this.state;\r\n }\r\n\r\n subscribe(listener) {\r\n this.listeners.push(listener);\r\n }\r\n\r\n subscribeValue(value, listener) {\r\n this.valueListeners.push({ value, listener });\r\n }\r\n\r\n dispatch(action) {\r\n this.state = this.reducer(this.state, action);\r\n this.listeners.forEach((listener) => listener());\r\n this.valueListeners.forEach(({ value, listener }) =>\r\n listener(this.state[value] || null)\r\n );\r\n }\r\n}\r\n\r\nexport default Store;\r\n","import Action from \"./actions\";\r\nimport { Viewports } from \"./enums\";\r\n\r\nconst initialState = {\r\n viewport: Viewports.Desktop,\r\n};\r\n\r\nconst reducer = (state = initialState, action) => {\r\n switch (action.type) {\r\n case Action.SetViewport:\r\n return {\r\n ...state,\r\n viewport: action.payload,\r\n };\r\n default:\r\n return state;\r\n }\r\n};\r\n\r\nexport default reducer;\r\n","import HttpClient from \"../client/httpclient\";\r\nimport { carousel } from '../carousel';\r\nimport Store from \"../../store/store\";\r\nimport reducer from \"../../store/reducer\";\r\nimport { initViewportListener } from \"../../utils\";\r\nimport 'regenerator-runtime/runtime';\r\nclass ListicleCard {\r\n constructor(DOMelement, openButtonsDOMlist) {\r\n try { \r\n this.el = DOMelement;\r\n this.openButtons = openButtonsDOMlist;\r\n this.method = \"GET\";\r\n this.counter = 1;\r\n this.URL = \"../src/components/listicle-card/listicle-card.html?p=\";\r\n this.loadMoreButton = document.getElementById(\"load__more__cards\");\r\n \r\n if(this.loadMoreButton) {\r\n this.URL = this.loadMoreButton.getAttribute(\"data-action\");\r\n this.totalpage = this.loadMoreButton.getAttribute(\"data-totalpages\");\r\n }\r\n\r\n if (process.env.NODE_ENV === \"development\") {\r\n this.URL = '../src/components/listicle-card/listicle-card.html?p=';\r\n }\r\n \r\n [...openButtonsDOMlist].forEach((button) =>\r\n button.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n this.loadMoreCards();\r\n })\r\n );\r\n } catch (error) {\r\n console.error(error);\r\n }\r\n}\r\n \r\n stringToHTML(str) { \r\n const support = (function () {\r\n if (!window.DOMParser) return false;\r\n var parser = new DOMParser();\r\n try {\r\n parser.parseFromString('x', 'text/html');\r\n } catch(err) {\r\n return false;\r\n }\r\n return true;\r\n })();\r\n \r\n if (support) {\r\n var parser = new DOMParser();\r\n var doc = parser.parseFromString(str, 'text/html');\r\n return doc.body;\r\n }\r\n\r\n var dom = document.createElement('div');\r\n dom.innerHTML = requestedCard.responseText;\r\n return dom; \r\n };\r\n\r\n loadMoreCards = async () => { \r\n if(this.counter < this.totalpage) {\r\n const url = `${this.URL}&page=${this.counter}`;\r\n var button = document.querySelector('.loadmore__cards-button');\r\n await HttpClient.AsyncGetRequest(url, this.method)\r\n .then(card => {\r\n var room = this.stringToHTML(card);\r\n for (var i = 0; i < room.childNodes.length; i++) {\r\n button.insertAdjacentElement(\"beforebegin\", room.childNodes[i]);\r\n const observer = lozad();\r\n observer.observe();\r\n const store = new Store(reducer);\r\n initViewportListener(store);\r\n const init = carousel.init;\r\n init(store);\r\n } \r\n\r\n if(this.counter == this.totalpage - 1) { \r\n this.loadMoreButton.style.display = \"none\";\r\n }\r\n }).catch(error => {\r\n console.error(error)\r\n });\r\n } \r\n this.counter = this.counter + 1; \r\n }; \r\n}\r\nexport default ListicleCard","import ListicleCard from \"./ListicleCard\";\r\n\r\nexport const listicleCard = {\r\n init: () => {\r\n const loadMoreButton = document.querySelectorAll(\".load__more__cards\");\r\n const cardContainer = document.getElementById(\"listicle__cards\");\r\n [...loadMoreButton].forEach(() => new ListicleCard(cardContainer, loadMoreButton));\r\n }\r\n}\r\n\r\nexport default listicleCard;","class ItineraryCard {\r\n constructor(DOMelement, Buttons) {\r\n try {\r\n this.el = DOMelement;\r\n this.addButtons = Buttons;\r\n\r\n [...Buttons].forEach((button) =>\r\n button.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n this.showAll(button);\r\n })\r\n );\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n }\r\n\r\n showAll = (button) =>{\r\n button.parentNode.classList.toggle(\"show-all\");\r\n }\r\n }\r\nexport default ItineraryCard;\r\n ","import ItineraryCard from \"./ItineraryCard\";\r\n\r\nexport const itineraryCard = {\r\n init:() => {\r\n const cardContainer = document.querySelector(\".sd-itinerary-card__content\");\r\n const showAllButtons = document.querySelectorAll(\".sd-itinerary-card__add\");\r\n new ItineraryCard(cardContainer, showAllButtons)\r\n }\r\n}\r\n\r\nexport default itineraryCard","import Map from \"../map/Map\";\r\nimport { getPopup } from \"./popup\";\r\n\r\nclass ItineraryMap {\r\n constructor(DOMelement, store) {\r\n try {\r\n this.el = DOMelement;\r\n this.store = store;\r\n this.mapEl = this.el.querySelector('[id^=\"itinerary-sd-map\"]');\r\n \r\n this.closeAllPopUps = this.closeAllPopUps.bind(this);\r\n this.onMarkerClick = this.onMarkerClick.bind(this);\r\n this.map = new Map(this.mapEl, store, this.onMarkerClick);\r\n\r\n this.data_geo_attr = this.mapEl.getAttribute(\"data-geo\");\r\n this.scriptID = document.querySelector(`#${this.data_geo_attr}`); \r\n this.scriptData = this.scriptID.innerText;\r\n this.mapData = JSON.parse(this.scriptData);\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n }\r\n\r\n closeAllPopUps() {\r\n if (this.map.popUps.length) {\r\n this.map.popUps.forEach((item) => item.remove());\r\n }\r\n }\r\n\r\n onMarkerClick(data, idx) {\r\n this.closeAllPopUps();\r\n const popupHtml = getPopup(data);\r\n const popup = new this.map.mapbox.Popup({ closeOnClick: false })\r\n .setLngLat([data.longitude, data.latitude])\r\n .setHTML(popupHtml);\r\n this.map.popUps.push(popup);\r\n popup.addTo(this.map.map);\r\n this.map.map.flyTo({\r\n center: [data.longitude, data.latitude],\r\n essential: true,\r\n });\r\n }\r\n\r\n\r\n\r\n}\r\n\r\nexport default ItineraryMap;\r\n","export const getPopup = ({ days, location, link }) => `\r\n \r\n
\r\n ${days} \r\n
\r\n
\r\n ${location} \r\n
\r\n
Discover \r\n
\r\n
\r\n
\r\n
\r\n ${title}, \r\n ${geolocation} \r\n
\r\n
Discover \r\n
\" + value + \" \";\r\n\r\n select.addEventListener('change', function (e) {\r\n\r\n const hideGuides = document.querySelectorAll(\".option-grid-chart\");\r\n for (var i = 0; i < hideGuides.length; i++) {\r\n hideGuides[i].style.display = 'none';\r\n }\r\n var node = e.target.value;\r\n\r\n // console.log(node1);\r\n var optionSelected = document.getElementById(node);\r\n var cityName = document.getElementById('city-name');\r\n var anchorUrl = optionSelected.getAttribute('data-url');\r\n var cityUrl = \"\" + node + \" \";\r\n optionSelected.style.display = \"flex\";\r\n\r\n cityName.innerHTML = cityUrl;\r\n });\r\n }\r\n //prevent naviagtion to url top menu\r\n const topLinkClick = document.querySelectorAll(\".sd-navigation-expand__item.sd-navigation-expand__dropdown > a\");\r\n topLinkClick.forEach(hrefClick => {\r\n hrefClick.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n })\r\n\r\n })\r\n //prevent naviagtion to url second level menu\r\n const secondLevelClick = document.querySelectorAll(\".sd-navigation-expand-content__dropdown > .sd-body2\");\r\n secondLevelClick.forEach(anchorClick => {\r\n anchorClick.addEventListener(\"click\", (event) => {\r\n if (istablet.matches) {\r\n event.preventDefault();\r\n }\r\n })\r\n })\r\n //currency nav in mobile\r\n function createCurrencyList() {\r\n\r\n let clone = document.querySelector('.sd-toolbar__currency-box ul.sd-body2').cloneNode(true);\r\n\r\n clone.setAttribute('class', 'sd-navigation-expand-content__item-list');\r\n document.getElementById('currencyMenuMobile').appendChild(clone);\r\n\r\n }\r\n createCurrencyList()\r\n\r\n //search results blank when country changed\r\n function reloadWithqstr() {\r\n if (window.location.href.indexOf(\"search-list\") > -1) {\r\n const str = location.search;\r\n if (str) {\r\n // console.log(str);\r\n const countryLinks = document.querySelectorAll(\".sd-toolbar__country-box .sd-body2 li > a\");\r\n countryLinks.forEach(link => {\r\n var linkHref = link.href;\r\n link.href = linkHref + str;\r\n })\r\n }\r\n }\r\n }\r\n\r\n reloadWithqstr()\r\n\r\n const onFilter = document.querySelector(\".on-site-filter\")\r\n if (onFilter) {\r\n document.addEventListener('click', function (e) {\r\n var container = document.querySelector('.on-site-filter');\r\n var target = document.querySelector('.sd-filter-by-form');\r\n var addActive = document.querySelectorAll('.sd-filter-dd');\r\n\r\n if (!container.contains(e.target)) {\r\n if (target!==null) {\r\n target.style.display = 'none';\r\n }\r\n \r\n addActive.forEach(div => {\r\n div.classList.remove(\"active\");\r\n })\r\n }\r\n });\r\n }\r\n\r\n if (performance.getEntriesByType(\"navigation\")[0].type === 'back_forward') {\r\n setTimeout(() => {\r\n window.location.reload()\r\n }, 300)\r\n }\r\n}\r\ndocument.addEventListener(\"DOMContentLoaded\", initialise);\r\n\r\nsetTimeout(function () {\r\n\r\n var errorDiv = document.getElementById(\"errorMessage\");\r\n var canonicalUrl = document.querySelector('link[rel=\"canonical\"]');\r\n if (errorDiv) {\r\n\r\n var metaRobots = document.querySelector('meta[name=\"robots\"]');\r\n\r\n // if there was no robots meta tag, add one\r\n if (!metaRobots) {\r\n metaRobots = document.createElement('meta');\r\n metaRobots.setAttribute('name', 'robots');\r\n document.head.appendChild(metaRobots);\r\n }\r\n // tell Google to exclude this page from the index\r\n metaRobots.setAttribute('content', 'nofollow, noindex');\r\n canonicalUrl.remove();\r\n }\r\n}, 1000)\r\n"],"sourceRoot":""}