Property Listing: Default

export default class PropertyListingPropertyStore {
    constructor() {
        this.allProperties = [];
        this.properties = [];
    }

    setProperties(properties) {
        this.properties = properties;
    }

    getProperties() {
        return this.properties;
    }

    filterProperties(formData) {
        const propertyTypes = formData.getAll('propertyType') || [];
        const minSize = formData.get('min-size');
        const maxSize = formData.get('max-size');
        const locations = formData.getAll('location') || [];
        const development = formData.getAll('development') || [];
        const minPrice = formData.get('min-price');
        const maxPrice = formData.get('max-price');
        const maxBedrooms = formData.get('max-bedrooms');
        const minBedrooms = formData.get('min-bedrooms');
        const maxBathrooms = formData.get('max-bathrooms');
        const minBathrooms = formData.get('min-bathrooms');
        const amenities = formData.getAll('amenity');

        return this.properties.filter((p) => (
            (!propertyTypes.length || propertyTypes.includes(p.propertyType))
            && (!minSize || p.squareFootageValue >= minSize)
            && (!maxSize || p.squareFootageValue <= maxSize)
            && (!locations.length || (p.region && locations.includes(p.region.toLowerCase())))
            && (!development.length || development.includes(p.development))
            && (!minPrice || p.priceValue >= minPrice)
            && (!maxPrice || p.priceValue <= maxPrice)
            && (!minBedrooms || p.bedrooms >= minBedrooms)
            && (!maxBedrooms || p.bedrooms <= maxBedrooms)
            && (!minBathrooms || p.bathrooms >= minBathrooms)
            && (!maxBathrooms || p.bathrooms <= maxBathrooms)
            && (!amenities.length || amenities.every((a) => p.amenities.includes(a)))
        ));
    }
}

import setSlider from './_slider';

import { getAllQueryStringParameters, setQueryParams } from '../../../../js/utils/routing';

export default class PropertyListingFilter {
    constructor(component, triggers, propertyStore, onFilter) {
        this.component = component;
        this.onFilter = onFilter;
        this.propertyStore = propertyStore;
        this.form = this.component.querySelector('form');
        this.formSubmitButton = this.component.querySelector('input[type="submit"]');
        this.init(triggers);
    }

    init(triggers) {
        triggers.forEach((trigger) => {
            trigger.addEventListener('click', (e) => {
                e.preventDefault();
                this.setSubmitText();
                this.component.showModal();
            });
        });

        const closeButton = this.component.querySelector('.js-close');
        closeButton.addEventListener('click', (e) => {
            e.preventDefault();
            this.component.close();
        });

        const amenitiesToggle = this.component.querySelector('.js-amenities-toggle');
        if (amenitiesToggle) {
            amenitiesToggle.addEventListener('click', () => {
                amenitiesToggle.parentNode.classList.toggle('show');
            });
        }

        this.form.addEventListener('submit', (e) => {
            e.preventDefault();

            this.component.close();

            // Set the query string parameters so users have the filters still selected when they hit the back button from the PDP
            // First clear out any existing values by getting the form element names
            const formElements = this.component.querySelectorAll('input, select');
            formElements.forEach((formElement) => {
                setQueryParams(formElement.name, '');
            });

            const formData = this.getFormData();
            [...formData.keys()].forEach((key) => {
                if (key) {
                    const values = formData.getAll(key);
                    const queryStringValue = values.join(',');
                    if (queryStringValue) {
                        setQueryParams(key, queryStringValue);
                    }
                }
            });

            if (this.onFilter) {
                this.onFilter();
            }
        });

        this.form.addEventListener('reset', () => {
            setTimeout(() => {
                this.setSubmitText();
                this.resetAllSliders();
            }, 50);
        });

        const locationElements = this.form.querySelectorAll('[name="location"]');

        locationElements.forEach((location) => {
            location.addEventListener('change', () => {
                const buildingElements = this.form.querySelectorAll('[name="development"]');
                buildingElements.forEach((building) => {
                    const buildingElement = building;
                    buildingElement.disabled = false;

                    building.parentElement.classList.remove('disabled');
                });

                const selectedLocations = Array.from(locationElements)
                    .filter((dev) => dev.checked)
                    .map((dev) => dev.value.toLowerCase());

                if (selectedLocations.length > 0) {
                    const properties = this.propertyStore.getProperties();

                    const filteredProperties = properties.filter((property) => {
                        const regionLowerCase = property.region ? property.region.toString().toLowerCase() : '';
                        return selectedLocations.includes(regionLowerCase);
                    });

                    const distinctBuildingTypes = [...new Set(filteredProperties.map((property) => property.development.toLowerCase()))];

                    buildingElements.forEach((building) => {
                        const elementName = building.getAttribute('value').toLowerCase();

                        if (!distinctBuildingTypes.includes(elementName)) {
                            const buildingElement = building;
                            buildingElement.disabled = true;

                            building.parentElement.classList.add('disabled');
                        }
                    });
                }
            });
        });
    }

    handleBuildingClick(building) {
        const locationElements = this.form.querySelectorAll('[name="location"]');
        building.addEventListener('change', () => {
            const buildingElements = this.form.querySelectorAll('[name="development"]');
            locationElements.forEach((location) => {
                const locationElement = location;
                locationElement.disabled = false;

                location.parentElement.classList.remove('disabled');
            });

            const selectedBuildingTypes = Array.from(buildingElements)
                .filter((dev) => dev.checked)
                .map((dev) => dev.value.toLowerCase());

            if (selectedBuildingTypes.length > 0) {
                const properties = this.propertyStore.getProperties();

                const filteredProperties = properties.filter((property) => {
                    const regionLowerCase = property.development ? property.development.toString().toLowerCase() : '';
                    return selectedBuildingTypes.includes(regionLowerCase);
                });

                const distinctLocations = [...new Set(filteredProperties.map((property) => property.region.toLowerCase()))];

                locationElements.forEach((location) => {
                    const elementValue = location.getAttribute('value').toLowerCase();

                    if (!distinctLocations.includes(elementValue)) {
                        const locationElement = location;
                        locationElement.disabled = true;

                        location.parentElement.classList.add('disabled');
                    }
                });
            }
        });
    }

