From 62d8da10bff1e5d154748e4dde6c3af950dc14a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Mon, 2 Dec 2024 16:16:44 -0800 Subject: [PATCH] proximity and propagator demo --- ...d-communication-and-event-propagators.html | 147 ++++++++++++++++++ demo/proximity-based-communication.html | 65 +------- demo/src/geo-wiki.ts | 64 ++++++++ demo/src/record-player.ts | 2 - src/folk-map.ts | 27 +++- src/folk-proximity.ts | 2 +- 6 files changed, 232 insertions(+), 75 deletions(-) create mode 100644 demo/proximity-based-communication-and-event-propagators.html create mode 100644 demo/src/geo-wiki.ts 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 {