42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
|
const R = require('ramda')
|
||
|
const h = require('flimflam/h')
|
||
|
|
||
|
const setWidth = (elm, number) =>
|
||
|
elm.style.width = number * elm.parentElement.offsetWidth + 'px'
|
||
|
|
||
|
const setItemsDimensions = (items, percent) => {
|
||
|
const heights = R.map(x => x.offsetHeight, items)
|
||
|
const tallest = R.reduce((a, b) => a >= b ? a : b , 0, heights)
|
||
|
R.map(x => {
|
||
|
x.style.width = percent + '%'
|
||
|
x.style.height = tallest + 'px'
|
||
|
}, items)
|
||
|
}
|
||
|
|
||
|
const init = (count, percent) => vnode => {
|
||
|
const elm = vnode.elm
|
||
|
const items = elm.childNodes
|
||
|
setItemsDimensions(items, percent)
|
||
|
setWidth(elm, count)
|
||
|
window.addEventListener('resize', () => {
|
||
|
setItemsDimensions(items, percent)
|
||
|
setWidth(elm, count)
|
||
|
})
|
||
|
}
|
||
|
|
||
|
module.exports = obj => {
|
||
|
const percent = 100 / obj.count
|
||
|
return h('div', [
|
||
|
h('div.overflow-hidden', [
|
||
|
h('div.transition-slow.clearfix'
|
||
|
, {
|
||
|
hook: {insert: init(obj.count, percent)}
|
||
|
, style: {transform: `translateZ(0) translateX(-${percent * obj.index}%)`}
|
||
|
}
|
||
|
, R.map(x => h('div.left.p-2.table', [h('div.middle-cell', [x])]), obj.content)
|
||
|
)
|
||
|
])
|
||
|
])
|
||
|
}
|
||
|
|