    getFormData() {
        const formData = new FormData(this.form);

        function removeValueIfMax(formElementName, component) {
            const formElementValue = formData.get(formElementName);
            const slider = component.querySelector(`.js-${formElementName}`);
            if (slider) {
                const max = slider.getAttribute('max');

                if (max && (max === formElementValue)) {
                    formData.delete(formElementName);
                }
            }
        }

        // If the price and size values are the maximum the slider goes to then
        // we want to remove the value from the form data so there is no top limit
        removeValueIfMax('max-price', this.component);
        removeValueIfMax('max-bedrooms', this.component);
        removeValueIfMax('max-bathrooms', this.component);
        removeValueIfMax('max-size', this.component);
        return formData;
    }

    setValues() {
        const properties = this.propertyStore.getProperties();

        const distinctPropertyTypes = [...new Set(properties.map((x) => x.propertyType))];
        const propertyTypeContainer = this.component.querySelector('.js-property-types');
        if (propertyTypeContainer) {
            distinctPropertyTypes.sort();
            distinctPropertyTypes.forEach((propertyType) => {
                const propertyElement = document.createElement('div');
                propertyElement.classList.add('property-listing-filter__checkbox-container');
                propertyElement.innerHTML = `
                    <label class="property-listing-filter__checkbox-label">
                        <input data-key="propertyType" type="checkbox" value="${propertyType}" name="propertyType"><span class="property-listing-filter__checkbox-text">${propertyType}</span>
                    </label>
                `;
                propertyTypeContainer.appendChild(propertyElement);
            });
        }

        const maxSizeSlider = this.component.querySelector('.js-max-size');
        if (maxSizeSlider) {
            setSlider(this.component.querySelector('.js-size'), properties);
        }

        const buildingTypeContainer = this.component.querySelector('.js-building-type');
        if (buildingTypeContainer) {
            const distinctBuildingTypes = [...new Set(properties.map((x) => x.development))];
            distinctBuildingTypes.forEach((buildingType) => {
                if (buildingType !== '') {
                    const buildingElement = document.createElement('div');
                    buildingElement.classList.add('property-listing-filter__checkbox-container');
                    buildingElement.innerHTML = `
                        <label class="property-listing-filter__checkbox-label">
                            <input data-key="development" type="checkbox" value="${buildingType}" name="development"><span class="property-listing-filter__checkbox-text">${buildingType}</span>
                        </label>
                    `;
                    buildingTypeContainer.appendChild(buildingElement);

                    const checkbox = buildingElement.querySelector('[name="development"]');
                    checkbox.addEventListener('click', () => {
                        this.handleBuildingClick(checkbox);
                    });
                }
            });
        }

        const maxPriceSlider = this.component.querySelector('.js-max-price');
        if (maxPriceSlider) {
            setSlider(this.component.querySelector('.js-price'), properties);
        }

        if (this.component.querySelector('.js-max-bedrooms')) {
            setSlider(this.component.querySelector('.js-bedrooms'));
        }

        if (this.component.querySelector('.js-max-bathrooms')) {
            setSlider(this.component.querySelector('.js-bathrooms'));
        }

        if (this.component.querySelector('.js-amenities')) {
            const distinctAmenitiesArray = properties.map((x) => x.amenities).flat();
            const amenityContainer = this.component.querySelector('.js-amenities');
            const distinctAmenities = [...new Set(distinctAmenitiesArray.map((amenity) => amenity))];
            distinctAmenities.sort();

            distinctAmenities.forEach((amenity) => {
                if (amenity.length !== 0) {
                    const amenityElement = document.createElement('div');
                    amenityElement.classList.add('property-listing-filter__amenity-container');
                    amenityElement.innerHTML = `
                        <label class="property-listing-filter__amenity-label">
                            <input data-key="amenity" class="property-listing-filter__amenity-input" type="checkbox" value="${amenity}" name="amenity"><span class="property-listing-filter__amenity-text">${amenity}</span>
                        </label>
                    `;
                    amenityContainer.appendChild(amenityElement);
                }
            });
        }

        this.setFormChangeEvents();

        // Set values from query string
        const params = getAllQueryStringParameters();
        if (params) {
            params.forEach((param) => {
                const filterElement = this.component.querySelector(`[name='${param.name}']`);
                if (filterElement) {
                    if (filterElement.type === 'checkbox') {
                        // It's a checkbox so the query string value might hold multiple values that are separated by commas
                        // Get all these values and check the associated checkboxes
                        const values = param.value.split(',');
                        values.forEach((value) => {
                            const checkboxToSelect = this.component.querySelector(`[name='${param.name}'][value='${value}']`);
                            if (checkboxToSelect) {
                                checkboxToSelect.checked = true;
                            }
                        });
                    } else {
                        filterElement.value = param.value;
                    }
                }
            });

            if (this.onFilter) {
                this.onFilter(true);
            }
        }
    }

    setFormChangeEvents() {
        this.component.querySelectorAll('input, select').forEach((formElement) => {
            formElement.addEventListener('change', () => {
                // A form element has changed so update the property count text
                this.setSubmitText();
            });
        });
    }

    setSubmitText() {
        const filteredProperties = this.propertyStore.filterProperties(this.getFormData());
        if (!filteredProperties.length) {
            this.formSubmitButton.value = 'no properties found';
        } else {
            this.formSubmitButton.value = `Show ${filteredProperties.length} Properties`;
        }
    }

    submitClick() {
        const submitButton = this.form.querySelector('[type="submit"]');
        submitButton.click();
    }

