| 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 | }
|