1 |
|
2 | var microbounce = require('microbounce')
|
3 | var html = require('choo/html')
|
4 | var css = require('sheetify')
|
5 | var log = require('choo-log')
|
6 | var choo = require('choo')
|
7 | var Leaflet = require('./leaflet.js')
|
8 |
|
9 | css('leaflet')
|
10 |
|
11 | var leaflet = new Leaflet()
|
12 | var app = choo()
|
13 |
|
14 | app.use(log())
|
15 | app.use(store)
|
16 | app.route('/', mainView)
|
17 | app.mount('body')
|
18 |
|
19 | var debounce = microbounce(128)
|
20 | function mainView (state, emit) {
|
21 | return html`
|
22 | <body>
|
23 | <header>
|
24 | <h1>${state.title}</h1>
|
25 | </header>
|
26 | <nav>
|
27 | <input value=${state.title} oninput=${updateTitle}/>
|
28 | <button onclick=${toPhiladelphia}>Philadelphia</button>
|
29 | <button onclick=${toSeattle}>Seattle</button>
|
30 | </nav>
|
31 | <main>
|
32 | ${leaflet.render(state.coords)}
|
33 | </main>
|
34 | </body>
|
35 | `
|
36 |
|
37 | function updateTitle (evt) {
|
38 | var value = evt.target.value
|
39 | debounce(function () {
|
40 | emit('update-title', value)
|
41 | })
|
42 | }
|
43 |
|
44 | function toPhiladelphia () {
|
45 | emit('set-coords', [39.9526, -75.1652])
|
46 | }
|
47 |
|
48 | function toSeattle () {
|
49 | emit('set-coords', [47.6062, -122.3321])
|
50 | }
|
51 | }
|
52 |
|
53 | function store (state, emitter) {
|
54 | state.coords = [39.9526, -75.1652]
|
55 | state.title = 'Hello, World'
|
56 |
|
57 | emitter.on('DOMContentLoaded', function () {
|
58 | emitter.on('set-coords', setCoords)
|
59 | emitter.on('update-title', updateTitle)
|
60 | })
|
61 |
|
62 | function setCoords (newCoords) {
|
63 | state.coords = newCoords
|
64 | emitter.emit('render')
|
65 | }
|
66 |
|
67 | function updateTitle (newTitle) {
|
68 | state.title = newTitle
|
69 | emitter.emit('render')
|
70 | }
|
71 | }
|