    getSelectedFilters(formData) {
        const propertyTypes = formData.getAll('propertyType') || [];
        const minSize = formData.get('min-size') && Number(formData.get('min-size')) !== 0;
        const maxSize = formData.get('max-size') && Number(formData.get('max-size')) !== Number(this.form.querySelector('[name="max-size"]').getAttribute('max'));
        const locations = formData.getAll('location') || [];
        const development = formData.getAll('development') || [];
        const maxPrice = formData.get('max-price') && Number(formData.get('max-price')) !== Number(this.form.querySelector('[name="max-price"]').getAttribute('max'));
        const minPrice = formData.get('min-price') && Number(formData.get('min-price')) !== 0;
        const maxBedrooms = formData.get('max-bedrooms') && Number(formData.get('max-bedrooms')) !== Number(this.form.querySelector('[name="max-bedrooms"]').getAttribute('max'));
        const minBedrooms = formData.get('min-bedrooms') && Number(formData.get('min-bedrooms')) !== 0;
        const maxBathrooms = formData.get('max-bathrooms') && Number(formData.get('max-bathrooms')) !== Number(this.form.querySelector('[name="max-bathrooms"]').getAttribute('max'));
        const minBathrooms = formData.get('min-bathrooms') && Number(formData.get('min-bathrooms')) !== 0;
        const amenities = formData.getAll('amenity') || [];

        const conditions = [
            {
                key: 'propertyType', condition: propertyTypes.length > 0,
            },
            {
                key: 'size', condition: maxSize || minSize,
            },
            {
                key: 'location', condition: locations.length > 0,
            },
            {
                key: 'development', condition: development.length > 0,
            },
            {
                key: 'price', condition: maxPrice || minPrice,
            },
            {
                key: 'bedrooms', condition: maxBedrooms || minBedrooms,
            },
            {
                key: 'bathrooms', condition: maxBathrooms || minBathrooms,
            },
            {
                key: 'amenity', condition: amenities.length > 0,
            },
        ];

        function getOrderFromForm(form) {
            const order = [];
            const formElements = form.elements;

            for (let i = 0; i < formElements.length; i++) {
                const element = formElements[i];

                if (element.dataset.key) {
                    const matchingCondition = conditions.find((condition) => condition.key === element.dataset.key);

                    if (matchingCondition) {
                        matchingCondition.title = element.closest('fieldset').querySelector('legend').textContent.toLowerCase();

                        if (!order.includes(element.dataset.key)) {
                            order.push(element.dataset.key);
                        }
                    }
                }
            }

            return order;
        }

        const formOrder = getOrderFromForm(this.form);

        const orderedConditions = formOrder.map((conditionKey) => conditions.find((condition) => condition.key === conditionKey));

        return orderedConditions.filter(({ condition }) => condition).map(({ key, title }) => ({ key, title }));
    }

    handleReset(key) {
        if (key === 'propertyType' || key === 'location' || key === 'development' || key === 'amenity') {
            this.resetCheckbox(key);
        }

        if (key === 'size' || key === 'price' || key === 'bedrooms' || key === 'bathrooms') {
            this.resetSlider(key);
        }

        this.submitClick();
    }

    resetCheckbox(name) {
        this.form.querySelectorAll(`[name=${name}]`).forEach((checkbox) => {
            const cb = checkbox;
            cb.checked = false;
        });
    }

    resetSlider(key) {
        this.form.querySelector(`[name='min-${key}']`).value = 0;
        this.form.querySelector(`[name='max-${key}']`).value = this.form.querySelector(`[name='max-${key}']`).getAttribute('max');
        setSlider(this.form.querySelector(`.js-${key}`));
    }

    resetAllSliders() {
        const sliderClasses = ['.js-size', '.js-price', '.js-bedrooms', '.js-bathrooms'];

        sliderClasses.forEach((sliderClass) => {
            const sliderElement = this.component.querySelector(sliderClass);
            if (sliderElement) {
                setSlider(this.form.querySelector(sliderClass));
            }
        });
    }

    resetAllFilters() {
        this.resetAllSliders();
        this.form.reset();
        this.submitClick();
    }
}

import { PropertyListCard } from '../../cards/property-list-card/property-list-card';
import { getQueryStringParameter, setQueryParams } from '../../../../js/utils/routing';
import Pagination from '../../listings/pagination/pagination';

const pageQueryStringParameterName = 'page';
const propertyQueryStringParameterName = 'vpid';

export default class PropertyListingList {
    constructor(component, filter, mapView) {
        this.component = component;
        this.filter = filter;
        this.resultsContainer = this.component.querySelector('.js-results-container');
        this.scrollableContainer = this.component.querySelector('.js-scrollable-container');
        this.propertyCardTemplate = this.component.querySelector('.js-property-card-template');
        this.resultCountText = this.component.querySelector('.js-property-count');
        this.noResultsContainer = this.component.querySelector('.js-no-results-container');
        this.orderBySelect = this.component.querySelector('select[name="sortBy"]');
        this.loadMoreButton = this.component.querySelector('.js-load-more-button');

        if (this.component.dataset.pageSize) {
            this.pageSize = parseInt(this.component.dataset.pageSize, 10);
        }

        if (this.component.dataset.pagingType) {
            this.pagingType = this.component.dataset.pagingType;
        }

        this.numberOfPropertiesRendered = 0;
        this.mapView = mapView;
        this.init();
    }

    init() {
        this.orderBySelect.addEventListener('change', () => {
            this.orderProperties();
            this.refreshListView();
        });

        this.noResultsContainer.querySelector('.js-reset-all-filters').addEventListener('click', () => {
            const resetButton = this.noResultsContainer.querySelector('.js-reset-all-filters.show');

            if (resetButton && resetButton.classList.contains('show')) {
                this.noResultsContainer.querySelector('.js-remove-filters-copy').classList.remove('show');
                resetButton.classList.remove('show');
            }

            this.filter.resetAllFilters();
        });

        if (this.pagingType && this.pagingType === 'loadmore') {
            this.loadMoreButton.addEventListener('click', (e) => {
                e.preventDefault();
                this.page++;
                setQueryParams(pageQueryStringParameterName, this.page);
                this.renderResults();
            });
        }

        // drag handle functionality on small breakpoints
        const listComponent = this.component;

        const base = this;
        const dragHandleElement = this.component.querySelector('.js-drag-handle');

        function mousemove(e) {
            const listPanelRect = base.component.getBoundingClientRect();
            const yPos = e.type === 'touchmove' ? e.touches[0].pageY : e.y;
            const newHeight = listPanelRect.bottom - yPos - dragHandleElement.clientHeight;
            const newMapHeight = listComponent.parentElement.getBoundingClientRect().height - newHeight;
            base.mapView.setHeight(newMapHeight);
            base.setHeight(newHeight);
        }

        function mouseup(e) {
            if (e.type === 'touchend') {
                window.removeEventListener('touchmove', mousemove);
                window.removeEventListener('touchend', mouseup);
            } else {
                window.removeEventListener('mousemove', mousemove);
                window.removeEventListener('mouseup', mouseup);
            }

            base.mapView.resize();
        }

        function resizer(e) {
            e.preventDefault();
            if (e.type === 'touchstart') {
                window.addEventListener('touchmove', mousemove);
                window.addEventListener('touchend', mouseup);
            } else {
                window.addEventListener('mousemove', mousemove);
                window.addEventListener('mouseup', mouseup);
            }
        }

        dragHandleElement.addEventListener('touchstart', resizer);
        dragHandleElement.addEventListener('mousedown', resizer);

        if (this.pagingType && this.pagingType === 'pagination') {
            const paginationElement = this.component.querySelector('.js-pagination');
            if (paginationElement) {
                this.pagination = new Pagination(this.component.querySelector('.js-pagination'), () => {
                    setQueryParams(pageQueryStringParameterName, this.pagination.currentPage);
                    this.renderResults(true);
                });
            }
        }
    }

