radar-sdk-js 4.3.1-beta.1 → 4.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/dist/radar.js +17 -9
- package/dist/radar.js.map +1 -1
- package/dist/version.d.ts +1 -1
- package/package.json +1 -1
- package/src/ui/RadarMarker.ts +17 -6
- package/src/ui/autocomplete.ts +6 -3
- package/src/version.ts +1 -1
package/README.md
CHANGED
|
@@ -56,7 +56,7 @@ Radar.initialize('prj_test_pk_...', { /* options */ });
|
|
|
56
56
|
|
|
57
57
|
Add the following script in your `html` file
|
|
58
58
|
```html
|
|
59
|
-
<script src="https://js.radar.com/v4.3.1
|
|
59
|
+
<script src="https://js.radar.com/v4.3.1/radar.min.js"></script>
|
|
60
60
|
```
|
|
61
61
|
|
|
62
62
|
Then initialize the Radar SDK
|
|
@@ -73,8 +73,8 @@ To create a map, first initialize the Radar SDK with your publishable key. Then
|
|
|
73
73
|
```html
|
|
74
74
|
<html>
|
|
75
75
|
<head>
|
|
76
|
-
<link href="https://js.radar.com/v4.3.1
|
|
77
|
-
<script src="https://js.radar.com/v4.3.1
|
|
76
|
+
<link href="https://js.radar.com/v4.3.1/radar.css" rel="stylesheet">
|
|
77
|
+
<script src="https://js.radar.com/v4.3.1/radar.min.js"></script>
|
|
78
78
|
</head>
|
|
79
79
|
|
|
80
80
|
<body>
|
|
@@ -98,8 +98,8 @@ To create an autocomplete input, first initialize the Radar SDK with your publis
|
|
|
98
98
|
```html
|
|
99
99
|
<html>
|
|
100
100
|
<head>
|
|
101
|
-
<link href="https://js.radar.com/v4.3.1
|
|
102
|
-
<script src="https://js.radar.com/v4.3.1
|
|
101
|
+
<link href="https://js.radar.com/v4.3.1/radar.css" rel="stylesheet">
|
|
102
|
+
<script src="https://js.radar.com/v4.3.1/radar.min.js"></script>
|
|
103
103
|
</head>
|
|
104
104
|
|
|
105
105
|
<body>
|
|
@@ -130,8 +130,8 @@ To power [geofencing](https://radar.com/documentation/geofencing/overview) exper
|
|
|
130
130
|
```html
|
|
131
131
|
<html>
|
|
132
132
|
<head>
|
|
133
|
-
<link href="https://js.radar.com/v4.3.1
|
|
134
|
-
<script src="https://js.radar.com/v4.3.1
|
|
133
|
+
<link href="https://js.radar.com/v4.3.1/radar.css" rel="stylesheet">
|
|
134
|
+
<script src="https://js.radar.com/v4.3.1/radar.min.js"></script>
|
|
135
135
|
</head>
|
|
136
136
|
|
|
137
137
|
<body>
|
package/dist/radar.js
CHANGED
|
@@ -405,7 +405,7 @@ class Navigator {
|
|
|
405
405
|
}
|
|
406
406
|
}
|
|
407
407
|
|
|
408
|
-
var SDK_VERSION = '4.3.1
|
|
408
|
+
var SDK_VERSION = '4.3.1';
|
|
409
409
|
|
|
410
410
|
class Http {
|
|
411
411
|
static request({ method, path, data, host, version, headers = {}, responseType, }) {
|
|
@@ -1568,6 +1568,15 @@ class RadarMap extends maplibregl.Map {
|
|
|
1568
1568
|
}
|
|
1569
1569
|
}
|
|
1570
1570
|
|
|
1571
|
+
class RadarMarkerMouseEvent {
|
|
1572
|
+
constructor(type, marker, originalEvent) {
|
|
1573
|
+
this.target = marker;
|
|
1574
|
+
this.originalEvent = originalEvent;
|
|
1575
|
+
this.point = marker._pos;
|
|
1576
|
+
this.lngLat = marker.getLngLat();
|
|
1577
|
+
this.type = type;
|
|
1578
|
+
}
|
|
1579
|
+
}
|
|
1571
1580
|
const createImageElement = (options) => {
|
|
1572
1581
|
const element = document.createElement('img');
|
|
1573
1582
|
element.src = options.url;
|
|
@@ -1685,11 +1694,7 @@ class RadarMarker extends maplibregl.Marker {
|
|
|
1685
1694
|
const element = this.getElement();
|
|
1686
1695
|
if (element) {
|
|
1687
1696
|
element.addEventListener('click', (e) => {
|
|
1688
|
-
|
|
1689
|
-
if (this._popup) {
|
|
1690
|
-
this.togglePopup();
|
|
1691
|
-
}
|
|
1692
|
-
this.fire('click', e);
|
|
1697
|
+
this.fire('click', new RadarMarkerMouseEvent('click', this, e));
|
|
1693
1698
|
});
|
|
1694
1699
|
}
|
|
1695
1700
|
}
|
|
@@ -1820,8 +1825,10 @@ class AutocompleteUI {
|
|
|
1820
1825
|
// result list element
|
|
1821
1826
|
this.resultsList = document.createElement('ul');
|
|
1822
1827
|
this.resultsList.classList.add(CLASSNAMES.RESULTS_LIST);
|
|
1828
|
+
this.resultsList.setAttribute('id', CLASSNAMES.RESULTS_LIST);
|
|
1823
1829
|
this.resultsList.setAttribute('role', 'listbox');
|
|
1824
1830
|
this.resultsList.setAttribute('aria-live', 'polite');
|
|
1831
|
+
this.resultsList.setAttribute('aria-label', 'Search results');
|
|
1825
1832
|
setHeight(this.resultsList, this.config);
|
|
1826
1833
|
if (containerEL.nodeName === 'INPUT') {
|
|
1827
1834
|
// if an <input> element is provided, use that as the inputField,
|
|
@@ -1849,8 +1856,9 @@ class AutocompleteUI {
|
|
|
1849
1856
|
this.container.appendChild(this.wrapper);
|
|
1850
1857
|
}
|
|
1851
1858
|
// set aria roles
|
|
1859
|
+
this.inputField.setAttribute('role', 'combobox');
|
|
1860
|
+
this.inputField.setAttribute('aria-controls', CLASSNAMES.RESULTS_LIST);
|
|
1852
1861
|
this.inputField.setAttribute('aria-expanded', 'false');
|
|
1853
|
-
this.inputField.setAttribute('aria-control', 'autocomplete-list');
|
|
1854
1862
|
this.inputField.setAttribute('aria-haspopup', 'listbox');
|
|
1855
1863
|
this.inputField.setAttribute('aria-autocomplete', 'list');
|
|
1856
1864
|
this.inputField.setAttribute('aria-activedescendant', '');
|
|
@@ -1948,7 +1956,7 @@ class AutocompleteUI {
|
|
|
1948
1956
|
const li = document.createElement('li');
|
|
1949
1957
|
li.classList.add(CLASSNAMES.RESULTS_ITEM);
|
|
1950
1958
|
li.setAttribute('role', 'option');
|
|
1951
|
-
li.setAttribute('id',
|
|
1959
|
+
li.setAttribute('id', `${CLASSNAMES.RESULTS_ITEM}}-${index}`);
|
|
1952
1960
|
// construct result with bolded label
|
|
1953
1961
|
let listContent;
|
|
1954
1962
|
if (result.formattedAddress.includes(result.addressLabel) && result.layer !== 'postalCode') {
|
|
@@ -2039,7 +2047,7 @@ class AutocompleteUI {
|
|
|
2039
2047
|
// add class name to newly highlighted item
|
|
2040
2048
|
resultItems[index].classList.add(CLASSNAMES.SELECTED_ITEM);
|
|
2041
2049
|
// set aria active descendant
|
|
2042
|
-
this.inputField.setAttribute('aria-activedescendant',
|
|
2050
|
+
this.inputField.setAttribute('aria-activedescendant', `${CLASSNAMES.RESULTS_ITEM}-${index}`);
|
|
2043
2051
|
this.highlightedIndex = index;
|
|
2044
2052
|
}
|
|
2045
2053
|
handleKeyboardNavigation(event) {
|
package/dist/radar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"radar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "4.3.1
|
|
1
|
+
declare const _default: "4.3.1";
|
|
2
2
|
export default _default;
|
package/package.json
CHANGED
package/src/ui/RadarMarker.ts
CHANGED
|
@@ -7,13 +7,28 @@ import type RadarMap from './RadarMap';
|
|
|
7
7
|
|
|
8
8
|
import type { RadarMarkerOptions } from '../types';
|
|
9
9
|
|
|
10
|
+
class RadarMarkerMouseEvent {
|
|
11
|
+
type: 'click';
|
|
12
|
+
target: RadarMarker;
|
|
13
|
+
originalEvent: MouseEvent;
|
|
14
|
+
lngLat: maplibregl.LngLat;
|
|
15
|
+
point: maplibregl.Point2D;
|
|
16
|
+
|
|
17
|
+
constructor(type: 'click', marker: RadarMarker, originalEvent: MouseEvent) {
|
|
18
|
+
this.target = marker;
|
|
19
|
+
this.originalEvent = originalEvent;
|
|
20
|
+
this.point = marker._pos;
|
|
21
|
+
this.lngLat = marker.getLngLat();
|
|
22
|
+
this.type = type;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
10
26
|
interface ImageOptions {
|
|
11
27
|
url?: string;
|
|
12
28
|
width?: number | string;
|
|
13
29
|
height?: number | string;
|
|
14
30
|
}
|
|
15
31
|
|
|
16
|
-
|
|
17
32
|
const createImageElement = (options: ImageOptions) => {
|
|
18
33
|
const element = document.createElement('img');
|
|
19
34
|
element.src = options.url!;
|
|
@@ -145,11 +160,7 @@ class RadarMarker extends maplibregl.Marker {
|
|
|
145
160
|
const element = this.getElement();
|
|
146
161
|
if (element) {
|
|
147
162
|
element.addEventListener('click', (e) => {
|
|
148
|
-
|
|
149
|
-
if (this._popup) {
|
|
150
|
-
this.togglePopup();
|
|
151
|
-
}
|
|
152
|
-
this.fire('click', e);
|
|
163
|
+
this.fire('click', new RadarMarkerMouseEvent('click', this, e));
|
|
153
164
|
});
|
|
154
165
|
}
|
|
155
166
|
}
|
package/src/ui/autocomplete.ts
CHANGED
|
@@ -132,8 +132,10 @@ class AutocompleteUI {
|
|
|
132
132
|
// result list element
|
|
133
133
|
this.resultsList = document.createElement('ul');
|
|
134
134
|
this.resultsList.classList.add(CLASSNAMES.RESULTS_LIST);
|
|
135
|
+
this.resultsList.setAttribute('id', CLASSNAMES.RESULTS_LIST);
|
|
135
136
|
this.resultsList.setAttribute('role', 'listbox');
|
|
136
137
|
this.resultsList.setAttribute('aria-live', 'polite');
|
|
138
|
+
this.resultsList.setAttribute('aria-label', 'Search results');
|
|
137
139
|
setHeight(this.resultsList, this.config);
|
|
138
140
|
|
|
139
141
|
if (containerEL.nodeName === 'INPUT') {
|
|
@@ -167,8 +169,9 @@ class AutocompleteUI {
|
|
|
167
169
|
}
|
|
168
170
|
|
|
169
171
|
// set aria roles
|
|
172
|
+
this.inputField.setAttribute('role', 'combobox');
|
|
173
|
+
this.inputField.setAttribute('aria-controls', CLASSNAMES.RESULTS_LIST);
|
|
170
174
|
this.inputField.setAttribute('aria-expanded', 'false');
|
|
171
|
-
this.inputField.setAttribute('aria-control', 'autocomplete-list');
|
|
172
175
|
this.inputField.setAttribute('aria-haspopup', 'listbox');
|
|
173
176
|
this.inputField.setAttribute('aria-autocomplete', 'list');
|
|
174
177
|
this.inputField.setAttribute('aria-activedescendant', '');
|
|
@@ -281,7 +284,7 @@ class AutocompleteUI {
|
|
|
281
284
|
const li = document.createElement('li');
|
|
282
285
|
li.classList.add(CLASSNAMES.RESULTS_ITEM);
|
|
283
286
|
li.setAttribute('role', 'option');
|
|
284
|
-
li.setAttribute('id',
|
|
287
|
+
li.setAttribute('id', `${CLASSNAMES.RESULTS_ITEM}}-${index}`);
|
|
285
288
|
|
|
286
289
|
// construct result with bolded label
|
|
287
290
|
let listContent;
|
|
@@ -389,7 +392,7 @@ class AutocompleteUI {
|
|
|
389
392
|
resultItems[index].classList.add(CLASSNAMES.SELECTED_ITEM);
|
|
390
393
|
|
|
391
394
|
// set aria active descendant
|
|
392
|
-
this.inputField.setAttribute('aria-activedescendant',
|
|
395
|
+
this.inputField.setAttribute('aria-activedescendant', `${CLASSNAMES.RESULTS_ITEM}-${index}`);
|
|
393
396
|
|
|
394
397
|
this.highlightedIndex = index;
|
|
395
398
|
}
|
package/src/version.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default '4.3.1
|
|
1
|
+
export default '4.3.1';
|