You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.3 KiB
45 lines
1.3 KiB
export class Display {
|
|
constructor(baseUrl, dispatch, target) {
|
|
this.baseUrl = baseUrl
|
|
this.target = target
|
|
target.addEventListener('click', e => {
|
|
let target = e.target
|
|
while (target.nodeName !== 'A') {
|
|
target = target.parentNode
|
|
if (!target) return
|
|
}
|
|
window.history.pushState(null, "", target.href)
|
|
dispatch(target.getAttribute('href'))
|
|
e.preventDefault()
|
|
})
|
|
}
|
|
render(state) {
|
|
const target = document.createElement('div')
|
|
target.className = 'wrapper'
|
|
const field = document.createElement('ul')
|
|
field.className = 'items'
|
|
|
|
for (const item of state.items) {
|
|
const dom = document.createElement('li')
|
|
const a = document.createElement('a')
|
|
const action = item.state == 'face-down' ? 'flip' : 'show'
|
|
a.href = `/${item.id}/${action}`
|
|
dom.className = item.state
|
|
dom.appendChild(a)
|
|
field.appendChild(dom)
|
|
}
|
|
target.appendChild(field)
|
|
if (state.show !== null) {
|
|
const wrapper = document.createElement('a')
|
|
wrapper.href = '/'
|
|
const fullview = document.createElement('div')
|
|
wrapper.className = 'fullview'
|
|
wrapper.appendChild(fullview)
|
|
target.appendChild(wrapper)
|
|
}
|
|
|
|
const dd = new diffDOM.DiffDOM()
|
|
const diff = dd.diff(this.target, target)
|
|
dd.apply(this.target, diff)
|
|
}
|
|
}
|