    setHeight(newHeight) {
        this.component.style.flexBasis = newHeight !== null ? `${newHeight}px` : '';
    }

    showLoader() {
        this.resultsContainer.classList.add('loading');
    }

    hideLoader() {
        this.resultsContainer.classList.remove('loading');
    }

    setProperties(properties, init) {
        this.properties = properties;
        this.orderProperties();
        this.resultCountText.innerText = `${this.properties.length} properties`;
        this.refreshListView(init);

        if (this.pagination) {
            this.pagination.setNumberOfPages(Math.ceil(this.properties.length / this.pageSize));
        }
    }

    orderProperties() {
        const orderByValue = this.orderBySelect.value;
        switch (orderByValue) {
        case 'development':
            this.properties = this.properties.sort((a, b) => {
                if (a.development < b.development) { return -1; }
                if (a.development > b.development) { return 1; }
                return 0;
            });
            break;
        case 'price DESC':
            this.properties = this.properties.sort((a, b) => { return a.priceValue > b.priceValue ? -1 : 1; });
            break;
        case 'price ASC':
            this.properties = this.properties.sort((a, b) => { return a.priceValue < b.priceValue ? -1 : 1; });
            break;
        case 'size DESC':
            this.properties = this.properties.sort((a, b) => { return a.squareFootageValue > b.squareFootageValue ? -1 : 1; });
            break;
        case 'size ASC':
            this.properties = this.properties.sort((a, b) => { return a.squareFootageValue < b.squareFootageValue ? -1 : 1; });
            break;
        case 'dateAdded DESC':
            this.properties = this.properties.sort((a, b) => { return a.dateAdded > b.dateAdded ? -1 : 1; });
            break;
        default:
            console.error(`${orderByValue} not known`);
            break;
        }
    }

    refreshListView(init) {
        this.resultsContainer.innerHTML = '';
        this.page = 1;
        this.numberOfPropertiesRendered = 0;

        if (this.pagingType && this.pagingType === 'loadmore') {
            this.loadMoreButton.style.display = 'none';
        }

        this.renderResults(init);
    }

    renderResults(init) {
        let propertiesToShow = this.properties;
        if (this.pageSize) {
            // Page size is set so we need to paginate the results
            const pageQueryStringValue = getQueryStringParameter(pageQueryStringParameterName);
            if (init && pageQueryStringValue) {
                this.page = parseInt(pageQueryStringValue, 10);
                propertiesToShow = this.properties.slice(0, this.page * this.pageSize);

                if (this.pagingType && this.pagingType === 'pagination') {
                    propertiesToShow = this.properties.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
                }
            } else {
                propertiesToShow = this.properties.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
            }
        }

        if (this.pagingType && this.pagingType === 'pagination') {
            this.resultsContainer.innerHTML = '';
        }

        this.numberOfPropertiesRendered += propertiesToShow.length;
        if (propertiesToShow.length > 0) {
            this.noResultsContainer.style.display = '';

            const groupDevelopments = this.orderBySelect.value === 'development';
            let currentDevelopment = ''; // Used to track when we enter a new development
            propertiesToShow.forEach((property) => {
                if (groupDevelopments && currentDevelopment !== property.development) {
                    const developmentHeaderElement = document.createElement('div');
                    developmentHeaderElement.className = 'list-view__building-heading';
                    developmentHeaderElement.textContent = property.development;
                    developmentHeaderElement.dataset.developmentName = property.development;
                    this.resultsContainer.appendChild(developmentHeaderElement);
                    currentDevelopment = property.development;
                }

                const propertyContainerDiv = document.createElement('div');
                propertyContainerDiv.dataset.propertyId = property.id;
                propertyContainerDiv.classList.add('list-view__property-card-container');
                const clone = this.propertyCardTemplate.content.cloneNode(true);
                const propertyListCardElement = clone.querySelector('[data-module="propertyListCard"]');
                propertyContainerDiv.appendChild(propertyListCardElement);
                new PropertyListCard(propertyListCardElement, property);
                this.resultsContainer.appendChild(propertyContainerDiv);
                propertyContainerDiv.querySelector('a').addEventListener('click', () => {
                    setQueryParams(propertyQueryStringParameterName, property.id);
                });
            });
        } else if (this.page === 1) {
            this.noResultsContainer.style.display = 'block';
        }

        if (this.pageSize && this.pagingType && this.pagingType === 'loadmore') {
            // 'Pagination' is enabled so show/hide the load more button
            this.loadMoreButton.style.display = this.numberOfPropertiesRendered >= this.properties.length ? 'none' : 'inline-block';
        }

        if (init) {
            const propertyIdToShow = getQueryStringParameter(propertyQueryStringParameterName);
            const propertyElementToDisplay = this.resultsContainer.querySelector(`[data-property-id='${propertyIdToShow}']`);
            if (propertyElementToDisplay) {
                propertyElementToDisplay.scrollIntoView();
            }

            if (this.pagingType && this.pagingType === 'pagination') {
                this.resultsContainer.scrollIntoView();
            }
        }
    }

    static highlightProperty(propertyContainerDiv) {
        // Add the highlight class, the css will deal with the animation
        const highlightClassName = 'highlight';
        if (propertyContainerDiv.classList.contains(highlightClassName)) {
            propertyContainerDiv.classList.remove(highlightClassName);
        }

        setTimeout(() => propertyContainerDiv.classList.add(highlightClassName), 100);
    }

    createRemoveFilters(formData) {
        const selectedFilters = this.filter.getSelectedFilters(formData);

        function createButtons() {
            return selectedFilters.map(({ key, title }) => `
                <div class="no-results__remove-filter">
                    <span data-key="${key}" class="no-results__remove-filter-button js-remove-filter">Remove ${title}</span>
                </div>
            `).join('').trim();
        }

        this.noResultsContainer.querySelector('.js-remove-filter-buttons').innerHTML = createButtons();

        const removeButtons = this.component.querySelectorAll('.js-remove-filter');
        removeButtons.forEach((removeButton) => {
            removeButton.addEventListener('click', () => this.handleRemoveFilter(removeButton.dataset.key));
        });

        if (removeButtons.length && !this.noResultsContainer.querySelector('.js-reset-all-filters').classList.contains('show')) {
            this.noResultsContainer.querySelector('.js-remove-filters-copy').classList.add('show');
            this.noResultsContainer.querySelector('.js-reset-all-filters').classList.add('show');
        }
    }

