From 0ab7ecfa271b8b6c1a1ed1bb6eed99aff3b014b7 Mon Sep 17 00:00:00 2001 From: Scott Farley Date: Thu, 14 Mar 2019 17:08:46 -0700 Subject: [PATCH 1/4] expose render and getItemValue functions as constructor options --- lib/index.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/lib/index.js b/lib/index.js index a103e3e6..5ea33a91 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,6 +1,6 @@ 'use strict'; -var Typeahead = require('suggestions'); +var Typeahead = require('./../../suggestions'); var debounce = require('lodash.debounce'); var extend = require('xtend'); var EventEmitter = require('events').EventEmitter; @@ -63,7 +63,16 @@ MapboxGeocoder.prototype = { minLength: 2, reverseGeocode: false, limit: 5, - origin: 'https://api.mapbox.com' + origin: 'https://api.mapbox.com', + render: function(feature){ + var maki; + if (feature.properties.maki) maki = feature.properties.maki; + else maki = 'marker' + return ` ${feature.place_name}`; + }, + getItemValue: function(item) { + return item.place_name + } }, onAdd: function(map) { @@ -120,9 +129,9 @@ MapboxGeocoder.prototype = { minLength: this.options.minLength, limit: this.options.limit }); - this._typeahead.getItemValue = function(item) { - return item.place_name; - }; + + this._typeahead.render = this.options.render; + this._typeahead.getItemValue = this.options.getItemValue; if (this.options.trackProximity) { this._updateProximity(); From a7bbf9c891abcf05854339ea240a5be2c98252f9 Mon Sep 17 00:00:00 2001 From: Scott Farley Date: Fri, 15 Mar 2019 09:49:28 -0700 Subject: [PATCH 2/4] add get/set functions --- lib/index.js | 29 +++++++++++---- test/test.geocoder.js | 82 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 104 insertions(+), 7 deletions(-) diff --git a/lib/index.js b/lib/index.js index 5ea33a91..42bc2a5c 100644 --- a/lib/index.js +++ b/lib/index.js @@ -64,12 +64,6 @@ MapboxGeocoder.prototype = { reverseGeocode: false, limit: 5, origin: 'https://api.mapbox.com', - render: function(feature){ - var maki; - if (feature.properties.maki) maki = feature.properties.maki; - else maki = 'marker' - return ` ${feature.place_name}`; - }, getItemValue: function(item) { return item.place_name } @@ -130,7 +124,7 @@ MapboxGeocoder.prototype = { limit: this.options.limit }); - this._typeahead.render = this.options.render; + this.setRenderFunction(this.options.render); this._typeahead.getItemValue = this.options.getItemValue; if (this.options.trackProximity) { @@ -397,6 +391,27 @@ MapboxGeocoder.prototype = { return this.options.proximity; }, + /** + * Set the render function used in the results dropdown + * @param {Function} fn The function to use as a render function + * @returns {MapboxGeocoder} this + */ + setRenderFunction: function(fn){ + if (fn && typeof(fn) == "function"){ + this._typeahead.render = fn; + } + return this; + }, + + /** + * Get the function used to render the results dropdown + * + * @returns {Function} the render function + */ + getRenderFunction: function(){ + return this._typeahead.render; + }, + /** * Subscribe to events that happen within the plugin. * @param {String} type name of event. Available events and the data passed into their respective event objects are: diff --git a/test/test.geocoder.js b/test/test.geocoder.js index d74ce27b..43ca59a2 100644 --- a/test/test.geocoder.js +++ b/test/test.geocoder.js @@ -442,5 +442,87 @@ test('geocoder', function(tt) { ); }); + tt.test('options.render', function(t){ + t.plan(3); + setup({ + render: function(feature){ + return 'feature id is ' + feature.id + } + }); + + var fixture = { + id: 'abc123', + place_name: 'San Francisco, California' + } + + t.ok(geocoder._typeahead.render, 'sets the render function on the typeahead'); + t.equals(typeof(geocoder._typeahead.render), 'function', 'the render function on the typeahead is a function'); + t.equals(geocoder._typeahead.render(fixture), 'feature id is abc123', 'render function is applied properly on the typeahead'); + }) + + tt.test('setRenderFunction with no input', function(t){ + t.plan(2); + setup({}); + var result = geocoder.setRenderFunction(); + t.equals(typeof(geocoder._typeahead.render), 'function', 'render function is set even when no input is passed'); + t.ok(result instanceof MapboxGeocoder, 'setRenderFunction always returns a MapboxGeocoder instance'); + }); + + tt.test('setRenderFunction with function input', function(t){ + t.plan(2); + setup({}); + var result = geocoder.setRenderFunction(function(item){return item.place_name}); + t.equals(typeof(geocoder._typeahead.render), 'function', 'render function is set'); + t.ok(result instanceof MapboxGeocoder, 'setRenderFunction always returns a MapboxGeocoder instance'); + }); + + tt.test('getRenderFunction default', function(t){ + t.plan(2); + setup({}); + var result = geocoder.getRenderFunction(); + t.ok(result, 'value is always returned'); + t.equals(typeof(result), 'function', 'function is always returned'); + }) + + tt.test('getRenderFunction', function(t){ + t.plan(2); + setup({render: function(item){return item.place_name}}); + var result = geocoder.getRenderFunction(); + t.ok(result, 'value is returned when a custom function is set'); + t.equals(typeof(result), 'function', 'function is returned when a custom function is set'); + }) + + tt.test('options.getItemValue', function(t){ + setup({ + getItemValue: function(feature){ + return 'feature id is ' + feature.id + } + }); + + var fixture = { + id: 'abc123', + place_name: 'San Francisco, California' + } + + t.ok(geocoder._typeahead.getItemValue, 'sets the get item function on the typeahead'); + t.equals(typeof(geocoder._typeahead.getItemValue), 'function', 'the getItemValue on the typeahead is a function'); + t.equals(geocoder._typeahead.getItemValue(fixture), 'feature id is abc123', 'getItemValue function is applied properly on the typeahead'); + t.end(); + }); + + tt.test('options.getItemValue default', function(t){ + setup({}); + + var fixture = { + id: 'abc123', + place_name: 'San Francisco, California' + } + + t.ok(geocoder._typeahead.getItemValue, 'the get item function on the typeahead is set by default'); + t.equals(typeof(geocoder._typeahead.getItemValue), 'function', 'the getItemValue on the typeahead is a function by default'); + t.equals(geocoder._typeahead.getItemValue(fixture), 'San Francisco, California', 'the getItemValue uses the place_name by default'); + t.end(); + }); + tt.end(); }); From ab3c5e037ecd9564256f826183f74ba293709925 Mon Sep 17 00:00:00 2001 From: Scott Farley Date: Fri, 15 Mar 2019 11:13:40 -0700 Subject: [PATCH 3/4] Update jsdoc strings --- lib/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/index.js b/lib/index.js index 42bc2a5c..c23c3094 100644 --- a/lib/index.js +++ b/lib/index.js @@ -40,6 +40,8 @@ var geocoderService; * @param {Function} [options.localGeocoder] A function accepting the query string which performs local geocoding to supplement results from the Mapbox Geocoding API. Expected to return an Array of GeoJSON Features in the [Carmen GeoJSON](https://github.com/mapbox/carmen/blob/master/carmen-geojson.md) format. * @param {'distance'|'score'} [options.reverseMode='distance'] - Set the factors that are used to sort nearby results. * @param {boolean} [options.reverseGeocode] Enable reverse geocoding. Defaults to false. Expects coordinates to be lat, lon. + * @param {Function} [options.render] A function that specifies how the results should be rendered in the dropdown menu + * @param {Function} [options.getItemValue] A function that specifies how the selected result should be rendered in the search bar * @example * var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken }); * map.addControl(geocoder); From 1be007b57f4b69c7036907902600c8c28f3989a0 Mon Sep 17 00:00:00 2001 From: Scott Farley Date: Wed, 20 Mar 2019 13:24:08 -0700 Subject: [PATCH 4/4] suggestions@v1.4.0 --- lib/index.js | 2 +- package-lock.json | 8 ++++---- package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/index.js b/lib/index.js index c23c3094..6426dd72 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,6 +1,6 @@ 'use strict'; -var Typeahead = require('./../../suggestions'); +var Typeahead = require('suggestions'); var debounce = require('lodash.debounce'); var extend = require('xtend'); var EventEmitter = require('events').EventEmitter; diff --git a/package-lock.json b/package-lock.json index ce7baa39..fafdd151 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@mapbox/mapbox-gl-geocoder", - "version": "3.1.1", + "version": "3.1.4", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -9962,9 +9962,9 @@ } }, "suggestions": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/suggestions/-/suggestions-1.3.3.tgz", - "integrity": "sha512-b5TVbiDvdkUExGVhasglcehIiY1C1MxksWCHCi2Ie8xot08SkvnH3Icb/qnxNMiMr48eI0OPdr53JuB9Ryd04g==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/suggestions/-/suggestions-1.4.0.tgz", + "integrity": "sha512-0WkZQVWCo+rB8GRCK2i5tQF8ZOnkNfIilMHLD7X8eu/0BC+bQIiVS6Qzws9Nyxpnm33v2WrK7jLLCkZiERkHBg==", "requires": { "fuzzy": "^0.1.1", "xtend": "^4.0.0" diff --git a/package.json b/package.json index cc6d854d..4ecc24f4 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "lodash.debounce": "^4.0.6", "request": "^2.88.0", "sinon": "^7.2.3", - "suggestions": "^1.3.2", + "suggestions": "^1.4.0", "xtend": "^4.0.1" } }