async render(node, { stories }){
const o = once(node)
, STORY_HEIGHT = 52
, items = values(stories).sort(za('latest'))
// , scoresChanged = node.changes
// .filter(by('name', 'stories'))
// .filter(by('key', includes('score')))
// .reduce(to.obj(d => d.key.split('.').shift()), {})
// , commentsChanged = node.changes
// .filter(by('name', 'stories'))
// .filter(by('key', includes('descendants')))
// .reduce(to.obj(d => d.key.split('.').shift()), {})
o.classed('is-loading', !items.length)
.attr('style', `height: ${STORY_HEIGHT * items.length}px`)
o('h1', 1)
.text('Realtime HN')
o('hn-story', items, d => d.id)
// .classed('score-changed', d => d.id in scoresChanged)
// .classed('comments-changed', d => d.id in commentsChanged)
.each((el, d, i) => {
el.animate
? el.animate(
{ transform: [`translateY(${is.def(el.currentPos) ? el.currentPos : -52}px)`, `translateY(${el.currentPos = STORY_HEIGHT*i}px)`] }
, { duration: 500, fill: 'forwards', easing: 'ease-in-out' }
)
: (el.style.top = `${STORY_HEIGHT*i}px`)
})
}
function render (node, state) {
style(node, styles)
const { value = '', interacted, validation = {} } = state
, { pattern = () => {}, message } = validation
, o = once(node)
o.on('blur.interacted', function(){
if (this.state && this.state.focused) return
o.draw(state.interacted = true)
}).classed('is-interacted', interacted)
.classed('is-invalid', !(state.valid = pattern.test
? pattern.test(value)
: pattern.call(node, value)))
o('.invalid-message', message)
.text(str)
}
module.exports = define('sweet-alert', function swal(node, state){
style(node, styles)
const o = once(node)
, m = o('.modal', 1)
, { exiting = false
, title = ''
, content = ''
, type = 'warning'
, visible = title || content ? true : false
, buttons = [{ type: 'primary', text: 'Close' }] } = state
o(window)
.on('keydown.escape', keydown)
o.classed('exiting', exiting)
.classed('visible', visible)
('.overlay', 1, null, '.modal')
m('.icon', 1)
.classed('question', type == 'question')
.classed('success', type == 'success')
.classed('working', type == 'working')
.classed('warning', type == 'warning')
.classed('loading', type == 'loading')
.classed('error', type == 'error')
.classed('info', type == 'info')
m('.title', 1)
.text(title)
m('.content', 1)
.html(content)
m('button', buttons)
.text(d => d.text)
.attr('class', d => d.type)
.on('click.default', (e, d, el) => (d.onClick || close)(e, d, el))
function close() {
state.exiting = true
o.draw()
time(410, d => {
for (let prop in state) delete state[prop]
o.draw()
})
}
function show({ title, content, type, buttons } = {}) {
state.title = title
state.content = content
state.type = type
state.buttons = buttons
state.visible = true
return node.render() // TODO: change all draws
}
function keydown({ key }) {
if (key == 'Escape') close()
}
def(node, close)
def(node, show)
})