    handleRemoveFilter(key) {
        this.filter.handleReset(key);
    }
}

import mapboxgl from 'mapbox-gl';
import { MapBox } from '../../maps/mapbox/mapbox';
import { PropertyListCard } from '../../cards/property-list-card/property-list-card';
import { MultiPropertyCard } from '../../cards/multi-property-card/multi-property-card';
import { getQueryStringParameter, setQueryParams } from '../../../../js/utils/routing';

const decimalPlaces = 2;
const mapZoomQueryStringParameterName = 'map-zoom';
const mapLatQueryStringParameterName = 'lat';
const mapLngQueryStringParameterName = 'lng';
const propertyCardQueryStringParameterName = 'mpid';
const multiPropertyCardQueryStringParameterName = 'mmid';

export default class PropertyListingMap {
    constructor(component, onPropertyClick, onMultiPropertyClick, onMapMove) {
        this.component = component;
        this.onPropertyClick = onPropertyClick;
        this.onMultiPropertyClick = onMultiPropertyClick;
        this.onMapMove = onMapMove;

        this.mapBox = new MapBox(this.component.querySelector('.js-mapbox'));
        this.mapBox.map.scrollZoom.enable();
        this.propertyListCard = new PropertyListCard(this.component.querySelector('[data-module="propertyListCard"]'));
        this.isMapLoaded = false;
        const multiPropertyCardElement = this.component.querySelector('[data-module="multiPropertyCard"]');
        if (multiPropertyCardElement) {
            this.multiPropertyCard = new MultiPropertyCard(multiPropertyCardElement);
        }

        this.markersOnScreen = {};

        this.developmentsArray = [];

        // Array of (potentially) filtered properties
        this.properties = [];

        this.initMap();

        const closeCardButtons = this.component.querySelectorAll('.js-close-card');
        if (closeCardButtons.length > 0) {
            closeCardButtons.forEach((closeCard) => {
                closeCard.addEventListener('click', () => {
                    closeCard.parentElement.classList.remove('show');
                    closeCard.parentElement.setAttribute('aria-hidden', 'true');
                    setQueryParams(multiPropertyCardQueryStringParameterName, '');
                    setQueryParams(propertyCardQueryStringParameterName, '');
                });
            });
        }
    }

    setHeight(newHeight) {
        this.component.style.flexBasis = newHeight ? `${newHeight}px` : '';
    }

