138 lines
3.3 KiB
HTML
138 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Proximity And Propagators</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-height: 100%;
|
|
position: relative;
|
|
margin: 0;
|
|
}
|
|
|
|
folk-map,
|
|
geo-wiki {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
geo-wiki {
|
|
display: block;
|
|
background: white;
|
|
border: solid 2px black;
|
|
border-radius: 5px;
|
|
ul {
|
|
height: 100%;
|
|
overflow: auto;
|
|
margin: 0;
|
|
scroll-padding-block-end: 1rem;
|
|
}
|
|
}
|
|
|
|
folk-cluster {
|
|
display: block;
|
|
position: absolute;
|
|
inset: 0 0 0 0;
|
|
}
|
|
|
|
folk-weather {
|
|
display: block;
|
|
background: white;
|
|
border: solid 2px black;
|
|
border-radius: 5px;
|
|
padding: 1rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<folk-shape x="25" y="500">
|
|
<label>Lat: <input type="range" min="40.5" max="41" step="0.001" value="40.76845173617708" /></label>
|
|
</folk-shape>
|
|
|
|
<folk-proximity>
|
|
<folk-shape id="g1" x="25" y="100" width="400" height="200">
|
|
<folk-map coordinates="40.76845173617708, -73.97983074188234" zoom="15"></folk-map>
|
|
</folk-shape>
|
|
|
|
<folk-shape id="g3" x="400" y="300" width="500" height="300">
|
|
<geo-wiki></geo-wiki>
|
|
</folk-shape>
|
|
|
|
<folk-shape id="g4" x="450" y="100">
|
|
<folk-weather></folk-weather>
|
|
</folk-shape>
|
|
</folk-proximity>
|
|
|
|
<folk-event-propagator
|
|
source="input[type='range']"
|
|
target="folk-map"
|
|
trigger="input"
|
|
expression="lat: from.value"
|
|
></folk-event-propagator>
|
|
|
|
<folk-event-propagator
|
|
source="folk-map"
|
|
target="input[type='range']"
|
|
trigger="recenter"
|
|
expression="value: from.lat"
|
|
></folk-event-propagator>
|
|
|
|
<script type="module">
|
|
import { GeoWiki } from '../src/geo-wiki.ts';
|
|
import { FolkWeather } from '../src/folk-weather.ts';
|
|
import '@labs/standalone/folk-shape.ts';
|
|
import { FolkMap } from '@labs/standalone/folk-map.ts';
|
|
import { FolkCluster } from '@labs/standalone/folk-proximity.ts';
|
|
import '@labs/standalone/folk-event-propagator.ts';
|
|
|
|
FolkCluster.registerElement({
|
|
constructor: FolkMap,
|
|
events: {
|
|
recenter: (e) => ({
|
|
lat: e.target.coordinates.lat,
|
|
lng: e.target.coordinates.lng,
|
|
}),
|
|
},
|
|
onAdd: (element) => ({
|
|
lat: element.coordinates.lat,
|
|
lng: element.coordinates.lng,
|
|
}),
|
|
});
|
|
|
|
FolkCluster.registerElement({
|
|
constructor: FolkWeather,
|
|
onUpdate(element, data, changes) {
|
|
const lat = data.get('lat');
|
|
const lng = data.get('lng');
|
|
|
|
if (lat && lng) {
|
|
element.coordinates = [lat, lng];
|
|
}
|
|
},
|
|
});
|
|
|
|
FolkCluster.registerElement({
|
|
constructor: GeoWiki,
|
|
onUpdate(element, data, changes) {
|
|
const lat = data.get('lat');
|
|
const lng = data.get('lng');
|
|
|
|
if (lat && lng) {
|
|
element.coordinates = [lat, lng];
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|