Subversion Repositories eFlore/Applications.cel

import {debounce} from "../lib/debounce.js";

export const NOMINATIM_OSM_URL = 'https://nominatim.openstreetmap.org/';
const NOMINATIM_OSM_DEFAULT_PARAMS = {
    'format': 'json',
    'countrycodes': 'fr',
    'addressdetails': 1,
    'limit': 10
};
const ESC_KEY_STRING = /^Esc(ape)?/;

export function TbPlaces(clientCallback) {

    /**
     * used in this.onSuggestionSelected()
     *
     * @callback clientCallback
     * @param {String} locality
     * @param {{lat: number, lng: number }} coordinates
     */
    this.clientCallback = clientCallback;
    this.searchResults = [];
}

TbPlaces.prototype.init = function() {
    this.initForm();
    this.initEvts();
};

TbPlaces.prototype.initForm = function() {
    this.places = $('#tb-places');
    this.placeLabel = this.places.siblings('label');
    this.placesResults = $('.tb-places-results');
    this.placesResultsContainer = $('.tb-places-results-container');
    this.placesCloseButton = $('.tb-places-close');
};

TbPlaces.prototype.initEvts = function() {
    if (0 < this.places.length) {

        this.toggleCloseButton(false);
        this.places.off('input').on('input', debounce(this.launchSearch.bind(this), 500));
        this.places.off('keydown').on('keydown', debounce(this.handlePlacesKeydown.bind(this), 500));
    }
};

TbPlaces.prototype.handlePlacesKeydown = function(evt) {
    const suggestionEl = $('.tb-places-suggestion'),
        isEscape = 27 === evt.keyCode || ESC_KEY_STRING.test(evt.key),
        isArrowDown = 40 === evt.keyCode || 'ArrowDown' === evt.key,
        isEnter = 13 === evt.keyCode || 'Enter' === evt.key;

    if (isEscape || isArrowDown || isEnter) {
        evt.preventDefault();

        if (isEscape) {
            this.placesCloseButton.trigger('click');
            this.places.focus();
        } else if(isArrowDown || isEnter) {
            if ( 0 <  suggestionEl.length) {
                suggestionEl.first().focus();
            } else {
                this.launchSearch();
            }
        }
    }
};

TbPlaces.prototype.launchSearch = function () {
    if (!!this.places.val()) {
        const url = NOMINATIM_OSM_URL+'search',
            params = {
                'q': this.places.val(),
                'format': 'json',
                'polygon_geojson': 1,
                'zoom': 17
            };

        this.placeLabel.addClass('loading');
        $.ajax({
            method: "GET",
            url: url,
            data: {...NOMINATIM_OSM_DEFAULT_PARAMS, ...params},
            success: this.nominatimOsmResponseCallback.bind(this),
            error: () => {
                this.placeLabel.removeClass('loading');
                this.handleSearchError();
            }
        });
    }
};

TbPlaces.prototype.nominatimOsmResponseCallback = function(data) {
    this.places.siblings('label').removeClass('loading');
    if (0 < data.length) {
        this.searchResults = data;
        this.setSuggestions();
        this.toggleCloseButton();
        this.resetOnClick();
        this.onSuggestionSelected();
    } else {
        this.handleSearchError();
    }
};

TbPlaces.prototype.setSuggestions = function() {
    const lthis = this,
        acceptedSuggestions = [];

    this.placesResults.empty();
    this.searchResults.forEach(suggestion => {
        if(lthis.validateSuggestionData(suggestion)) {
            const locality = suggestion['display_name'];

            if (locality && !acceptedSuggestions.includes(locality)) {
                acceptedSuggestions.push(locality);
                lthis.placesResults.append(
                    '<li class="tb-places-suggestion" data-place-id="'+suggestion['place_id']+'" tabindex="-1">' +
                        locality +
                    '</li>'
                );
            }
        }
    });
    if(0 < acceptedSuggestions.length) {
        this.placesResultsContainer.removeClass('hidden');
    } else {
        this.resetPlacesSearch();
    }
};

TbPlaces.prototype.validateSuggestionData = function(suggestion) {
    const validGeometry = undefined !== suggestion.lat && undefined !== suggestion.lon,
        typeLocalisation = this.places.data('typeLocalisation') || '',
        validGeometryType = 'rue' === typeLocalisation ? 'LineString' === suggestion?.geojson.type : true,
        validAddressData = undefined !== suggestion.address,
        validDisplayName = undefined !== suggestion['display_name'];

    return (validGeometry && validGeometryType && validAddressData && validDisplayName);
};

TbPlaces.prototype.onSuggestionSelected = function() {
    const lthis = this;

    $('.tb-places-suggestion').off('click').on('click', function (evt) {
        const $thisSuggestion = $(this),
            suggestion = lthis.searchResults.find(suggestion => suggestion['place_id'] === $thisSuggestion.data('placeId'));

        evt.preventDefault();

        lthis.places.val($thisSuggestion.text());

        suggestion.geojson.coordinates = lthis.formatCoordinatesArray(suggestion.geojson);
        lthis.clientCallback(suggestion);
        lthis.placesCloseButton.trigger('click');

    }).off('keydown').on('keydown', function (evt) {
        evt.preventDefault();

        const $thisSuggestion = $(this);

        if (13 === evt.keyCode || 'Enter' === evt.key) {
            $thisSuggestion.trigger('click');
        } else if (38 === evt.keyCode || 'ArrowUp'=== evt.key) {
            if(0 < $thisSuggestion.prev().length) {
                $thisSuggestion.prev().focus();
            } else {
                lthis.places.focus();
            }
        } else if((40 === evt.keyCode || 'ArrowDown' === evt.key) && 0 < $thisSuggestion.next().length) {
            $thisSuggestion.next().focus();
        } else if (27 === evt.keyCode || ESC_KEY_STRING.test(evt.key)) {
            lthis.placesCloseButton.trigger('click');
            lthis.places.focus();
        }
    });
};

TbPlaces.prototype.formatCoordinatesArray = function(geojson) {
    const coordinatesArray = geojson.coordinates,
        geojsonType = geojson.type,
        coordinatesArrayLength = coordinatesArray.length;

    if ('Point' === geojsonType) {
        coordinatesArray.reverse();
    } else if (0 > coordinatesArrayLength) {
        for (let i = 0; i <= coordinatesArrayLength; i++) {
            coordinatesArray[i].reverse();
        }
    }

    return coordinatesArray;
}

TbPlaces.prototype.resetOnClick = function () {
    const lthis = this;

    this.placesCloseButton.off('click').on('click', function (event) {
        event.preventDefault();
        lthis.resetPlacesSearch();
    });
};

TbPlaces.prototype.toggleCloseButton = function(isShow = true) {
    this.placesCloseButton.toggleClass('hidden', !isShow);
    $('.tb-places-search-icon').toggleClass('hidden', isShow);
};

TbPlaces.prototype.handleSearchError = function() {
    this.resetPlacesSearch();
    if (0 === $('#tb-places-error').length) {
        this.places.closest('#tb-places-zone').after(
            `<span id="tb-places-error" class="error mb-3 mt-3">
                Votre recherche n’a pas donné de résultat pour le moment.<br>Vous pouvez soit poursuivre ou modifier votre recherche,<br>soit rechercher votre station directement sur la carte.
            </span>`
        );
        setTimeout(function() {
            $('#tb-places-error').remove();
        }, 10000);
    }
};

TbPlaces.prototype.resetPlacesSearch = function() {
    this.toggleCloseButton(false);
    this.placesResultsContainer.addClass('hidden');
    this.placesResults.empty();
};