    initMap() {
        const that = this;
        this.mapBox.map.on('load', () => {
            this.isMapLoaded = true;

            // Set center and zoom values from the query string if present
            const latQueryStringValue = getQueryStringParameter(mapLatQueryStringParameterName);
            const lngQueryStringValue = getQueryStringParameter(mapLngQueryStringParameterName);

            if (latQueryStringValue && lngQueryStringValue) {
                const latValue = parseFloat(latQueryStringValue, 10);
                const lngValue = parseFloat(lngQueryStringValue, 10);
                this.mapBox.map.setCenter([lngValue, latValue]);
            }

            const zoomLevel = getQueryStringParameter(mapZoomQueryStringParameterName);
            if (zoomLevel) {
                this.mapBox.map.setZoom(zoomLevel);
            }

            // Source for grouping properties into developments
            this.mapBox.map.addSource('locations', {
                type: 'geojson',
                data: {
                    type: 'FeatureCollection',
                    features: [],
                },
                cluster: true,
                clusterMaxZoom: 14,
                clusterRadius: 50,
            });

            // Source for grouping properties into developments
            this.mapBox.map.addSource('all-properties', {
                type: 'geojson',
                data: {
                    type: 'FeatureCollection',
                    features: [],
                },
            });

            // Layer for clusters and property pins
            this.mapBox.map.addLayer({
                id: 'clusters',
                type: 'circle',
                source: 'locations',
                filter: ['==', 'cluster', true],
                paint: {
                    'circle-radius': 20,
                    'circle-opacity': 0,
                },
            });

            // Layer for all properties so we can tell the list view which ones are visible. This will be hidden from the user.
            this.mapBox.map.addLayer({
                'id': 'property-data',
                'source': 'all-properties',
                'type': 'circle',
                'paint': {
                    'circle-color': 'transparent',
                    'circle-radius': 4,
                    'circle-stroke-width': 2,
                    'circle-stroke-color': 'transparent',
                },
            });

            // array of markers. These can be clusters or individual properties
            const { map } = this.mapBox;
            const {
                component,
            } = this;
            const base = this;

            function updateMarkers() {
                const newMarkers = {};
                const features = map.querySourceFeatures('locations');

                for (let i = 0; i < features.length; i++) {
                    const coords = features[i].geometry.coordinates;

                    // props is either a cluster or property data
                    const props = features[i].properties;

                    const id = props.cluster ? `cluster${props.cluster_id}` : props.id;
                    if (newMarkers[id]) {
                        // We've already added this marker (duplicate)
                        continue;
                    }

                    if (props.cluster && that.markersOnScreen[id]) {
                        // It's a cluster and is already on the screen
                        newMarkers[id] = that.markersOnScreen[id];
                    } else if (props.cluster && !that.markersOnScreen[id]) {
                        // This feature is clustered and is not already on the screen, create an icon for it and use props.point_count for its count
                        const el = document.createElement('div');
                        el.className = 'map-view__property-cluster';
                        el.style.textAlign = 'center';
                        el.style.borderRadius = '50%';
                        el.innerText = props.point_count;
                        const marker = new mapboxgl.Marker(el).setLngLat(coords);
                        marker.addTo(map);
                        newMarkers[id] = marker;
                    } else if (!props.cluster && that.markersOnScreen[id]) {
                        // It's a property and is already on the screen
                        newMarkers[id] = that.markersOnScreen[id];
                    } else if (!props.cluster && !that.markersOnScreen[id] && !props.hasMatch) {
                        // Feature marker is a property and is not already on screen
                        const el = document.createElement('div');
                        el.className = 'map-view__property-marker';
                        const marker = new mapboxgl.Marker(el).setLngLat(coords);
                        marker.addTo(map);

                        const propertyData = that.properties.find((item) => item.id === props.propertyId);
                        marker.getElement().addEventListener('click', (e) => {
                            if (component.querySelector('.clicked')) {
                                component.querySelector('.clicked').classList.remove('clicked');
                            }
                            e.target.classList.add('clicked');
                            base.onPropertyClick(propertyData);
                        });
                        newMarkers[id] = marker;
                    } else if (!props.cluster && !that.markersOnScreen[id] && props.hasMatch) {
                        const el = document.createElement('div');
                        el.className = 'map-view__property-multi-marker';
                        const marker = new mapboxgl.Marker(el).setLngLat(coords);

                        that.developmentsArray.push(features[i]);

                        const findDevelopments = that.developmentsArray.filter((item) => item.properties.development === features[i].properties.development
                            && item.properties.longitude.toFixed(decimalPlaces) === features[i].geometry.coordinates[0].toFixed(decimalPlaces)
                            && item.properties.latitude.toFixed(decimalPlaces) === features[i].geometry.coordinates[1].toFixed(decimalPlaces));

                        if (findDevelopments.length === 1) {
                            marker.addTo(map);

                            marker.getElement().addEventListener('click', (e) => {
                                if (component.querySelector('.clicked')) {
                                    component.querySelector('.clicked').classList.remove('clicked');
                                }
                                e.target.classList.add('clicked');
                                // Filter matching property data
                                const matchingPropertyData = that.properties.filter((item) => item.latitude.toFixed(decimalPlaces) === props.latitude.toFixed(decimalPlaces) && item.longitude.toFixed(decimalPlaces) === props.longitude.toFixed(decimalPlaces) && item.development === props.development);

                                base.onMultiPropertyClick(matchingPropertyData);
                            });
                        }

                        newMarkers[id] = marker;
                    }
                }

                // Remove the markers that are no longer on the screen
                const ids = Object.getOwnPropertyNames(that.markersOnScreen);
                for (let i = 0; i < ids.length; i++) {
                    const onScreenId = ids[i];
                    if (!newMarkers[onScreenId]) {
                        that.markersOnScreen[onScreenId].remove();
                    }
                }

                that.markersOnScreen = newMarkers;
            }

            this.mapBox.map.on('click', 'clusters', (e) => {
                this.developmentsArray = [];
                const features = this.mapBox.map.queryRenderedFeatures(e.point, {
                    layers: ['clusters'],
                });
                const clusterId = features[0].properties.cluster_id;
                this.mapBox.map.getSource('locations').getClusterExpansionZoom(
                    clusterId,
                    (err, zoom) => {
                        if (err) return;

                        this.mapBox.map.easeTo({
                            center: features[0].geometry.coordinates,
                            zoom,
                        });
                    },
                );
            });

            this.mapBox.map.on('render', () => {
                if (!this.mapBox.map.isSourceLoaded('locations')) return;
                updateMarkers();
            });

            this.mapBox.map.on('mouseenter', 'clusters', () => {
                this.mapBox.map.getCanvas().style.cursor = 'pointer';
            });
            this.mapBox.map.on('mouseleave', 'clusters', () => {
                this.mapBox.map.getCanvas().style.cursor = '';
            });

            this.mapBox.map.on('moveend', (eventData) => {
                // A move end event also fires when the map is resized. This causes a big problem on small screen sizes
                // when the user moves the list view to cover the enitre map.
                // This is a work around so this code only gets executed when the user moves the map
                // https://github.com/mapbox/mapbox-gl-js/issues/6512#issuecomment-572670290
                let sendAction = true;
                if (eventData && eventData.originalEvent && eventData.originalEvent.type === 'resize') {
                    sendAction = false;
                }

                if (sendAction) {
                    const features = this.mapBox.map.queryRenderedFeatures({ layers: ['property-data'] });
                    const visiblePropertyIds = features.map((feature) => { return feature.properties.id; });
                    const visibleProperties = this.properties.filter((property) => { return visiblePropertyIds.includes(property.id); });
                    this.onMapMove(visibleProperties);
                }

                setQueryParams(mapZoomQueryStringParameterName, this.mapBox.map.getZoom());
                const { lng, lat } = this.mapBox.map.getCenter();
                setQueryParams(mapLatQueryStringParameterName, lat);
                setQueryParams(mapLngQueryStringParameterName, lng);
            });
        });
    }

    setAllProperties(properties) {
        // Set the complete set of properties so we can work out which ones are visible
        const newArray = properties.map((property) => {
            return { type: 'Feature', properties: property, geometry: { type: 'Point', coordinates: [property.longitude, property.latitude] } };
        });

        const geoJson = {
            'type': 'FeatureCollection',
            'features': [
                ...newArray,
            ],
        };

        const setLocationData = () => {
            const geojsonSource = this.mapBox.map.getSource('all-properties');
            geojsonSource.setData(geoJson);
        };

        if (this.isMapLoaded) {
            setLocationData();
        } else {
            // Map hasn't loaded yet so wait until it has
            this.mapBox.map.on('load', () => {
                setLocationData();
            });
        }

        // Show cards if they appear in the query string
        const propertyId = getQueryStringParameter(propertyCardQueryStringParameterName);
        if (propertyId) {
            const propertyToShow = properties.find((p) => p.id === parseInt(propertyId, 10));
            if (propertyToShow) {
                this.showPropertyCard(propertyToShow);
            }
        }

        const multiPropertyIdString = getQueryStringParameter(multiPropertyCardQueryStringParameterName);
        if (multiPropertyIdString) {
            const multiPropertyIds = multiPropertyIdString.split(',').map((id) => { return parseInt(id, 10); });
            const propertiesToShow = properties.filter((p) => multiPropertyIds.includes(p.id));
            if (propertiesToShow) {
                this.showMultiPropertyCard(propertiesToShow);
            }
        }
    }

