{"version":3,"file":"facadesjs.js","sources":["../../../ClientApp/src/js/components/FacadeGalleryFilter.ts","../../../ClientApp/src/js/page/facades.ts"],"sourcesContent":["import { gsap } from 'gsap';\r\n\r\nexport interface IFacadeGalleryFilterValues {\r\n  planValue: string;\r\n  facadeValue: string;\r\n  extColorValue: string;\r\n}\r\n\r\nexport const facadeGalleryFilters: IFacadeGalleryFilterValues = {\r\n  planValue: 'all',\r\n  facadeValue: 'all',\r\n  extColorValue: 'all',\r\n};\r\n\r\nexport function updateFilters() {\r\n  // Scroll to the top of the asset content container using GSAP\r\n  const assetContent = document.getElementById('js-facade-gallery-images'); // Replace with your actual container ID\r\n  if (assetContent) {\r\n    const rect = assetContent.getBoundingClientRect();\r\n    const offsetY = window.scrollY + rect.top - window.innerHeight * 0.3; // 30% of the viewport height\r\n    gsap.to(window, {\r\n      duration: 0.5,\r\n      scrollTo: { y: offsetY, autoKill: false }, // Smoothly scroll to the calculated position\r\n      ease: 'power2.out',\r\n    });\r\n  } else {\r\n    return;\r\n  }\r\n\r\n  const figures = assetContent.querySelectorAll('figure');\r\n\r\n  figures.forEach(figure => {\r\n    const tags = figure.getAttribute('data-tags')?.split(' ');\r\n\r\n    const matches =\r\n      (facadeGalleryFilters.planValue === 'all' ||\r\n        tags?.includes(`${facadeGalleryFilters.planValue}`)) &&\r\n      (facadeGalleryFilters.facadeValue === 'all' ||\r\n        tags?.includes(`${facadeGalleryFilters.facadeValue}`)) &&\r\n      (facadeGalleryFilters.extColorValue === 'all' ||\r\n        tags?.includes(`${facadeGalleryFilters.extColorValue}`));\r\n\r\n    // Show or hide the figure based on the match\r\n    figure.style.display = matches ? 'block' : 'none';\r\n  });\r\n}\r\n\r\nexport function resetAllFilters() {\r\n  // Reset the filter values to 'all'\r\n  facadeGalleryFilters.planValue = 'all';\r\n  facadeGalleryFilters.facadeValue = 'all';\r\n  facadeGalleryFilters.extColorValue = 'all';\r\n\r\n  // Update button states: remove 'active' from all buttons, and add 'active' to \"All\" buttons\r\n  const panelContainer = document.getElementById('js-facade-gallery-images');\r\n\r\n  if (panelContainer) {\r\n    const allFilterButtons = panelContainer.querySelectorAll('.js-btn-filter');\r\n    allFilterButtons.forEach(button => button.classList.remove('active'));\r\n\r\n    // Find the \"All\" buttons and set them as active\r\n    const allButtons = panelContainer.querySelectorAll(\r\n      '.js-btn-filter[data-filter=\"all\"]',\r\n    );\r\n    allButtons.forEach(button => button.classList.add('active'));\r\n  }\r\n\r\n  // Update the filters for the specified panel\r\n  updateFilters();\r\n}\r\n","import {\r\n    facadeGalleryFilters,\r\n    updateFilters,\r\n} from '../components/FacadeGalleryFilter';\r\nimport LightBox from '../components/LightBox';\r\nimport QuickViewModal from '../components/QuickViewModal';\r\n\r\nconst photosFacadePanel = document.getElementById('js-photo-facade-filters') as HTMLElement;\r\nconst photosExtColorPanel = document.getElementById('js-photo-extcolor-filters') as HTMLElement;\r\n\r\nconst facadeButtons = photosFacadePanel.querySelectorAll<HTMLButtonElement>(\r\n    '.js-btn-filter[data-filtertype=\"facade\"]',\r\n);\r\n\r\nconst extColorButtons = photosExtColorPanel.querySelectorAll<HTMLButtonElement>(\r\n    '.js-btn-filter[data-filtertype=\"extcolor\"]',\r\n);\r\n\r\nconst facadeAllButton = photosFacadePanel.querySelector<HTMLButtonElement>('.js-btn-filter[data-filtertype=\"facade\"][data-filter=\"all\"]');\r\nconst extColorAllButton = photosFacadePanel.querySelector<HTMLButtonElement>('.js-btn-filter[data-filtertype=\"extcolor\"][data-filter=\"all\"]');\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    LightBox();\r\n\r\n    //quick view init\r\n    const quickviewModal = QuickViewModal('js-quickview-modal');\r\n\r\n\r\n\r\n    document.querySelectorAll('.js-btn-filter').forEach(button => {\r\n        button.addEventListener('click', event => {\r\n            const target = event.currentTarget as HTMLElement;\r\n            const filterType = target.dataset.filtertype; // Get the filter type from the button\r\n            const filterValue = target.dataset.filter; // Get the value from the button\r\n\r\n            if (!target) {\r\n                return;\r\n            }\r\n\r\n            if (!filterType || !filterValue) {\r\n                return; // Exit if the filter type or value is not defined\r\n            }\r\n\r\n            const parentContainer = target.parentElement;\r\n\r\n            if (!parentContainer) {\r\n                return;\r\n            }\r\n\r\n            // Update the corresponding filter value\r\n            switch (filterType) {\r\n                case 'plan':\r\n                    facadeGalleryFilters.planValue = filterValue;\r\n                    const seriesId = target.dataset.id;\r\n\r\n                    if (filterValue === 'all') {\r\n                        if (photosFacadePanel) {\r\n                            facadeButtons.forEach(button => {\r\n                                button.removeAttribute('disabled'); // Enable all interior color buttons\r\n                                button.classList.remove('active'); // Remove active class\r\n\r\n                                if (button.dataset.filter === 'all') {\r\n                                    button.classList.add('active');\r\n                                }\r\n\r\n                            });\r\n                        }\r\n\r\n                        if (photosExtColorPanel) {\r\n                            extColorButtons.forEach(button => {\r\n                                button.removeAttribute('disabled'); // Enable all exterior color buttons\r\n                                button.classList.remove('active'); // Remove active class\r\n\r\n                                if (button.dataset.filter === 'all') {\r\n                                    button.classList.add('active');\r\n                                }\r\n                            });\r\n                        }\r\n                    } else {\r\n                        // Fetch data from API if plan is selected and value is not \"all\"\r\n                        fetch(`/api/gallery/series-rooms/${seriesId}`)\r\n                            .then(response => response.json())\r\n                            .then((data: string[]) => {\r\n\r\n                                if (photosFacadePanel) {\r\n                                    facadeButtons.forEach(button => {\r\n                                        const buttonValue = button.getAttribute('data-filter');\r\n                                        // Disable buttons if their value is not in the returned data\r\n                                        if (buttonValue && buttonValue !== 'all') {\r\n                                            if (!data.includes(buttonValue)) {\r\n                                                button.setAttribute('disabled', 'true');\r\n                                            } else {\r\n                                                button.removeAttribute('disabled');\r\n                                            }\r\n                                        } else if (buttonValue === 'all') {\r\n                                            // Ensure the \"All\" button is always enabled\r\n                                            button.removeAttribute('disabled');\r\n                                        }\r\n                                    });\r\n                                }\r\n\r\n                                if (photosExtColorPanel) {\r\n                                    extColorButtons.forEach(button => {\r\n                                        const buttonValue = button.getAttribute('data-filter');\r\n                                        // Disable buttons if their value is not in the returned data\r\n                                        if (buttonValue && buttonValue !== 'all') {\r\n                                            if (!data.includes(buttonValue)) {\r\n                                                button.setAttribute('disabled', 'true');\r\n                                            } else {\r\n                                                button.removeAttribute('disabled');\r\n                                            }\r\n                                        } else if (buttonValue === 'all') {\r\n                                            // Ensure the \"All\" button is always enabled\r\n                                            button.removeAttribute('disabled');\r\n                                        }\r\n                                    });\r\n                                }\r\n\r\n\r\n                            })\r\n                            .catch(error => console.error('Error fetching room data:', error));\r\n                    }\r\n\r\n                    break;\r\n                case 'facade':\r\n                    facadeGalleryFilters.facadeValue = filterValue;\r\n                    facadeGalleryFilters.extColorValue = 'all';\r\n                    extColorButtons.forEach(button => {\r\n                        button.classList.remove('active');\r\n                    });\r\n                    extColorAllButton?.classList.add('active');\r\n                    break;\r\n                case 'extcolor':\r\n                    facadeGalleryFilters.extColorValue = filterValue;\r\n                    facadeGalleryFilters.facadeValue = 'all';\r\n                    facadeButtons.forEach(button => {\r\n                        button.classList.remove('active');\r\n                    });\r\n                    facadeAllButton?.classList.add('active');\r\n                    break;\r\n                default:\r\n                    console.warn(`Unknown filter type: ${filterType}`);\r\n                    return; // Exit if the filter type is unknown\r\n            }\r\n\r\n            // Call the update function to refresh the displayed images\r\n            updateFilters();\r\n\r\n            // Remove active class from all buttons of the same type and add to the clicked one\r\n            parentContainer\r\n                .querySelectorAll(`button[data-filtertype=\"${filterType}\"]`)\r\n                .forEach(btn => {\r\n                    btn.classList.remove('active'); // Remove active class from all buttons of the same type\r\n                });\r\n            target.classList.add('active'); // Add active class to the clicked button\r\n        });\r\n    });\r\n});\r\n"],"names":["facadeGalleryFilters","updateFilters","assetContent","rect","offsetY","gsap","figure","tags","_a","matches","photosFacadePanel","photosExtColorPanel","facadeButtons","extColorButtons","facadeAllButton","extColorAllButton","LightBox","QuickViewModal","button","event","target","filterType","filterValue","parentContainer","seriesId","response","data","buttonValue","error","btn"],"mappings":"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"}