/
standalone-virtual-dom.js
84 lines (74 loc) · 2.31 KB
/
standalone-virtual-dom.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// TODO: Clean up examples
var h = require('virtual-dom/h')
var createElement = require('virtual-dom/create-element')
var diff = require('virtual-dom/diff')
var patch = require('virtual-dom/patch')
var ProgressBar = require('../')
var percent = 50
var direction = 'row'
var meterColor = '#fecf23'
var containerColor = '#1a1a1a'
var oldProgressBarVtree = exampleWrapper(ProgressBar.render(h, {
percent: percent,
direction: direction,
meterColor: meterColor,
containerColor: containerColor,
containerStyle: {
padding: '0px'
}
}))
var progressBarElement = createElement(oldProgressBarVtree)
document.body.appendChild(progressBarElement)
function render () {
var newProgressBarVtree = exampleWrapper(ProgressBar.render(h, {percent: percent, direction: direction, meterColor: meterColor, containerColor: containerColor}))
progressBarElement = patch(progressBarElement, diff(oldProgressBarVtree, newProgressBarVtree))
oldProgressBarVtree = newProgressBarVtree
}
// Wrap our responsive progress bar in a div with the size that we want
function exampleWrapper (child) {
return h('div', [
'standalone virtual-dom example',
h('div', { style: {width: '10em', height: '2em'} }, [
child
])
])
}
// Throw some controls into the page
var slider = document.createElement('input')
document.body.appendChild(slider)
slider.type = 'range'
slider.min = 0
slider.max = 100
slider.value = percent
slider.oninput = function (e) {
percent = e.target.value
render()
}
var rowOrColumn = document.createElement('select')
var row = document.createElement('option')
row.value = 'row'
row.innerHTML = 'row'
var column = document.createElement('option')
column.value = 'column'
column.innerHTML = 'column'
rowOrColumn.appendChild(row)
rowOrColumn.appendChild(column)
document.body.appendChild(rowOrColumn)
rowOrColumn.oninput = function (e) {
direction = e.target.value
render()
}
var meterColorInput = document.createElement('input')
meterColorInput.value = '#fecf23'
meterColorInput.oninput = function (e) {
meterColor = e.target.value
render()
}
document.body.appendChild(meterColorInput)
var containerColorInput = document.createElement('input')
containerColorInput.value = '#fecf23'
containerColorInput.oninput = function (e) {
containerColor = e.target.value
render()
}
document.body.appendChild(containerColorInput)