    // Sets properties to display on the map. This could be a filtered list.
    setProperties(properties) {
        this.properties = properties;

        // Remove all existing markers
        const ids = Object.getOwnPropertyNames(this.markersOnScreen);
        for (let i = 0; i < ids.length; i++) {
            const onScreenId = ids[i];
            this.markersOnScreen[onScreenId].remove();
        }

        const newArray = properties.map((property) => {
            return {
                properties: { ...property },
                geometry: { type: 'Point', coordinates: [property.longitude, property.latitude] },
            };
        });

        function haveSameCoordinates(property1, property2) {
            return (
                (
                    property1.geometry.coordinates[0] !== undefined
                    && property2.geometry.coordinates[0] !== undefined
                    && property1.geometry.coordinates[0].toFixed(decimalPlaces) === property2.geometry.coordinates[0].toFixed(decimalPlaces)
                )
                && (
                    property1.geometry.coordinates[1] !== undefined
                    && property2.geometry.coordinates[1] !== undefined
                    && property1.geometry.coordinates[1].toFixed(decimalPlaces) === property2.geometry.coordinates[1].toFixed(decimalPlaces)
                ) && (
                    property1.properties.development
                    && property2.properties.development
                    && property1.properties.development === property2.properties.development
                )
            );
        }

        const updatedProperties = newArray.map((property, index) => {
            const hasMatchingCoordinates = newArray.some((otherProperty, otherIndex) => {
                return index !== otherIndex && haveSameCoordinates(property, otherProperty);
            });

            return {
                type: 'Feature',
                properties: {
                    ...property.properties,
                    propertyId: property.properties.id,
                    id: index,
                    hasMatch: hasMatchingCoordinates,
                },
                geometry: {
                    type: property.geometry.type,
                    coordinates: [...property.geometry.coordinates],
                },
            };
        });

        const geoJson = {
            'type': 'FeatureCollection',
            'features': updatedProperties,
        };

        const setLocationData = () => {
            const geojsonSource = this.mapBox.map.getSource('locations');
            // clear any existing data
            geojsonSource.setData({
                type: 'FeatureCollection',
                features: [],
            });
            geojsonSource.setData(geoJson);
        };

        if (this.isMapLoaded) {
            setLocationData();
        } else {
            // Map hasn't loaded yet so wait until it has
            this.mapBox.map.on('load', () => {
                setLocationData();
            });
        }
    }

    resize() {
        this.mapBox.map.resize();
    }

    showPropertyCard(propertyData) {
        const multiPropertyCardContainer = this.component.querySelector('.js-multi-property-card-container.show');
        if (multiPropertyCardContainer) {
            multiPropertyCardContainer.classList.remove('show');
            multiPropertyCardContainer.setAttribute('aria-hidden', 'true');
        }

        this.propertyListCard.setPropertyData(propertyData);
        this.component.querySelector('.js-property-list-card-container').classList.add('show');
        this.component.querySelector('.js-property-list-card-container').removeAttribute('aria-hidden');
        setQueryParams(multiPropertyCardQueryStringParameterName, '');
        setQueryParams(propertyCardQueryStringParameterName, propertyData.id);
    }

    showMultiPropertyCard(properties) {
        const propertyListCardContainer = this.component.querySelector('.js-property-list-card-container.show');
        if (propertyListCardContainer) {
            propertyListCardContainer.classList.remove('show');
            propertyListCardContainer.setAttribute('aria-hidden', 'true');
        }

        this.multiPropertyCard.setPropertyData(properties);
        this.component.querySelector('.js-multi-property-card-container').classList.add('show');
        this.component.querySelector('.js-multi-property-card-container').removeAttribute('aria-hidden');
        setQueryParams(propertyCardQueryStringParameterName, '');
        setQueryParams(multiPropertyCardQueryStringParameterName, properties.map((p) => { return p.id; }).join(','));
    }
}

export default function setSlider(component, properties = null) {
    const container = component.querySelector('.js-slider-container');
    const rangeLower = component.querySelector('.js-range-lower');
    const rangeUpper = component.querySelector('.js-range-upper');
    const trackerBetween = component.querySelector('.js-tracker-between');
    const minValue = Number(rangeUpper.getAttribute('min'));
    const maxValue = Number(rangeUpper.getAttribute('max'));
    const minText = component.querySelector('.js-min');
    const maxText = component.querySelector('.js-max');
    const { type } = component.dataset;

    const createBarChart = () => {
        const values = properties.map((property) => Number(property[type])).filter((value) => !Number.isNaN(value) && value !== null);
        if (values.length === 0) {
            return;
        }
        const numBins = Math.min(40, values.length);
        const valueRange = maxValue - minValue;
        const binWidth = valueRange / numBins;
        const binCounts = new Array(numBins).fill(0);
        values.forEach((value) => {
            let binIndex = Math.floor((value - minValue) / binWidth);
            binIndex = Math.min(Math.max(binIndex, 0), numBins - 1);
            binCounts[binIndex]++;
        });
        const barContainer = document.createElement('div');
        barContainer.classList.add('slider__bar-container');
        let maxBarHeight = 0;
        for (let i = 0; i < numBins; i++) {
            const barHeight = (binCounts[i] / values.length) * 100;
            const bar = document.createElement('div');
            bar.style.width = `${100 / numBins}%`;
            bar.classList.add('slider__bar');
            bar.classList.add('js-bar');
            bar.dataset.percentage = barHeight;
            barContainer.appendChild(bar);

            if (barHeight > maxBarHeight) {
                maxBarHeight = barHeight;
            }
        }

        container.appendChild(barContainer);

        const bars = container.querySelectorAll('.js-bar');
        bars.forEach((bar) => {
            const b = bar;
            const percentage = parseFloat(b.dataset.percentage, 10);
            b.style.transform = `translateY(${100 - ((percentage / maxBarHeight) * 100)}%)`;
        });
    };

    if (type && properties) {
        createBarChart();
    }

    let containerHoverOnPercent = 0;

    const updateTrackerBetween = () => {
        const lowerValue = Number(rangeLower.value);
        const upperValue = Number(rangeUpper.value);

        const range = maxValue - minValue;
        const widthPercentage = ((upperValue - lowerValue) / range) * 100;
        const leftPercentage = ((lowerValue - minValue) / range) * 100;

        trackerBetween.style.width = `${widthPercentage.toFixed(2)}%`;
        trackerBetween.style.left = `${leftPercentage.toFixed(2)}%`;

        minText.innerText = Number(lowerValue).toLocaleString('en', { useGrouping: true });
        if (maxValue === upperValue) {
            maxText.innerHTML = `${Number(upperValue).toLocaleString('en', { useGrouping: true })} &#43;`;
        } else {
            maxText.innerText = Number(upperValue).toLocaleString('en', { useGrouping: true });
        }
    };

    updateTrackerBetween();

    const moveAppropriateThumbToUpper = () => {
        const lowerValue = Number(rangeLower.value);
        const upperValue = Number(rangeUpper.value);
        const closeValue = maxValue / 10;

        if (
            upperValue - lowerValue < closeValue
            && upperValue > maxValue * 0.9
        ) {
            rangeLower.classList.add('display-upper');
            rangeUpper.classList.remove('display-upper');
        } else if (
            upperValue - lowerValue < closeValue
            && lowerValue < maxValue * 0.1
        ) {
            rangeLower.classList.remove('display-upper');
            rangeUpper.classList.add('display-upper');
        } else {
            const middleValue = lowerValue + (upperValue - lowerValue) / 2;
            if (containerHoverOnPercent < middleValue / maxValue) {
                rangeLower.classList.add('display-upper');
                rangeUpper.classList.remove('display-upper');
            } else {
                rangeLower.classList.remove('display-upper');
                rangeUpper.classList.add('display-upper');
            }
        }
    };

    ['mouseenter', 'mousemove', 'touchstart', 'touchmove'].forEach((eventName) => {
        container.addEventListener(eventName, (event) => {
            containerHoverOnPercent = event.offsetX / event.target.clientWidth;
            moveAppropriateThumbToUpper();
        }, false);
    });

    rangeLower.addEventListener('input', (event) => {
        const lowerValue = Number(event.target.value);
        const upperValue = Number(rangeUpper.value);

        let adjustedValue = lowerValue;

        if (lowerValue < minValue) {
            adjustedValue = minValue;
        } else if (lowerValue > upperValue) {
            adjustedValue = upperValue;
        }

        Object.assign(event.target, {
            value: String(adjustedValue),
        });

        // Use the updated value
        moveAppropriateThumbToUpper();
        updateTrackerBetween();
    }, false);

    rangeUpper.addEventListener('input', (event) => {
        const lowerValue = Number(rangeLower.value);
        const upperValue = Number(event.target.value);

        let adjustedValue = upperValue;

        if (upperValue > maxValue) {
            adjustedValue = maxValue;
        } else if (upperValue < lowerValue) {
            adjustedValue = lowerValue;
        }

        // Create a new object and update the necessary properties
        Object.assign(event.target, {
            value: String(adjustedValue),
        });

        // Use the updated value
        moveAppropriateThumbToUpper();
        updateTrackerBetween();
    }, false);
}

