Files
openfoodnetwork/app/assets/javascripts/darkswarm/directives/map_search.js.coffee
Diego de Araújo Martinez Camarinha 8a62d95c48 Select all text upon focus on map search input for Google Maps
On the map page, when we search a location and than want to search for
another, we would have to delete letter by letter of the previous search
text.

Now, when we click on the search input to type another search text, the
previous text will be all selected and we can remove everything with
just hitting the backspace once
2022-05-20 11:06:34 -03:00

55 lines
1.9 KiB
CoffeeScript

angular.module('Darkswarm').directive 'mapSearch', ($timeout, Search) ->
# Install a basic search field in a map
restrict: 'E'
require: ['^uiGmapGoogleMap', 'ngModel']
replace: true
template: '<input id="pac-input" ng-model="query" placeholder="' + t('location_placeholder') + '" onfocus="this.select()"></input>'
scope: {}
controller: ($scope) ->
$scope.query = Search.search()
$scope.$watch 'query', (query) ->
Search.search query
link: (scope, elem, attrs, ctrls) ->
[ctrl, model] = ctrls
scope.input = document.getElementById("pac-input")
$timeout =>
map = ctrl.getMap()
searchBox = scope.createSearchBox map
scope.bindSearchResponse map, searchBox
scope.biasResults map, searchBox
scope.performUrlSearch map
scope.createSearchBox = (map) ->
map.controls[google.maps.ControlPosition.TOP_LEFT].push scope.input
return new google.maps.places.SearchBox(scope.input)
scope.bindSearchResponse = (map, searchBox) ->
google.maps.event.addListener searchBox, "places_changed", =>
scope.showSearchResult map, searchBox
scope.showSearchResult = (map, searchBox) ->
places = searchBox.getPlaces()
for place in places when place.geometry.viewport?
map.fitBounds place.geometry.viewport
scope.$apply ->
model.$setViewValue elem.val()
# When the map loads, and we have a search from ?query, perform that search
scope.performUrlSearch = (map) ->
google.maps.event.addListenerOnce map, "idle", =>
google.maps.event.trigger(scope.input, 'focus',{});
google.maps.event.trigger(scope.input, 'keydown', {keyCode: 13});
# Bias the SearchBox results towards places that are within the bounds of the
# current map's viewport.
scope.biasResults = (map, searchBox) ->
google.maps.event.addListener map, "bounds_changed", ->
bounds = map.getBounds()
searchBox.setBounds bounds