diff --git a/demo/proximity-based-communication-and-event-propagators.html b/demo/proximity-based-communication-and-event-propagators.html
new file mode 100644
index 0000000..aa9804c
--- /dev/null
+++ b/demo/proximity-based-communication-and-event-propagators.html
@@ -0,0 +1,147 @@
+
+
+
+
+
+ Proximity And Propagators
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demo/proximity-based-communication.html b/demo/proximity-based-communication.html
index f58b1c0..3aa5fc4 100644
--- a/demo/proximity-based-communication.html
+++ b/demo/proximity-based-communication.html
@@ -80,69 +80,7 @@
import { FolkMap } from '../src/folk-map.ts';
import { FolkWeather } from '../src/folk-weather.ts';
import { FolkCluster, FolkProximity } from '../src/folk-proximity.ts';
-
- class GeoWiki extends HTMLElement {
- static tagName = 'geo-wiki';
-
- static define() {
- customElements.define(this.tagName, this);
- }
-
- static observedAttributes = ['coordinates'];
-
- #coordinates = [0, 0];
- #results = [];
-
- get coordinates() {
- return this.#coordinates;
- }
-
- set coordinates(coordinates) {
- this.setAttribute('coordinates', coordinates.join(', '));
- }
-
- attributeChangedCallback(name, oldValue, newValue) {
- if (name === 'coordinates') {
- this.#coordinates = newValue.split(',').map((str) => Number(str)) || [0, 0];
- this.searchWiki(this.#coordinates);
- }
- }
-
- async searchWiki([lat, long]) {
- const params = new URLSearchParams({
- action: 'query',
- format: 'json',
- list: 'geosearch',
- gscoord: `${lat}|${long}`,
- gsradius: '1000',
- gslimit: '50',
- origin: '*',
- });
- // https://www.mediawiki.org/wiki/API:Geosearch
- this.#results = await fetch(`https://en.wikipedia.org/w/api.php?${params}`)
- .then((response) => response.json())
- .then((data) => data?.query?.geosearch ?? []);
-
- this.#renderResults();
- }
-
- #renderResults() {
- this.firstElementChild?.remove();
-
- const list = document.createElement('ul');
-
- for (const result of this.#results) {
- const li = document.createElement('li');
- const a = document.createElement('a');
- a.href = `https://en.wikipedia.org/wiki/${result.title}`;
- a.textContent = result.title;
- li.appendChild(a);
- list.appendChild(li);
- }
-
- this.appendChild(list);
- }
- }
+ import { GeoWiki } from './src/geo-wiki.ts';
FolkCluster.registerElement({
constructor: FolkMap,
@@ -160,7 +98,6 @@
FolkCluster.registerElement({
constructor: FolkWeather,
- onAdd: console.log,
onUpdate(element, data, changes) {
const lat = data.get('lat');
const lng = data.get('lng');
diff --git a/demo/src/geo-wiki.ts b/demo/src/geo-wiki.ts
new file mode 100644
index 0000000..639fced
--- /dev/null
+++ b/demo/src/geo-wiki.ts
@@ -0,0 +1,64 @@
+type LatLng = [number, number];
+
+export class GeoWiki extends HTMLElement {
+ static tagName = 'geo-wiki';
+
+ static define() {
+ customElements.define(this.tagName, this);
+ }
+
+ static observedAttributes = ['coordinates'];
+
+ #coordinates: LatLng = [0, 0];
+ #results: any[] = [];
+
+ get coordinates() {
+ return this.#coordinates;
+ }
+
+ set coordinates(coordinates) {
+ this.setAttribute('coordinates', coordinates.join(', '));
+ }
+
+ attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+ if (name === 'coordinates') {
+ this.#coordinates = ((newValue || '').split(',').map((str) => Number(str)) || [0, 0]) as LatLng;
+ this.searchWiki(this.#coordinates);
+ }
+ }
+
+ async searchWiki([lat, long]: LatLng) {
+ const params = new URLSearchParams({
+ action: 'query',
+ format: 'json',
+ list: 'geosearch',
+ gscoord: `${lat}|${long}`,
+ gsradius: '1000',
+ gslimit: '50',
+ origin: '*',
+ });
+ // https://www.mediawiki.org/wiki/API:Geosearch
+ this.#results = await fetch(`https://en.wikipedia.org/w/api.php?${params}`)
+ .then((response) => response.json())
+ .then((data) => data?.query?.geosearch ?? []);
+
+ this.#renderResults();
+ }
+
+ #renderResults() {
+ this.firstElementChild?.remove();
+
+ const list = document.createElement('ul');
+
+ for (const result of this.#results) {
+ const li = document.createElement('li');
+ const a = document.createElement('a');
+ a.href = `https://en.wikipedia.org/wiki/${result.title}`;
+ a.textContent = result.title;
+ li.appendChild(a);
+ list.appendChild(li);
+ }
+
+ this.appendChild(list);
+ }
+}
diff --git a/demo/src/record-player.ts b/demo/src/record-player.ts
index 21cf9b2..cbf4123 100644
--- a/demo/src/record-player.ts
+++ b/demo/src/record-player.ts
@@ -288,8 +288,6 @@ export class RecordPlayer extends HTMLElement {
this.#audio.pause();
this.#audio.currentTime = 0;
this.dispatchEvent(new Event('stopped', { bubbles: true }));
-
- // console.log(a);
}
handleEvent(event: Event) {
diff --git a/src/folk-map.ts b/src/folk-map.ts
index 579a885..77baf55 100644
--- a/src/folk-map.ts
+++ b/src/folk-map.ts
@@ -34,17 +34,29 @@ export class FolkMap extends HTMLElement {
constructor() {
super();
- this.handleEvent = this.handleEvent.bind(this);
-
const shadow = this.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(styles);
shadow.appendChild(this.#container);
}
- get coordinates() {
+ get lat() {
+ return this.coordinates.lat;
+ }
+ set lat(lat) {
+ this.coordinates = [lat, this.lng];
+ }
+
+ get lng() {
+ return this.coordinates.lng;
+ }
+ set lng(lng) {
+ this.coordinates = [this.lat, lng];
+ }
+
+ get coordinates(): LatLng {
return this.#map.getCenter();
}
- set coordinates(coordinates) {
+ set coordinates(coordinates: LatLngExpression) {
this.#map.setView(coordinates);
}
@@ -64,7 +76,7 @@ export class FolkMap extends HTMLElement {
})
);
- this.#map.on('zoom', this.handleEvent);
+ // Move end includes changes to zoom
this.#map.on('moveend', this.handleEvent);
this.#map.setView(
@@ -73,13 +85,12 @@ export class FolkMap extends HTMLElement {
);
}
- handleEvent(event: LeafletEvent) {
+ handleEvent = (event: LeafletEvent) => {
switch (event.type) {
- case 'zoom':
case 'moveend': {
this.dispatchEvent(new RecenterEvent());
break;
}
}
- }
+ };
}
diff --git a/src/folk-proximity.ts b/src/folk-proximity.ts
index 61a290a..33fef18 100644
--- a/src/folk-proximity.ts
+++ b/src/folk-proximity.ts
@@ -15,7 +15,7 @@ export interface ElementConfig {
}
// TODO don't hard code this
-const PROXIMITY = 50;
+const PROXIMITY = 100;
declare global {
interface HTMLElementTagNameMap {