import LazyLoader from '../../../../js/utils/lazy-loader';
import PropertyListingList from './_property-listing-list';
import PropertyListingMap from './_property-listing-map';
import PropertyListingFilter from './_property-listing-filter';
import PropertyListingPropertyStore from './_propert-listing-property-store';
import debounce from '../../../../js/utils/debounce';
import { isSmallBreakpoint } from '../../../../js/utils/breakpoints';
import { getQueryStringParameter, setQueryParams } from '../../../../js/utils/routing';

const viewQueryStringParameterName = 'split-view';

export class PropertyListing {
    constructor(component) {
        this.component = component;
        this.mapView = new PropertyListingMap(
            this.component.querySelector('.js-map-view'),
            (propertyData) => this.onMapPropertyClick(propertyData),
            (properties) => this.onMapMultiPropertyClick(properties),
            (properties) => this.onMapMove(properties),
        );

        this.propertyStore = new PropertyListingPropertyStore();
        this.filter = new PropertyListingFilter(
            this.component.querySelector('.js-filter-dialog'),
            this.component.querySelectorAll('.js-filter-trigger'),
            this.propertyStore,
            (formData) => this.onFilter(formData),
        );

        this.listView = new PropertyListingList(
            this.component.querySelector('.js-list-view'),
            this.filter,
            this.mapView,
        );

        this.toggleViewButton = this.component.querySelector('.js-view-toggle');
        this.splitView = true;

        this.propertyDataLoaded = false;
        this.init();

        // Check the query string value to see what view we need to display
        const splitViewValue = getQueryStringParameter(viewQueryStringParameterName);
        if (splitViewValue === 'false') {
            this.toggleView();
        }
    }

    init() {
        const resultsContainer = this.component.querySelector('.js-results-container');
        this.lazyLoader = new LazyLoader(
            this.component.dataset.endpoint,
            null,
            null,
            resultsContainer,
            (res) => { this.onApiSuccess(res); },
            this.component.dataset.method,
        );
        this.listView.showLoader();
        this.lazyLoader.load();

        if (this.toggleViewButton) {
            this.toggleViewButton.addEventListener('click', (e) => {
                e.preventDefault();
                this.toggleView();
            });
        }

        const resize = debounce(50, () => {
            if (!isSmallBreakpoint()) {
                // If we switch to a medium+ breakpoint then we need to clear the heights (flex basis) of the list and map view
                this.listView.setHeight();
                this.mapView.setHeight();
            }
        });
        window.addEventListener('resize', resize);
    }

    onApiSuccess(json) {
        this.listView.hideLoader();
        const response = JSON.parse(json);

        this.properties = response.properties;

        this.propertyStore.setProperties(this.properties);
        this.listView.setProperties(this.properties, true);
        this.mapView.setAllProperties(this.properties);
        this.mapView.setProperties(this.properties);
        this.filter.setValues();

        this.propertyDataLoaded = true;
    }

    onFilter(init) {
        const formData = this.filter.getFormData();
        const filteredProperties = this.propertyStore.filterProperties(formData);
        this.listView.setProperties(filteredProperties, init);
        this.listView.createRemoveFilters(formData);
        this.mapView.setProperties(filteredProperties);
    }

    onMapPropertyClick(propertyData) {
        if (isSmallBreakpoint()) {
            this.mapView.setHeight(this.component.clientHeight);
            this.listView.setHeight(0);
            this.mapView.resize();
        }

        // We're on desktop (medium+) and already in map only view
        this.mapView.showPropertyCard(propertyData);
    }

    onMapMultiPropertyClick(properties) {
        if (isSmallBreakpoint()) {
            this.mapView.setHeight(this.component.clientHeight);
            this.listView.setHeight(0);
            this.mapView.resize();
        }

        this.mapView.showMultiPropertyCard(properties);
    }

    // When the map has been moved we want to display the visible properties in the list view
    onMapMove(visibleProperties) {
        if (this.propertyDataLoaded) {
            this.listView.setProperties(visibleProperties);
            this.filter.setSubmitText();
        }
    }

    toggleView() {
        this.splitView = !this.splitView;
        this.component.classList.toggle('show-full-map-view');
        setQueryParams(viewQueryStringParameterName, this.splitView);
        setTimeout(() => { this.mapView.resize(); }, 1000);
    }
}

export default (module) => new PropertyListing(module);